I'm trying to use some data returned from an ajax request to construct a string, which then needs to be posted back using ajax. However the variable I'm assigning the data to is not in the scope of the second request and thus returning an 'var is undefined' error. In the example below I need to post the data returned from the first request (
var cUrl = '/api/courses/a';
var pUrl = '/api/courses/b/pages/1?page_body=';
var bodyData = '';
$.getJSON(cUrl, function(cData){
bodyData = '<div id="' + cData.id + '">' + cData.description + '</div>';
});
('body').on('click', '#add_btn, function(){
$.ajax({
type: 'POST',
dataType: 'json',
url: pUrl + bodyData,
headers: {"X-HTTP-Method-Override": "PUT"},
success: function(result) {
alert('Successfully Added!');
}
});
});
Any help would be very much appreciated! Many Thanks!
As I understand, you want to handle the click event only if you have the json response data, so:
Just add the click event handler in the getJSON callback.
Or trigger a custom event when you get the json response, and create the click event handler for #add_btn in the custom event handler. With that the #add_btn click event will only fire when you have your json response.
Related
I am experiecing some issues with AJAX updating the page. The actual data in the database is updated but this is not always reflecting in real time on the web page.
For example, I have the following event:
$("#add_note").click(function(e) {
//e.preventDefault();
$("#add_note_form").validate({
rules: {
contact_note: {
required: true
}
},
submitHandler: function(form) {
contact.modal_update({
'obj' : $('#add_note_form'),
'uri' : '/contact/add_note/'
});
}
});
});
This function when a new note is created calls a callback to validate the form fields first and then if successful calls a callback inside a seperate class to conduct the update. See the modal_update class below:
// Update modal
this.modal_update = function(data)
{//
// Declare a few variables for the data object we've received
obj = data.obj // The form element to serialize
uri = data.uri;
// Get the form ID from the data-target attribute
id = obj.attr('data-target');
// URL to send to
url = this.site_url + uri + id;
// The form object
this.post_data(obj.serialize(),url);
// Hide Modal
obj.closest('.modal').modal('hide');
// Refresh
this.refresh();
}
This then figures out the correct route to ajax and calls a ajax call back inside the same class:
// AJAX post
this.post_data = function(obj,uri)
{
$.ajax({
data: obj,
dataType: 'json',
type: 'post',
url: uri,
headers: { "cache-control": "no-cache" },
cache: false,
success: function (response) {
if (response.success == true)
{
$("#alert_success .msg").html(response.message);
$("#alert_success").fadeIn(200).delay(2000).fadeOut(200);
}
else
{
$("#alert_error .msg").html(response.error);
$("#alert_error").fadeIn(200).delay(2000).fadeOut(200);
console.log(response.error);
}
}
});
}
I am then running another class callback to "refresh" the data in all the elements on the page:
this.refresh = function()
{
// Refresh the ajax requests
this.get_contact_data();
this.get_notes();
this.get_contact_log();
this.get_contact_tasks();
}
This class re loads the functions which run on page load to get the inial data into the tables/fields on the page. See "get_notes" below:
// Get notes
this.get_notes = function()
{
// Get all notes and populate table
var log_uri = this.site_url + "/contact/get_notes/" + this.contact_id;
this.get_data(log_uri,function(data) {
notes = $("#contact_notes ul");
notes.empty("");
// Populate the contact fields, assuming there is a result to play with
if (data != false) {
//alert(JSON.stringify(data));
$("#notes-tab .count").html("(" + data.length + ")");
$.each( data, function( key, value ) {
notes.append("<li class='list-group-item' modal-id='editNoteModal' data-target='" + value.ID + "'><div class='row'><div class='col-lg-3'><i class='fa fa-sticky-note mr-3'></i>" + value.timestamp + "</div><div class='col-lg-7'>" + value.note + "</div><div class='col-lg-2'><a href='#' class='edit mr-3'><i class='fa fa-edit mr-1'></i>Edit</a><a href='#' class='delete'><i class='fa fa-times mr-1'></i>Remove</a></div></div></li>");
});
console.log('Notes loaded');
} else {
notes.append("<li>There are currently no notes for this contact</li>");
}
});
}
Now the problem:
For some reason this does not update consistently in real time. The data is updated fine on the server side but on the client side the update/refresh does not always update. I might add a note and get a correct update response but the refresh method seems to be receiving the old data and always be one note behind. So the next time I add a note, the one I added before then appears and so forth.
Another problem I am experiencing is the methods seem to stack on each event so if I add one note (or one of the other methods) I will see the console say "notes loaded" but on the second note it says "notes loaded" twice, then on the 3rd note added 3 times and so forth.
I am sure there must be something fatal flaw in the design of my code here but I am not experienced enough with javascript/jquery to notice what direction I am going wrong so I can fix it.
I thought that this was an issue with ajax caching and not refreshing the result so I have adjusted the ajax request as cache none and also to send no cache headers. I am running in wamp.
In your case, your refresh code will always run before your data got updated. Because ajax is asynchronous so the code behind and below ajax will always execute nearly the time your ajax running.
At the time you run your post_data function to call the API, the refresh function got run too. So it's done before your data got updated.
You should run refresh function inside ajax callback. For example:
this.post_data = function(obj,uri, callback)
{
$.ajax({
data: obj,
dataType: 'json',
type: 'post',
url: uri,
headers: { "cache-control": "no-cache" },
cache: false,
success: function (response) {
if (response.success == true)
{
$("#alert_success .msg").html(response.message);
$("#alert_success").fadeIn(200).delay(2000).fadeOut(200);
}
else
{
$("#alert_error .msg").html(response.error);
$("#alert_error").fadeIn(200).delay(2000).fadeOut(200);
console.log(response.error);
}
callback();
}
});
}
And in modal_update, you pass refresh function to post_data as a callback:
this.modal_update = function(data)
{//
// Declare a few variables for the data object we've received
obj = data.obj // The form element to serialize
uri = data.uri;
// Get the form ID from the data-target attribute
id = obj.attr('data-target');
// URL to send to
url = this.site_url + uri + id;
// The form object
this.post_data(obj.serialize(),url, this.refresh);
// Hide Modal
obj.closest('.modal').modal('hide');
}
You should read more about asynchronous ajax. You can use other tricky solution is setTimeout to run this.refresh but I do not recommend that because you not sure when the update is done.
I am able to send the value of the input field with the id datepicker to the server. And with this in the view I filter the time slot by the ones that occur on the same date.
Where I am having difficulties is sending this queryset to the browser and then appending this to the options.
I'm still relatively new to javascript I apologize if this is a newb question. I definitely appreciate any feedback!
My View:
if request.is_ajax():
selected_date = request.POST['selected_date']
slots_on_day = Calendar.objects.filter(date=selected_date)
return HttpResponse(slots_on_day)
My Javascript:
$(document).ready(function() {
$("#datepicker").change(function(){
document.getElementById("display_slots").style.display ="block";
$.ajax({
type: 'POST',
data: {
'selected_date':$('#datepicker').val(),
'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val()
},
success: function(resp){
for (var i=0; i < resp['slots_on_day'].length;++i){
addOption(
document.getElementById("display_slots"), resp['slots_on_day'][i], resp['slots_on_day'][i]);
}
}
});
});
});
Notes: the id=datepicker field triggers the ajax event. I then want to receive the response from the server and append the options to the input with the id=display_slots
Error:
TypeError: resp.slots_on_day is undefined
Updated ajax success
success: function(data){
$.each(data, function(key, value){
$('select[name=display_slots]').append('<option value="' + key + '">' + value +'</option>');
});
}
from django.forms.models import model_to_dict
if request.is_ajax():
selected_date = request.POST['selected_date']
slots_on_day = Calendar.objects.filter(date=selected_date)
data = []
for cal in slots_on_day:
data.append(model_to_dict(cal))
return JsonResponse(status=200, data={'slots_on_day':data})
It'll send JSON response in frontend and now you can use this data as you want to use. I think, It'll work with your current ajax success method code
I am new to Jquery Ajax.
I have a jquery ajax function, which receives a value from a server.
function servertransfer_reg(datapack1,datapack2,datapack3,datapack4) {
alert('Start of Ajax Call');
//Ajax , Jquery Call to Server for sending free time data
$.ajax({
type: "POST",
dataType: 'json',
url: "xyz.php",
data: {M_N : datapack1,
Em : datapack2,
TandC: datapack3,
News: datapack4
},
success: function(data) {
alert(data.appid);
$("#server_answer_reg").html('<p>Your App ID Successfully created<p/>' + data.appid);
//document.getElementById("partyID").innerHTML = data.appid;
$("#partyID").html(data.appid);
}
});
}
Here, I am getting data.appid from server.
I want to insert it into an html element #partyID, and after insert I am expecting onchange event to get fired which will do some work for me.
Below is the html.
<input onchange="saveIDs()" type="text" id="partyID" class="none_visible" value=""></input>
Here, my saveIDs() function is not getting called.
I am receiving the intended data from my Ajax call.
Please let me know if you need more information.
The onchange will fire when you leave the focus from it (if you performed any changes). After the successful execution why don't you call the saveIDs() function in the next line? What I mean is
success: function(data) {
alert(data.appid);
$("#server_answer_reg").html('<p>Your App ID Successfully created<p/>' + data.appid);
//document.getElementById("partyID").innerHTML = data.appid;
$("#partyID").html(data.appid);
saveIDs();
}
You must trigger the onchange event.
See:
http://api.jquery.com/trigger/
I am relatively new at AJAX/JSON, So apologies in advance if this turns out to be a bit of stupid question.
To practice my AJAX/JSON skills I am trying to make an weather web application. So I managed to find an api on the openweathermap website.
By using the .ajax() jQuery function I managed to load the data on my page. So I tried to take it to the next level by using an input field to change the location of the weather forecast. This is where I got stuck. I tried variety functions and approaches but I can't wrap my head around it.
This is what I've got right now.
$(document).ready(function(){
var $city = "New York, USA";
var $parameter = "Imperial";
var $urlLocal = "http://api.openweathermap.org/data/2.5/weather?q=" + $city + "&units=" + $parameter + "&APPID=0013269f6f2be27afffaa8b122e8f9f8";
var $input = $('.search'); //input field
$input.blur(function(){
$city = $input.val();
console.log($city);
});
$.ajax({
dataType: "json",
url: $urlLocal,
success: function(data) {
console.log("success", data);
$('.temp').html(data.main.temp + "℉");
$('.location').html(data.name);
}
});
});
I searched for a while on this forum but I couldn't quite find what I'm looking for.
I hope someone can help me!
Thanks!
EDIT
Thanks a lot guys for the great and fast response!!
The easiest way to achieve what you want would be to put the AJAX call inside the blur event you linked to input field.
And you will also need to regenerate the $urlLocal value before doing the AJAX call.
It could be something like that:
$input.blur(function(){
$city = $input.val();
$urlLocal = "http://api.openweathermap.org/data/2.5/weather?q=" + $city + "&units=" + $parameter + "&APPID=0013269f6f2be27afffaa8b122e8f9f8";
$.ajax({
dataType: "json",
url: $urlLocal,
success: function(data) {
console.log("success", data);
$('.temp').html(data.main.temp + "℉");
$('.location').html(data.name);
}
});
});
The reason your code is not working is because you're not calling the ajax in your blur event. the map is loaded in the document.ready event since the ajax function is written in the document.ready event. you need to create it as a function and call it both in the document.ready and the input blur event.
try enclosing your ajax call in a method like this
function LoadMap(){
var $urlLocal = "http://api.openweathermap.org/data/2.5/weather?q=" + $city + "&units=" + $parameter + "&APPID=0013269f6f2be27afffaa8b122e8f9f8";
$.ajax({
dataType: "json",
url: $urlLocal,
success: function(data) {
console.log("success", data);
$('.temp').html(data.main.temp + "℉");
$('.location').html(data.name);
}
});
}
and call this method in the document.ready event as well as the input blur event.
$input.blur(function() {
$city = $input.val();
console.log($city);
LoadMap();
});
here's a working JSFIDDLE for the same.
I have this function that performs a GET request for a given id:
var findById= function(id) {
console.log('findById: ' + id);
$.ajax({
type: 'GET',
url: rootURL + '/' + id,
dataType: "json",
success: function(data){
console.log('findById success: ' + data.name);
currentRaceEntry = data;
renderList(currentRaceEntry);
}
});
};
When I enter sitename/rest/entries/8 it returns a page with the xml for the object requested(as expected). (I can show this code but I dont think the problem is there). When I preform this request the console shows:
findById 8
My question is why doesn't it show console.log('findById success: ' + data.name);? The xml displays in the browser which looks to me like it was successful. So why doesn't the success function appear to be called? Thanks!
EDIT
this is what it looks like:
The console in the browser is blank
If you ajax request returns XML data, you need to set dataType as "xml".
At that point, the data object in the success function is an XML fragment, not a javascript objet, and you need to process it as such. The data.name property doesn't exist.