JQuery .blur not triggered - javascript

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.

Related

javascript append in Php echo?

I try to append something to a div over a Php echo
Includes
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
Php Code
<?php echo "<script type='text/javascript' >$('.notificationsBody').prepend('Hello World');</script>"; ?>
My Div Code
<div class="notificationsBody">TESTING DIV<br></div>
Is this possible and if yes why isnt this working ? My Console is empty too.
If not is there a other way to realize a Div appending over a Php Echo ?
Hint: I need a Php echo if its possible.
This is my complete index.php Page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<?php echo "<script type='text/javascript' >$('.notificationsBody').prepend('Hello World');</script>"; ?>
<div class="notificationsBody">TESTING DIV<br></div>
</body>
</html>
What i want at the end is like you have a Class and call the Function
<?php echo $myclass->theechofunction(); ?>
Then this will echo the Javascript which appending a Div to my Wrapper.
Yes its a bit crazy / difficult but thats what i need.
Thanks for every Answer.
EDIT
The Site Quellcode after calling the site
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type='text/javascript' >$('.notificationsBody').prepend('Hello World');</script>
<div class="notificationsBody">TESTING DIV<br></div>
You have two problems. First, you're loading two versions of jQuery, that will probably cause conflicts. Either load jQuery from ajax.googleapis.com or code.jquery.com, but not both.
Second, the Javascript that tries to append to .notificationBody is running before you add that element to the DOM. There are two ways to solve this: either move the code that echoes the <script> tag to after you echo the .notificationBody DIV, or run your code in the $(document).ready() handler, which runs after the DOM is completely loaded:
<?php echo "<script type='text/javascript' >
$(document).ready(function() {
$('.notificationsBody').prepend('Hello World');
});
</script>";
?>
See JS & jQuery can't detect html elements, and say's they are undefined

Linking to boostrap's Javascript code prevents onclick event handler from running?

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>

jQuery / Mootools conflict error

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/

Simple jQuery css background "chooser"

I wrote this very simple background chooser.
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<title>jQuery Demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="Normal.css" />
<script type="text/javascript">
$(document).ready(function(){
$("#StyleContrast").click(function() {
$("link[media='screen']").attr("href", "Contrast.css");
});
$("#StylePrint").click(function() {
$("link[media='screen']").attr("href", "Print.css");
});
$("#StyleNormal").click(function() {
$("link[#media='screen']").attr("href", "Normal.css");
});
});
</script>
</head>
<body>
<h1>Choose A Style:</h1>
<ul>
<li><a id="StyleContrast" href="#">Contrast</a></li>
<li><a id="StylePrint" href="#">Print</a></li>
<li><a id="StyleNormal" href="#">Normal</a></li>
</ul>
</body>
</html>
I have:
Normal.css
Print.css
Contrast.css
in the same folder with a very basic:
body {background-color:#000000;}
When I go to the URL it chooses Normal.css (as it should)
Then it changes to just fine to Print.css or Contrast.css (as it should)
But then it doesn't ´t go back (doesn't ´t choose) Normal.css again?
Can you help me spot what's wrong with the code?
$("#StyleNormal").click(function() {
$("link[#media='screen']").attr("href", "Normal.css");
});
Should be
$("#StyleNormal").click(function() {
$("link[media='screen']").attr("href", "Normal.css");
});
Also, I would update the version of jQuery you're using to 1.4.2
You used [#media='screen'] instead of just [media='screen']
In jQuery 1.4.2 (and I think in jQuery 1.3) # for attribute selection is deprecated. Notice that you had it right in the first two calls of your code, just not the last one. :D
If you want to optimize, you could add a class (say "switcher") to your links, and change your jQuery to this:
$(function(){
$(".switcher").click(function() {
$("link[media=screen]").attr("href", $(this).text() + ".css");
});
});

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