I need to dynamically update the contents for every few seconds, without reloading the page, so i thought to use jquery load() function, this loads the contents fine but not the js or jquery file from head tag.
Here is sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{$PAGE_TITLE}</title>
<link rel="stylesheet" type="text/css" href="../web/css/style.css" />
<script type="text/javascript" src="../web/js/jquery-1.3.2.min.js" ></script>
<script type="text/javascript" src="../web/js/wz_tooltip.js"></script>
<script type="text/javascript" src="../web/js/tip_centerwindow.js"></script>
<script type="text/javascript" src="../web/js/tip_balloon.js"></script>
<script type="text/javascript">
{literal}
$(document).ready(function() {
setInterval(function(){
$("#content").load("load_contents.php");
},20000);
......
});
{/literal}
</script>
</head>
<body>
<div class="content">
</div>
</body>
</html>
Suggest me the solution...
Updated: Tooltip js is not loading, y?...
I can't find the reference, but any javascript in the page that is loaded will automatically be disabled to prevent conflicts. If you need to do something to the loaded content, I would suggest using either live() or delegate() on the main page to act on the loaded content.
I agree with fudgey about using live (delegate isn't an option in 1.3.2) if possible. If your plugin doesn't support that though (which I'm guessing it doesn't since it's not working), you can pass a function to .load that will run when the content is loaded. Here you will want to hook up these new elements to your plugin. For example, so for instance say you wanted to use draggable from jQuery UI on all divs inside content , you might do
$(document).ready(function() {
var init = function(){
$("#content div").draggable();
};
init();
setInterval(function(){
$("#content").load("load_contents.php", init)
},20000);
});
If you do this with your tooltip plugin and whatever else, you are reloading into content, it should work. Be careful to call the init method only on content within #content so you don't end up adding tooltips twice to other areas. Using a plugin that uses delegate (upgrade to latest jQuery) or live will avoid having to do the selection and rebind each time you add elements, making for faster reloads.
Related
I wrote a small page with jQuery and an external .js file. But it won't load the jQuery part. Here my Code:
<!DOCTYPE html>
<head>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/testScript.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<button id="testBtn">Oh my Goood...</button>
<div id="testDiv">testText</div>
</body>
</html>
And here is my external Script:
alert("no jQuery");
$("button#testBtn").click(function(){
alert("Works!");
});
As you can see, jQuery will load before all other scripts. The alert pops up fine. But if I click the button, nothing happens. If I put the script inside the html document directly, the button event works as expected.
I reviewed these questions: Link and Link. But still not working as expected.
Instead of using the $(document).ready() method, you could also just move your javascript references to the bottom of the page, right above the </body> tag. This is the recommended way to include javascript in webpages because loading javascript blocks the page rendering. In this case it also makes sure the elements are already rendered when the javascript is executed.
You'll need to add the click function inside document ready.
$(document).ready(function(){
$("button#testBtn").click(function(){
alert("Works!");
});
});
Your method fails because the code is being executed as the page is being loaded and the elements it refers to haven't been loaded yet. Using $(document).ready holds the function execution till the DOM elements are ready.
I am having trouble using jQuery to fadeOut() an image and fadeIn() another when a button is clicked.
To keep it simple, here is the HTML of just the part that needs to be affected:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div id="landing-page">
<div id="call-to-action">
<img src="https://scontent-b-lga.xx.fbcdn.net/hphotos-prn1/v/1608452_3821343707689_2110853534_n.jpg?oh=ab5ebfd5dce574e97a43e9a7c0739583&oe=52D0F2AC" id="learn-button"/>
</div>
<img src="https://scontent-b-lga.xx.fbcdn.net/hphotos-prn1/v/1551908_3821359708089_1101636385_o.jpg?oh=aa19a9ac5f5b5e4f3cf704858482803d&oe=52D11726"id="line"/>
</div>
</div>
</body>
Here is the jQuery:
$(document).ready(function() {
$("#call-to-action").click(function() {
$("#landing-page").fadeOut("slow");
$("#more-info").fadeIn("slow");
});
});
When the button #call-to-action is clicked, the #landing-page div should fadeOut, and the #more-info image should fadeIn. It is not working. In fact, any jQuery command I've typed in has not worked for other divs. I believe there is something wrong with my jQuery plugin, or I'm missing some reference to the jquery sheet.
"or I'm missing some reference to the jquery sheet."
Yes. The code you show does not include the jquery.js file. If you have a copy of jquery.js in your project then add this in the <head> section immediately before your other JS include:
<script type='text/javascript' src='jquery.js'></script>
Otherwise you can reference a copy from a CDN:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
(Specify whichever version of jquery you want to use in accordance with what your chosen CDN supports; I've suggested the latest version compatible with old IE.)
Also you probably want to hide the second img to start with, and not fade it in until the first img has finished fading - if you pass a function as the second argument to .fadeOut() it will be called after the fadeout finishes:
$(document).ready(function() {
$("#more-info").hide();
$("#call-to-action").click(function() {
$("#landing-page").fadeOut("slow", function(){
$("#more-info").fadeIn("slow");
});
});
});
Demo: http://jsbin.com/OmaCOju/1/edit
You missed to include the jquery library. You can include it from google CDN. From you question i understand that on click of a button you want div to be fade-in and fade-out. Please refer the below demo for doing this.
Demo : http://jsbin.com/IGAJeqew/2/edit
I want to add and remove an iframe to a document using javascript / jquery (actually the iframe should be added and also removed if the user chooses to close it).
In this iframe, I have to include an external script using the element, script that contains basically generated content displayed using document.write (ad rotator).
The problem I have is that when the iframe is loaded, the element is included but its content is not "interpreted", so that the content is not write with document.write.
I don't know what I am missing here.
Here is what I tried (inspired from other answers on SO):
html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery-10.2.js"></script>
<script src="frame.js"></script>
</head>
<body>
<div>Some content</div>
<div id=myFrameContainer></div>
</body>
</html>
frame.js:
$(document).ready(function(){
$('<iframe></iframe>', {name:"myFrame",id:"myFrame"})
.css("height", 300)
.css("width", 500)
.load(function() {
$(this).contents().find("body")
.append('<scr' + 'ipt type="text/javascript" src="http://example.com/rotator.php?affid=12345"></scr' + 'ipt>');
}).appendTo("#myFrameContainer");
});
I also tried to append the element to the head and also without any success.
On top of this, I can see the content generated by the external script in Firebug (but maybe this is totally normal and has nothing to do with my question).
document.write is only available while the page is being loaded or after calling document.open. It cannot be used from a script appended later, as you're doing in frame.js.
I know that Document.ready - DONt wait for images to download.
So why it does here ?
http://jsbin.com/ehuke4/27/edit#source
(after each test - change the v=xxx in the img SRC)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert('0');
});
</script>
</head>
<body >
<img src='http://musically.com/blog/wp-content/uploads/2011/04/Google-Logo.jpg?v=42333' />
</body>
</html>
I think, the problem comes out from JSBin.com
Because, when you try this example on JSFiddle.net, it works properly
http://jsfiddle.net/vqte9/
It has to do with the fact that you're using "alert()", I think, though I'm not 100% sure why. If you change your code like this:
<body>
<div id='x'></div>
<img ...>
</body>
<script>
$(function() { $('#x').text("hello there"); });
</script>
you'll see that the text is filled in before the image loads.
edit — I don't know why this would make a difference, but I notice quite different behavior when I set up the ready handler with:
$(function() { whatever; });
and:
$(document).ready(function() { whatever; });
Now that's not supposed to be the case; the two forms are supposed to do exactly the same thing, as far as I know. However, they don't seem to. Here is a jsbin example that sets up the ready handler with the first form, and here is one that uses the second one. They behave very differently for me. I'll have to check the jQuery source to figure out how that can be true.
Here is the jQuery documentation explaining the equivalence of $(handler) and $(document).ready(handler).
Today I started to use JQuery. I found this explanation of how to do it.
On that page I also have a complete code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$("#example").autocomplete(data);
});
</script>
</head>
<body>
API Reference: <input id="example" /> (try "C" or "E")
</body>
</html>
I copy paste the code and it does not work. I have to mention that it works if I try it on the page that I have mentioned before (so JavaScripts are switched on in my browser).
I have to idea how to solve this problem because I have no error message and has no previous experience with the jquery. Can anybody help me with that?
ADDED:
I found a feature that can be important. When I load the above mentioned code/page, the auto-complete works as it is expected! If I reload the page, it change its appearance a bit (a space between the input field and top of the page appears) and auto-complete stops to work. Does it tell you something?
It's because it should be: $("#example").autocomplete({ source: data })
It seems the docs you found is outdated. A more up to date version can be found here: http://jqueryui.com/demos/autocomplete/
try .split(",")
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ,");
also attach a sorce
$("#example").autocomplete({
source: data
});