how to load div from html by using jquery? - javascript

I made 3 navigation navbarheader.html, navbar.html and sidebar.html.Only navbarheader.html is loading but others is not loading. if I remove navbarheader.html navbar.html is loading.
<script type="text/javascript">
// let $ = requirejs('./jquery.min.js');
//mainWindow.$ = $;
$(document).ready(function () {
var navbarheaderData = localStorage.getItem('navbarheaderStorage');
if (navbarheaderData) {
$('#navbarheader1').html(navbarheaderData);
} else {
$.ajax({
url: 'navbarheader.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('navbarheaderStorage', data);
$('#navbarheader1').html(data);
var navbarData = localStorage.getItem('navbarStorage');
if (navbarData) {
$('#navbar1').html(navbarData);
} else {
$.ajax({
url: 'navbar.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('navbarStorage', data);
$('#navbar1').html(data);
var sidebarData = localStorage.getItem('sidebarStorage');
if (sidebarData) {
$('#sidebar1').html(sidebarData);
} else {
$.ajax({
url: 'sidebar.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('sidebarStorage', data);
$('#sidebar1').html(data);
}
});
}
}
});
}
}
});
}
});
</script>

That's because you are using ajax requests, which stands for Asynchronous JavaScript and XML, but can be used with other datatypes (like text and therefore json), so the lines where you retrieve navbarheaderData, navbarData, and sidebarData are being executed immediately after you launch the requests, which would explain why only the first one would load (because there's only time for the first one to get a response before you start rendering the data).
What you really want is
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url: 'navbarheader.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('navbarheaderStorage', data);
//console.log(localStorage.getItem('navbarheaderStorage'));
var navbarheaderData = localStorage.getItem('navbarheaderStorage');
$('#navbarheader1').html(navbarheaderData);
}
});
$.ajax({
url: 'navbar.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('navbarStorage', data);
//console.log(localStorage.getItem('navbarStorage'));
var navbarData = localStorage.getItem('navbarStorage');
$('#navbar1').html(navbarData);
}
});
$.ajax({
url: 'sidebar.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('sidebarStorage', data);
//console.log(localStorage.getItem('sidebarStorage'));
var sidebarData = localStorage.getItem('sidebarStorage');
$('#sidebar1').html(sidebarData);
}
});
});
</script>
which could be simplified into the following if you don't need to use local storage.
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url: 'navbarheader.html',
dataType: 'text',
success: function (data) {
$('#navbarheader1').html(data);
}
});
$.ajax({
url: 'navbar.html',
dataType: 'text',
success: function (data) {
$('#navbar1').html(data);
}
});
$.ajax({
url: 'sidebar.html',
dataType: 'text',
success: function (data) {
$('#sidebar1').html(data);
}
});
});
</script>
#Penguen replied and changed their above code.
I see that you don't want to send an ajax request unless you need to, which is functioning as some sort of weird caching mechanism. In this case the way you have written this, we only had navbarHeaderData cached and not the rest, then the page would fail to render properly. The following way not only protects against what I said, but is also faster than if the rewritten method works as if you were loading this for the first time and didn't have this cached, then the ajax requests would be sent out almost at the same time, rather than one by one.
<script type="text/javascript">
// let $ = requirejs('./jquery.min.js');
//mainWindow.$ = $;
$(document).ready(function () {
var navbarheaderData = localStorage.getItem('navbarheaderStorage');
if (navbarheaderData) {
$('#navbarheader1').html(navbarheaderData);
} else {
$.ajax({
url: 'navbarheader.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('navbarheaderStorage', data);
$('#navbarheader1').html(data);
}
});
}
var navbarData = localStorage.getItem('navbarStorage');
if (navbarData) {
$('#navbar1').html(navbarData);
} else {
$.ajax({
url: 'navbar.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('navbarStorage', data);
$('#navbar1').html(data);
}
});
}
var sidebarData = localStorage.getItem('sidebarStorage');
if (sidebarData) {
$('#sidebar1').html(sidebarData);
} else {
$.ajax({
url: 'sidebar.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('sidebarStorage', data);
$('#sidebar1').html(data);
}
});
}
});
</script>

From what I see, I see 3 templates being fetched by making AJAX calls and then you are caching the template in your local storage and then use that to render the 3 sections of your web page.
Here is what you are doing it wrong. The render part of the code is written all together in the window.load and does not care about whether the AJAX call is complete or not. As your calls are asynchronous the code will not wait until the response template is fetched.
What you can do instead is have a common render function which each ajax call success method can call.

You are suffering from asynchronous issues, you should do the work inside each request. I dont think its related to local storage.
<script type="text/javascript">
$(document).ready(function () {
var navbarheaderData = localStorage.getItem('navbarheaderStorage');
if (navbarheaderData) {
$('#navbar1').html(data);
} else {
$.ajax({
url: 'navbarheader.html',
dataType: 'text',
success: function (data) {
$('#navbar1').html(data);
}
});
}
.... and so on...
});

Related

How can I return a response from a call in order to open xml file using jquery

I want to open xml file with jquery , but when I want to display the value of open outside the function , I have an undefined error .
Here the code :
$(document).ready(function () {
var open ;
$.ajax({
type: "GET",
url: "../build/js/openTickets.xml",
dataType: "xml",
success: nv =function(xml) {
$(xml).find("mestickets").each(function () {
open=($(this).find("nbopenTickets").text());
console.log(open);//It works
});
}
})
console.log(open);//undefined
That is what Ajax does, the processed data will be handled in the success handler.
What you can do if you really want to is create another function where you can process your data.
$(document).ready(function () {
var open = null;
$.ajax({
type: "GET",
url: "../build/js/openTickets.xml",
dataType: "xml",
success: nv = function (xml) {
$(xml).find("mestickets").each(function () {
open = $(this).find("nbopenTickets").text();
openData(open);
});
}
});
function openData(open) {
console.log(open);
}
});

How to access a selector on AJAX Complete?

I make an Ajax Request that adds content to the page with HTML from the back-end, and then I make another Ajax Request that modifies that dynamically added HTML.
$("#list-customers-button").click(function () {
var selectedAcquirer = $("#acquirer-select").val();
if (selectedAcquirer === "adyen") {
if (listed) {
listed = false;
$("#customer-list-area").hide().html('').fadeIn(fadeTime);
} else {
listed = true;
$.ajax({
type: "GET",
url: "/adyen_list_customers",
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function () {
$("#list-progress").show();
},
success: function (data) {
console.log(JSON.stringify(data));
$("#customer-list-area").hide().html(data["response_html"]).fadeIn(fadeTime).promise().done(function () {
$(".collapsible").collapsible();
resetDatepicker();
});
},
complete: function () {
$(document).on("change", "#file-download-datepicker", function () {
$("#file-download-progress").hide();
$("#file-download-date").val(selectedDate);
fileDownloadData = $("#file-download-form").serialize();
displayMessage(fileDownloadData);
$.ajax({
type: "POST",
url: "/adyen_update_file_list_by_date",
data: fileDownloadData,
beforeSend: function () {
$("#file-download-progress").show();
},
success: function (response) {
},
complete: function (response) {
$("#file-download-progress").hide();
console.log(response.responseText);
// Doesn't work. Selector should exist, but it doesn't.
$("#merchant-file-list").html(response.responseText);
},
error: function (response) {
displayMessage(response["responseText"]);
}
});
});
},
error: function (data) {
displayMessage(data);
},
});
}
} else if (selectedAcquirer === "stone") {
displayMessage("Adquirente indisponível no momento.");
} else {
displayMessage("É necessário selecionar uma adquirente.");
}
});
I get a perfect HTML response from the server, but selectors that were previously added with HTML also from the server (#file-download-progress, #merchant-file-list) are completely ignored. .html() doesn't work, nor anything, and I don't know how to use .on() to work around this because I just need to access that content. Since the ajax request is being made after the previous one is complete, they should be able to be accessed. They just don't exist nowhere in time.

Ajax code working in some parts and not working in others

I have a problem with my Ajax request to download some data from a database.
There are two codes down below: one that works and one that doesn't, even though they are basically the same. I've also set up later down my code to display the variable (console.log(location)) but it just reads undefined.
I know the php part of it is working because I also do another console.log(data) on success of the ajax call and that returns with the data I entered on my database. What's going on and how do I fix it?
Code that doesn't work:
var location;
function downloadCoords() {
$.ajax({
type: 'GET',
url: 'transformerthing.php',
dataType: "json",
success: function(data) {
console.log(data);
location = data.location;
},
error: function(data) {
console.log(data);
}
});
}
Code that does work:
var mapCode;
var used;
var active;
function downloadCode() {
$.ajax({
type: 'GET',
url: 'getMapCode.php',
dataType: "json",
success: function(data) {
console.log(data);
mapCode = data.mapCode;
used = data.used;
active = data.active;
},
error: function(data) {
console.log(data);
}
});
}
//shorthand deferred way
$.getJSON( "transformerthing.php")
.done(function(data){
console.log(data);
}).fail(function(msg){
console.log(msg)
});
var location;
function downloadCoords() {
$.ajax({
type: 'GET',
url: 'transformerthing.php',
dataType: "json",
success: function(data) {
console.log(data);
location = data.location;
console.log(location);
},
error: function(data) {
console.log(data);
}
});
}
Try it again.

how to execute a javascript function returned from ajax response

I have a function which i want to execute when ajax makes a successful request but it doesn't execute here my jquery part
$.ajax({
type: "POST",
url: "https://www.example.com/create_chat.php",
data: dataString,
beforeSend: function()
{
$("#loading_indicator").show();
},
success: function(response)
{
$(".example").html(response);
}
});
here is the response from php file
<script>start_chat(); alert("testing");</script>
i tried adding this also
$(".example").find("script").each(function(i) {
eval($(this).text());
});
but nothing works
Your response from create_chat could indicate which function will be used. For example
$.ajax({
type: "POST",
url: "https://www.example.com/create_chat.php",
data: {
dataString: dataString
},
beforeSend: function()
{
$("#loading_indicator").show();
},
success: function(response) // response could be 1,2,3,4.. etc
{
if(response==1) {
start_chat();
}
if(response==2) {
stop_chat();
}
if(response==3) {
change_chat_room();
}
...
$(".example").html(response);
}
});
While there are work arounds, you should never be executing the response of an Ajax call directly.
"Scripts in the resulting document tree will not be executed,
resources referenced will not be loaded and no associated XSLT will be
applied."
http://www.w3.org/TR/XMLHttpRequest/#document-response-entity-body
Best practice is to respond with data, typically in the form of JSON, JSONP or HTML.
Try This,
$.ajax({
type: "POST",
data: {
'dataString': dataString
},
url: 'https://www.example.com/create_chat.php',
success: function(data) {
start_chat();
alert('Success');
},
error: function(data) {
alert('failed');
}
});

jQuery parallel AJAX call mixes up return values

In the following JavaScript code I repeatedly make AJAX calls to my FastCGI module to query some values. At some point the code terminates when the data variable for the div2 case is not 0 but contains the value that should go into div1 while the div1 displays the value that was supposed to go into div2.
I am using the Chromium Browser (14.0.835.202 (Developer Build 103287 Linux) Ubuntu 10.10) but it also happens with FireFox. I also tried using the XMLHttpRequest object alone and I got the same results.
How can this be and how can this be solved?
function TimerEvent() {
$.ajax({
url: "/cgi-bin/wvvar.cgi",
type: "POST",
data: "cmd=get&varname=s#SYSDATETIME",
success: function(data) {
document.getElementById("div1").innerHTML = data;
}
});
$.ajax({
url: "/cgi-bin/wvvar.cgi",
type: "POST",
data: "cmd=get&varname=#LOGINSTATE",
success: function(data) {
document.getElementById("div2").innerHTML = data;
if (data == "0")
setTimeout("TimerEvent()", 50);
}
});
}
Maybe try have them sequential:
function TimerEvent() {
$.ajax({
url: "/cgi-bin/wvvar.cgi",
type: "POST",
data: "cmd=get&varname=s#SYSDATETIME",
success: function(data) {
document.getElementById("div1").innerHTML = data;
$.ajax({
url: "/cgi-bin/wvvar.cgi",
type: "POST",
data: "cmd=get&varname=#LOGINSTATE",
success: function(data) {
document.getElementById("div2").innerHTML = data;
if (data == "0")
setTimeout("TimerEvent()", 50);
}
});
}
});
}
If your requirements allows, try this:
function TimerEvent() {
$.ajax({
url: "/cgi-bin/wvvar.cgi",
type: "POST",
data: "cmd=get&varname=s#SYSDATETIME",
success: function(data) {
document.getElementById("div1").innerHTML = data;
$.ajax({
url: "/cgi-bin/wvvar.cgi",
type: "POST",
data: "cmd=get&varname=#LOGINSTATE",
success: function(data) {
document.getElementById("div2").innerHTML = data;
if (data == "0")
setTimeout("TimerEvent()", 50);
}
});
}
});
}
Try to execute the calls synchronously by adding the async=false option.

Categories