using load() to load page that also uses jQuery - javascript

I'm trying to load a page that is basically an edit form inside a
dialog (ui.dialog). I can load this page fine from an external (I'm
using asp.net) page.
The problem is that inside of my "popup" form, I need to $(function()
{my function here}); syntax to do some stuff when the page loads,
along with registering some .fn extensions for some dynamic dropdowns
using ajax calls.
I have created my <script type="text/javascript" src="jquery.js"> but
I don't think these are being included, and also my $(function) is not
being called.
Is this possible to do or do I need to find another way of
accomplishing what I need to do?

If you really need to load that form via AJAX you could to do all the Javascript stuff in $.ajax callback itself.
So, you load the popup form like this:
$.ajax({
//...
success: function(text) {
// insert text into container
// the code from $(function() {});
}
});

The script isn't getting run because the document's ready event has already been fired. Remove your code from within the
$()

Use the livequery plugin.
It allows you to bind events to elements that might be loaded later: http://brandonaaron.net/docs/livequery/

Related

How do I get a jquery function to run when the page is loaded?

I'm trying to create an html page that uses jquery to populate a table when the page loads. I have the function that gets the data, but currently for testing I just attached it to a button that I'm clicking to get the table to appear.
How do I get a jquery function to run when the page is loaded? In case it isn't obvious I'm a complete beginner when it comes to Jquery, so this may be something really obvious, but I've been trying to google it and I can't find a solution.
This should do the trick
jQuery(document).ready(myFunction);
function myFunction(){
// logic goes here
}
jQuery(document).ready(function(){
//some logic
newFunc();
//logic
});
function newFunc(){
//logic
}
However you can write code anywhere inside <script> tags and it will execute directly after including the jQuery file. But, the may not be as effective as above because at that time dom may or may not be created. So, better go the above way .. as it will only execute when page is loaded and DOM is created.
Are you looking for something like this. You can do this in regular JS.
document.addEventListener('DOMContentLoaded', function() {
console.log('document loaded');
});
But be aware this doesn't cover you from other dependent file loading like the js and png and others . They get loaded asynchronously . this just cover you for the dom content load

JS libraries not working after Ajax call

I have an Ajax call, that returns some HTML code. In this returned code, I have several dropdown boxes that use the select2 JavaScript library among many others (company libraries, custom libraries, etc.)
Now, none of the libraries seems to work at all in the content retrieved from the Ajax call.
A solution to a similar problem can be solved by using the jQuery delegate method (according to other questions made), but in this case I cannot simply go into the select2 library (nor inside all the other ones for that matter) and replace everything with delegate.
What solutions can I implement in order to make the libraries work on the returned ajax content?
If you are loading html into the page via AJAX you will need to run the initialization function on the new html:
//from the docs
$('select').select2();
If you are using jQuery.load you can do it like this:
//load the html into #result
$( "#result" ).load( "demo.html", function() {
//now use 'this' in the selection to search the new html and init select2
$('select',this).select2();
});
alternatively, to use delegate, you wait until after a click (or a custom event) and then initialize select2 again but I don't think you need to do that in this case.

jquery recommended way to do ajax navigation

jquery recommended way to do ajax navigation
I just tried out this simple jquery ajax code to load all the links in a page in an ajax manner.
$('a').click(function(e){
e.preventDefault();
url = $(this).attr('href');
$('body').fadeTo('slow', 0.2);
$('body').load(url, function(data){
$(this).fadeTo('slow', 1, function(){
$(this).html(data);
scroll(0,0);
});
});
});
[The links in the page stick to the current domain and no external links are present]
The page load works as expected but the scripts for Facebook, LinkedIn, pinterest buttons fail to load.
I think this is not the safest way to do a ajax navigation and I am sure other JS files, inline JavaScripts will cause error.
http://davidwalsh.name has some good ajax navigation work with mootools. I am trying to achieve the same using jquery.
The website loads and executes every script successfully and it is seen that the ajax work is not done to load specific scripts.
Is there any safe way to achieve this, making sure that the ajax loaded page works as normal as it should ??
You should call the function that attaches the script inside the load handler, so it re-attaches all DOM scripts on each load.
F.ex, if you have this code:
$(document).ready(function() {
$('#facebook').doFacebook();
$('#twitter').doTwitter();
});
Change it to:
var onload = function() {
$('#facebook').doFacebook();
$('#twitter').doTwitter();
};
$(document).ready(onload);
Then just call onload whenever the body gets new content.
Inline scripts should execute according to the docs.
You might also want to read up on how to manipulate browser history and URL using .pushState:
https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history#Adding_and_modifying_history_entries
There are decent jQuery plugins that adds this functionality in a cross-browser manner if you google around a bit.

How to run scripts loaded dynamically with javascript

I was wondering if there is a way to execute script within a ajax dynamically loaded content.
I've searched the web and this forum also an find a lot of answers, like
[Running scripts in an ajax-loaded page fragment
[1]: Running scripts in an ajax-loaded page fragment [1]
But none of this seems to work fine for me.
I'm not experienced as the author of the quoted post, so maybe we can find a solution more simple and quite for everyone.
For now i've implemented a tricky turnaround that smell to much of an hard-coded solution that is:
//EXECUTE AJAX REQUEST LET'S SAY SUCCESSFULLY,
$ajax([..]) //THEN
.ajaxSuccess(function(){
// LOCATE ANY OBJECT PRE-MARKED WITH A SPECIFIC CLASS
$(".script_target").each(function()
{
//DO SOMETHING BASED ON A PRESET ATTRIBUTE OF THIS SPECIFIC ELEMENT
//EXAMPLE: <div class=".script_target" transition="drop_down">...</div>
//WILL FIRE A SCRIPT RELATED TO drop_down CASE.
});
});
I know this is an ugly solution but i didn't came up with nothing better than this.
Can you help to improve this method?
Maybe there's a way to let the browser fire script within the loaded page automatically?
PS. I'm not going to use the eval() method if it's not the last solution, cause both security leak and global slowdown, AND be aware that the script launched need to modify objects loaded in the same fragment of the script.
Thanks in advance.
If I understand you correctly :
you use "load" to retrieve html content from the server, and you add it to the page.
later, you do an ajax call, and on the return of the ajax call, you want to act on the markup you added earlier
but, depending on the markup retrieved, you want to do something different in the ajax callback
So another question : before you load the markup, do you know what logic will be behind it, or do you actually need to "read" the returned HTML to understand what it will be used for ?
Otherwise maybe something like this would work :
In the callback of the "$.load" function, use $.data() to attach more information to created dom object
In the ajax callback, you should be able to access the "added" markup (with a class like you did, or with an id if possible), and read to "data" to known which behavior you should have ?
Hopefully I got your problem right, it could help if you were able to create a jsfiddle or something, just to make sure we understand it.
Hoping this helps.
EDIT : After your comment, it might be related to the selector you use when calling $.load().
There is a "Script Execution" section in the $.load documentation : http://api.jquery.com/load/ , that explains that the scripts are not executed if you add a selector in the url, like this :
$('#b').load('article.html #target');
Could this be your issue ?
Also, if possible, you could try and change your site so that instead of having the js code of each "page" of the gallery inside the page, you put it inside a separate javascript file, that you load at runtime (for example with require js).
This way, "loading" a page would be something along the lines of :
$.load("url_of_a_page_markup.html", function () {
require(["url_of_the_javascript_module.js"], function (TheJsModuleForThePage) {
TheJsModuleForThePage.doSomething();
});
});
If you structure your JS modules in a consistent way, and you define a convention for the name of markup and js files, you can generalize things so that a "gallery" manager deals with all this code loading, and you'll end up with well isolated js modules for each page.
Hoping this helps.
If you want to run a script in a ajax loaded page fragment you can use try to use jQuery.load function.
Have you considered a module loader like require.js or Lab.js?
There are many other people asking similar questions:
does anyone knows good ajax script loader
Where are scripts loaded after an ajax call?
getting jQuery scripts and content through ajax dynamically
dynamic script loader in JS
Edit: I think I misread your question. Will try and come up with a better answer. Sorry!
Best of luck to you!
I came across this same issue when I dynamically loaded some HTML to use inside a JQuery UI dialog (a help function for my application).
$('#helpMessage')
.load('./help/' + helpFile, function () {...do stuff after loading});
To make things simple I wanted to combine the unique script related to the help page within the HTML fragment that I load. Using the examples on the JQuery UI page I created a dialog with a Jquery UI button element.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Button - Icons</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
(function() {
$('#myButton') // My button element
.button() // Initialize it as a JQuery UI button object
.click(function (){ // Hook up the button click event
$('#correct')[0].play(); // to play a sound in an <audio> tag
});
});
</script>
</head>
<body>
This is my help file, this is my code. This is for reading, this is for fun.
<button id="myButton">Button Text</button>
</body>
</html>
The dialog would load and the HTML displayed, but the embedded script did not execute.
I realized that one simple change would fix it. The script is embedded in an anonymous function (a best practice and part of the JQuery UI demo code). By immediately invoking the anonymous function the script executed when I loaded the HTML fragment into my main page.
This:
<script>
(function() {
...
});
</script>
Became:
<script>
(function() {
...
})(); // Immediately invoke
</script>
Niceness.

Document.ready script not working when page called into a tab

I have several pages that are called onto an ajax tabbed area. the pages that are called have javascript on them however the document.ready function will not load for each of these pages when loaded onto the tab. Instead I have had to put a button on the pages to load the function manually. Iv tried putting the document.ready function on both the page being called and the pages calling it but it still wont run. Is there any other way i can use rather than having a button? I dont want buttons displaying on my pages that have to be clicked before it looks good =(
Heres the code that calls the the page:
onclick="createNewTab('dhtmlgoodies_tabView1','Remote Access','','RemoteAccess.html',true);return false">Remote Access
All the javascript files are connected to the main page.
A button is located on the remoteaccess page:
input type='button' value='Load.' onclick='loadlightbox()'
The loadlightbox function is inside a javascript file that is conected to the main page:
loadlightbox = (function() {
$('#gallery a').lightBox({fixedNavigation:true});
});
There is no document.ready event being fired when you load the content into the page with JavaScript. Most libraries just stick what is returned with innerHTML. Most libraries just rip out the JavaScript code from the responseText and run it through eval().
You probably want to forget the whole document.ready and just stick the code block at the end.
The document.ready function won't fire because the page (document) is already loaded. The remote page is loaded as content not as a document.
Since you are using jquery you should take advantage of the .load function and also you should take a unobtrusive approach to attaching the onclick to your link. This allows your JS and code to be separate.
//Using Jquery load
$("#id_of_link").click(function(e){
e.preventDefault();
$('#dhtmlgoodies_tabView1').load("RemoteAccess.html",
function(){
//callback code here
})
})

Categories