I am trying to run a function on page load but its not working. I've added it in every place I can think of and the ONLY thing that works is:
$("html").mousemove(function(event) {
$('#project_thumbs_container').masonry('reload');
});
I've tried delays but I have resorted to the hacky above method :(
Does anyone have any suggestions as to why my function won't run?
UPDATE:
I am using masonry for jquery. My problem is when I load a page that uses masonry with ajax, it shows them in a single column. $('#project_thumbs_container').masonry('reload'); resets it properly, but it only works using the above mousemove method.
It sounds like you have one of two problems:
1) Malformed HTML which is causing an error, which isn't allowing the code to parse correctly when using the document onReady syntax: $(function() { ... });
2) Masonry might be loading asynchronously, which means that the "onReady" callback might not be the one that you want to be using. Your Ajax call would look more like this:
$('body').load('index.html', function() {
$('#project_thumbs_container').masonry();
});
Unless someone has a better answer, I just put the code in my fadeIn(); snippet after ajax call is complete:
this.fadeIn('slow', function() {
$('#project_thumbs_container').masonry('reload');
});
Seems to work.
Try something like this.
$(document).ready(function(){
$('#project_thumbs_container').masonry('reload');
});
You can put this code anywhere on the page and it should work, as long as the dependencies have already been loaded.
Just put your function in this
$(document).ready(function() {
// Handler for .ready() called.
// your function
});
when your page load the function will execute
Related
This is in reference to http://jsfiddle.net/DLy6j/
var echoHTML = '<img src="URL-TO-MY-IMAGE.JPG"/>';
$.ajax({
type: 'post',
url: '/echo/html/',
data: {
html: echoHTML,
delay: 2
},
beforeSend: function () {
$('#slider0-4').html('Loading...');
},
success: function (markup) {
$('#slider0-4').html(markup);
$('#slider0-4 img').on('load', function () {
//$(this).after('<div>Image loaded</div>');
alert('Loaded');
});
}
});
(jQuery wait till AJAX page is fully loaded).
This is my first attempt trying to use $.ajax
I cannot get my image to load. I have changed the echoHTML to the image-URL on my server, AND have tried uploading my html on there thinking it might not work offline, but to no avail.
My guess is that somethings wrong here "url: '/echo/html/',". Have tried using my image in the JSFiddle above there and it loads just fine.
Somebody show me the correct way to do this?
I think you've just been a little mislead by that jsfiddle example.
When the url '/echo/html' is being passed in, it is sending a request to that url, which handles the data that you pass through, and then passes something back to the success function. jsFiddle allows you to simulate ajax requests because they have an Echo API which has these pages built.. but when you call it, it is trying to call http://www.bilalbinsaeed.com/echo/html/, which does not exist.. which is throwing an error, which means the success function will not run properly.
You will need to create another file which handles your ajax request. I would recommend doing a little more research into what AJAX is, and how it works.
It loads an image for me. It is a little unclear what you are asking, but it seems like you are getting hung up on getting it to load from JSFiddle to your site. Don't try to do that. Cross-Origin Resource Sharing won't work on JSFiddle without changing the headers on your site.
I load a div dynamically with jquery .load() function. I am calling a jsp in which I I performing an operation on window.onload = function() { //some operation} and $(window).unload(function(){//some operation; anotherFunction();})
Now, the problem is that these operations are not being executed, but the call to anotherFunction() is made! I simply put an alert() before the function call and the alert won't fire, whereas the alert that I put inside anotherfunction() will be fired.
I have some javascript code that I have written in $(document).ready(function(){//some javascript code;}). None of my operation in the ready() function gets done when I load the jsp using .load().
all the above operations are working fine when I use <jsp:include page="myPage.jsp"></jsp:include>
does anyone have any idea why .load() would work this way?
My experience with JSP isn't great but I know a fair bit about Javascript and PHP so I assume this will work on a similar principle.
Are you using an onClick listener so for example $("SELECTOR").click(function(){
If so then I think try this for example instead:
$(document).on('click', "SELECTOR", function() {
I'm looking for a way to load a part of an external page (possibly selected by an id in the external page) into a div. Something similar to Ajax.Updater, but with the option of specifying an id to look for in the external page.
Does anything like this exist in prototype. I've been googling for examples without luck. If I can't find it soon I'll have to do some "gymnastics" with Ajax.Request and some function tied to onSuccess.
You could do something like this, though it is by no means an elegant solution.
new Ajax.Updater("container", 'www.babes.com', {
onSuccess: function() {
$("container").update( $('idOfSomeLoadedElement') );
}
});
I don't think there is an actual elegant way of doing this purely in js. Ideally, you'd make your AJAX request only for what you need. You might be able to do some server-side stuff to lop out what you don't need (basically, offload the onsuccess functionality above to the server).
Instead of AJAX you might get by with an iframe.
// dollar function calls Element.extend
var iframe = $(document.createElement('iframe'));
// control how and what it loads
iframe.addEventListener('onLoad', function() {
$('container').update(iframe.contentDocument.select('#someID').first());
});
iframe.setAttribute('src', 'http://URL');
// add it as invisible, content isn't loaded until then
iframe.setAttribute('hidden', true);
document.body.appendChild(iframe);
From a minimal test it's clear that you'll have to be as concious about cross-origin policies as any AJAX method, that is, it's a PITA.
I'm in the process of converting my web app to a fully AJAX architecture.
I have my master page that is initially loaded and a div container that is loaded with dynamic content.
I created a few jQuery plugins that I apply to certain elements in order to extend their functionality. I'd normally call the functions as follows during each page load:
$(document).ready(function () {
// Enable fancy AJAX search
$(".entity-search-table").EntitySearch();
});
This would find the appropriate div(s) and call the plugin to enable the necessary functionality.
In an AJAX environment I can't just apply the plugin during the page load since elements will be added and removed dynamically.
I'd like to do something like this:
$(document).ready(function () {
// Enable fancy AJAX search
$(".entity-search-table").live("load", function () {
$(this).EntitySearch();
});
});
Question: Is there any way that I can trigger an event when a <div> or other element that matches a selector is added to the DOM?
It seems incredibly wasteful to activate the plug-in every time an AJAX request completes. The plug-in only needs to be applied to the element once when it is first added to the DOM.
Thanks for any help!
Yes - take a look at liveQuery. Example:
$('.entity-search-table').livequery(function(){
$(this).EntitySearch();
});
It seems incredibly wasteful to activate the plug-in every time an AJAX request completes. The plug-in only needs to be applied to the element once when it is first added to the DOM.
You can get the best of both worlds here, for example:
$("#something").load("url", function() {
$(".entity-search-table", this).EntitySearch();
});
This way it's only applying the plugin to the .entity-search-table elements you just loaded, since we specified a context to $(selector, context) to limit it.
The DOM 2 MutationEvent is what you really want, but unfortunately it isn't supported by IE. You'll need to either use live()/ delegate() binding in the plug-in, or (as I did when I had to work around this) use callbacks from your AJAX loaders indicating the scope of what has changed.
Use the live binding in your plugin code directly
jQuery.fn.EntitySearch = function() {
this.live(..., function(){ your plugin code });
return this;
}
Specifically I'm looking to bind lightbox to a specific element. Normally I would just do this: $('a.lightbox').lightBox(); but that isn't working since I'm doing some loading with AJAX. Looking at the jQuery API I found .bind() and .live() but I'm not getting anything when I do $('a.lightbox').bind('lightBox') after the AJAX .load() call.
What am I missing?
You need to add a callback function that handles that.
$("#div").load(url, {}, function(){ $('a.lightbox').lightBox(); });
Bind isn't going to help you, as the event isn't getting an event fired on it.
Another way would be to bind to an element higher up in the dom and check the target type. Such as:
$('#div').bind('click', function (event) {
target = $(event.target);
if (target.hasClass('lightbox')) {
// do stuff here
}
});
Just don't go too far up or you'll be catching way too many clicks.