how do i use AJAX in jQuery on multiple elements? - javascript

(function($) {
$('.myclass').each(function(){
$(function() {
$.ajax({
url: "myPHP.php?app",
method: 'GET',
complete: function(jqXHR, textStatus) {
var response = JSON.parse(jqXHR.responseText);
$('.myclass').html(response.app);
}
});
});
});
})(jQuery);
i have multiple instances of myclass and I want each instance to be replaced with response.app but it doesnt happen.
What am i missing?

With your code, on every response from the server, all of your .myclass will be modified. You could try something like this:
$('.myclass').each(function() {
var $elem = $(this); // <-------------- Save the element for the ajax callback
$.ajax({
url: "myPHP.php?app",
method: 'GET',
complete: function(jqXHR, textStatus) {
var response = JSON.parse(jqXHR.responseText);
$elem.html(response.app); // <-------------- Use it
}
});
});
By the way, the requested URL seems to be the same for each call, with no specific parameter. If that's the case in your real code, then you only need to make one request (no .each()), and apply the result to all of your elements:
$.ajax({
url: "myPHP.php?app",
method: 'GET',
complete: function(jqXHR, textStatus) {
var response = JSON.parse(jqXHR.responseText);
$('.myclass').html(response.app);
}
});

jquery´s html function handles the replacement off all occurrence of myclass
so you just have to make the ajax call and pass the response
$.ajax({
url: "myPHP.php?app",
method: 'GET'
}).done(function(response){
$('.myclass').html(response.app)
});

Related

multiple ajax calls with codeigniter

excuse me sir/ma'am
i'm new to ajax, i'm trying to do multiple ajax call in one function to dislay info after an option in dropdown is selected and it goes into separate field ,something like
a goes into description field, b goes into schedule field
i already got the function for a 1 call but when i'm trying to do 2 it's just doesn't work
here is the code that i made for multiple call
<script>
// multiple ajax calls code that i make
// #paket is the dropdown id
$.when(
$('#paket').unbind('change');
$('#paket').change(function(){
var opt_sel = $('#paket').val();
$.ajax({
url:'bttdev3/tour/s1',
method: "POST",
data: {
sel_op:opt_sel
}
}),
$.ajax({
url:'bttdev3/tour/s2',
method: "POST"
data: {
sel_op:opt_sel
}
});
});
);
.then(function(a,b){
$.('#detail').html(a);
$.('#jadwal').html(b);
});
</script>
here is the previous code that works for 1 data call
<script>
1 call function
(function(){
$('#paket').unbind('change');
$('#paket').change(function(){
var opt_sel = $('#paket').val();
var baseurl = "www.dev3.gatra.com/bttdev3";
$.ajax({
method:"POST",
url: '/bttdev3/tour/s1',
// url: "/bttdev3/tour/" + s1,
data:{
sel_op:opt_sel
}
}).done(function(a){
$('#detail').html(a);
}).fail(function(){
alert("gagal memanggil data.");
});
});
});
</script>
any help would be appreciated
try this one
$(document).on('change', '#packet', function(){
_ajax('bttdev3/tour/s1', 'POST', {sel_op: $(this).val()}, function(res){
$('#detail').html(res);
});
_ajax('bttdev3/tour/s2', 'POST', {sel_op: $(this).val()}, function(res){
$('#jadwal').html(res);
});
});
function _ajax(url, method, data, callback){
$.ajax({
method,
url,
data
}).done(function(a){
if(typeof(callback) != 'undefined'){
callback (a);
}
}).fail(function(){
alert("gagal memanggil data.");
});
}

using javascript onload() and ajax to retrieve php array

I'm using onload() and ajax to get the array from php, but it didnt work. The html page should be able to get the array from n1.php and alert("GOOD"), but it's not giving any response, not even alerting GOOD or BAD so i really dont know what's wrong with the code. How can I fix this??
n1.html:
<!DOCTYPE html>
<html>
<body onload="getArr();">
here
</body>
<script type="text/javascript">
function getArr(){
alert('return sent');
$.ajax({
url: "n1.php",
dataType: 'json',
success: function(json_data){
var data_array = $.parseJSON(json_data);
var rec = data_array[0];
alert("GOOD");
},
error: function() {
alert("BAD");
}
});
}
</script></html>
n1.php:
<?php
$output = array("cat","dog");
echo json_encode($output);
?>
The request must contains the type of request. Also the dataType refers on data you are going to send,as long as you don't send any data, it does not need here.
Try this:
$.ajax({
url: "n1.php",
type: "GET",
success: function(json_data){
var data_array = $.parseJSON(json_data);
var rec = data_array[0];
alert("GOOD");
},
error: function() {
alert("BAD");
}
});
Try this
$.ajax({
url: "n1.php",
dataType: 'json',
success: function(json_data){
var data_array = json_data; // Do not parse json_data because dataType is 'json'
var rec = data_array[0];
alert("GOOD");
},
error: function() {
alert("BAD");
}
});
Now, two things to note here:
You have not passed HTTP Method in the ajax but by default it is GET as mentioned here in jQuery AJAX docs. Please pass appropriate method type if it is not GET.
Since you have sent dataType as 'json', you need not parse json received in the response in success handler.

How to connect to the Parse Javascript API? (502 error)

I am building a chatroom-type app using the Parse Javascript API. The task is to get some data from Parse, display it, add user input to the messages, and send it right back to parse.
The problem is I am not being able to see the data from parse, and receive a 502 error. I am a bit newer to javascript, so any advice on how to accomplish this, or any mistakes you may see in my code, would be fantastic. I also commented out my code the best I could. Thanks for the help.
Here is my code;
$(document).ready(function(){
delete Chat.display;
delete Chat.send;
delete Chat.fetch;
var my_messages = $('ul.messages')
//fetches data from parse
var myChat = function() {
$.ajax({
url: "https://api.parse.com/1/classes/chats",
dataType: "json",
success: console.log("Success"),
function message(a) {
my_messages.append('<ul>' + a +'</ul>'); //adds ul 'text' to messages
};
});
};
myChat(); // call mychat
$('button.send').on('click', function() { // when user clicks send
// send post to
$.ajax({
type: "POST",
url: "https://api.parse.com/1/classes/chats",
data: JSON.stringify({text: $('input.draft').val()}), // stringify the text on value input.draft
function(message){
window.location.reload(1) //refresh every 3 seconds
});
});
});
</script>
you have syntax error in both of your success functions of $.ajax calls. In the first ajax call you have places console.log, which should be inside the success callback. In the second one u haven't even added success: callback.
Try below updated code
$(document).ready(function(){
delete Chat.display;
delete Chat.send;
delete Chat.fetch;
var my_messages = $('ul.messages');
var myChat = function() {
$.ajax({
url: "https://api.parse.com/1/classes/chats",
dataType: "json",
success:function message(a) {
console.log("Success")
$.each(a,function(i,item){
my_messages.append('<ul>' + item.username +'</ul>'); //adds ul 'text' to messages
});
}
});
};
myChat(); // call mychat
$('button.send').on('click', function() { // when user clicks send
// send post to
$.ajax({
type: "POST",
url: "https://api.parse.com/1/classes/chats",
data: JSON.stringify({text: $('input.draft').val()}), // stringify the text on value input.draft
success:function(message){
window.location.reload(1) //refresh every 3 seconds
}
});
});
});

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

Leaflet load data and edit feature properties on mouse click

I am loading map data from a GeoJSON file and attaching a click event for every polygone. on click, the script should fetch data from the server AND modify one of the clicked polygon's properties. i.e:
function onClick(e) {
var status = e.target.feature.properties.ACCESS;
$.ajax({
url: "http://127.0.0.1:8080/?&u=x&p="+e.target.feature.properties.ID_PARCELL,
dataType: 'jsonp',
type: 'GET',
success: function(data) {
status = data.status;
e.target.feature.properties.ACCESS = data.status;
e.target.bindPopup("Owner: <b>"+ data.status +"</b>").openPopup();
},
error: function(data){console.log(data)}
});
e.target.feature.properties.ACCESS = status;
map.fitBounds(e.target.getBounds());
}
But since the success function is an callback (synchronous or not, it doesn't really matter), I am not able to get back to the original event source (namely e) so I could modify one of its properties.
My question is: How can I get back to the event source after loading this data? Is there any generic Javascript way? If not, is there any way I can query the GeoJSON layer by feature ID ? (=> I can therefore send the feature ID in the ajax call, and simply get it back with the response)
The solution is to send the desired variable e to the anonymous function by using the context entry:
function onClick(e) {
var status = e.target.feature.properties.ACCESS;
$.ajax({
url: "http://127.0.0.1:8080/?&u=x&p="+e.target.feature.properties.ID_PARCELL,
dataType: 'jsonp',
context: e,
type: 'GET',
success: function(data) {
status = data.status;
e.target.feature.properties.ACCESS = data.status;
e.target.bindPopup("Owner: <b>"+ data.status +"</b>").openPopup();
},
error: function(data){console.log(data)}
});
e.target.feature.properties.ACCESS = status;
map.fitBounds(e.target.getBounds());
}
You'r using the same event name 'e' on both Click and success functions. Try to change one of them. ie
function onClick(e) {
var status = e.target.feature.properties.ACCESS;
$.ajax({
url: "http://127.0.0.1:8080/?&u=x&p="+e.target.feature.properties.ID_PARCELL,
dataType: 'jsonp',
type: 'GET',
success: function(data, evt) {
status = data.status;
e.target.feature.properties.ACCESS = data.status;
e.target.bindPopup("Owner: <b>"+ data.status +"</b>").openPopup();
},
error: function(data){console.log(data)}
});
e.target.feature.properties.ACCESS = status;
map.fitBounds(e.target.getBounds());
}
now you can change the initial event 'e' properties when the result is returned.
Hope this helps.

Categories