Ajax inside a bootstrap popover

Question

I'm stuck with this problem, and I really don't know why it's not working.

If I'm using this code out side of the bootstrap's popover it works, but as soon as I'm using it inside the popover it doesn't work anymore. I mean if the form is submit from the popover it acts like a normal form, charging the new page instead of acting like a 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 :

   <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 the 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'm using this with Symfony2 and my controller returns JSON.

I really don't get why it's working outside of the box and not inside...

Answer 1

EDIT:

I didn't try, but replacing .submit() by $(document).on('submit', '#share-popover', function() {}); should work, since the content was loaded after the dom was rendered, I couldn't use .submit() at that moment.

---

I don't really know why but replacing the .submit() method with another one fix the problem.

Here are the change I did :

<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;
  }
}

Answer 2

as you are working with json you have to specify it in your post like this

$.post(url,{ data: something   },function(data){some process},

 'json');// define the type as json