This simple test page is meant to display a link and pop up an alert if the user clicks on it.
<!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" xml:lang="en" lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- uncommenting the next line prevents the alert from showing up -->
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"> -->
<script type="text/javascript">
$( document ).ready(function() {
$("#show_more_link").click(function(e) {
alert("on click running");
e.preventDefault();
});
});
</script>
</head>
<body>
<a id="show_more_link" href="#">click here</a>
</body>
</html>
Problem: uncommenting the line where Bootstrap's minified Javascript is included (line #10) breaks the onclick event:
If that line is commented out, clicking on the link pops up an alert (as intended).
If the line is uncommented, clicking on the link does nothing.
Why is this happening?
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js">
Your script isn't closed/is missing the closing </script> tag, that's why you get errors and your code breaks, you need to do it like this:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
Related
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.
My Fancybox form won't fire when I click on it. I'm sure I copied the source code from Fancybox correctly. I just need help figuring out why it won't fire. I update the jquery but that still doesn't seem to help. I got the source code from here; just scroll down a bit until you see inline and ajax along with a list of other inline lightboxes. I'm trying to get the "Inline" lightbox for my website but it won't fire.
Fancybox: http://fancyapps.com/fancybox/#examples (I'm trying to get "Inline - auto detect width / height" near the bottom of the webpage)
Here's what I tried:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript">
if ($(window).width() < 960) {
$('footer').css('padding', '20px');
}
</script>
</head>
<body>
<ul>
<li><a id="various1" href="#inline1" title="Lorem ipsum dolor sit amet">Inline - auto detect width / height</a></li>
</ul>
</body>
</html>
For a start, you will need to add the jquery.fancybox-1.3.4.js after the jquery.js
I'm trying to do a basic web page which uses both jQuery and MooTools.
You can see a working example here: http://jsfiddle.net/DddQA/
However, anytime I try to reference MooTools, it borks my page.
Here is my current code that I am having issues with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1rc1.min.js"></script>
<script type="text/javascript">
<!-- remove this line below to make the hyperlink box work correctly -->
jQuery.noConflict();
//<![CDATA[
$(window).load(function(){
$(".affiliate-scheme").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
});//]]>
</script>
<!-- remove this line below to make the hyperlink box work correctly -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
</head>
<body id="affiliate-scheme">
<div class="affiliate-scheme" style="background:red">
<h3>Affiliate Scheme</h3>
<ul>
<li>Promote Us</li>
</ul>
</div>
</body>
</html>
Many thanks for any help here. Very much appreciated.
RESOLVED:
http://jsfiddle.net/DddQA/2/
I am trying to (server-)validate an input field when it loses its focus. But nothing happens when the input field loses its focus, alert is not triggered.
My code, php-file:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php header('Content-Type: text/html; charset=ISO-8859-1');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Origin: *');
header('Access-Control-Origin: *');?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script language='javascript' type='text/javascript' src="jquery-1.6.2.min.js"></script>
<script language='javascript' type='text/javascript' src="smicadminjavascripts.js"></script>
<title>Service Management In the Cloud - Administration</title>
</head>
<body>
<div id="adminmenu">
<a id="agents" class="adminmenu_items">Agenter</a></br>
<a id="customer" class="adminmenu_items">Kunder</a></br>
<a id="misc" class="adminmenu_items">Övrigt</a></br>
</div>
<div id="adminarea">
</div>
</body>
</html>
Upon loading the side, I will add the form to the div id="adminarea"
Javascript file:
$(document).ready(function() {
$("#username_ID").blur(function(data){
alert("BLUR");
});
$.get("registeraccount.php", function(data){
$("#adminarea").html(data);
});
$("#registerform").live("submit", function(e){
e.preventDefault();
$.post("registeraccount.php",$(this).serialize(),function(msg){
alert(msg);
});
});
});
Other scripts in the .ready function works properly.
What is the problem and how can I fix it?
It works for me
http://sandbox.phpcode.eu/g/ca2bb.php
Click on username
Get back to my post
Alert fired!
For your problem:
Include jquery :)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
You can use .focusout() and don't forget to include jquery library.
I have an XHTML 1.0 Strict document in which I'm trying to make Shadowbox work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="Content-Type" content="text/html; charset=UTF-8" />
<title>Test page</title>
<link rel="stylesheet" type="text/css" href="shadowbox.css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
console.log('Howdy there!'); // displays, so no JS error in Shadowbox.init
</script>
</head>
<body>
<p>
<a href="image.jpg" title="Howdy" rel="shadowbox">
<img src="image.jpg" alt="Click to zoom." />
</a>
</p>
</body>
</html>
This document is completely valid according to my Firefox extension.
For some reason Shadowbox seems to do nothing. When I click the image link, the browser just opens the image as usual. No box at all.
I've tried not loading JQuery and only load Shadowbox but that didn't help, so it's not JQuery's fault either. This is with Shadowbox 3.0b by the way. Any ideas?
EDIT: I just got thinking... Shadowbox does some internal magic to figure out the path to it. However, this page is completely static and loaded directly from file on disk. Could this be the problem? Looking in the DOM, I see that Shadowbox.path is correctly set to "file:///C:/..." so maybe not?
You need to have (nebo have to have) all directories from showbox.zip in the directory with the file showbox.js, because showbox adds other scripts to the page.