Alternative to window.load and document.ready - javascript

My Issue I have an issue with a webpage where 1 in 100 page loads gives me an "Undefined is not defined" error. This error is caused by a jquery plugin being initialized before it is actually loaded. My current fix is to use window.load which works great but can take anywhere from 1 second to infinity depending on however long shareaholic decides to load (and it's faster than addthis).
My Question is there some way to initialize a plugin only after it has been loaded, like a Success event or something for including a plugin? I haven't been able to find anything.
Hopefully this will be useful to someone else who has run across this as well.

you can try this:
$.ajax({
url: pluginUrl,
dataType: "script",
success: initializePlugin
});
or just $.getScript()

It sounds like you need to wait for a certain event that is not tied to the DOM, but is tied to the way your code executes. I find jQuery's ability to fire custom events excellent for this purpose.
e.g:
//start of script - do some asynchronous work
$.ajax({})
.done(function() {
//ready to initialize the plugin - trigger an event
$(document).trigger('initializeMyPlugin');
});
//listen for the event and initialize your plugin when it is fired
$(document)
.on('initializeMyPlugin',function() {
// initialization code
});

Related

Jquery Onclick functionality not working for div, as specific loaded after sometime

For <div class="editdiv">Test</div>. Jquery click functionality is added in document.ready function . But editdiv loading in page dynamically with delay.
So when I click on the div. Function is not calling. By using timeout function is working fine.
I need a different approach to solve this functionality.
If your .editdiv is loaded dynamically after your js loading so your click event can't detect it and it will not work, instead you should use event delegation on() to deal with fresh DOM :
$('body').on('click', '.editdiv', function(){
//Your click event code
})
If you want to avoid setTimeout you could use delay with queue callback method :
$('div.scroll-area-blue')
.delay(5000)
.queue(function() {
$(this).enscroll({
showOnHover: false,
verticalScrolling: true,
verticalTrackClass: 'vertical-track-blue',
verticalHandleClass: 'vertical-handle-blue'
});
});
If you will use setTimeout better to use it like :
setTimeout( enscrollDiv, 5000);
function enscrollDiv(){
$('div.scroll-area-blue').enscroll({
showOnHover: false,
verticalScrolling: true,
verticalTrackClass: 'vertical-track-blue',
verticalHandleClass: 'vertical-handle-blue'
});
}
Hope this helps.
It is really difficult to understand whats going wrong from your question. What I guess is you are loading a specific div using Ajax or similar technologies - meaning the div is not available initially.
The way jQuery works is that, it only binds the event to the elements only available at the time the part is executed.
If a <div id='myDiv'></div> is not present when $('#myDiv').click(function(){}) is called, it won't work.
One workaround is to do it like this:
$('body').on('click','#myDiv',function(){});
This registers the click on body and then checks if the clicked element is having a id 'myDiv' or not. We can expect the <body></body> to be present always. So the problem we had with previous code won't happen here.
maybe you're loading the javascript codes before the html elements(tags) are loaded.
try adding the script which includes "document.ready()" before the end tag of the body when all html tags have already finished loading.
I'm hitting targets in the dark. Hope it works for you. It's difficult to generate any solution without analyzing the problematic code......

Run action on load and stay on same page

I am currently trying to run an action in my grails controller upon a page load in my application that will start a thread an continue with a task. I still have yet been able to successfully implement this in. This is my code:
$(document).ready(function(){
var $form = $("#background_thread");
$form.submit(function(e){
e.preventDefault();
$.post($(this).attr("background"), $(this).serialize(), function(data){
alert("should work" + data)
});
return false;
});
});
I cannot for the life of me figure out why it's not working. Is there some simple syntax I'm overlooking or a different way I should be doing this?
Update:
My form id is #background_thread and I am trying to do it asynchronously so that the page will still stay the same and my action will be run.
My script is run but fails on $form.submit(function(e){ and will not pass through.
You need to prevent the default behaviour on the event that has been generated.
$form.submit(function(e){
e.preventDefault();
// your code
}
Update:
You will certainly need to add the above regardless, once you get the overall script working. Also, please add your markup to the question. A few basic questions to make sure:
Is #background_thread the id of your form?
In your network tab in Chrome Inspector (or similar) is the request being fired off?
Is the markup being delivered asynchronously, as if it is, you will need to use .on to attach the event permanently, rather than just a basic selector?
Update 2:
Your form is being delivered asynchronously itself, therefore your event attaqchement must change to:
$(document).ready(function(){
$("body").on("submit", "#background_thread", function(e){
e.preventDefault();
$.post($(this).attr("background"), $(this).serialize(), function(data){
alert("should work" + data)
});
return false;
});
});
So, to explain, your event attachment was happening during document ready. Document ready fires, but the form hasn't been delivered to the DOM yet, so it doesn't have an attachment to it. Therefore, you use on() to permanently attach that event to that element for the lifetime of the entire page's rendering to the browser.
N.B. I attached it to body, to begin listening for submit at that point, in practice you would not do this for many reasons, you would attach it to the outermost point of AJAX replacement for the form, essentially, the nearest parent to the form that will be known on initial page load.
I hope that this has been of some use and good luck with your application.

I cannot manipulate/select divs loaded via Ajax call?

I've a simple application, and I decided to use ajax to load levels for simplicity / whatever reason (maybe to learn a bit).
But I'm stuck...
$.ajax({
url: "actions.php",
get: "GET",
data: "show_level=" + 1,
cache: false,
success: function (views){
$(".slides_container").append(views);
}
});
The problem is, views appended to my container is not selectable anymore, basically all jquery functions I had stopped working alltogether.
What is happening?
If you are using bindings like $(".target-element").click(function(){ do something here}); they are only valid for elements already in the DOM when the binding happens.
You would need to use $("#element-already-in-dom").on("click", ".target-element", function(){do something here});
You are a victim of non event bubbling.
When you bind an event to an element you typically do this on window load. If an element is added to the DOM after window load, the event will not be bound to it, despite it meeting all other conditions as laid out by your event handler.
Instead, you must use delegation, this means that events are bound to non changing elements on the page and then bubble up to the correct elements.
$('.appended-view').click(function(event) { ... }
Will not work
$('body').on('click', '.appended-view', function(event) { ... }
Will work

Possible? When a function in a javascript file is triggered, it lets a function in a jQuery file know?

Could I create a function or custom event in a javascript file called "justDidStuff" and then make .live() watch for that being triggered in another jQuery file?
I know this sounds really complicated, but I can't think of another way to do this.
I have new content coming in from the javascript file which is the only infinite scroller known to work for Tumblr.
I have a bunch of styling happening on the layout of the incoming posts (http://syndex.me) which i'm obviously going to make with jQuery. Hence i'm in a situation where I
A) have to use .live() (posts are dynamically loaded) and
B) can't trigger the changes in a straightforward manner
In a previous question related to this DOMNodeInserted was reluctantly suggested. This just listens for when something has been changed, but it slows down pages such as this and has been depreciated.
EDIT
http://marckremers.com/syndex/js/jquery.infinitescrollfortumblr.js
Is the javascript file (NB it's a monster)
http://marckremers.com/syndex/js/jquery.syndex.js
Is my Styling and Site behaviour jQuery file.
You can use bind and trigger.
var justDidStuff = function(){
//do some stuff
}
$('something').bind('justDidStuff',justDidStuff); // binds to all elements,
// now and in the future.
//call it:
$('something').trigger('justDidStuff');
I think you want to use trigger() and bind
Something like this:
jQuery("body").bind("myEvent", function( data ){ alert("triggered"); } );
and in your function you can notify the page
jQuery("body").trigger("myEvent", { "foo", "bar" });
OK I have solved the problem. It's so easy i can't believe it. You live and learn. All I had to do was place jquery code inline within the javascript file by doing this:
jQuery(function ($) {//doStuff in a javascript file as normal, OMG}

How do I find if an element has been loaded using JQuery

I am loading data into the flexigrid. I am trying to use JQuery selectors to make the rows clickable, but I am unable to do so. I want to know if the element has been fully loaded, how do I do that?
I want to do something like if(element.load == true){//do this}. I am not sure of how to check that out. Could anybody help me with this.
Ok, so I already have this div, and am binding a flexigrid to that div. I want to know if the flexigrid has been bound.
$("#GridLoad").flexigrid();
I want to know if the flexigrid has been bound, after that, I need to run a piece of code.
Using a live() on div Gridload would always be true as it is already there. :(
I want to know if the element has been fully loaded?
There appears to be an onSuccess callback.
$("#GridLoad").flexigrid({
'onSuccess': function() {
// Do this.
}
});
Otherwise, if the things you are binding are being lost when the table updates, attach the events via on() or simply capture them at the persistent ancestor element and examine event.target.
You can use $(element).live('click', function () { // do something });
so that if it later loads it'll have the appropriate event binding.
you could use the callback function of jquery's load method.
like so :
$('#result').load('ajax/test.html', function() {
alert('Load was performed.');
});
Even if you are not using 'load' method, almost any method in jquery supports callbacks which happen after the functionality has been completed.
For example, ajax() has success and failure callbacks, animations has callbacks, etc.

Categories