I created an index.html page that have 3 different tabs. With the function tabs() of jQuery UI I want to load an html page with Ajax. Every HTML page use jQuery library, so every page have this code:
<link type="text/css" href="css/redmond/jquery-ui-1.8.5.custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.4.3.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>
If I click on a tab the page is loaded but the JavaScript function of the page doesn't work!
So can I load in a tab a new complete HTML page (HTML+JS)?
two possibilities:
1) if you need jquery-ui in each tab, it's better to load it when initalizing your tabs.
2) use following to load your javascript files:
$.getScript("js/jquery-ui-1.8.5.custom.min.js");
and for css:
$.get("css/redmond/jquery-ui-1.8.5.custom.css", function(css) {
$("head").append(""+css+"");
});
Edit: You never load a complete new html page with ajax tabs - you only load a code snippet which is included in your existing html page. Use Firebug for Mozilla Firefox to see what happens ;o)
Ok, the problem is to understand what the tabs do. With Ajax I can load some content in a tab.
If I declare a <div> for a tab, Ajax loads the content in that <div> so I can't load a new complete HTML page becouse the DOM after the load have two open <html><head> ecc.
So now I understand the function of the Ajax in the tab, and the load of complete HTML page is a big mistake!
Thanks Tobias.
Related
simply i am using AddThis Plugin in html and below my code
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid="></script>
and in html tag i used
<div class="addthis_inline_share_toolbox"></div>
but it is not working till i refresh page only .. so how can i load this script and make div work once
I am developing a website from scratch and I realized that instead of having the header (banner+horizontal navigation menu) code in each html page, it would be more efficient to have it in a separate HTML file and use the JS load function in every page's body, so I can modify the header in only one file to apply changes to the whole website instead of wasting time modifying it on every page.
problem is since I made that change using :
<script>
$("#header").load("header_eng.html");
</script>
in every page's body (where header_eng is an html file containing my header code), my website started to "blink" between each page. Now when I navigate the website, the banner image, for example, blinks/flickers between pages instead of just staying there.
I did not have this problem when my header code was in every page's code.
here is the example of the website with the header code in every page file :
https://cbrieuc.github.io/index.html
(only the two first pages are up for the first example so just spam the link "About Me" or "News" to check for blinking)
and here with the "load" function instead :
https://cbrieuc.github.io/index_eng.html
here is what the code looks like for a page using the "load function"
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>BRIEUC COUILLEROT</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header"></div></br>
<div id=corps>
<pre>
test
</pre>
</div>
<!--loading header from header.html-->
<script>
$("#header").load("header_eng.html");
</script>
</body>
</html>
Any idea what occured?
by the way i'm quite new to web development!
It is because the javascript is being executed after page load. You need to include your header file using a server side language like php
I've come across a strange problem with jQuery mobile - If i have an anchor link to the same page, then the javascript on the page is not run after clicking the link and returning to the same page.
For example (test.html):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.1/jquery.mobile.structure-1.4.1.min.css" />
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript">
alert('hello');
</script>
</head>
<body>
<div style="height: 1000px">
test
</div>
</body>
</html>
... "hello" alert is shown the first time, but after clicking the "test" link (to go back to the same page), the alert doesn't happen.
If I remove the reference to jquery mobile js then it does work as expected, showing "hello".
Does anyone know what's going on here?
jQuery mobile loads internal links via AJAX.
Try changing your anchor to:
<a data-ajax="false" href="test.html?dosomething=1">test</a>
Documentation - Linking Pages:
Default link behavior: Ajax
To enable animated page transitions, all links that point to an external page (ex. products.html) will be loaded via Ajax. To do this unobtrusively, the framework parses the link's href to formulate an Ajax request (Hijax) and displays the loading spinner. All this happens automatically by jQuery Mobile.
If the Ajax request is successful, the new page content is added to the DOM, all mobile widgets are auto-initialized, then the new page is animated into view with a page transition.
well I got a (jquery) javascript in .js loading inside a template in grails , the first time it loads in the template, and the script works perfectly, but once I hit the button to change the content in the template , the javascript doesn't reload, but once I embedded javascript directly in the template it loads fine, but once I put it back in a .js it doesn't load again. any suggestion?
it works this way:
<g:javascript>
code code
</g:javascript>
but doesn't work again if I use this:
<script src="${resource(dir:'js',file:'hoverInfo.js')}" type="text/javascript" charset="utf-8"></script>
once I hit the button to change the content in the template...
do you reload the full page or just a portion via remoteLink/ajax?
I guess in the second case, the browser notices that it already loaded the js-source and will not reload it - hence will not execute it a second time...
I guess you will have to use the onSuccess event to execute the script a second time...
Double check the location of the javascript source file, which can be different when loading the page. Therefore go in to the network tab of your firebug and check, whether the browser tells you 404, when pressing your ajax-button.
Hi I have a web page with a fair bit of javascript on it, which is running perfectly well. I have a small panel showing my Latest Tweets from twitter.com My problem is that all the other javascript on the page it waiting for the twitter badge to go and get all the info it needs from twitters server before they render. This creates a 3-4 second gap before everything all the js is loaded. Is there anyway around this?
The javascript I'm using to pull info from twitter is
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/usernamehere.json?callback=twitterCallback2&count=3"></script>
If you use the default widget, there is a newer version that is nicer on your page load. Get it at http://twitter.com/about/resources/widgets/widget_profile
If you want to load JSON data yourself, get jQuery (http://jquery.com) and use $(document).ready() to start loading when the rest of the page has (almost) finished rendering.
Put the script at the bottom of the page.
Or load the script dynamically after the document is ready.
Or use HTML async script
<script type="text/javascript" src="blabla" async="async"></script>