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
})
})
Related
I have a Partial page in which I am loading div elements. I want to call a JavaScript function when each div is loaded in my partial view.
<p class="m-0" onload="markMessageAsDelivered('#item.isDelivered')">#item.Message</p>
This is the function I have in my JS in my razor page.
function markChatAsDelivered(isDelivered) {
if (!isDelivered)
alert('markChatAsDelivered');
}
This function is not getting called. I tried to put it in windows onload as well but still it is not working. Please let me know what can be done?
The problem I've had with these things is that onload is called before ASP.NET makes its changes to the page. There's two solutions I use:
$(document).ready() with JQuery waits until the DOM is fully loaded and done, so you can migrate some code into there.
function pageLoad(sender, args) is a built-in ASP JS function (like Page_Load in your code behind) that gets called when the page is done being loaded. You can migrate some JS into here like the first answer.
Personally, even though I like to avoid libraries, I like the first option because you can use more than one per page. This is only really useful if you're calling code in your master page though. The second option is good if you only use it once per page, but obviously if you try to use it in both your master page and current page, it won't work properly. So I'd recommend JQuery, but if you must avoid it, pageLoad works too.
I'm having a master page in ASP.Net, which downloads various files via AJAX and does some initialization work for a library, that I'm using, after that. I'm using jQuery's $.when().then syntax for that.
My individual page requires all those settings to be made before executing it's code. Right now, I'm using the $(function () {}) syntax on my page. The problem with this is, that it executes right after the page has rendered, but long before my when.then construct has finished.
Is there way to wait for that construct? Can I somehow fire a custom event from my master page code after initialization, and attach my content page function to that? Or are there even better solutions?
PS: To make it clear, we're talking about client-side-only code here!
Do not wrap in the document ready $(function () {}) but instead in a custom event.
$(document).on('mycustom',function () {});
THEN trigger that in the then
$.when().then(something).then(function(){$(document).trigger("mycustom");});
In the master page you can set the when/then chain to a variable and continue to chain it in the detail page. They are, after all, one page client-side. So as long as the initial chain comes first, you can append to it all you like.
So you might set the first chain to a variable:
var eventChain = $.when(/.../).then(/.../);
Then in the detail page:
eventChain.then(/.../);
So the detail page is really just picking up where the master page left off.
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.
I created a phonegap application, the first page navigates to the second page by "href".
in the second page, I have a JavaScript function that I want to execute.
The problem is that the page doesn't know the JavaScript, just if I copy the function to the
first page - it works.
I include the JavaScript in the page.
what is the problem?
For each page in the application you will have to include the JavaScript code you wish to execute on that page. For instance on page1.html you have a referenced function called getData() you will be able to call it on page1.html. If you follow a href to page2.html the function getData() is now out of scope. It is worth mentioning this is exactly how things work in web browsers.
The way around this is to move getData() to an external JavaScript file like main.js. Then you reference main.js via a script tag in both page1.html and page2.html. Now you'll be able to call getData() from either page.
Done use anchor tags with href values to change pages.
Use the jquery mobile function changePage http://jquerymobile.com/test/docs/api/methods.html
to change pages, as changePage wont load a new html fully but would load just the topmost jquert mobile "page" in that html file into the dom.
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/