I've to build an ajax call when the user clicks a submit button, so i've included jquery and i've written the following code (taken from the jquery documentation):
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
$("Shareitem").click(function(e){
e.preventDefault();
$.ajax({type: "POST",
url: "/imball-reagens/public/shareitem",
data: { id: $("Shareitem").val(), access_token: $("access_token").val() },
success:function(result){
$("sharelink").html(result);
}});
});
});
</script>
Html:
<div id="sharelink"></div>
[...]
<input type="hidden" name="id" value="" id="id"></dd>
<dd id="access_token-element">
<input type="hidden" name="access_token" value="xxxxxxxx" id="access_token"></dd>
<dt id="Shareitem-label"> </dt><dd id="Shareitem-element">
<input type="submit" name="Shareitem" id="Shareitem" value="UpdatedByPreviousAjaxCall"></dd></dl></form>
The problem is the following, the submit action is executed but the ajax call is not, so the form is performing the requested submit action instead of staying in the same page and updating the content of the required "div".
What am I missing? Where am I wrong? Thanks in advance for any tip.
This question is related to
javascript
jquery
ajax
You did not add # before id of the button. You do not have right selector in your jquery code. So jquery is never execute in your button click. its submitted your form directly not passing any ajax request.
See documentation: http://api.jquery.com/category/selectors/
its your friend.
Try this:
It seems that id: $("#Shareitem").val() is wrong if you want to pass the value of
<input type="hidden" name="id" value="" id="id">
you need to change this line:
id: $("#Shareitem").val()
by
id: $("#id").val()
All together:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
$("#Shareitem").click(function(e){
e.preventDefault();
$.ajax({type: "POST",
url: "/imball-reagens/public/shareitem",
data: { id: $("#Shareitem").val(), access_token: $("#access_token").val() },
success:function(result){
$("#sharelink").html(result);
}});
});
});
</script>
Source: Stackoverflow.com