We Keep Coding

Only one time execute - AJAX

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>

LARAVEL: Use a javascript variable in php

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

Updating div content after form submit without page reload

alright, I have a popup which displays some notes added about a customer. The content (notes) are shown via ajax (getting data via ajax). I also have a add new button to add a new note. The note is added with ajax as well. Now, the question arises, after the note is added into the database.
How do I refresh the div which is displaying the notes?
I have read multiple questions but couldn't get an answer.
My Code to get data.
<script type="text/javascript">
var cid = $('#cid').val();
$(document).ready(function() {
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "ajax.php?requestid=1&cid="+cid,
dataType: "html", //expect html to be returned
success: function(response){
$("#notes").html(response);
//alert(response);
}
});
});
</script>
DIV
<div id="notes">
</div>
My code to submit the form (adding new note).
<script type="text/javascript">
$("#submit").click(function() {
var note = $("#note").val();
var cid = $("#cid").val();
$.ajax({
type: "POST",
url: "ajax.php?requestid=2",
data: { note: note, cid: cid }
}).done(function( msg ) {
alert(msg);
$("#make_new_note").hide();
$("#add").show();
$("#cancel").hide();
//$("#notes").load();
});
});
</script>
I tried load, but it doesn't work.
Please guide me in the correct direction.

Create a function to call the ajax and get the data from ajax.php then just call the function whenever you need to update the div:
<script type="text/javascript">
$(document).ready(function() {
// create a function to call the ajax and get the response
function getResponse() {
var cid = $('#cid').val();
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "ajax.php?requestid=1&cid=" + cid,
dataType: "html", //expect html to be returned
success: function(response) {
$("#notes").html(response);
//alert(response);
}
});
}
getResponse(); // call the function on load
$("#submit").click(function() {
var note = $("#note").val();
var cid = $("#cid").val();
$.ajax({
type: "POST",
url: "ajax.php?requestid=2",
data: {
note: note,
cid: cid
}
}).done(function(msg) {
alert(msg);
$("#make_new_note").hide();
$("#add").show();
$("#cancel").hide();}
getResponse(); // call the function to reload the div
});
});
});
</script>

You need to provide a URL to jQuery load() function to tell where you get the content.
So to load the note you could try this:
$("#notes").load("ajax.php?requestid=1&cid="+cid);

Ajax post with on()

$('body').on('click','.removebet i',function(e){
var a = $(this).attr("id");
var data = "a="+a;
$.ajax({
type: "POST",
url: "yorumcikar.php",
data: data,
success: function(e){
});
I'll explain the problem. I can post AJAX form with this function and there's no problem except the .removebet i comes from the ajax.
If I append .removebet i with AJAX this function doesn't work because it doesn't call AJAX.
example:
$(".maindiv").html("<span class='removebet'><i>Yes</i></span>");
Then when I clicked to 'i' tag the function at top doesn't work.

I believe this should work.
$('.removebet > i').click(function(event){
var a = $(this).attr("id");
alert(a);
$.ajax({
type: "POST",
url: "yorumcikar.php",
data: data,
success: function(retval){
alert(retval);
}
});
});
EDIT
This will work, however each newly added item will not be bound as the binding has already happened. In order to get newly added items to be bound as well you will have to rebind them when they are added.
$.ajax({call to get your new item},
success: function(data){
// add to dom
bindElement(newElement);
}
});
function bindElement(element){
$(element).click(function(event){
var a = $(this).attr("id");
alert(a);
$.ajax({
type: "POST",
url: "yorumcikar.php",
data: data,
success: function(retval){
alert(retval);
}
});
});
}

jQuery $.ajax error in Firefox: "Could not convert JavaScript argument arg 0"

I figured this issue out already, but I'm posting here since it might be useful to others.
$.ajax({
url: url,
dataType: 'html',
success: function(data) {
var newRow = $(data).hide();
newRow.slideDown();
});
My the ajax response looks something like this:
<li class="clearfix">
<!-- snip -->
</li>
<li class="dock-row">
<!-- snip -->
</li>
The line that gives the error is:
var newRow = $(data).hide();

You need to add the data to the page first:
$.ajax({
url: url,
dataType: 'html',
success: function(data) {
$('<div id="myid" style="display:none;"></div>').prependTo($('body'));
$('#myid').html(data)
$('#myid').slideDown();
});
Update after first comment
Your code is equivalent to doing something like this:
$.ajax({
url: url,
dataType: 'html',
success: function(data) {
var newRow = $('<li class="clearfix">\r\n<!-- snip -->\]r\n</li>\r\n<li class="dock-row">\r\n<!-- snip -->\r\n</li>').hide();
newRow.slideDown();
});
Just because FF doesn't throw an exception doesn't mean the code is correct.