I have created an html page with a Tabber tab functionality.
Each tab has its own table that loads when the tab is clicked and only loads once on the initial tab click to stop the tables loading more than once.
Each tab table exists in its own .jsp html file and is loaded through javascript using the $("#tab1").load('tabqtable.jsp'); call.
I currently have a document.ready() within the individual tab html files to run when each tab loads. The scripts run and work perfectly in Chrome, but the document.ready() functions don't run in Firefox and IE6.
I can put an alert(); outside of the document.ready() function and it works, so I know the script tag is being run. I also tried moving all the javascript to the return function call in the .load() function so the javascript will run when the .load() runs successfully from the m/ain html page, but still ended up with the same result.
I am at a loss and would really appreciate some help on this issue if I could get it. The tables load perfectly, I just don't get any of the functionality I need in order to interact with the table. It's not the scripts I am running either, because they all work with the main html page. Thanks for any help in advance.
well it looks like you are already using a framework like jquery...use $(document).ready (assuming that's jquery you are using...) the point of frameworks like jquery is that it (in principle) should be crossbrowser compatible.
Related
I'm experiencing some issues regarding an AJAX script I'm working on.
The page loads perfectly well, and all needed scripts are loaded the same for basic page functionality inside AJAX script, but after hash change, jQuery behaves awkwardly.
Let's take this example.
The custom jQuery script writes an inline CSS propriety for a specific DIV at page loading:
Now, I load the login page for example:
I get back to the main page and inline style disappears as well as the basic loaded functionalities cease to exist after Ajax call:
*
Any experience on this? Does anyone have a clue why this happens? Or even near it... Seems the script unloads on page/hash change, which I don't believe. Or enters in double loop, therefore doubling the classes for HTML. I don't get it.
Already searched a lot and went trough the coding and is fine becasue it works fine alongside with basic HTML. Would appreciate some thoughts on this matter.
Thanks!
I have a project running on Symfony with angular js and its all working good except for a strange thing.
I added a JavaScript file to execute some JQuery functions i already tested in the browser console and they are all working good with no errors the problem is when I inspect element i can see the file being called in the head and i can also see it in the sources I can even open the link and see the file.
But for some reason the functions in there are not being called executed.
following the images to prove that its loading with no errors.
Edit:
Its not about putting the code in ready function or not
$(document).ready is firing before angular has loaded the content onto the page.
So it might be the possibility of your jQuery plugin calls before your Angular loads the content onto the page.
what you need to do is somehow, call your jQuery plugin once your Angular gets init or you can turns your code into directive.
My script file was also loading but not executing but I had a different issue, basically avoid using href attribute in script tag and instead use src
The Live Edit feature of Webstorm 8 doesn't seem to work when using an external JavaScript file (i.e. when included with <script src="script.js"></script> in my HTML). Changes in the external JavaScript file appear only after I refresh the page.
Things work just fine for other scenarios - e.g. when I start debugging, the page in Chrome gets updated when I make changes to the HTML or CSS files, and things also work when I write some JavaScript code between <script> and </script> tags in the HTML.
What could the problem be?
Actually Live Edit works in both cases. But changes in embedded javascript always cause page reloading, whereas changes in 'external' javascript are hotswapped - just as for HTML and CSS. But not each and every change in external javascript code results in immediate page update: new code is loaded to the browser instantly, but the results of the change will be visible only when you do something to trigger this new code. For example if you change the onClick handler and write new text in alert, you will see the new text after the click without reloading the page. Same for functions triggered by timer
But if the JS code is executed only on page load (and not on certain event), you have to manually reload the page to see the results - live edit doesn't force new code execution
Note also that hotswapping doesn't currently work for file-level variables due to Chrome limitations - see WEB-7390
I have tried to implement this kind of script (Page Transition): here
Everything is going fine as demo provided. But only 1 problem that I cant figure out is:
I have 2 HTML files which is index.html & index2.html. On index.html I put the link with the page transition effect after clicked it goes to index2.html which is on index2.html I was put in some alert script using body on-load method.
Supposedly in normal practice, the alert will appear as normal we seen for debuging. But it doesn't appear anything. Seem like it doesn't load any script after page transition done.
Can somebody give me a clue to solve this? What I have tried is using :
location.reload(); window.location.reload(); etc.. till I don't have idea to fix this :(
*location.reload() works on desktop browser but doesn't work on mobile. My priority target browser is on mobile version.
Please help & Many Thanks
for demo purpose and needs help : here
It wasn't executed because the page never really loaded. The way that page transition script worked is by loading the content of the target page via ajax, replacing the entire content of the page with it.
From the page you provided, it seems like the script accepts a callback function to be called when the page finishes loading, you can put your 'loaded' script there. But keep in mind, what is being executed is the script on that first page.
I don't know what you are trying to make, but I guess it would be better for you to look into a proper single page app with URL matching. There are frameworks like Backbone.js that can help you with this.
Appending a script element using jquery rather than putting it in the html by hand seems to lead to very different results. For instance
snaphtml = '<script src="http:\/\/seadragon.com\/embed\/lxe.js?width=auto&height=400px"><\/script>';
$('#content').append(snaphtml);
destroys the layout of my page, but putting the script element in the page directly works fine.
I have posted a test case online:
Working example with script in html.
Broken example with script appended via jquery.
The second div should not be deleted / invisible once the silverlight object is added.
Ideas?
I would recommend you to use $.getScript method for loading external script files programmatically:
$.getScript('path/to/script.js', function() {
alert('Script loaded.');
});
The script load is made asynchronously, and as you see in the above example, you can specify a callback function that will be executed when your external file has been loaded and is ready to use.
Tristan, you will not be able to include the script you reference dynamically onto the page after it has finished loading. The external script is using document.write which will only work correctly when called before the page has finished loading. This is why your static implementation works fine, and your dynamic one tears the page apart.
You might want to put together a dummy HTML file that just has a basic HTML structure and this script in it already. Then dynamically add an iframe to your page that loads the HTML. There are even more dynamic ways to make it work with an iframe, but that would be the easiest.
Try to use $.getScript:
$.getScript("http://seadragon.com/embed/lxe.js?width=auto&height=400px");
Edit:
The provided script is using document.write, which is likely causing your problems: you cannot add it dynamically at the middle of the page. Try loading SeaDragon as shown here:
http://www.seadragon.com/developer/ajax/getting-started/
try to break script tag like
snaphtml = '</sc'+'ript>'