|
JavaScript - Uncaught Typeerror: Cannot Read Property 'value' Of Undefined
What i'm trying to accomplish is two things. To select the page i want to load in each tab then select how many of thoughs tabs i wish to open. When the number of tabs is selected i want it to launch. i also have a refresh button that works i just can't get the windows to load. by the way for this project i want it to open the same url that is selected on all of the tabs. Here is what i have:
<html> <head> </head> <form name="myform"> <select name="mySelectbox"> <option value="">Choose a destination...</option> <option value="http://www.yahoo.com/">YAHOO</option> <option value="http://www.google.com/">GOOGLE</option> <option value="http://www.altavista.com/">ALTAVISTA</option> <option value="http://www.amazon.com/">AMAZON</option> </select> </form> <form name = "myform2"> <select name = "numberWindows" onchange = "openThem()"> <option value = "0">Choose....</option> <option value = "1">TEST</option> <option value = "2">2</option> <option value = "3">3</option> <option value = "4">4</option> <option value = "5">5</option> </select> </form> <script> function open_win() { var myurl = parseInt(document.myform.myselectbox.value); window.open("myurl"); } </script> <script type = "text/javascript"> var i; function openThem() { var val = parseInt(document.myform2.numberWindows.value); for (i =0; i < val; i++) { open_win(); } } document.write('<form><input type=button value="Refresh To Do Again" onClick="history.go()"></form>') </script> </body> </html> Can someone please help. I'm just trying to learn how this is done. Thanks. Similar TutorialsGood day! Here is the problem, setting the slider to the site, here's an example: http://wowslider.com/best-jquery-sli...near-demo.html and do not connect different effects on this slider, such as buttons on the sides and smooth shifting slides. When you see the code generates this error: Uncaught TypeError: Cannot read property addEventListener' of undefined I do not know what this error, help, error on this site: http://uh219381.ukrdomen.com/ Or here's the code: http://uh219381.ukrdomen.com/themes/...1/wowslider.js sorry for my English The line "xmlHttp.onreadystatechange = function()" Does the following error, i dont know whats wrong. The code: Code: function MakeRequest()
{
var xmlHttp = getXMLHttp();
var page = document.getElementById("page").value;
var content = document.getElementById("code").value;
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4 && xmlHttp.status==200)
{
HandleResponse(xmlHttp.responseText);
}
}
xmlHttp.open("POST", "edit.save.php", true);
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send("page="+page+"&content="+content+"");
}
function getXMLHttp()
{
var xmlHttp
try
{
//Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch(e)
{
//Internet Explorer
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
alert("Your browser does not support AJAX!")
return false;
}
}
}
}
function HandleResponse(response)
{
document.getElementById('SavedFile').innerHTML = response;
}
I've been using this javascript (menu.js) for a drop down navigation menu for my site. Everything works well on it but in multiple browsers I get this error occurring on line 7 and 16 which is the d.className = "menuHover"; and d.className = "menuNormal"; Code: function expand(s)
{
var td = s;
var d = td.getElementsByTagName("div").item(0);
td.className = "menuHover";
d.className = "menuHover";
}
function collapse(s)
{
var td = s;
var d = td.getElementsByTagName("div").item(0);
td.className = "menuNormal";
d.className = "menuNormal";
}
Im new to this whole thing. What needs to be done to solve this? Appreciate the help. Hi, This is my first post while learning Javascript and jQuery as total noob. I have something like this: Code: var desc = "This is your title and here is even more that might be added so that we can get at least 60 characters or so";
var desc = desc.trim().substring(0, 40).split(" ").slice(0, -1).join(" ") + "...more";
alert(shortText );
It is actually being used on a page that calls a description from a MySQL table, but this example fails in exactly the same manner. Although FF and other browsers successfully initiate the script with errors, but IE loops endlessly and freezes up. FireBug reports "reference to undefined property a[d]". Using jQuery 1.6.2. I'm not really sure what property is undefined here and how this can work without freezing IE. Thanks in advance for any help! AJ Hello, I'm hoping someone can help me with this. I have 3 pages that I need to put into my framework, they are products, shopping cart and billing. At the moment they work perfectly fine. Here is a live example - http://www.cems.uwe.ac.uk/~r4-george...g/products.php Now, I have a framework for a whole website that I need to put these pages into. (http://www.cems.uwe.ac.uk/~r4-george/wp4/index.php) The index uses a switch statement to go between pages. Here is the index.php PHP Code: <?php # index.php /* * This is the main page. * This page includes the configuration file, * the templates, and any content-specific modules. */ // Require the configuration file before any PHP code: require_once ('./modules/config.inc.php'); // Validate what page to show: if (isset($_GET['p'])) { $p = $_GET['p']; } elseif (isset($_POST['p'])) { // Forms $p = $_POST['p']; } else { $p = NULL; } // Determine what page to display: switch ($p) { case 'about': $page = 'about.inc.php'; $page_title = 'About This Site Again'; break; case 'products': $page = 'products.inc.php'; $page_title = 'Products on this site'; break; case 'this': $page = 'this.inc.php'; $page_title = 'This is Another Page.'; break; case 'that': $page = 'that.inc.php'; $page_title = 'That is Also a Page.'; break; case 'contact': $page = 'contact.inc.php'; $page_title = 'Contact Us'; break; case 'search': $page = 'search.inc.php'; $page_title = 'Search Results'; break; // Default is to include the main page. default: $page = 'main.inc.php'; $page_title = 'Site Home Page'; break; } // End of main switch. // Make sure the file exists: if (!file_exists('./modules/' . $page)) { $page = 'main.inc.php'; $page_title = 'Site Home Page'; } // Include the header file: include_once ('./includes/header.inc'); echo "<div id=\"content\">"; // Include the content-specific module: // $page is determined from the above switch. include ('./modules/' . $page); // Include the footer file to complete the template: include_once ('./includes/footer.inc'); ?> It uses the .inc.php files located in the modules folder to switch between pages. Here is my products.inc.php - PHP Code: <? include("includes/db.php"); include("includes/functions.php"); if($_REQUEST['command']=='add' && $_REQUEST['productid']>0){ $pid=$_REQUEST['productid']; addtocart($pid,1); header("location:shoppingcart.php"); exit(); } ?> <!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>Products</title> <script language="javascript"> function addtocart(pid){ document.form1.productid.value=pid; document.form1.command.value='add'; document.form1.submit(); } </script> </head> <body> <form name="form1"> <input type="hidden" name="productid" /> <input type="hidden" name="command" /> </form> <div align="center"> <h1 align="center">Products</h1> <table border="0" cellpadding="2px" width="600px"> <? $result=mysql_query("select * from products"); while($row=mysql_fetch_array($result)){ ?> <tr> <td><img src="<?=$row['picture']?>" /></td> <td> <b><?=$row['name']?></b><br /> <?=$row['description']?><br /> Price:<big style="color:green"> £<?=$row['price']?></big><br /><br /> <input type="button" value="Add to Cart" onclick="addtocart(<?=$row['serial']?>)" /> </td> </tr> <tr><td colspan="2"><hr size="1" /></td> <? } ?> </table> </div> </body> </html> This is EXACTLY the same code as the working example. The products get listed correctly but the problem I have is the 'Add to Cart' button fails to work. Live example - http://www.cems.uwe.ac.uk/~r4-george...php?p=products Everything is in the right directory. When I inspect the 'Add to Cart' button in chrome I get the following - Quote: Uncaught TypeError: Cannot set property 'value' of undefined addtocart index.php:51 (anonymous function)index.php:83 onclick Any help is really appreciated, I'm struggling to see what I have done wrong. I don't know whether it's a Javascript problem. If you need any of the code from other pages I can post it too. Thanks in advance. I do not really understand what is happening to my code but it just tell me the following: Code: document.getElementById("#movingword") is null
How could the movingword be null when I have declared it in my code? The following is my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<title></title>
<style type="text/css">
body {
background-color:#000;
}
#scenery {
position:relative;
}
#moving {
position:absolute;
float:right;
top:100px;
left:50px;
}
#movingword {
position:absolute;
float:right;
top:0px;
left:0px;
}
</style>
<script type="text/javascript">
var a=120;
$(document).ready(function() {
document.getElementById("#movingword").style.top = a + "px";
});
</script>
</head>
<body>
<font color=white><h1> Hello World </h1></font>
<div id="scenery">
<img src="http://www.deshow.net/d/file/travel/2009-10/new-zealand-scenery-738-20.jpg" alt="">
<div id="moving">
<img src="http://maadinfo.com/images/blinking.gif" alt="">
</div>
<div id="movingword">
<font color="yellow"><font size="3"><b>This is the place</b></font><br>Welcome!</font>
</div>
</div>
</body>
</html>
I've been working on a web-site and I've run into a problem. None of the buttons I've created will access the functions that they're supposed to access. When I used the JavaScript console in Chrome it threw the error Uncaught ReferenceError: (function) is not defined I've looked over it for syntax errors, but I couldn't find any. Am I missing anything? Here's my unfinished code: 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" />
<title>N Physics</title>
<script type="text/javascript">
var numforms = 0;
var curentform = 0;
//consider further editing
function reset() {
window.location.reload();
}
function addvar() {
currentform = numforms + 1;
selectscreen();
}
function changevar() {
}
function selectscreen() {
selectdiv = document.createElement('div');
selectdiv.id = "select";
tkdklskjksdkfj
variable = document.createElement('SELECT');
variable.setAttribute('Name', 'variable');
variable.id = "variable";
ForceReg = document.createElement('option');
ForceReg.value = '001';
ForceReg.appendChild(document.createTextNode('Force'));
variable.appendChild(ForceReg);
Mass = document.createElement('option');
Mass.value = '002';
Mass.appendChild(document.createTextNode('Mass'));
variable.appendChild(Mass);
Accelleration = document.createElement('option');
Accelleration.value = '003';
Accelleration.appendChild(document.createTextNode('Accelleration'));
variable.appendChild(Accelleration);
selectdiv.appendChild(variable);
document.body.appendChild(selectdiv);
}
function newform() {
}
function cancel() {
}
function deleteform() {
}
fucntion checkprimary() {
}
function findeq() {
}
</script>
<style type="text/css">
<!--
body {
background-color:#999999;
}
#LayerHead {
position:absolute;
left:0px;
top:0px;
width:100%;
height:50px;
z-index:1;
background-color: #000000;
}
.spacer {
height:51px;
z-index:0;
}
.Button {
height:50px;
z-index:2;
}
.style1 {
color: #FFFFFF;
font-size: 43px;
z-index:1;
}
.style2 {
color: #FFFFFF;
font-size: 10px;
z-index:3;
}
#LeftButton {
width: 49%;
height: 50px;
left: 0px;
z-index:2;
}
#RightButton {
width: 49%;
height: 50px;
right: 0px;
z-index:2;
}
#Bottom {
position:fixed;
background-color:#000000;
width:100%;
bottom: 0px;
left: 0px;
z-index:3;
}
#select {
position: fixed;
width: 100%;
height: 100%;
opacity: 0.7;
filter: aplha(opacity=40);
background-color:#333333;
}
#variable {
position: fixed;
top: 50%;
width: 90%;
margin-left: auto;
margin-right: auto;
}
-->
</style>
</head>
<body>
<div id="LayerHead">
<span class="style1">N Physics</span>
</div>
<div class="spacer"></div>
<div class="Button">
<input type="button" id="LeftButton" value="Instructions" onclick="location.href = 'instructions.html'" />
<input type="button" id="RightButton" value="Reset" onclick="reset();" />
</div>
<div id="VarDone"></div>
<div class="Button">
<input type="button" id="LeftButton" value="Add a New Variable" onclick="addvar();" />
<input type="button" id="RightButton" value="Find the Equation" onclick="findeq();" />
</div>
<div id="Answer"></div>
<div id="Bottom">
</div>
</body>
</html>
uncaught exception: Syntax error, unrecognized expression:
Code: :([rel*=qnt_Rc]) I have this code: Code: grpDiv = $$('div:([rel*=' + txt_val + '])');
Which when operaterated on, we have: Code: grpDiv = $$('div:([rel*=qnt_Rc])
This error: uncaught exception: Syntax error, unrecognized expression: Code: :([rel*=qnt_Rc]) Is new. The code in question has been around for about a year and no issues with prototype 1.6.1. Yet we upgraded to 1.7, and this error started showing. any ideas what this could be and how to fix it? thanks Hey folks. I am needing some help with an error I'm getting from a project I'm working on. First off let me preface this all with the fact that I'm a total javascript noob. I'm really trying to understand what I'm doing wrong. So any help or advice is MORE than welcome. Here's what is happening. I found this code that will duplicate a row in a table and modifiy the name of a input in the row. Well for my purposes I have two different tables I need to work with. (each one idividually) So I changed the code a bit to make it accecpt a variable to use for the table name. (before it was static) and now I'm getting a error. Code: Error: uncaught exception: [Exception... "Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER)" nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)" location: "JS frame :: http://www.tourandtravelnow.com/admin/scripts/faxPageScript.js :: addRow :: line 14" data: no] This is the old code that would work (only for one of the tables) Code: var clone;
function cloneRow(){
var rows=document.getElementById('mytab').getElementsByTagName('tr');
var index=rows.length;
clone=rows[index-1].cloneNode(true);
var inputs=clone.getElementsByTagName('input'), inp, i=0 ;
while(inp=inputs[i++]){
inp.name=inp.name.replace(/\d/g,'')+(index+1);
}
}
function addRow(){
var tbo=document.getElementById('mytab').getElementsByTagName('tbody')[0];
tbo.appendChild(clone);
cloneRow();
}
onload=cloneRow;
and here is my code that doesn't work. Code: var clone;
function cloneRow(mytab){
var rows=document.getElementById(mytab).getElementsByTagName('tr');
var index=rows.length;
clone=rows[index-1].cloneNode(true);
var inputs=clone.getElementsByTagName('input'), inp, i=0 ;
while(inp=inputs[i++]){
inp.name=inp.name.replace(/\d/g,'')+(index+1);
}
}
function addRow(mytab){
alert(mytab);
var tbo=document.getElementById(mytab).getElementsByTagName('tbody')[0];
tbo.appendChild(clone);
cloneRow(mytab);
}
onload=cloneRow(mytab);
So like I said any help would AWESOME! have a great day. Kevin. Double post I'm sorry. Please look at my other one.
I can't get any info from Firebug except that one line, uncaught exception [object Object]. The code fully worked, then I needed to make it dynamically create Sortables from the scriptaculous library based on how many X were in a table in my database, which I've done, and I'm thinking it may be a simple slight parse error of some type, I'm not too good with Javascript, because now my script barely works. I've double checked the script's source code, the PHP variables are exactly what they should be. Code: print<<<HERE
Sortable.create('sortlist$box', { tag: 'img', overlap:'horizontal',constraint:false, containment: $list, dropOnEmpty: true,
onChange: function(item) {
var list = Sortable.options(item).element;
if(changeEffect) changeEffect.cancel();
changeEffect = new Effect.Highlight('changeNotification', {restoreColor:"transparent" });
},
onDrop: function(item) {
var thing=Sortable.options(item).element.identify();
var anchors = document.getElementById(thing).childNodes.length-2;
if(anchors > 20){
alert('This box had 20 creatures in it already, your last action has not been saved.');
window.location.reload();
}
else{
new Ajax.Request("saveImageOrder.php", {
method: "post",
parameters: { data: Sortable.serialize("sortlist$box") }
});
}
}
});
HERE;
$box++;
}
?>
});
</script>
if you solve this I'll send ya $10 via paypal I had read from books that the constructor property of object is inherited from its prototype. And the prototype can be changed dynamically. New property can be added to or deleted from object even it was created before the prototype change. But I got confused on below codes. Code: function A()
{
this.title = "A";
}
function B()
{
this.title = "B";
}
document.write("<br>");
var b = new B();
document.write(b.constructor);
document.write("<br>");
document.write(B.prototype.constructor);
document.write("<br>");
B.prototype = new A();
document.write(b.constructor); // Suppose to output "function A() ..."
document.write("<br>");
document.write(B.prototype.constructor);
document.write("<br>");
B.prototype.constructor = B;
document.write(b.constructor);
document.write("<br>");
document.write(B.prototype.constructor);
document.write("<br>");
But the actual result (both IE and firefox) is Code: function B() { this.title = "B"; }
function B() { this.title = "B"; }
function B() { this.title = "B"; }
function A() { this.title = "A"; }
function B() { this.title = "B"; }
function B() { this.title = "B"; }
Please help me. thanks. Hi I need to change the font color of the disabled textboxes of our application. These disabled textboxes exist at thousands of places both at pageload or disabled conditionally clientside. I am aware that in IE8 there is no other way to change the fontcolor except use readonly. So i thought that maybe if I changed the .disabled property to something like - Code: Object.disabled {
function set() {
this.readOnly = value;
}
function get() {
return this.readOnly;
}
}
then it would make my task much easier. I searched and found out that Object.defineProperty ,may do the trick. However i am getting the mull reference error. Is there any other way? I've got this JavaScript code that is doing stuff to the content of <TR> rows.. but it's overselecting and I need to filter the <TR>s it selects in the bold line. var theRows = document.getElementsByTagName("TR"); var r = 0; var strTitle = ""; while (r < theRows.length) { try { strTitle = theRows[r].innerText || theRows[r].textContent; strTitle = strTitle.replace(/\n|\r|\t|\^ /g,""); if (strTitle.substring(0,1) == "(") { if (strTitle.indexOf("STAT") == -1) { theRows[r].style.display = "none"; ... continues Below is the rendered html. What I really want to do instead of if (strTitle.substring(0,1) == "(") Is only perform the operation when a row that is using class="ms- formlabel, or maybe has a FieldInternalName. I understand that strTitle is just pulling content, so how do I condition on other properties or strings within the <TR> row given my currently logic? Rendered HTML. <TR> <TD nowrap="true" valign="top" width="190px" class="ms-formlabel"><H3 class="ms-standardheader"> <nobr>1. Do you become short of breath or develop chest pain when climbing a flight of stairs?</nobr> </H3></TD> <TD valign="top" class="ms-formbody" width="400px"> <!-- FieldName="1. Do you become short of breath or develop chest pain when climbing a flight of stairs?" FieldInternalName="ShortofBreath" FieldType="SPFieldBoolean" --> <span dir="none"> Thanks for any help or information! I have a page: http://www.girlscoutsmoheartland.org...progsearch.php that works perfectly fine in every browser I try, except for actual IE7 (it even works fine in IE8 emulating IE7). When you search for something on that page and have a display of results, each result has a link that changes a table row's display to visible, and hides the row when clicked again. It doesn't do that in IE7. There are no errors or warning in Firefox's Error Console. But IE7 has an "Error on Page" notice (which does NOT appear in IE8 emulating IE7), that says: Line: 59 Char: 11 Error: Could not get the display property. Invalid argument. The script in question is this, with what would be line 59 indicated: Code: <script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
var f = document.getElementById(id + "b");
if(e.style.display == 'table-row')
e.style.display = 'none';
else
e.style.display = 'table-row'; <<-- This is line 59
if(f.style.display == 'table-row')
f.style.display = 'none';
else
f.style.display = 'table-row';
}
//-->
</script>
I really don't know what to do, or where to begin. Everything in my limited knowledge seems to be working just fine. Most of my site's visitors use IE8, but enough use actual IE7 that I really need to fix this. Thanks for any help or advice! Liam I am and seem to remain newbie ... I have a JS script that presents a series of "pages" with different questions inside a single HTML file, by rewriting certain <div>s. I have an object like this that contains the questions and information about answer labels etc (the idea is that this should be easy to modify for someone who doesn't know JS): Code: var Questions = [
{
"question" : "How good is this?",
"labels" : ["excellent","very good","good","bad","very bad","awful"],
"page" : 0 ,
"random" : false ,
"type" : "default",
"varname" : "allgood"
},
{
"question" : Change[curCase]+"What do you think now?",
"labels" : BetterLabels,
"page" : 1 ,
"random" : true ,
"type" : "default",
"varname" : "betteradapt"
}
]
This object is initialized when the page loads, and a function reads the total number of pages by getting the maximum number of the "page" property across elements. Later, the object is accessed by thenextQuestion() function which uses the "page" property to looks whether each element belongs on the current page , then reads out the properties and presents the question. This works okay. Now the tricky bit: For some questions, their text should be different depending on which case is currently on the screen (Change[curCase]). curCase is different on each page, an integer between 0 and Change.length. I cannot get this to work for the Questions object, probably because the Questions object has been already initialized when the page loaded. How can I get my function nextQuestion() to "re-evaluate" the property "question" for all the elements of the Questions objectwhen nextQuestion() is called , using the current value of "curCase"? nextQuestion() is longer, but the (i think!) crucial bits are he Look whether question belongs on current page and push it onto new array: Code: for (i=0; i < Questions.length; i++) {
Questions[i].page = Questions[i].page;
if ( Questions[i].page == BlockNum ) { // if the q belongs on the current page
QuestionsObjectThisPage.push(Questions[i]);
}
}
Then, extract an array containing the questions, which will then be presented: Code: for (i=0; i < QuestionsObjectThisPage.length; i++) {
QuestionsThisPage.push(QuestionsObjectThisPage[i].question) ;
}
So what I'm looking for is something to change either of these two Object.push() functions so they don't simply take the value they find in the Questions (or QuestionsThisPage) object, but to re-evaluate the code for the "questions" property, taking into account the current value of curCase Phew. I found that really hard to describe; hope it's somewhat clear. For some reason I run my script and its saying missing } after property list. But I'm not seeing it. Code: <script type="text/javascript">
$(document).ready(function() {
$('div.message-error').hide();
$('div.message-success').hide();
$('ul#characterList').css( 'margin-left', '120px' );
$('li').remove('.characterName');
$("#handlerForm").validate({
rules: {
firstName: "required",
lastName: "required",
userName: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
password2: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
messages: {
firstName: "Please enter your firstname",
lastName: "Please enter your lastname",
userName: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
password2: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address"
}
});
$("input.submit").click(function() {
var userID = $("input#userID").val();
var defaultChar = $("select#charactersDrop option:selected").text();
var userName = $("input#userName").val();
var firstName = $("input#firstName").val();
var lastName = $("input#lastName").val();
var email = $("input#email").val();
var statusID = $("select#statusID").val();
var isAdmin = $("select#isAdmin").val();
var liElements = $("ul#characterList li");
var characterIDList = "";
for( var i = 0; i < liElements.length; i++ ) {
var liElement = $( liElements[ i ] );
// only start appending commas in after the first characterID
if( i > 0 ) {
characterIDList += ",";
}
// append the current li element's characterID to the list
characterIDList += liElement.data( 'characterID' );
}
var dataString = 'userID=' + userID + 'userName=' + userName + '&password=' + password + '&firstName=' + firstName + '&lastName=' + lastName + '&email=' + email + '&statusID=' + statusID + '&isAdmin=' + isAdmin + '&characterIDList=' + characterIDList + '&submitHandler=True';
$.ajax({
type: "POST",
url: "processes/handler.php",
data: dataString,
success: function(myNewVar) {
if (myNewVar == 'good') {
$('div.message-error').hide();
$("div.message-success").html("<h6>Operation successful</h6><p>" + userName + " saved successfully.</p>");
$("div.message-success").show().delay(10000).hide("slow");
$(':input','#handlerForm')
.not(':submit, :button, :hidden')
.val('')
$('ul#characterList li').each(function() {
$(this).remove();
});
} else if (myNewVar == 'bad1') {
$('div.message-success').hide();
$("div.message-error").html("<h6>Operation unsuccessful</h6><p>" + userName + " already exists in the database.</p>");
$("div.message-error").show();
} else if (myNewVar == 'bad2') {
$('div.message-success').hide();
$("div.message-error").html("<h6>Operation unsuccessful</h6><p>" + email + " already exists in the database.</p>");
$("div.message-error").show();
} else if (myNewVar == 'bad3') {
$('div.message-success').hide();
$("div.message-error").html("<h6>Operation unsuccessful</h6><p>" + userName + " and " + email + " already exists in the database.</p>");
$("div.message-error").show();
} else if (myNewVar == 'bad1bad2') {
$('div.message-success').hide();
$("div.message-error").html("<h6>Operation unsuccessful</h6><p>" + userName + " and " + email + " already exists in the database.</p>");
$("div.message-error").show();
}
}
});
return false;
});
});
</script>
<!-- Form -->
<form action="#" id="handlerForm">
<fieldset>
<legend>Add New Handler</legend>
<div class="field required">
<label for="userName">User Name</label>
<input type="text" class="text" name="userName" id="userName" title="User Name"/>
<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
</div>
<div class="field required">
<label for="password">Password</label>
<input type="password" class="text" name="password" id="password" title="Password" />
<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
</div>
<div class="field required">
<label for="password2">Confirm Password</label>
<input type="password" class="text" name="password2" id="password2" title="Confirm Password" />
<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
</div>
<div class="field required">
<label for="firstName">First Name</label>
<input type="text" class="text" name="firstName" id="firstName" title="First Name"/>
<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
</div>
<div class="field required">
<label for="lastName">Last Name</label>
<input type="text" class="text" name="lastName" id="lastName" title="Last Name"/>
<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
</div>
<div class="field required">
<label for="email">Email</label>
<input type="text" class="text" name="email" id="email" title="Email"/>
<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
</div>
<div class="field required">
<label for="statusID">Status</label>
<select class="dropdown" name="statusID" id="statusID" title="Status">
<option value="0">- Select -</option>
<?php
$query = 'SELECT ID, statusName FROM statuses';
$result = mysqli_query ( $dbc, $query ); // Run The Query
while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) {
print "<option value=\"".$row['ID']."\">".$row['statusName']."</option>\r";
}
?>
</select>
<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
</div>
<div class="field required">
<label for="isAdmin">Administrator</label>
<select class="dropdown" name="isAdmin" id="isAdmin" title="Administrator">
<option value="0">- Select -</option>
<?php
$administrator = array('Yes', 'No');
foreach($administrator as $admin):
?>
<option value="<?php echo $admin; ?>"><?php echo $admin; ?></option>
<?php endforeach; ?>
</select>
<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
</div>
</fieldset>
<fieldset>
<legend>Handler's Characters</legend>
<div class="field">
<label for="charactersDrop">Characters</label>
<select class="dropdown" name="charactersDrop" id="charactersDrop" title="Characters Dropdown">
<option value="0">- Select -</option>
<?php
$query = 'SELECT ID, characterName FROM characters WHERE ID NOT IN (SELECT characterID FROM handlerCharacters) ORDER BY `characterName`';
$result = mysqli_query ( $dbc, $query ); // Run The Query
while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) {
print "<option value=\"".$row['ID']."\">".$row['characterName']."</option>\r";
}
?>
</select>
<input type="button" value="Add Character" class="" onclick="HandlerCharacters()"/>
<ul id="characterList"></ul>
</div>
<input type="hidden" name="userID" id="userID" value="<?php echo $userID; ?>" />
<input type="submit" class="submit" name="submitHandler" id="submitHandler" title="Submit Handler" value="Submit Handler" />
</fieldset>
</form>
<!-- /Form -->
<!-- Messages -->
<div class="message message-error">
<h6>Required field missing</h6>
<p>Please fill in all required fields. </p>
</div>
<div class="message message-success">
<h6>Operation succesful</h6>
<p>Handler was added to the database.</p>
</div>
<!-- /Messages -->
<script type="text/javascript" language="javascript">
// Long version
function HandlerCharacters() {
function isDupe(which) {
var result = false;
$('ul#characterList li').each(function(i, e) {
if ($(e).data('characterID') == which) {
result = true;
return false; // break out of .each()
}
});
return result;
}
var characterID = $('#charactersDrop option:selected').val();
var characterName = $('#charactersDrop option:selected').text();
if (characterID > 0 && !isDupe(characterID)) {
// Create the anchor element
var anchor = $( '<a href="#">Remove</a>' );
// Create a click handler for the anchor element
anchor.click( function() {
$( this ).parent().remove();
return false; // makes the href in the anchor tag ignored
} );
// Create the <li> element with its text, and then append the anchor inside it.
var li = $( '<li>' + characterName + ' </li>' ).append( anchor );
li.data( 'characterID', characterID );
// Append the new <li> element to the <ul> element
$( '#characterList' ).append( li );
}
}
</script>
1. When creating a new element using the create method, do the zIndex values of all elements that follow it change? If so how do I get the zIndex of all divs with a specific classname within a specified container? I'm working with dynamic drive's 'dhtmlwindow' object class file and have made revisions to it...however this is my first time working with this type of file and while some things are easy to change the zIndex change of the setfocus function does not look like any of my previous scripts. I'm using ccs3PIE with my site. What I want to do is check if a DOM element has a css property like border-radius and then add a class to it. The problem I'm having is that I don't know how to check for the css property. I've been searching for it for a couple of hours now and I can't find anything that seems to work. Any ideas? Hello, I have the following object: Code:
var layers = {
photo1 : {
index : 1,
xPos : 63,
yPos : 48,
angle : 0
},
background : {
index : 0,
xPos : 278,
yPos : 163,
angle : 0
}
}
How can I sort the objects by the index property? Code: for(var layer in layers.sort(???))
{
}
Thx Very Much! |
|||||||