Handling jquery event with casperjs - javascript

I have a web page where after the dom is loaded javascript continues to run on the page and adds elements onto the page. After all the javascript is run I fire a jquery event page.loaded so that components on the page that are interested in doing something after all my javascripts are run can do so.
I am trying to automate the testing of this webpage using casperjs/phantomjs and I would like to examine elements on the page only after the jQuery page loaded event is fired. How should I go about doing this?

Look at the waitFor family functions in order to wait for something to happen in the page environment. You can either wait for some element or text to be available in the DOM, or directly add a specific jQuery listener in order to process further steps:
casper.start('test.html', function() {
this.evaluate(function() {
$(document).on('site:loaded', function() {
window.siteLoaded = true;
});
});
});
casper.waitFor(function() {
return this.evaluate(function() {
return window.siteLoaded === true;
});
});
casper.then(function() {
// process further
});
Note: this is factice pseudo code, purpose is only to picture the concept.

Related

JavaScript - Wait until DOM modification within AJAX callback has been completed

So, I have the following code:
$(document).ready(function(){
//Retrieve menu html
$.get('/modules/menu.php', function(data) {
//Load menu html
$('main#main').prepend(data);
});
//Initialize Menu
menuInit();
$('#menuToggle').click(function() {
$('#main_menu').fadeToggle();
});
});
menuInit() successfully modifies DOM elements when included in the html directly instead of using $.get(),so the intialization has no issues, however, when using ajax, the intialization of the menu starts before the DOM elements are fully loaded.
I've made a little research and .prepend() does not support callbacks, so not an option.
Surrounding menuInit() with a setTimeOut() with 100 ms works, but it will most certainly fail with slow connections, I need something more dynamic.
Just put the rest of the code inside the callback so it executes after the data has been added to the page:
$(document).ready(function(){
//Retrieve menu html
$.get('/modules/menu.php', function(data) {
//Load menu html
$('main#main').prepend(data);
//Initialize Menu
menuInit();
$('#menuToggle').click(function() {
$('#main_menu').fadeToggle();
});
});
});

jquery function include only once?

I'm building single page application with jquery. so assume I have a sidebar like this
dashboard.html
order.html
and each time i click on it I load the content via ajax. It work fine but I go back and forth btw pages I notice the script got loaded twice or more. How to solve this?
Put the scripts and HTML in separate files. Then keep track of whether you've already loaded a script, and don't load it again.
var dashboard_js_loaded = false;
$("#dashboard").click(function() {
$("#content").load("dashboard.html", function() {
if (!dashboard_js_loaded) {
$.getScript("dashboard.js", function() {
dashboard_js_loaded = true;
});
}
});
});
Maybe a library like require.js can be used to manage this more generally. Or you can just write a simple function that keeps track of which JS files have been loaded in an object.

Javascript not working in loaded DIV using .load()

I load a part of a page inside a Div on my frontpage using .load. My problem is that the loaded content have a set if buttons with javascript inside them, and they wont execute and it goes to the systemä Im usings errorpage.
The buttons have the same script but different ids, name and classes and looks like this:
Cancel
I have tried multiple ways to load the content without any luck. If I load the whole page it works aside from all the other problems that gives.
Example of scripts I have tried:
Script 1:
$(".dcjqg-accordion ul.sub-menu").load("/m4n?seid=etailer-basket div#centerbox.itembox.centerbox, script”);
Script 2:
$('.dcjqg-accordion ul.sub-menu').load('/m4n?seid=etailer-basket div#centerbox.itembox.centerbox, script', function () {
$.getScript('urltomyscript'); //the script that handles the buttons, as far as I can see
});
Script 3:
$(function(){
$.get('/m4n?seid=etailer-basket', function(result){
$result = $(result);
$result.find('#centerbox.itembox.centerbox').appendTo('.dcjqg-accordion ul.sub-menu');
$result.find('scripts').appendTo('.dcjqg-accordion ul.sub-menu');
}, 'html');
});
Script 4:
$('.dcjqg-accordion ul.sub-menu').load('/m4n?seid=etailer-basket div#centerbox.itembox.centerbox', function() {
$("#_ec_oie2").on("click", function() {
if (UI.pb_boolean(this, 'click')) { }
return false;
});
});
Nothing works. They all load the content but the buttons won't work.
Any ideas?
I am guessing that the problem occurs due to load being executed async, and the HTML therefore is updated AFTER the script that makes the buttons work have executed.
The simple way to solve it, is firing the button script in a callback:
$(".dcjqg-accordion ul.sub-menu").load("/m4n?seid=etailer-basket div#centerbox.itembox.centerbox, script”, function(){//this get executed, when content has loaded});
try to change the script 4 to:
$('.dcjqg-accordion ul.sub-menu').load('/m4n?seid=etailer-basket div#centerbox.itembox.centerbox,script'); //Load the content
i'm not 100% sure that this will load the script also.
and for dynamic content you have to use event delegation
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
$(document).on("click","#_ec_oie2",function(){
if (UI.pb_boolean(this, 'click')){
}
return false;
});

Execute jQuery after Other JS file Dynamically loads content

I'm working to modify some content which is dynamically loaded via another script(let's call is script #1) onto my site. Script #1 loads some markup and content and I've been using the setTimeout() function to call my script (Script #2) using a delay of a few seconds, in order to wait to be sure that Script #1 has executed and the content is present in the DOM.
My issue is that Script#1 has different loading times, based on the server load and can be slow or fast depending on these factors, and right now, playing it safe with setTimeout() I'm often left with a second or two where my scripts are still waiting to be fired and Script #1 has already loaded the content.
How can I execute my script as soon as Script#1 successfully loads it's dynamic content?
I've found this post which does seem to address the same issue but using the setInterval function as #Matt Ball has laid out there doesn't work at all for some reason. I'm using the code below where 'div.enrollment' is meant to find in the DOM which is dynamically loaded and execute..
jQuery(window).load(function ($)
{
var i = setInterval(function ()
{
if ($('div.enrollment').length)
{
clearInterval(i);
// safe to execute your code here
console.log("It's Loaded");
}
}, 100);
});
Any help on guidance on this would be greatly appreciated! Thanks for your time.
It seems that the healcode.js is doing a lot of stuff. There is a whole lot of markup added to the <healcode-widget> tag.
I would try to add another tag with an id inside and test for its existence:
<healcode-widget ....><div id="healCodeLoading"></div></healcode-widget>
Test in an interval for the existence of healCodeLoading inside <healcode-widget>: (Assuming jQuery)
var healCodeLoadingInterval = setInterval(function(){
var healCodeLoading = jQuery('healcode-widget #healCodeLoading');
if (healCodeLoading.length == 0) {
clearInterval(healCodeLoadingInterval);
// Everything should be loaded now, so you can do something here
}
}, 100);
healcode.js should replace everything inside <healcode-widget></healcode-widget> during init. So, if your <div>-element is no longer inside, the widget has loaded and initialized.
Hope that helps.
If you just want to load some markup and content and then run some script afterwards, you can use jQuery. You should use something like the following in script#1 to run a function in script#2
$.get( "ajax/test.html", function( data ) {
// Now you can do something with your data and run other script.
console.log("It's Loaded");
});
The function is called, after ajax/test.html is loaded.
Hope that helps

How to execute a function in javascript after an html element is loaded via AJAX without jQuery?

I need to execute a given javascript function after a part of the page is loaded via AJAX. I have no control over how the page loads so trigerring an event from the page is not an option, I suppose I'll need to check the body for the element I need and execute after this element is exists.
I saw that I could do this using jQuery ".on" method, but my jQuery version is from before this feature was introduced so I can't use it. What's the best way to do this using no third-party libraries?
Here's an example using jQuery:
//bind to the body a "load" handler for elements that have class names of "hello"
$('body').on('load','.hello',function(){
alert("Hello is fully loaded, proceed with your program logic");
})
PS: related question that I've read before posting this one. How to bind a function to Element loaded via Ajax
You can create a function to call when the elements are loaded, and another function to check if they are loaded at an interval. Then attach the load checking function to the body's onload attribute. For example:
<body onload="checkLoaded()">
<script type="text/javascript">
var afterLoaded = function() {
// code to execute once elements are in place
console.log("Elements loaded.");
};
var checkLoaded = function() {
var interval = setInterval(function() {
if(document.getElementsByClassName("hello").length) {
clearInterval(interval);
afterLoaded();
}
}, 1000);
};
</script>
Plunker

Categories