This AJAX only execute only one time and If you are clicked once, AJAX does not work for other "Details" buttons. What is the reason of this?
Buttons:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td><a id="detay-menu-toggle-right" data-paketno="3512" href="#">Details</a></td>
<td><a id="detay-menu-toggle-right" data-paketno="3841" href="#">Details</a></td>
Javascript:
$(document).ready(function(){
$("#detay-menu-toggle-right").click(function(){
$("#detay-wrapper-right").toggleClass("active");
var paketnosu = $(this).data("paketno");
var dataString = 'paketDetayi='+paketnosu;
$.ajax({
data: dataString,
url: 'test3.php',
type: 'POST',
success: function (data) {
$("#detay-sidebar-wrapper-right").html(data);
},
error:
function() {
alert('Not OKay');
}
});
});
});
Use class instead of an ID, there can only be only one element with a particular ID on a page and jQuery will only act on the first one on the page it encounters.
$(document).ready(function(){
$(".detay-menu-toggle-right").click(function(){
$("#detay-wrapper-right").toggleClass("active");
var paketnosu = $(this).data("paketno");
var dataString = 'paketDetayi='+paketnosu;
$.ajax({
data: dataString,
url: 'test3.php',
type: 'POST',
success: function (data) {
$("#detay-sidebar-wrapper-right").html(data);
},
error:
function() {
alert('Not OKay');
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td><a class="detay-menu-toggle-right" data-paketno="3512" href="#">Details</a></td>
<td><a class="detay-menu-toggle-right" data-paketno="3841" href="#">Details</a></td>
Related
Hi everyone I am currently developing a catalog and I manage user comments on products which works well, but I have now decided to use AJAX to do it but unfortunately I am new to AJAX and it creates a bit of trouble for me for the moment. I would like to pass the 'id' and 'pageNumber' variables to the getReviews () function so that it can use them in the url
HTML
<body>
<ul>
<li><a class='page-link is-active' data-id=".$prodId." data-link=".$counter.">$counter</a></li>";
<li><a class='page-link' href='$ver=$counter' data-id=".$prodId." data-link=".$counter.">$counter</a></li>";
</ul>
<div id='display_reviews' class="col-md-7"></div>
</body>
AJAX
<script>
$(document).ready(function(){
getReviews();
$(document).on('click', '.paging li a', function(e){
e.preventDefault();
var id = $(this).data('id');
var pageNumber = $(this).data('link');
$.ajax({
type: 'GET',
url: '/mysite/product/?action=getProductReviews&id='+id+'&page='+pageNumber,
dataType: 'json',
success: function(response){
getReviews();
}
});
});
function getReviews(){
$.ajax({
type: 'GET',
url: '/mysite/product/?action=getProductReviews&id='+id+'&page='+pageNumber,
dataType: 'json',
success: function(response){
$('#display_reviews').html(response);
}
});
};
});
</script>
I want to do search and it can search many times. when it is submitted, it will show value in textbox by using document.getelementById("").value. All work well but I added ajax for filter search, document.getelementById("").value couldn't work.
$(document).ready(function() {
$('#job_no').change(function() {
$.ajax({
type: 'POST',
data: {JOB_NO: $(this).val()},
url: 'select.php',
success: function(data) {
$('#input_na').html(data);
}
});
return false;
});
});
<script type="text/javascript">document.getElementById('input_na').value = "<?php echo $_POST['input_na'];?>";</script>
Try this:
$(document).ready(function() {
$('#job_no').change(function() {
var $this = $(this); //add this line
$.ajax({
type: 'POST',
data: {JOB_NO: $this.val()}, //change this line
url: 'select.php',
success: function(data) {
$('#input_na').html(data);
}
});
return false;
});
});
the 'this' in $.ajax(..) function will not refer to $('#job_no'), so it should be assigned to another variable "$this" for use inside the ajax function.
I would like to get an id from a button. I need this id in my ajax request. This is my button:
<form>
<div class="form-group">
<button class="btn btn-primary" name="deletecar" id="{{$car->id}}">Delete</button>
</div>
</form>
I'm getting the id of the button this way:
<script type="text/javascript">var JcarID = this.id;</script>
Finally my Ajax Request.
$('[name="deletecar"]').click(function (e)
{
var JcarId = this.id;
e.preventDefault();
$.ajax({
type: "POST",
url: '{{ action('CarController#delete', [$user->id, $car->id])}}',
success: function (data)
{
// alert(data);
}
});
});
Thx for reading!
SOLUTION
Changed some bits in my code. I changed the url of my request.
$('[name="deletecar"]').click(function (e)
{
e.preventDefault();
$.ajax({
type: "POST",
url: '/users/{{$user->id}}/deletecar/'+this.id,
success: function (data)
{
// alert(data);
}
});
});
Hard to guess what is your requirement yet either if you want to get the button id value
this.attr('id'); or this.prop('id');
Or if you want to set the id value of button
$('[name="deletecar"]').attr('id', yourvalue)
I think you want to use JcarId rather $car->id in ajax request. Here what you can do rather than directly using PHP code in ajax call.
$('[name="deletecar"]').click(function (e)
{
var JcarId = this.id;
e.preventDefault();
$.ajax({
type: "POST",
url: '/CarController/delete',
data: {'carId':JcarId}
success: function (data)
{
// alert(data);
}
});
});
I have the following HTML fields being created inside a PHP look
<td><input type=\"checkbox\" name=\"investigator_id[]\" id=\"investigator_id\" value=\"$name_degree[$i]\">
<td><input type=text name=\"inv_rank[]\" id=inv_rank maxlength=\"2\" size=\"2\"></td>
<td><textarea name=\"inv_comm[]\" id=inv_comm rows=2 cols=20></textarea></td>
I am trying to save the data in these fields by calling a jquery function based on clicking on this button
Here is the script that is being called. I know that the js is being called because the "alert("now")" is poping up, but the dataString is not being populated correctly. I tested this on http://jsfiddle.net/ and it worked fine, but won't work on my site.
<script>
$(document).ready(function() {
$("#submit").click(function() {
alert("now");
var dataString = $("'[name=\"investigator_id\[\]\"]', '[name=\"inv_rank\[\]\"]','[name=\"inv_comm\[\]\"]'").serialize();
alert("ee"+dataString);
$.ajax({
type: "POST",
url: "save_data.php",
dataType: "json",
data: dataString,
success: function(data){
alert("sure"+data);
$("#myResponse").html(data);
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert("There was an error.");
}
});
});
});
</script>
Try this with the help of FormID like this:
<form method="post" id="yourFromID">
//Your form fields.
</form>
JS Code:
$("#yourFromID").submit(function (e){
e.preventDefault();
var dataString = $(this).serialize();
// then you can do ajax call, like this
$.ajax({
url: 'site.com',
data: dataString,
methodL 'post',
success: function(){...}
})
return false;
});
Any reason why this isn't running when clicked? I can't seem to figure it out.
<button id="button-container-like" onclick="rate($(this).attr(\'id\'))"><span class="thumbs-up"></span>Like</button>
<script>
function rate(rating){
var data = 'rating='+rating+'&id=<?php echo $eventId; ?>&userid56=<?PHP echo $userid55; ?>';
$.ajax({
type: 'POST',
url: 'includes/rate.php', //POSTS FORM TO THIS FILE
data: data,
success: function(e){
$(".ratings").html(e); //REPLACES THE TEXT OF view.php
}
});
}
</script>
here you go:
<button id="button-container-like" ><span class="thumbs-up"></span>Like</button>
<script>
jQuery(document).ready(function () {
$("#button-container-like").click(function() {
rate($(this).attr("id"));
});
function rate(rating) {
var data = 'rating=' + rating + '&id=<?php echo $eventId; ?>&userid56=<?PHP echo $userid55; ?>';
$.ajax({
type: 'POST',
url: 'includes/rate.php', //POSTS FORM TO THIS FILE
data: data,
success: function(e) {
$(".ratings").html(e); //REPLACES THE TEXT OF view.php
}
});
}
});
</script>
If there's nothing else going on in this code, then remove the slashes from your onclick code. They are unnecessary and cause an error.
onclick="rate($(this).attr('id'))"