Ajax inside boot popover
I'm stuck with this issue and I really don't know why it doesn't work.
If I use this code outside of the botstrap it works, but once I use it inside the popover it no longer works. I mean, if the form is submitted from the popover, it acts like a regular form, charging a new page instead of acting like an AJAX script.
$("#share-popover").submit(function(){
//get the url for the form
var url=$("#form_search").attr("action");
alert($("#search-value").val());
//start send the post request
$.post(url,{
formName:$("#search-value").val(),
other:"attributes"
},function(data){
if(data.responseCode==200 ){
$('#output').html(data.greeting);
$('#output').css("color","red");
}
else if(data.responseCode==400){ //bad request
$('#output').html(data.greeting);
$('#output').css("color","red");
}
else{
alert("An unexpeded error occured.");
}
});
return false;
});
:
<button id="share-dropdown" style="margin-right:5px" class="btn btn-warning pull-right" type="button" rel="popover" data-placement="bottom" data-html="true"><i class="icon icon-plus icon-white"></i> Share</button>
Js:
$('#share-dropdown').popover({
html : true,
content: function() {
return $("#share-popover").html();
}
});
Html for content:
<div id="share-popover" style="display: none">
<form id="form_search" action="{{ path('weezbook_site_ajax_search') }}" method="POST">
<input id="search-value" type="text" value="Book title, authors, isbn" class="share-input" name="search-value" />
<input type="submit" />
</form>
I am using this with Symfony2 and my controller is returning JSON.
I really don't understand why it works outside of the box and not inside ...
source to share
EDIT:
I haven't tried it, but replacing .submit()
with $(document).on('submit', '#share-popover', function() {});
should work, since the content was loaded after the dom was rendered, I couldn't use .submit () at this point.
I don't really know why, but instead of replacing the .submit () method, the problem is fixed.
Here are the changes I made:
<input id="search-value" type="text" placeholder="Book title, authors, isbn" class="share-input" name="search-value" onkeypress="return runScript(event)" />
function runScript(e) {
if (e.keyCode == 13) {
...
return false;
}
}
source to share