JQUERY LOAD unable to load same html again - javascript

I have created an html page which renders differently depending on the parameter 'resourceType'.
ResourceType can be IO/CPU/STORAGE etc . I have adopted this design for reusability as we have same layout for all the charts except that the inputs to chart differs based on resourceType.
<script>
require(['../js/viewmodel/db-resource-analyze']);
</script>
<div class="oj-row" id="pageContent">
<div class="topchartRegionDiv">
.....
</div>
</div>
Now I am loading this page from my HOME page which have vertical tabs (like a left side menu)
On click of a tab ,I load my page dynamically using jquery load
window.paramObj =
{
resType: "cpu"
};
$('#cpuContent').load("db-analytics-resources-home.html", function(responseTxt, statusTxt, xhr) {
if (statusTxt == "success")
alert("External content loaded successfully!");
if (statusTxt == "error")
alert("Error: " + xhr.status + ": " + xhr.statusText);
});
The next time user click on IO tab ...i do same operation but with different parameter
window.paramObj =
{
resType: "io"
};
$('#ioContent').load("db-analytics-resources-home.html", function(responseTxt, statusTxt, xhr) {
if (statusTxt == "success")
alert("External content loaded successfully!");
if (statusTxt == "error")
alert("Error: " + xhr.status + ": " + xhr.statusText);
});
The first load happens without any issues , but subsequent load do not happen and page comes as blank.
I am suspecting the page is cached and not loaded. How to enforce reload skipping cache using JQUERY load. Any pointers ?

Try this Stop jQuery .load response from being cached
$.ajaxSetup ({
// Disable caching of AJAX responses
cache: false
});
As the guy mentions if the convenience functions like .load, .loadJSON, etc don't do what you need, use the .ajax function and you can find a lot of configuration options in there that will likely do what you need

you can try this methode. this will prevent all caching
$('#ioContent').load("db-analytics-resources-home.html?"+Math.random(), function(){})

Many Thanks for all response . I could get this resolved by passing JS script as parameter to JQUERY load callback and invoking it there on successfully load of html doc .
smthing like this :
$('#' + resType + 'Content').load(url, function(responseTxt, statusTxt, xhr) {
if (statusTxt == "success")
{
alert("External content loaded successfully!...calling JS");
new self.dbResourceAnalyze();
}
if (statusTxt == "error")
alert("Error: " + xhr.status + ": " + xhr.statusText);
});

Related

AJAX returns status code 0? CORS allowed. Is this AJAX implemented incorrectly?

I have a browser action I've implemented it as an AddOn.
I'm testing my construction of the AddOn within my domain
between two machines as server and a client.
I'm stuck at AJAX failing with status code 0.
I set up Apache to enable CORS to make sure that the code is behaving as expected.
I added this line to the apache config and enabled headers:
Header set Access-Control-Allow-Origin "*"
The javascript code: UPDATED
function sendData(data){
var requestdata = 'data1=one&data2=two&data3=three';
var xhr = new XMLHttpRequest();
xhr.open("POST","http://server/test/test.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.onloadstart = function(){
console.log("Onload status: " + xhr.status);
}
xhr.onerror = function(ev) {
console.log("OnError Status: " + xhr.status + ", Loaded: " + ev.loaded + ", Total: " + ev.total);
}
xhr.onreadystatechange = function() {
console.log(xhr.status);
if (xhr.status !== 200){
console.log("Failure :( + Status: " + xhr.status);
//console.log(requestdata);
console.log("Ready State: " + xhr.readyState + ", Status: " + xhr.status +", Response Text: " + xhr.responseText);
} else {
alert("Success!");
}
}
xhr.send(requestdata);
}
test.php
<?php
require '../lib/Database.php';
error_reporting(E_ALL);
$db = new Database('test');
var_dump($db);
json_encode($_POST);
?>
Have I done this AJAX implementation correctly?
If I have, and I have made adjustments for CORS, why is it failing with status code 0?
UPDATE
This is an AddOn I am testing in Firefox.
From the "matches" parameter in manifest.json, navigating to the page in question retrieves data from the page using Vanilla JS on the DOM.
The collected data is held in an object.
The data object is delivered
This is a picture of what's returned in the browser:
UPDATE2
I replaced the POST url with http://httpbin.org/post to see if the data is going anywhere. Nope.

How to load the external url in div without iframe

I want to load external url in a div without using iframe/embed/object tag. I already used examples but it is not working
For example:
$("#testDiv").load("//localhost:8000/cities/Mountain%20View/521/bottle-service/new");
or
$("#testDiv").load("//www.xyz.com");
Could anyone please help me fix this issue?
Based on your comment I think you need something like this:
$('#mydiv').load('http://localhost:8000/cities/Mountain%20View/521/bottle-service/new #testDiv', function(response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
alert(msg + xhr.status + " " + xhr.statusText);
}
});
For better insight I'm linking this question with this SO post

Loading contents of PHP file with AJAX script

I'm trying to load the contents of a php file into a script using AJAX with the following code:
<button onclick="changeText3()"><img border='0' alt='More Options' src='tmpls/media/images/icons/cog.png'></button>
<script> function changeText3(){
$("#test").click(function(){
$("#test").load("file.php");
}
}
</script>
<div id='test'>test</div>
Nothing happens when I click anything. I'm brand new to AJAX and am likely missing something simple. I've tried a number of different methods I've seen and I've had no luck.
<button id="showOutput">
<img border='0' alt='More Options' src='tmpls/media/images/icons/cog.png'>
</button>
<script>
$(document).ready(function(){
$("#showOutput").click(function(){
$("#test").load("file.php");
});
});
</script>
<div id='test'>test</div>
Here we can see that as you tried JQuery so I removed JS function and catch JQuery event.
You should try to specify file.php's whole address in your ajax call like this -
$("#test").click(function(){
$("#test").load('url to home.php');
});
If that won't solve the case, you should log a bit more of your ajax response and you'll be able to easily observe and solve it by yourself, like this:
$("#test").load("home.php", function(response, status, xhr) {
if (status == "error") {
console.log(msg + xhr.status + " " + xhr.statusText);
}
});
Check your console for errors.
Corrected your code. You don't need a Event listener, cause you already use onclick="changeText3()"
function changeText3(){
$("#test").load("test.php", function(response, status, xhr) {
if (status == "error") {
console.log(msg + xhr.status + " " + xhr.statusText);
}
});
}

Javascript-invoked php content not displaying after load

Thanks to the help I received here, I have a piece of javascript that toggles the visibility of a div and loads content from a php file into that toggled div:
function compare_toggle_visibility(id, line, collection)
{
var e = document.getElementById(id);
e.style.display = ((e.style.display!='none') ? 'none' : 'block');
$(e).load('http:/www.minorworksoflydgate.net/XML/XQuery/test_command_line.php'+ '?collection=' + collection + '&zone=' + id + '&line=' + line, function(responseTxt, statusTxt, xhr){
if(statusTxt == "success")
alert("External content loaded successfully!");
if(statusTxt == "error")
alert("Error: " + xhr.status + ": " + xhr.statusText);
});
}
This works great with the small php files I'm using for testing, but the problem I'm running into is that my actual production file takes some time to load. So the div is toggled and exists before the code can be loaded into it. I get the alert message I put in as a test indicating that the external content loaded, but I see nothing in the div itself.
To try to fix this, I've attempted to place the toggle after the load function, but that made no difference. I also have tried to load the results of the php call into a variable and then call the results of that variable into the div when it loaded successfully, but that does not work either.
function compare_toggle_visibility(id, line, collection)
{
var e = document.getElementById(id);
e.style.display = ((e.style.display!='none') ? 'none' : 'block');
var l = load('http:/www.minorworksoflydgate.net/XML/XQuery/test_command_line.php'+ '?collection=' + collection + '&zone=' + id + '&line=' + line, function(responseTxt, statusTxt, xhr){
if(statusTxt == "success")
$(e).html(l);
if(statusTxt == "error")
alert("Error: " + xhr.status + ": " + xhr.statusText);
});
}
I'm not sure where I'm going wrong -- I'm pretty comfortable with php and XML, but less so with javascript and especially with Ajax and Jquery.
Try this
function compare_toggle_visibility(id, line, collection){ var e = document.getElementById(id);
e.style.display = ((e.style.display!='none') ? 'none' : 'block');
$.get('http:/www.minorworksoflydgate.net/XML/XQuery/test_command_line.php'+ '?collection=' + collection + '&zone=' + id + '&line=' + line, function(responseTxt){
$(e).html(responseTxt);
});
}

Content loading with Ajax and Jquery

I would like some content to be loaded into my div on page load, but then I would like to have buttons which will load up new content, and replace the content in the DIV currently.
This is my HTML:
<a id="aboutlink" href="#">About</a>
<a id="infolink" href="#">Info</a>
<div id="contentbox">Starting content</div>
This is my Javascript:
$(document).ready(function(){
$('#aboutlink').click(function(){
$('#contentbox').load('/includes/about-info.html');
});
$('#testlink').click(function(){
$('#contentbox').load('/includes/test-info.html');
});
})
http://jsfiddle.net/spadez/GCg4V/1/
I just wondered what I have done wrong, because when I tried this on my server it didn't load up any content. I was also wondering if there is a better way to achieve something like this, because it doesn't seem like I can do any loading binding to it.
Thank you for any help or advice you can give.
The load method will only set the html of the first matched element if the status is (200 OK).. If it is something other than this, like (404 Not Found) or (403 Forbidden) , then it won't set the html..
To set it regardless of the response, try this jsFiddle I edited.
First try something like this:
$.get('/includes/test-info.html', data, function(data){alert(data);})
And then you'll be able to see exactly what is being returned.
I think its something to do with how you have specified the urls for the load.
Try something like
$(document).ready(function () {
$('#aboutlink').click(function () {
$('#contentbox').load('includes/about-info.html');
});
$('#infolink').click(function () {
$('#contentbox').load('includes/test-info.html');
});
})
without the leading "/"
Okay then run this code to check what happening out there:
<script src="http://code.jquery.com/jquery-latest.min.js"type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#aboutlink').click(function () {
$('#contentbox').load('/includes/about-info.html', function(response, status, xhr){
if (status == "error") {
var msg = "Sorry but there was an error: ";
$("#error").html(msg + xhr.status + " " + xhr.statusText);
}
});
});
$('#infolink').click(function () {
$('#contentbox').load('/includes/test-info.html', function(response, status, xhr){
if (status == "error") {
var msg = "Sorry but there was an error: ";
$("#error").html(msg + xhr.status + " " + xhr.statusText);
}
});
});
})
</script>
<a id="aboutlink" href="#">About</a>
<a id="infolink" href="#">Info</a>
<div id="contentbox">Starting content</div>
<div id="error"></div>

Categories