I made an Ajax call using JQuery and appended (using div.append()) the returned information to a div. This Ajax call was called when clicking on another div on the page. But even after a hard refresh in multiple browsers, the appended information from the previous call stays there, furthermore some of the links in the div it was appended to don't work. I also tried clearing the cache on both the browsers and the server but it didn't work(and found out that they don't store cache on the server).
If it means anything at all, here is the code I used, which I have since commented out:
$("#LogoutDiv").click(function() {
$.ajax({
url: 'header.php',
type: 'POST',
data: {
NumLgtRqt: 1
},
success: function(response) {
$("#HeaderContainer").append(response);
window.location.replace("index.php");
}
});
}
Thank you very much for your help!
The problem was that I put script tags in the append () function. Even though they were inside the append output and in quotations, they still registered to the html.
Related
I have my website, http://www.yokaproject.com/, i decided to clean it up, im still in the process so if you see that i have mistakes fine, im not done, but i appreciate any comments. The nav at the top displays anchor tags to click and load jquery into the div#container. My problem is that calls are being doubled each time and nesting more and more content, just click art twice in a row. Ive been at this since last Monday so any help is appreciated. Here is my function
$('.header a').on('click', ajaxLoad);
function ajaxLoad(e) {
e.preventDefault();
var url = $(this).attr("href");
var that = $(this);
that.off('click'); // remove handler
$.ajax({
url: url,
dataType: "html",
type: "GET",
cache: false
}).done(function(data){
$("#container").html(data);
});
};
If you want a better look at the html and css you can just visit my site. i plan on putting it up on github in the future once it gets larger but for now its not necessary.
you can now view complete code on my website
that.on('click', ajaxLoad); // add handler back after ajax
This line of code re-attaches the click handler every time an ajax response comes. And every time you click that you create an ajax request.
Your mistake is:
in always function, you are again calling the ajaxLoad function in callback! So it is calling multiple times. Please remove that line from you code.
I have a $.ajax() call that does some server-side updates. After it's finished (in the "success" function), I call location.reload(true) to refresh the page. I do want the "true" there because I do want the new changes to appear, as opposed to getting the cached version of the page that doesn't have them. This all works nicely in FF (27.0.1). However, it is NOT working in IE 10. And, it is not working in Chrome (33.0.1750.149). (I'm working in asp.net MVC, in case that matters.)
In fact, the entire ajax call is not made (ie: the updates don't even happen on the server). When I comment out the line, the ajax call works perfectly, but obviously no reload.
I tried all the following options in IE 10. Some reload the page, just the cached version. Some break the entire ajax call.
window.location.reload(true); --> breaks ajax call
window.location.reload(); --> breaks ajax call
window.location.href = window.location.href --> works, but cached version is reloaded
Any other ideas? I'm even open to doing a full ajax/jquery redirect to the page?
Here's the ajax function:
function ExecuteFlagAssign() {
.....//some code here...not important....//
$.ajax({
type: 'POST',
url: '/Services/poAJAX.asmx/SetPOInfo',
data: "{inPOCombinedIDList: \'" + masterItemIDList + "\', inParameters: \'" + JSON.stringify(paramObj) + "\'}",
dataType: "json",
contentType: "application/json; charset=utf-8;",
success: UpdateCompleteFlagAssign(callFrom),
error: UpdateErrorFlagAssign
});
}
function UpdateCompleteFlagAssign(callFrom) {
if (callFrom == "po_detail" || callFrom == "so_detail" || callFrom == "so_detail_top") {
window.location.reload(true);
}
}
Just to add one more point (don't think it's important, but who knows): the button that calls the javascript is on a popup. However, it's not a real modal popup. It's actually just a hidden div that gets a high z-index (so it appears) when it's requested.
This javascript code is all on the main page (not the partial view that has the popup display).
So, when I comment out the window.location.reload(true) line, it all works, ajax call fires, updates are made, etc. Just no reload. When I DON'T comment out the line, page DOES reload, but ajax call is not fired/updates don't occur. (no error in developers tools in IE)
Any ideas? I'm really baffled. I'm open to work-arounds here.....
(I know one work-around is to make this a full postback to the server, instead of an ajax call that then refreshes the page. But, that's a decent amount of work. And, there are some pages that call this function that DON'T require a refresh...so it's kinda nice to just use the same ajax call in all cases.)
I really appreciate anyone's time & help on this!!!
I'm currently in the midst of creating a generator which echoes a random line from a .txt file. All is well and good however I need to have this certain part of the page which echoes the random line refresh when a button is clicked. I've tried multiple methods to no avail and I'm running out of ideas - I'm still quite new to JavaScript/AJAX and have no idea on how to go about it. Any help would be brilliant, thanks!
Use Jquery Ajax to get contents from the file and display the contents into a div
$.ajax({
type: "GET",
url: "yourfilename.txt"
}).done(function( msg ) {
$("#YOURDIVID").html(msg.d);
});
Bind click event of your button
$(function(){
$("#YOURBUTTONID").on("click",function(){
//do your work
});
});
Refreshing logic can be wrapped into a function and called on click of button OR you can use javascript settimeout method.
I have an issue on a website where a page content (results) are updated via AJAX. Contained within this AJAX returned content is a script tag which renders the LinkedIN "share" button.
When the page first loads with the initial resultset the layout looks like this:
Each of these buttons is within a left-floated div, and the HTML looks like this in Chrome developer tools:
As you can see the script tag is appearing where it is supposed to be, in the div, and the dynamically generated span containing the button is just above.
Now, when i append more results via an AJAX request, things go a bit haywire, and look like this:
As you can see the LinkedIN button is way out of place, and the reason is apparent when looking at the HTML in developer tools:
The script tag is not within the div where it appears in the code file, instead appearing after the closing tr tag - and the span with the button is just above.
So, why is this, and more importantly what can be done to ensure that the script tag is where it belongs so that the layout is correct?
FYI - At the foot of the body is javascript which loads the LinkedIn .js file and after the AJAX request for more results completes there is an invocation of the LinkedIn .parse() method which is supposed to parse the full document and render the buttons.
EDIT
The application is built using ASP.NET MVC and the response returned uses the same .ascx control to format the results as the initial page load does.
EDIT - AJAX request used to retrieve extra data
function LoadMore(uri, last, loader, end)
{
isLoading = true;
$(loader).show();
$.post(uri, function(data)
{
if (data != "")
{
$(last).after(data);
isLoading = false;
// re-do social media share initialisation on the new AJAX-added content
gapi.plusone.go('container');
twttr.widgets.load();
FB.XFBML.parse();
IN.parse(document.body);
}
else
{
$(end).show();;
}
$(loader).hide();
});
}
EDIT
The actual HTML returned from the server is correct. Viewing the source shows the script tag in the correct location, but viewing the page in Chrome developer tools, as shown in the images above, shows the script in the wrong place in the DOM. This occurs in both IE9 and Chrome.
Are you building the html dynamically ? Maybe it has something to do with misconfigured callbacks. If you are using $.ajax({...}), make sure that the next iteration is specified into the "success:" property to prevent unordered render.
Use ajax call like this
$.ajax({ url: 'url',
type: 'POST',
data: json,
dataType: 'json',
contentType: 'text/html',
success: function (data) {
//you response will be data
}
});
I'm trying to replace all the HTML (including the HTML tags) with another page. What I'm trying to do is having a website acting as an app even when navigating the another page.
Here is the code :
(function($) {
Drupal.behaviors.loadingPage = {
attach: function(context,settings) {
$('a').click(function(event) {
event.preventDefault();
// Create the loading icon
// ...
$.ajax({
url: $(this).attr('href'),
success: function(data) {
$('html').replaceWith(data);
}
});
});
}
};
})(jQuery);
I've tried several things. replaceWith() causes a jQuery error in jquery.js after deleting the HTML tag, I guess it is because it can't find the parent anymore to add the replacement.
The best result I got was with document.write(data). The problem is, the javascript code on the loaded page is not executed.
Anyone got a better idea ?
A better idea? Yeah, just load the new page normally by setting window.location instead of using AJAX. Or submit a form.
Otherwise, if you want to load something to replace all of the visible content of the current page but keep the current page's script going, put all the visible content in a frame sized to fill the browser window - which, again, you wouldn't populate using AJAX.
(I like AJAX, but I don't see why you'd use it to replace a whole page.)