jquery .load() doesn't work - javascript

i can't seem to get jquery's .load() function to work. must be something simple i'm missing...basically just trying to load a fragment of more.html into index.html.
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.5.js" />
<title>Test</title>
<script type="text/javascript">
$(document).ready(function () {
alert("jquery script executing...");
$('#foo').load('more.html #bar', loadComplete);
});
function loadComplete (response, status, xhr) {
alert("load complete.");
}
</script>
</head>
<body>
<div id="foo">
foo foo foo
</div>
</body>
</html>
more.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>More</title>
</head>
<body>
<div id="bar">
bar bar bar
</div>
</body>
i see both the alerts -- the script is being executed, and the callback is being called (i.e. the load is completing). however, the contents of do not change. i've tried on safari, chrome, and firefox (all on OSX). there must be something obvious i'm missing...?

The load function is broken in jquery 1.5 release. You can find the bug ticket at http://bugs.jquery.com/ticket/8125. This is fixed in version 1.5.1. You can find the very latest jquery release with all the latest fixes including load() at http://code.jquery.com/jquery-git.js

Related

How to add a HTML page to another HTML page

i am failing to make the import function work, i am trying to import latestfeatures.html to Untitled Document.html here is my sample code can anyone check it and tell me what is wrong.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="import" href="/template/html/latestfeatures.html">
<script>
var link = document.querySelector('link[rel="import"]');
var content = link.import;
// Grab DOM from latestfeatures.html's document.
var el = content.querySelector('.latestfeatures');
document.body.appendChild(el.cloneNode(true));
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
you can use html iframe as iframe. Here you can get details of iframe.
http://www.w3schools.com/html/html_iframe.asp

How to remove a javascript function in the previous page on jQuery Mobile?

I have a site made up of various html pages in jQuery mobile. On one page I have a javascript function in the content. Upon going to another page, this function still exists. How can I remove it before displaying the next page?
I am using the following, which removes the dom elements on the previous page, but the javascript functions from the previous page are still available.
$('div').live('pageshow',function(event, ui) {
$(ui.prevPage).remove();
});
$('div').live('pagehide', function(event) {
$(event.target).remove();
});
Here's the full code of two pages. Upon clicking from page 1 to page 2, the function testContent which is only on page 1 still works.
Page 1
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Page 1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
$('div').live('pageshow',function(event, ui) {
$(ui.prevPage).remove();
doPageShow();
});
$('div').live('pagehide', function(event) {
$(event.target).remove();
});
</script>
</head>
<body>
<div data-role="page" data-cache="never">
<div data-role="content">
<h1>Page 1z</h1>
Page 2
<div id="test"></div><!-- this div should be removed upon going to the next page -->
<script>
function testContent() {
// this function still exists on the next page, how can it be removed?
alert("testContent");
}
function doPageShow() {
alert("Page 1");
alert($("#test").length); // shows 1 which is correct
testContent(); // function is on this page, so it works
}
</script>
</div><!--content-->
</div><!--page-->
</body>
</html>
Page 2
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Page 1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
$('div').live('pageshow',function(event, ui) {
$(ui.prevPage).remove();
doPageShow();
});
$('div').live('pagehide', function(event) {
$(event.target).remove();
});
</script>
</head>
<body>
<div data-role="page" data-cache="never">
<div data-role="content">
<h1>Page 2</h1>
Page 1
<script>
function doPageShow() {
alert("Page 2");
alert($("#test").length); // shows 0 which is correct
testContent(); // why does this still work???
}
</script>
</div><!--content-->
</div><!--page-->
</body>
</html>
Javascript objects live until the page refreshes. This is one of the advantages of jquery mobile, as parsing JS can take a long time on mobile devices, it is considered better to do it once.
If you really need to you could set the function to null.
I think I figured this out. Basically in JavaScript a function is just another object like:
doPageShow = function(){...}
Everything set in javascript persists on subsequent ajax loaded pages, so if I set a variable in one page, it will still have that value in another ajax loaded page, including functions.

Javascript and jQuery for a grey button to turn red

I am developing an application where I have the next JS 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Hover Effect</title>
<script type='text/javascript' src="/var/www/JSPROBAK/jquery.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".button").hover(function() {
$(this).attr("src","/var/www/JSPROBAK/button-hover.png");
}, function() {
$(this).attr("src","/var/www/JSPROBAK/button.png");
});
});
</script>
</head>
<body>
<img src="/var/www/JSPROBAK/button.png" alt="My button" class="button" />
</body>
</html>
The directory where I have button.png, button-hover.png and jquery.js is the one specified in the code. The code is supposed to turn a gray button (button.png) into a red button (button-hover.png) when putting the mouse over the gray button. The browser initially shows the image of the gray button but doesn't turn red when putting the mouse over it so I am assuming jquery.js is not being loaded correctly, any idea?
It would appear that you are referencing the server file location not the website relative location. if you are hosting the website from the www dir then I would try this:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Hover Effect</title>
<script type='text/javascript' src="/JSPROBAK/jquery.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".button").hover(function() {
$(this).attr("src","/JSPROBAK/button-hover.png");
}, function() {
$(this).attr("src","/JSPROBAK/button.png");
});
});
</script>
</head>
<body>
<img src="/JSPROBAK/button.png" alt="My button" class="button" />
</body>
</html>
Looks like you are referencing the file from the server's physical path, not the virtual one. Try remove var/www/ from the URLs, and if your HTML-file already resides in /JSPROBAK/ you can specify the paths as straight out relative paths like <img src="button.png" />.
jsFiddle( http://jsfiddle.net/ZWxEg/10/ )
If this code doesn't work for you, then you're not loading jQuery correctly.
-- Edited -- Using hover at gdoron's request :D
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Hover Effect</title>
<script type='text/javascript' src="/var/www/JSPROBAK/jquery.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".button").hover( function ()
{
$(this).attr("src","http://www.google.com/logos/2012/sovereignty12_hp.jpg");
},
function ()
{
$(this).attr("src","http://www.google.com/logos/2012/sundback12-hp.jpg");
});
});
</script>
</head>
<body>
<img src="http://www.google.com/logos/2012/sundback12-hp.jpg" alt="My button" class="button" />
</body>
</html>​
you won't be able to fade like this, if its just a solid colour you can do it with https://github.com/jquery/jquery-color
otherwise create <a> container with position relative (or another element if its not supposed to be clickable)
inside have 2 absolutely position images, one on top of the other
the underneath one is the hover and should have a lower z-index set (set z-index on both)
on the <a> hover event fadeOut the one with the highest z-index
on animation complete swap the z-indexes

twitter share button doesn't count properly

I tried to change my ip then share it again but still doesn't count.
My 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<title>:: my test ::</title>
</head>
<body>
Tweet
</body>
</html>
someone could help me?
Have you tried adding the JavaScript under the anchor tag.
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id))
{js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}
(document,"script","twitter-wjs");</script>
as described at https://dev.twitter.com/docs/tweet-button

how do I set up sevenup?

I am just trying to get this plugin to work but I am not sure what I am doing wrong.
http://code.google.com/p/sevenup/
So I tried to follow the one like of code they give you.
<script type="text/javascript" src="sevenup.0.3.min.js"></script>
...
<body onload="sevenUp.test( options, callback );">
My test page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script src="sevenup.0.3.js" type="text/javascript"></script>
</head>
<body onload="sevenUp.test( options, callback );">
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
So I did that and I get "option" is not defined.
So I tried this then
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!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 runat="server">
<title>Untitled Page</title>
<script src="sevenup.0.3.js" type="text/javascript">
var options = {
enableClosing: true,
enableQuitBuggingMe: true,
overlayColor: "#000000",
lightboxColor: "#ffffff",
borderColor: "#6699ff",
downloadLink: osSupportsUpgrade ?
"http://www.microsoft.com/windows/internet-explorer" :
"http://getfirefox.com",
overrideLightbox: false,
lightboxHTML: null,
showToAllBrowsers: false
};
var callback = function() {
// Switch IE-specific content
// AJAX call to map IP to 'IE6 user' status
// etc.
}
sevenup.test(options, callback);
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
but nothing happens.
What am I missing.
Can someone set me an example up? Like I tried many different ways other then above and I still can't get it to work.
A standard Html page should be fine. Since this really does not need serverside stuff.
Here is a standard html page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript" src="sevenup.0.3.js"></script>
<script type="text/javascript" src="sevenup_black.0.3.js"></script>
</head>
<body onload="sevenUp.plugin.black.test( options, callback );">
</body>
</html>
So not sure what I am still doing wrong. Get options undefined.
Try passing an empty options object and function as a parameter. The options variable is NOT exposed by the script and that seems to be why it says it's undefined (because it is). The callback variable isn't exposed either.
sevenUp.test({}, function(){} );
You could also easily load up the page in Firefox, put up a breakpoint and inspect the local variables.
You're using ASP.NET and the Body OnLoad is not a great place for putting JavaScript hooks.
Add this to the very bottom of your page before the </body> tag:
<script type="text/javascript">
// Call sevenUp
sevenUp.test( options, callback );
</script>
Another thing you want to do is make sure that you are referencing the correct path to the source JavaScript file:
<script type="text/javascript" src="<%=ResolveClientURL("~") %>/Scripts/sevenup.0.3.min.js"></script>
Remove the runat="server" from your <head> tag. That should fix it.

Categories