how do I change the load sequence of external javascript - javascript

I have a web page that loads an external chat script, but the script loads before all my CSS and jQuery kick in, so my page looks all messed up for a few seconds. Need help figuring out how to launch my chat script once the page is done loading...I think it can be done by adding the script into my jQuery setup, but I'm not sure how to do that.
here's the code, it's self-explanatory enough not to be familiar with the actual software.
<script>
var online_text = "Chat Online Now";
var offline_text = "Chat Not Available";
var check_back = 1; // this lets the script check the operator status without being logged in
</script>
<script src="http://my.domain/chat/file.php"></script>
I think what happens is that the .php file will write my online or offline text with the necessary chat link, and that's why I have to put the script in the place where I want the chat text to display.
hope that makes sense...and hopefully the community can help me figure out how to solve the problem. thanks!
UPDATE: here's where I am so far, unfortunately the #chaticon element is empty, even if I replace the script with simple text. Using jQuery 1.4.2 by the way:
$(document).load(function() {
var online_text = 'Chat Online Now';
var offline_text = 'Chat Not Available';
var check_back = '1';
$("li#chaticon").html('<script type="text\/javascript" src="http:\/\/my.domain\/chat\/file.php"><\/script>');
});

Check out using the JQuery function $(document).ready().
It will hold off running until your entire document is loaded and ready to go.

$(document).ready(), which was previously mentioned, will only wait until the DOM is ready for manipulation (i.e., the node hierarchy has been fully constructed). This will not, however, wait until any additional resources (images, style sheets, etc.) have been loaded, which sounds like what you're wanting to do.
If you need all of these additional resources to be loaded first, then use $(document).load(). This will wait until all additional resources have finished loading (and hence the page will have been fully rendered).

Stephen,
As per Dave's advice of putting the $(document).ready() function on the page i.e:
$(document).ready(function() {
var online_text = "Chat Online Now";
var offline_text = "Chat Not Available";
var check_back = 1;
// do any other stuff here
});
also, make sure the js files are loaded at the bottom of the page, just ahead of the closing </body> tag and the css is loaded in the <head> tag. This may or may not sort the above issue, but is recognised as 'good practice' in terms of page configuration.
jim

thanks jmar777, I agree there's some re-evaluating that needs to be done here...the chat script is a mix of document.write, php/mysql and some dom-oriented stuff. Not worth toying with for hours.
So I ended up putting the code from my original post into a PHP function and returning it to a variable all the way at the top of the page, this way it would be written a little bit earlier than if it were written on the fly while my page were loading. And I made a few tiny tweaks to my CSS file so that the part of the page that was getting strange-looking while the chat script loaded wouldn't look as strange.

Related

Remove script which is executed after load the page

There is a site with wall of topics. Anyone can write anything. But anyone can write JS script and this script will be executed with loading this site.
Something like document.body.innerHTML = "";.
I wrote also script which found every script in <div> with topics and rewrite its to empty string, but it does not work.
If I tested this script on the site (in console) with topics (before executed), it found scripts and rewrite its, but after post my script to this website, it does not work. Scripts will be executed after all.
Can I fix it before help from IT tech?
One solution is to add the user content as a text node. The content will show up exactly as the user typed it. Though if you're trying to include formatting (bold, italic, etc.), this won't work.
const userContent = "<myScript>alert('here')</myScript>"
const userContentNode = document.createTextNode(userContent)
document.body.appendChild(userContentNode)
<body>
</body>
I had to use <myScript> instead of <script> because it looks like Stackoverflow does some kind of anti-XSS stuff for snippets.

JavaScript in jQuery mobile not working unless I refresh

I'm having a jQuery mobile page with JavaScript inside. The problem is the JavaScript doesn't work unless the page is refreshed. Here is my code:
jQuery(function($) {
var url = window.location.search.substring(1);
$('#mydiv').load('real_news.asp?' + url);
});
To understand this problem you need to understand how jQuery Mobile works.
Your first problem is point where you are trying to initialize JavaScript. From your previous answers I can see you are using several HTML/ASP pages and all of your javascript is initialized form the page <head>. This is the main problem. Only the first HTML file should have JavaScript placed into the <head> content. When jQuery Mobile loads other pages into the DOM it loads only the <div> with a data-role="page" attribute. Everything else, including <head>, will be discarded.
This is because currently loaded page has a <head> already. No point in loading another pages <head> content. This goes even further. If you have several pages in a second HTML file, only the first one is going to be loaded.
I will not try to invent warm water here so here are links to my other 2 answers discussing this problem. Several solutions can be found there:
Why I have to put all the script to index.html in jquery mobile (or in this blog article)
Link fails to work unless refreshing
There's more then enough information there to give you an idea what to do.
The basic solutions to this problem are:
Put all of your JavaScript into a first HTML/ASP file
Move your JavaScript into <body>; to be more precise, move it into a <div> with data-role="page". As I already pointed out, this is the only part of a page that is going to be loaded.
Use rel="external" when switching between pages because it will trigger a full page refresh. Basically, you jQuery mobile that the page will act as a normal web application.
As Archer pointed out, you should use page events to initialize your code. But let me tell you more about this problem. Unlike classic normal web pages, when working with jQuery Mobile, document ready will usually trigger before page is fully loaded/enhanced inside the DOM.
That is why page events were created. There are several of them, but if you want your code to execute only once (like in case of document ready) you should use the pageinit event. In any other case use pagebeforeshow or pageshow.
If you want to find out more about page events and why they should be used instead of document ready take a look at this article on my personal blog. Or find it here.
Your question isn't exactly overflowing with pointers and tips, so I'm going with the thing that immediately sprung to mind when I saw it.
Document ready does not fire on page change with jQuery Mobile, due to "hijax", their method of "ajaxifying" all the links. Try this instead...
$(document).on("pageshow", function() {
var url = window.location.search.substring(1);
$('#mydiv').load('real_news.asp?' + url);
});
Try pageinit like this
$(document).delegate("body", "pageinit", function() { // Use body or page wrapper id / class
var url = window.location.search.substring(1);
$('#mydiv').load('real_news.asp?' + url);
});
seems like nothing ever worked for me. Tried many different fixes, but i made the site too messy, that even position of certain javascript files wouldn't make the site work. Enough talk, here is what i came up with.
// write it in head at top of all javascripts
<script type="text/javascript">
$(document).ready(function() {
// stops ajax load thereby refreshing page
$("a,button,form").attr('data-ajax', 'false');
// encourages ajax load, hinders refresh page (in case if you want popup or dialogs to work.)
$("a[data-rel],a[data-dialog],a[data-transition]").attr('data-ajax', 'true');
});
</script>

Is there any jquery to detect if the html tag was not closed? or page has not completely loaded?

I'm experiencing an issue (which I still need to fix) where my entire page does not load. It gets cut off in the middle of an element.
Is there a way using jquery or javscript to do something like:
if (some element has not loaded yet) {refresh the page}
I was thinking of just putting <div id="end_of_page"></div> at the bottom of the page, and checking if that was rendered, if not, i'll know something went wrong and can reload to try again.
thanks!!
Is there a way using jquery or javscript to do something like:
if (some element has not loaded yet) {refresh the page}
You can do that, yes. Put this in the head after including jQuery:
<script>
jQuery(function($) {
if (!$("#end_of_page")[0]) {
// Something went wrong, load again
location.reload();
}
});
</script>
You'll enter the body of the loop (and so, force a reload) if the end_of_page element doesn't exist as of when the jQuery ready event fires (which is meant to be when the page is done loading).
But: Better by far to figure out why your page is getting cut off half-way through and solve that. This sort of workaround is not a solution.
You can use
$(document).ready(function(){
// code here
});
that code will only run when the page has loaded. A convenient shorthand is:
$(function(){
// code here
});
assuming your jQuery object is $. To finish your requirement, you can have a variable that is set within the load function, then use a timer set at the start of the page to check for it. If it's not there, reload.
Personally, I think you should invest some time into figuring out why your pages only half-way (Firebug or the Chrome Inspector may help you do this, it might be a resource in your page that is causing it to hang, and since most HTTP requests are only made 2 at a time per hostname, it might be waiting for that to return before fetching the rest).
Might be a server-side issue OR some script or library is stealing your fish $ (AKA: 'Dollar').
I'll rather suggest you to debug your code instead of refreshing the page trying to fix issues.
Make sure your scripts are in the head of your document, and jQuery + your jQ functions right before the closing </body> tag wrapped in:
(function($){ /*your functions*/ })(jQuery);

Prevent jQuery() from executing javascript

I am working on some code that uses jQuery to parse data out of html documents from the web. This decision was made because jQuery, with its awesome ability to select objects on a page, makes it excellent for parsing.
The code works like this (where 'html_string' is the html of a whole web page):
var page = $(html_string);
The problem I am having is that javascript is being evaluated and executed within the html_string as well. This results in new threads being formed that in some cases, contain infinite loops that make repeated requests to the server and eventually crash the whole client-side of application (not the server).
Is there a way to somehow prevent the execution of javascript in this situation. In this situation, the execution of javascript is an unwanted side effect.
Thanks so much!
Here is a crappy little jsfiddle that shows you the js does not run when you load the html_string into $. When you click run you will see an immediate alert 'wtf'. Three seconds later, the html is loaded into $ and the body is updated to say 'moo', you should not see the alert.
http://jsfiddle.net/9BAkE/
One way would be to parse the html string befor you wrap it with jQuery.
Something like:
var page = html_string;
//then find the script tag (untested code)
int beginning_of_script = page.indexOf('<script>');
int end_of_script = page.indexOf('</script>');
// remove the script
page = page.remove(beginning_of_script, end_of_script);
You could load this syntax into the browser initially as a comment
<script>
/* var page = $(html_string); */
</script>
and then extract the contents of the comment later. The advantage here is that the browser is not going to parse and execute the comment on page load.
You can also explore using jQuery's .load() function, not sure if that will suit your needs.
If you donot care having one extra element, check this! http://jsfiddle.net/UbCFc/4/

How to change a div's innerHTML after redirecting?

I am trying to change the innerHTML of a div on the page that I am loading.
This is my JavaScript code:
function redirect(titleName){
window.location = "pageToLoad.php";
document.getElementById("title").innerHTML = titleName;
}
It doesn't seem to be working, please help me!!
The execution life of a script extends only for as long as the page it is running in lives.
If you want to access the DOM of one document from a script running in another, then the other page has to hang around. This means you either have to use frames or open popups.
Neither of these is a good idea. You should rethink what you are trying to achieve and find a better approach (which will probably be "Just change the title of the page you are linking to in the source of that page").

Categories