We Keep Coding

Follow Up For: I have 2 radio buttons and i want to make a different ajax page load into a div element depending on which one is selected

I have the script working on nearly all devices. However, The Issue I am having is that the JavaScript doesn't work on an iPad 2, I need to allow this to work on an iPad 2, Either that or some other version of the script that detects that it is on an iPad 2 and uses a different script because of that.
This is the script I am using currently that doesn't support iPad 2:
<script>
$(document).ready(function() {
let location_one = document.getElementById('location1');
let location_two = document.getElementById('location2');
let getLocationOneData = function () {
$.ajax({
type: 'POST',
url: 'locationData1.php',
success: function(data){
$('#locationoutput').html(data);
}
});
};
let getLocationTwoData = function () {
$.ajax({
type: 'POST',
url: 'locationData2.php',
success: function(data){
$('#locationoutput').html(data);
}
});
};
let getData = function () {
if (location_one.checked) {
getLocationOneData();
} else if (location_two.checked) {
getLocationTwoData();
}
}
location_one.addEventListener('change', function () {
if (this.checked) {
getLocationOneData()
}
});
location_two.addEventListener('change', function () {
if (this.checked) {
getLocationTwoData();
}
});
getData();
setInterval(function () {
getData();
}, 120000); // it will refresh the data every 3 mins
});
</script>

simple ajax request with interval

I recently began learning Ajax and jQuery. So yesterday I started to programm a simple ajax request for a formular, that sends a select list value to a php script and reads something out of a database.
It works so far!
But the problem is, that when I click on the send button, it starts the request, 1 second later. I know that it has something to do with my interval. When I click on the send button, I start the request and every second it requests it also, so that I have the opportunity, to auto-refresh new income entries.
But I'd like to have that interval cycle every second, but the first time I press the button it should load immediately, not just 1 second later.
Here is my code:
http://jsbin.com/qitojawuva/1/edit
$(document).ready(function () {
var interval = 0;
$("#form1").submit(function () {
if (interval === 0) {
interval = setInterval(function () {
var url = "tbladen.php";
var data = $("#form1").serialize();
$.ajax({
type: "POST",
url: url,
data: data,
success: function (data) {
$("#tbladen").html(data);
}
});
}, 1000);
}
return false;
});
});
Thanks!

I might be something like the following you're looking for.
$(document).ready(function () {
var isFirstTime = true;
function sendForm() {
var url = "tbladen.php";
var data = $("#form1").serialize();
$.ajax({
type: "POST",
url: url,
data: data,
success: function (data) {
$("#tbladen").html(data);
}
});
}
$("#form1").submit(function () {
if (isFirstTime) {
sendForm();
isFirstTime = false;
} else {
setTimeout(function () {
sendForm();
}, 1000);
}
return false;
});
});

So, use setTimeout when the callback has finished as setInterval just keeps running whether or not your callback has finished.
$(function () {
$("#form1").submit(postData);
function postData() {
var url = "tbladen.php",
data = $("#form1").serialize();
$.ajax({
type: "POST",
url: url,
data: data,
success: function (data) {
$("#tbladen").html(data);
setTimeout(postData, 1000);
}
});
return false;
}
});
Kind of related demo

Issue with getting value from $.ajax inside a $.when

Hey guys I have the following code:
function runATF(){
var urlatf = '/pcg/ATF/updateATF_window.php';
var tagatf = $("#insider_dialog");
var promise1 = showUrlInDialogATF(urlatf);
var promise2 = sendUpdateATFwindow();
$.when(promise1, promise2).done(function(data1, data2) {
tagatf.html(data1[0]).dialog({
width: '100%',
modal: true
}).dialog('open');
//$('.updaterATF_outerbody').text(data2[0].atfName),
//$('.updaterATF_outerbody').text(data2[0].atfAmount)
//console.log(data2[1]);
alert(data2[0].text(atfName));
alert(data2[0].text(atfAmount));
});
}
The part I need you to look at it the alert(data2[0].text(atfName)); and the alert(data2[0].text(atfAmount)); My problem is I can't seem to get the values?
Let me show you the 2 functions that are ran:
First this one just sends a url and returns....
function showUrlInDialogATF(urlatf)
{
return $.ajax({
url: urlatf
});
}
The second one returns the two data values that are created in a document.ready (I have tested them and they do hold values, it's only when I try and get it into the $.when statement).....
function sendUpdateATFwindow()
{
return $.ajax({
data: {
'atfName': atf_name.val(),
'atfAmount': atf_amount.val()
}
});
}
Let me know if you need anything else, thank you
David
Oh here is the first statement that begins everything:
$(document).ready(function () {
$(".atf-submit").click(function () {
atf_name = $(this).parent().parent().find(".user_table");
atf_amount = $(this).parent().parent().find(".user_atf");
runATF();
});
});
Note: I am using the Jquery UI dialog opener, I already have one open so I am making another one open. I don't know if this will effect anything? I would assume not because the functions and values are different names.
UPDATE:
Okay I want to show the first code that opens the first dialog window up:
$(document).ready(function () {
$("#ATF").click(function () {
runATF();
});
});
function runATF(){
var urlATF = '/pcg/ATF/atf_layout.php';
showUrlInDialogATF(urlATF);
}
function showUrlInDialogATF(urlATF)
{
var tag = $("#dialog-container");
$.ajax({
url: urlATF,
success: function(data) {
tag.html(data).dialog
({
width: '100%',
modal: true
}).dialog('open');
}
});
}
Than the other code runs - I will re post here:
$(document).ready(function () {
$(".atf-submit").click(function () {
atf_name = $(this).parent().parent().find(".user_table");
atf_amount = $(this).parent().parent().find(".user_atf");
runATFinsider();
});
});
function runATFinsider(){
var urlatfinsider = '/pcg/ATF/updateATF_window.php';
var tagatfinsider = $("#insider_dialog");
var promise1 = showUrlInDialogATFinsider(urlatfinsider);
var promise2 = sendUpdateATFwindow();
$.when(promise1, promise2).done(function(data1, data2) {
tagatfinsider.html(data1[0]).dialog({
width: '100%',
modal: true
}).dialog('open');
//$('.updaterATF_outerbody').text(data2[0].atfName),
//$('.updaterATF_outerbody').text(data2[0].atfAmount)
console.log(data2[1]);
alert(data2[0].text(atfName));
});
}
function showUrlInDialogATFinsider(urlatfinsider)
{
return $.ajax({
url: urlatfinsider
});
}
function sendUpdateATFwindow()
{
return $.ajax({
data: {
'atfName': atf_name.val(),
'atfAmount': atf_amount.val()
}
});
}
Also I try to do a console.log(data2) and it just gives me, [0] = abunch of html? , [1] = success, [2] = object
UPDATE:
Here is an example of what it I should be getting in the data2[0]...
alert(atf_name.val()); = bob
alert(atf_amount.val()); = 0

function executes too soon

I'm stuck with the following problem:
I want a function to create DIV tags to hold images and a second function to create the IMG tag and insert them in the DIVs created before. Works well with "alert messages". However without alerts, the second function runs before the first finished loading the DIV tags.
I think I need some kind of callback function worked in, but I have no clue how to do this.
Here is the code:
function imageLoader ()
{
for (i=1;i<=5;i++)
{
checkPath = 'images/pic'i+'.png';
$.ajax({
url: checkPath,
type:'HEAD',
success:
function() {
//create DIVs t hold images
$('.tools').append("<div class='tooling'></div>");
}
});
}
// after creating DIVs, call function to create <img> tags
appendix();
}
Thanks for helping out.
Regards,
frequent

Since, as Kos pointed out, you can't rely on the calls to complete in order, you'll have to get a little tricky to ensure that all your ajax calls have been completed. Try something like this:
function imageLoader() {
var ajaxCounter = 0;
for (i = 1; i <= 5; i++) {
checkPath = 'images/pic'
i + '.png';
$.ajax({
url: checkPath,
type: 'HEAD',
success: function() {
//create DIVs t hold images
$('.tools').append("<div class='tooling'></div>");
ajaxCounter++;
if (ajaxCounter == 5) {
// after creating DIVs, call function to create <img> tags
appendix();
}
}
});
}
}
That should check to make sure you have the required number of ajax successes before executing the appendix() call.

I can't tell exactly what you're asking, but it looks like maybe you need to move your appendix() call into the success callback. Remember that the success callback may not be executed before the appendix call in the code you presented.
function() {
//create DIVs t hold images
$('.tools').append("<div class='tooling'></div>");
appendix();
}
Of course, you might not want this called 5 times inside your for loop. Here's one way to make it call after the last success occurs, perhaps not the cleanest:
for (i=1;i<=5;i++)
{
if(i == 5) {
var succ = function() {
//create DIVs t hold images
$('.tools').append("<div class='tooling'></div>");
appendix();
};
} else {
var succ = function() {
//create DIVs t hold images
$('.tools').append("<div class='tooling'></div>");
};
}
checkPath = 'images/pic'i+'.png';
$.ajax({
url: checkPath,
type:'HEAD',
success: succ
});
}

a) Create a variable to count how many times the success function callback has executed and run appendix only when this count equals the number of your ajax calls,
b) Register the $.ajaxComplete callback.

The elegant way to do this is to use $.when:
function imageLoader(
$.when.apply($, $.map(new Array(5), function (e, i) {
var checkPath = 'images/pic' + (i + 1) +'.png',
d = $.Deferred();
$.ajax({
url: checkPath,
type:'HEAD',
success: function () {
d.resolve($('<div class="tooling">')
.append($('<img>').attr(src, checkPath)));
},
error: function () { d.resolve(null); }
});
return d.promise();
})
.then(function () {
$('.tools').append(Array.prototype.slice(arguments));
});
}

You could set async to false in $.ajax so it blocks execution.
Or, you could check i in the success callback, and if its 5, call appendix().

function imageLoader ()
{
for (i=1;i<=5;i++)
{
checkPath = 'images/pic'i+'.png';
$.ajax({
url: checkPath,
type:'HEAD',
success:
function() {
//create DIVs t hold images
$('.tools').append("<div class='tooling'></div>",
function(){
appendix();
});
}
});
}
}

Javascript function only works once

I have an inline script on my page as such:
<script type="text/javascript">
var rootPath = '<%= Url.Content("~/") %>';
$(document).ready(function () {
$('#logonStatus').click(function () { loadLoginForm(); });
alert('Document Ready');
});
function loadLoginForm() {
if(!serenity.tools.isStyleSheetLoaded('redmond.css')) {
$('head').append('<%= Url.StyleTag("Redmond/redmond.css", MediaTypes.Screen) %>');
}
if(!serenity.tools.elementExists($('#logonContainer'))) {
$.ajax({
async: false,
cache: false,
datatype: 'html',
success: function (data) { $('body').append(data); },
type: 'GET',
url: '/Membership/LogOn'
});
}
$('#logonContainer').dialog({
modal: true,
hide: 'slide'
});
}
</script>
I also am loading a custom javascript file and the contents of it are as such:
var serenity = new function () {
$(document).ready(function () {
jQuery.ajaxSetup({
beforeSend: function (xhr) {
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
}
});
});
this.tools = new function () {
this.isStyleSheetLoaded = function (fileName) {
$(document.styleSheets).each(function () {
if (this.href.toLowerCase().indexOf(fileName) != -1) {
this.isStyleSheetLoaded = true;
return;
}
});
this.isStyleSheetLoaded = false;
}
this.elementExists = function (element) {
this.elementExists = element.length != 0;
}
}
}
The file that is being loaded by the ajax call is simply a div with an table containing input elements. The file does not contain any javascript in it whatsoever.
My problem is that the first time I call isStyleSheetLoaded it works just fine but after the file is loaded and the dialog is shown and closed I click on the link that fires the loadLoginForm function but this time it says isStyleSheetLoaded is not a function. This is showing up in all browsers, so I am 99% sure it is my problem, but I have no idea what it is. Could someone please point me in the right direction?
Thanks in advance.

I think your problem is the following:
you define a function "this.isStyleSheetLoaded = function (fileName)" but in his body you overwride this property "this.isStyleSheetLoaded = true;".
So after your first call of isStyleSheetLoaded the function is overwride with a boolen.
the right way could be:
this.isStyleSheetLoaded = function (fileName) {
$(document.styleSheets).each(function () {
if (this.href.toLowerCase().indexOf(fileName) != -1) {
return true;
}
});
return false;
}