I need to change the directory in the URL each time I'm loading a new page with AJAX. Right now it's working in Chrome & FF but not in IE.
$('a[data-link="inner"]').live('click', function (e) {
pageToLoad = $(this).attr('href');
loadContent(pageToLoad);
window.history.pushState("","" , pageToLoad);
e.preventDefault();
}
var loadContent = function (url) {
$('.content').load(url + '.html');
};
Does anyone know how to get this working in IE 9,8,7 ?
Related
Using AngularJS:
I'm displaying a list of images with ng-repeat. When I reset and rebuild the model (get new data from backend), I'm displaying the same images as before.
I understand these are new elements created by ng-repeat, but the image srcs are the same. Unlike IE or firefox, Chrome tries and gets a 403 for those same images and then renders them.
That causes a flicker. On IE and Firefox the images come from cache. No hit on the server to check for image changes. No flicker.
How can I prevent that? Should the images be served with some cache header? I tried loading the images to a dataurl, but then I hit the CORS problem, and would have to proxy those images on the backend to get them.
Possibly related: Chrome sometimes reloads image after jQuery .appendTo, recieves 304
Thanks
Some fix would be related to preload the images in javascript and after that display them
function loadImages(arrayOfImgs) {
var imageNumber=0;
$(arrayOfImgs).each(function(){
(new Image()).src = this;
if(arrayOfImgs.length == imageNumber) $scope.showImages = true;
else imageNumber++;
});
}
// Usage:
loadImages([
'img1.jpg',
'img2.jpg'
]);
if you are retriving images from backend use it at success promise
i hope it helps you
Check that example retrinving images from backend:
$scope.loading = true;
getImages().then(function (response) {
var objects= response.results;
var listImages = [];
angular.forEach(objects, function (item) {
listImages.push(item.UrlImage);
});
function preload(arrayOfImages) {
var numImages = 0;
$(arrayOfImages).each(function () {
var img = (new Image());
img.src = this;
$(img).load(function () {
numImages++;
if (numImages == arrayOfImages.length){
$scope.loading = false;
}
});
});
}
preload(listImages);
});
i have problem with refreshing content in wrapper after it is loaded by ajax.
When i check with firebug - XHR is showing request and i can see elements loaded but it isn't showing on page.
This is what i am using for pullDown function to get ajax content
function pullDownAction () {
setTimeout(function () {
var el, li, i;
el = document.getElementById('thelist');
var http = new XMLHttpRequest();
var url = window.location;
http.open("GET",url,true);
http.send();
myScroll.destroy();
myScroll = null;
loaded();
}, 1000);
}
It looks like as content is stuck between showing on webpage and ajax request.
Any idea?
myScroll.refresh() (instead of .destroy() and recalling "loaded()") should do the trick!
If you're using IScroll4 you can try to use the checkDOMChanges:true option of iscroll.
If it still won't work - it could be a CSS issue caused by the scroll-wrapper (#scroller) not expanding with its content. (float,position:absolute; or something like that)
EDIT: it seems to me as you're not handling a responseText of the request at all!
According to this example you need an event handler for the onreadystatechange event:
http.open("GET",url,true);
http.onreadystatechange = function () {
if (http.readyState == 4) {
alert(http.responseText); //handle this response! (i.e. writing to an element's innerHTML)
}
};
http.send(null);
I have a Wordpress blog at http://themes.visualise.ca/visualise and when a user clicks on a thumbnail the post is loaded with AJAX (using the jQuery address plugin) . I would like the URL to change at the same time to i.e. for the second thumbnail the url should change to http://themes.visualise.ca/visualise/portfolio/samuel but with the following code it changes to http://themes.visualise.ca/visualise/visualise/portfolio/samuel.
1) So my question is there a way to make the jQuery address replace the current pathname by the destination url's pathname instead of simply adding it at the end? I would like the solution to work also with http://themes.visualise.ca/ to http://themes.visualise.ca/visualise/portfolio/samuel because the blog might not be hosting in a folder like it is right now.
2) Or maybe there is another way to achieve this?
Here is the jQuery code:
$('.ajaxed,li.menu-item-object-page a').live('click', function(event) {
var link = $(this).attr('href');
var rewritepath = $(this)[0].pathname;
$("html,body").animate({scrollTop: 0}, 300);
$('#content,.plus').stop().fadeOut('slow', function(){
$('#board-wrapper').slideDown('slow');
$('#board').fadeOut('slow', function(){
$('#board').stop().load(link, function(){
$('#board').delay(1000).fadeIn('slow', function(){
var board_h2 = $('#board').height();
$('#board-wrapper').css('height', board_h2 + 'px');
});
});
});
});
$.address.crawlable(true).path(rewritepath);
return false;
});
Many thanks for your time and help.
What I did is that I removed the root site url from link url and it works.
$('.ajaxed,li.menu-item-object-page a').live('click', function(event) {
var link = $(this).attr('href');
var toRemove = MySettings.url;
var url_pathname = MySettings.url[0].pathname;
var rewritepath = link.replace(toRemove,'');
...
});
I am trying to use colorbox on a page where i have three links each of which have onclick event which call an ajax page and response text is shown in the necessary divs. everything is working fine except colorbox links. After i call the content through ajax the links are not working to appear the colorbox. Here is my code to call the colorbox which is when page is loaded working.
<p>
$(document).ready(
function()
{
$(".editchecklist").colorbox({width:"50%", height:"35%", iframe:true, onClosed:function(){ location.reload(true); } });
}
);
I tried to look for this problem but everything is related to jQuery ajax call not simple ajax call. The are advising to use .live() or rebind methods which i have no idea how and where should i use them.
here is my ajax call code:
function getxmlhttp()
{
var xmlHttp = false;
if (window.XMLHttpRequest)
{
// If IE7, Mozilla, Safari, etc: Use native object
var xmlHttp = new XMLHttpRequest();
}else
{
if (window.ActiveXObject)
{
// ...otherwise, use the ActiveX control for IE5.x and IE6
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function process_ajax2(phpPage, objID, getOrPost,clickedLink)
{
xmlhttp = getxmlhttp();
var obj = document.getElementById(objID);
if(getOrPost == "get")
{
xmlhttp.open("GET",phpPage);
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById('change_'+clickedLink).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}
}
Please tell me how would i solve this problem?
thanking you.
if I understand your question correctly, you've loaded content into the page via ajax after pageload.
The javascript that you've got is only going to work for data that is there on page load, so what you'd need to do is use .live() which will work on elements loaded at page load and after.
(note: I don't know what page you're trying to call here - so I am assuming it is in the link href)
Something like this should work
$(function(){
$(".editchecklist").live('click',function(e){
e.preventDefault();
$.colorbox({
width:"50%",
href:$(this).attr('href'),
height:"35%",
iframe:true,
onClosed:function(){
location.reload(true);
}
});
});
});
more on jquery live http://api.jquery.com/live/
Preface: I am sure this is incredibly simple, but I have searched this site & the jQuery site and can't figure out the right search term to get an answer - please excuse my ignorance!
I am adding additional form fields using jQuery's ajax function and need to then apply additional ajax functions to those fields but can't seem to get jQuery to monitor these on the fly form fields.
How can I get jQuery to use these new fields?
$(document).ready(function() {
$('#formField').hide();
$('.lnk').click(function() {
var t = this.id;
$('#formField').show(400);
$('#form').load('loader.php?val=' + t);
});
//This works fine if the field is already present
var name = $('#name');
var email = $('#email');
$('#uid').keyup(function () {
var t = this;
if (this.value != this.lastValue) {
if (this.timer) clearTimeout(this.timer);
this.timer = setTimeout(function () {
$.ajax({
url: 'loader.php',
data: 'action=getUser&uid=' + t.value,
type: 'get',
success: function (j) {
va = j.split("|");
displayname = va[1];
mail = va[2];
name.val(displayname);
email.val(mail);
}
});
}, 200);
this.lastValue = this.value;
}
});
});
So if the is present in the basic html page the function works, but if it arrives by the $.load function it doesn't - presumably because $(document).ready has already started.
I did try:
$(document).ready(function() {
$('#formField').hide();
$('.lnk').click(function() {
var t = this.id;
$('#formField').show(400);
$('#form').load('loader.php?val=' + t);
prepUid();
});
});
function prepUid(){
var name = $('#name');
var email = $('#email');
$('#uid').keyup(function () {
snip...........
But it didn't seem to work...
I think you are close. You need to add your keyup handler once the .load call is complete. Try changing this...
$('#form').load('loader.php?val=' + t);
prepUid();
To this...
$('#form').load('loader.php?val=' + t, null, prepUid);
What you are looking for is the jquery live function.
Attach a handler to the event for all elements which match the current selector, now or in the future
You can do something like this:
$('.clickme').live('click', function() {// Live handler called.});
and then add something using the DOM
$('body').append('<div class="clickme">Another target</div>');
When you click the div added above it will trigger the click handler as you expect with statically loaded dom nodes.
You can read more here: http://api.jquery.com/live/