load widgets after loading conten - javascript

What am doing is writing wizards using existing forms and list views. we want to combine these forms in single page. here is a script we have used to get form from url then called function to bind widgets. first line is loading content of form but bindWidgets is not working. While bindWidgets is working on preloaded content which is default loaded with page.
<script>
$(document).ready(function() {
$("#template_form").load("/push_templates/pushtemplate/create/ #zform");
bindWidgets();
});
</script>
Do we need to wait for load, as it seems that 2nd line is executed prior to content loaded. How can we go to wait stat or better way to call bind function after load complete.

Use this;
<script>
$(document).ready(function() {
$("#template_form").load("/push_templates/pushtemplate/create/ #zform", function() {
bindWidgets();
});
});
</script>
You can see demo here: jsfiddle

Related

Loading content to the div using AJAX/jQuery

I am a beginner in playing with jQuery/AJAX, my goal is to load content to the div below:
<div id="blogcontentloaded">
</div>
I came up with .load and it worked, the page loads but it keeps refreshing and loads over and over.
$(function loadBlog(e) {
$('#blogcontentloaded').load('/blog/page1.html');
e.preventDefault();
return false;
});
I tried using e.preventDefault but it doesn't work for me.
Also my goal is to do this without any buttons. When main page loads portion of the page that I want to load along with main page is going to be for updating the content in loaded element.
Thanks for the help!
You can use the javascript load function. It may solve your problem. here you can get some information about windows load and jQuery ready functions.
$( window ).on( "load", function() {
$('#blogcontentloaded').load('/blog/page1.html');
});
You need to wrap the function in the 'ready' function and make sure that it is executed once:
$(document).ready(function(){
$('#blogcontentloaded').load('/blog/page1.html');
});
Have you used the jQuery file on the top of other js files?
Add the jQuery.js file
$(document).ready(function(){
$('#blogcontentloaded').load('/blog/page1.html');
e.preventDefault();
return false;
})

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;
});

Page finish loading, load in jQuery content via Jquery .load, execute jQuery elements

If I want to be able to load in content (containing elements depending on jQuery) after main page has finish loading, the content will be retrived from another page on my site (div). How do I then get those element depending on jQuery to execute (work)?
How do I make these different jQuery elements to work with some easy method after they being loaded into the main page? I dont know much about jQuery, it would be great if I could just ad/edit a function on the scripts to make them work after inload, but ofcurse its propably more difficult than that. In the passed days I have tried initialize the different object that loads in but notice that it was quite difficult with complicated scripts.
The page load in new content like this (selectbox):
<select id="selectbox">
<option>1</option>
</select>
jQuery code to the selectbox:
$(document).ready(function(){
$("#selectbox").change(function(){
var selectedOption = $('#selectbox :selected').val();
$containerDiv = $('#div_that_will_get_content');
$containerDiv.html("");
switch (selectedOption)
{
case "1":$containerDiv.load( "Page.html #div1 );break;
}
return true;
});
});
Selected option in selectbox (1) collects data from Page.html #div1, then send the data to div "#div_that_will_get_content". So the div get loaded in after the main page have finish loading.
Now if I want to put a jQuery element in this div and then load that div into the main page via the selectbox and to "#div_that_will_get_content", those elements dont work. Can anybody show a easy jQuery example with a smal explanation how the script was written from the begining and what you changed to make it work after it was loaded in?
Thanks.
Not entirely sure what you are needing but part of the answer lies in using the success callback of load()
/* define this cached elemn outside change handler so don't have to search DOM each time*/
$containerDiv = $('#div_that_will_get_content');
$("#selectbox").change(function() {
/* val() of select is same as searching for selected option val() but less code*/
var url = 'Page.html #div' + $(this).val();
$containerDiv.load(url, function() {
/* new ajax loaded html exists you can run code here*/
$containerDiv.find('#someOtherDiv').doSomething()
})
});
API Reference: http://api.jquery.com/load/
If your problem relates to binding events to elements that will be loaded any time in the future such as click handlers, you can delegate these in your page load script using on()
$(document).on('click', '.className', function(){
doSomething();
})

how to load external javascript inside partial view dynamically?

I'm using jquery's .html() function to inject a html file into a partial div of the main page of my application. In the injected partial html page, there is a javascript reference such as script(src='../../javascripts/partialFunctions.js').
The jquery function and the main page are like:
$('.partialDiv').html(htmlResult);
<div>main page</div>
<div class='partialDiv'></div>
<input type='button'>button</input>
When the user click a specific button on the main application page, the jquery function will got called and the html file will got injected to the main page.
The problem is every time a new htm file got injected, the browser will load the script file. So there will be many duplicated javascript functions after the user clicked the button several times.
How can I do this dynamically and avoid the duplication of javascript functions?
Thanks in advance!
You can remove the script tags and references from the htmlResult page.
Then use $.getScript('myscript.js') to import the necessary JavaScript files.
More info on getScript() here
So to load in the script and make sure it only loads in once:
var window.foo = false; //Outside the document.ready
$('.partialDiv').html(htmlResult);
if(window.foo == false){
$.getScript("js/myScript.js", function(data, textStatus, jqxhr){
console.log('Script loaded');
window.foo = true;
});
}
I just did a quick test, it looks like script tags are stripped out anyways when you call .html(). So you should be able to simply do:
var html = "<html><script></script></html>",
cleanedHtml = $(html).html();
myEl.html(cleanedHtml);

Execute $(document).ready() after $.load(), is that possible or is there an Alternative

I have page with a form and a table (to show results of the saved data using the form).
The form uses ajax to submit the data, data saved and the table should be reloaded afterwards.
The problem is that the table (which is loaded using AJAX($.load)) is loaded after the execution of $(document).ready(). which implies that the table does not have the required functionality.
Is there any approach where i can postpone the execution of $(document).ready() until the AJAX finish its loading, or shall i use a complete different approach like using iframe?
below is an example of my problem:
$(document).ready(function(){
//some code here that needed for the html in table.html e.g. datepicker, chosen, jqueryui, etc
});
<form>
//Inputs with a button to submit using ajax, where the result is displayed using table.php
</form>
<div id="tableOfContent"></div>
<script>
$('#tableOfContent').load("table.php");
</script>
You can do
$('#tableOfContent').load("table.php",function(){
//completed load actions here
});
But you should note that if you load images, they will not be loaded yet. If that is the case, you can make the contents of table.php initially hidden and do the same again inside for $('#tableOfContent img').load(). This would work for 1 image; multiple images is a bit more complicated, but feel free to ask if that is what you are looking for :)
You can delay the ready event using jQuery.holdReady():
$.holdReady(true);
// Do your custom stuff... the document may already be loaded.
$.holdReady(false); // Now the ready event will fire as soon as the DOM is loaded.
See http://api.jquery.com/jQuery.holdReady/
document.ready is called when the HTML of the page has finished loading, there's no two ways about it.
What you can do, however, is use live binding, which will attach handlers to elements that are not yet on the page.
Example:
$(".datepicker").live("click", function() {
$(this).datepicker();
})
Updated for jQuery >1.7 (this is also faster)
$("#tableOfContent").on("click", ".datepicker", function() {
$(this).datepicker();
})
Load the table data from within the ready function and use the complete event of the load() function to call the remainder
$(document).ready(function() {
// click bindings etc ..
$('#tableOfContent').load("table.php",function() {
// things to do once the table is loaded
});
});
load() documentation
$(document).ready() should be used for scripts that should execute, well, when document is ready.
If you need to execute something after an ajax call, you may write everything within a function and call it with the ajax callback.
function what_i_need() {
// bla bla
}
<script>
$('#tableOfContent').load("table.php", {}, what_i_need);//code had syntax error; '{)'
</script>
I'm not sure. Plus, you can call the function when document is ready too.
$(document).ready(function(){
what_i_need();
});

Categories