changing color on click - JavaScript Help

I am trying to build a design/configurator kit like the one shown in the following link

Please help me with the start up for this work. How can i start my coding.
How can we write a code such that when a user clicks on the color , the color of the shirt changes instantly(i.e., the code must be such that any change in the code must reflect as soon as a change is made).
It would be great if i can get a sample code for this scenario.

Posted On: Wednesday 2nd of January 2013 12:42:29 AM Total Views:  4438
View Complete with Replies

Related Messages:

Problem with Javascript in Iframe   (436 Views)
Can we write javascript in iframe I want to call a external application javascript in my iframe of the jsp i am writing....issue is we can only have one call of this JS per page,now I am importing some html tags from a 3rd party which also does this Javascript call usig c:import...if this JS is called more than once my call will be ignored. Only way that I have figured to fix it is by making these calls in separate iframes, by using iframes it appears to the external application that js is called by a separate page and it processes it. So,what I am looking for is this: 1)First is there a way to do it w/o using iframe: ex code: //import a 3rd party url(
Updating textarea from a popup   (497 Views)
It's been a while since I've been here, and sadly my return is for another question. Basically, what I want to do is update a textarea in the parent window with data from the child (pop-up) window. There's an add image button on the main parent window that, when clicked, opens a pop-up window to upload an image and select its alignment (left, center and right). When the image is uploaded successfully, I want to send an img tag with the path to the newly uploaded file (and the alignment in the style attribute) to a textarea in the parent window. The original plan was to upload the file in the parent window itself, but any Ajax file uploading tutorial that I read didn't work in my code, though I tested it outside of my code and it worked fine (didn't refresh the page). It doesn't need to be on the parent page, I just thought it would be easier than doing it through a pop-up window, and I don't want to bother figuring out why it's not working with my code so I'm sticking with a pop-up. Here is the textarea: Here is my uploading page: function uploadEnd(success, filename, align) { if(success == 1) { switch(align) { case 1: image_tag = ""; break; case 2: image_tag = ""; break; case 3: image_tag = ""; break; } window.opener.getElementById('content').value += image_tag; } } uploadEnd(, "/", ); Image: Choose image alignment: Left Center Right Uploading works fine. Updating the textarea does not. I know I'm probably doing it wrong, which is why I've come here for help because I've been trying to get this to work for over a day now with no success. Any help would be greatly appreciated as I'd like to get this site finished before the new year (though I doubt I will succeed). I can try to provide more information if necessary.
PHP get_file_contents equivalent for Javascript   (399 Views)
I have been trying to figure out how to access files on different servers through javascript, as i am converting an onsite myspace app to an iframe app, i need to get the contents of a file from the api and store it in a variable. Or maybe i could get it with php and store it in a javascript variable if that is possible, any help would be great
encryption and decryption by aes using ecdh key   (497 Views)
hi i need to know how do encryption by aes using ecdh key in java. regards krishna
swapping divs with java script   (514 Views)
Well, if you remember me from before, I was trying to get a code to make a div draggable. That worked. Now however, I'm trying to add some code that will track where the mouse is, and when it reaches a certain set of points, it will affect two divs. It will make one invisible, and the other invisible. They're in the same location, just have different z-indexes. Also, one is initially visible, while the other is invisible. I tried passing parameters (since I want this code to work for several pages), but that doesn't seem to work. I haven't tried making the code specifically for the that one set of divs yet. Well, here it is. //Draging Objects var elementToDrag, deltaX, deltaY //global variables //elementTo Drag - keeps track of what we're dragging //deltaX - //deltaY - function DragObject(which,event){ elementToDrag = document.getElementById(which) //draglayer is being passed //Compute distance to mouse click deltaX = event.clientX - parseInt( deltaY = event.clientY - parseInt( //clientX & Y represent the current position of the layer //calculates the distacne of the mouse from the layer //Register event handlers -- Determines which browse //top one is a standard code, teh second is for Internet Explorer (both do the same thing) if(document.addEventListener){ //detect the movement of the mouse, call the cuntion, always has to be true document.addEventListener("mousemove",moveHandler,true) document.addEventListener("mouseup",upHandler,true) }else{ document.attachEvent("onmousemove",moveHandler) document.attachEvent("onmouseup",upHandler) } //event is handled, end it -- stop all other events or functions will dragging if(event.stopPropagation){ event.stopPropagation() event.preventDefault() }else{ event.cancelBubble = true //internet explorer function. It does the same as the one above } } function moveHandler(e){ if(!e){ e = window.event //mousemove event } //move element to current mouse position //current mouse position - the offset = (e.clientX - deltaX) + "px" = (e.clientY - deltaY) + "px" //event is handled, end it if(e.stopPropagation){ e.stopPropagation() }else{ e.cancelBubble = true } } //Capture mouseup to end drag function upHandler(e){ if(!e){ e = window.event } //Internet Explorer or any other browser if(document.removeEventListener){ document.removeEventListener("mouseup",upHandler,true) document.removeEventListener("mousemove",moveHandler,true) }else{ document.detachEvent("onmouseup",upHandler) document.detachEvent("onmousemove",moveHandler) } if(e.stopPropagation){ e.stopPropagation() }else{ e.cancelBubble = true } } function disAppear(woop, shoop, IE, e, event) { if (IE) { // grab the x-y pos.s if browser is IE tempX = event.clientX + document.body.scrollLeft; tempY = event.clientY + document.body.scrollTop; } else { // grab the x-y pos.s if browser is NS tempX = e.pageX tempY = e.pageY if (tempX > 319 && tempX < 574 && tempY > 200 && tempY
jQuery errorPlacement / error positioning problem   (508 Views)
I have finally got around to utilising jQuery form validation on a new site I am doing the coding for and even though everything is working exactly as it should I need to move one of the error messages to display below rather than to the right as the other error messages and even though I have an idea of how it is done I can't get it to work (of course I may be way off). What I have done in the form so far is this  
List Items   (477 Views)
HI, I am dynamically generating a unordered list. I want to get value("somevalue") inside each item. How can i access it please help me. item1
Converting document.writeln output to textarea box   (525 Views)
I was just wondering if there was any easy way to convert a document.writeln output to display inside a textarea box in a form. I recently had done an airline reservation assignment (enter 1 for first class, enter 2 for economy class) assignment with all output just written to a blank webpage with window.prompts. Now my teacher wants us to get input (enter 1 or 2) from a textbox and to display all the output inside a textarea box inside a table.
javascript code not working in firefox   (430 Views)
Your code is far from being a proper XHTML document, but works in IE, since its really forgiving. A few things: the form elements should go in the form tag. Its only when they go inside the form tag, a name attribute given to them is valid, otherwise name attribute for non-form elements is deprecated. The language attribute of tag is deprecated. Use 'type ' instead. Something like . Its always recommended to place your script in the header section or include it at the bottom of your page. The way you are accessing the elements is completely wrong. One possible way would be to just pass the form element to the validate function and let the function pull out values from the form. Something like this: I would recommend you to get hold of a good tutorial (google is your friend) and start some serious reading., thanks got it working.... another thing, can you tell me how to get a login dialog box at the start i.e "on loading" of a page, Erm.. not using javascript. It's not a good way to adequately password protect pages. The best you can do with javascript is: - hide everything but the password form on the page (wrap everything in an html element, set display:none; or visibility:hidden; in css) unless the user enters the correct password (then set everything visible, using display:; or visibility:visible; respectively). unfortunately, everything on the page can be seen using view > source. - have the page redirect when the user enters the correct password ( as you're doing here ); again, anyone can look at the source, and find out the URL of the restricted page. - the best javascript 'password protection' i've seen did this: have a page with a password form; when the user enters anything in the password field; the script redirects to a folder with the name of the correct password; the basic principle is, that it's difficult for the average user to know where the folders on a webserver are, unless you give some hint ( links, common folder names, etc ). every incorrect guess will redirect to some unmapped location on your server; not ideal, but it restricts access. the bad point here, is that any user watching an 'admin' can see what the password-named folder is.. but, it's the best javascript password restriction method that I can imagine. You could take it a step further, and transform the password entered by some text/ascii math function before redirecting, but, the script suffers from the same vulnerability I mentioned if someone sees an admin login, although, its less obvious if the function generates some long non-dictionary string of characters. the real solution, is not to use javascript for password restriction. use some method server-side that only sends pages to users that are authorized. aswell as a good set of tutorials for javascript, some for basic server side authorization, and somewhere in there the client-protocol-server relationship, would be quite useful... If you want to go ahead with JS validation regardless of that advice, and you just want an input dialog to pop-up; this code _should_ do that: I haven't tested it atall, but it looks alright, although it's old-school quirks mode HTML. It would need the same fixes as s.o.s mentioned with regard to your posted code in order to make it 'new standards compliant'
Center Div in Browser   (485 Views)
A requirement for the project I am currently working on is that when various links on a page are clicked that the appropriate "layer" (i.e. div) will be displayed centered in the browser. I have tried using various javascript solutions and they center some div's and not others. Does anyone have an example of a way to show and hide a div that is centered in the browser no matter where the div is located in the html Any html/css and javascript code examples greatly appreciated!
Adbrite Java Ad Code Amendment Needed!   (453 Views)
Dear brothers I want that my adbrite inline text ads open in new window, so its need ad code alteration. Can anyone here alter this given below code so that ads open in new window.
debugging?   (421 Views)
hey im really new with javascript. can someone tell me whats wrong with this calculate distance and slope between two points } point 1: ( , ) point 2: ( , ) Calculate! distance: document.write(distance); slope: document.write(slopetop); ----- = document.write(slopefinal); document.write(slopebottom);
Javascript stopping redirect   (513 Views)
Good Early Morning (just barely) I have an issue with a javascript function in portion of a script apparently sending something to the browser that is preventing a redirect from working the way it was before I added this JS... Here is the JS that I added $(function() { var dates = $( "#from, #to" ).datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 1, onSelect: function( selectedDate ) { var option = == "from" "minDate" : "maxDate", instance = $( this ).data( "datepicker" ), date = $.datepicker.parseDate( instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings ); dates.not( this ).datepicker( "option", option, date ); } }); }); After that the tag comes, and then the body and a display table, etc... of this was working just fine... In the table there is a comparison of a variable like this: if ($accept != 'Y'){ // variable set in logcheck header('Location:../memupdate.php');// if haven't accepted TOS go there exit; } Before the JS code, when $accept wasn't 'Y' then it redirected just fine... With the JS code, it ignores the redirect and just exits... What is it in the JS code that would be interpreted as sending something to the browser, which is the only thing I can figure would be happening I know it is in that section of js code because if I take that out of the section, the script goes back to working just fine... Any assistance in this matter would be greatly appreciated. Douglas OK, I've narrowed it down even further... If I take out this portion of the code, then it allows the page to redirect as it should onSelect: function( selectedDate ) { var option = == "from" "minDate" : "maxDate", instance = $( this ).data( "datepicker" ), date = $.datepicker.parseDate( instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings ); dates.not( this ).datepicker( "option", option, date ); } So what is it in that code that would cause the problem Any ideas
brief walk through AJAX??   (473 Views)
daniweb users, i would like a brief walk through on AJAX if you'll can, i already looked through the post and didn't find what i was looking for, i would like to know how to refresh evertying on a web page but the header, which contains the navigation bar that way only the content info is refreshed,
Dynamic list of tagged posts, tumblr   (607 Views)
. Been searching all night for a way to do this, so thanks in advance for any help forthcoming. I'd like to be able to create a list of post titles that share the same tag in tumblr (rather than a list of tags). Tumblr allows you to filter your posts by tag by typing in a url, but this brings up a full page of posts, and I'd just like a list of the titles that I can then use as a menu. Hope this all makes sense. I'd imagine this is fairly simple as the capability to filter by tag already exists, but I cannot for the life of me work out how to do it.
javascript functio variable not getting sent through?   (504 Views)
theres nothgin wrong with my ajax, it works and is sending other variables but whe i want to send "pood" from function farmers(pood, happy) i twill not work. now when i call the function it goes like this onclick="farmers('pisslet', 'popcocky')" now it will not send PISSLET, what do i do its making me angry this is the querystring the other variables are sending to my ajaz page and i echo them out, but thie pood variable will not work . i even tried redefining it with var gummy = pood; it comes up blank on the ajax page when echos please help. not to mention i alert(pood) and it says htmltablet something. var queryString = "workingvariable=" + blabbr + "¬workingvariable =" + pood;
Decrementation Not Working   (451 Views)
Please see the comment on code below to see the problem. Sequence: x ^ n -1 var sqn; var pow=1; var pans=1; do { sqn = prompt("Enter Sequence: "); }while(sqn0){ document.write("9 --- "); for (x=1;x
Having problems with Google map tracking system for?   (519 Views)
all, im currently developing a S60 widget for Nokia phone. I will demo this widget on the S60 emulator. In order to stimulate the situation, a .nme file is used. Now the problem is , I got no idea when the tracker will move to the destination, because the purpose of this widget is, for users to select a destination and when the tracker moving on the map and hit the destination coordinate, it will pop-up a alert box to inform users that they have arrived the destination. Is there anybody knows about .nme file and how does it works with the google map
Whether it is possible to find the response url in?   (438 Views)
I have a problem as following... # I have stored some value in session to reach a Page "A" # I have other pages "B", "C", "D". # If I am moving from Page "A" to "B", I should not clear my session value but If I am moving from "A" to "C" or "A" to "D", then I have clear some values in session. # I have clear it on body unload of "A" on condition. Is there any way to find the URL which I am landing via javascript Is there any other way or work around to solve this problem. Note: I have menu in my left frame and content in right frame. my links to move from "A" to "B", "C" and "D" are in menu.
show image of the link on mouse over   (513 Views)
: This specific to the messages posted by members for various sections on this forum. when I read through the message text, and if the member has typed in some link of other site, on mouse over of this link i see small image of the link contents. I wanted to know how to do that Are the images stored in the database and shown on mouse over or its something else.
Help describing functions   (457 Views)
Basically i have to walk my lecturer through this code later on today Javascript Calander function is_leap(year) { if(year % 400 == 0) return 1; if(year % 100 == 0) return 0; if(year % 4 == 0) return 1; return 0; } function daysInMonth(year, month) { if (month == 9 || month == 4 || month == 6 || month == 11) return 30; if (month != 2) return 31; return (28+is_leap(year)); } function dayOfWeekFirstOfMonth(year,month) { var dayNumber = 1 if( year > 1900) for(i=1900;i 1) { for (i=1; i 1900) for(i=1900;i 1) { for (i=1; i
keycodes and button actions   (482 Views)
My buttons for Next page and Previous page are created in Javascript and images (in Saba Publisher). I need to make them keyboard accessible by using the keycodes for left arrow key (previous page) and right arrow key (next page)--right now alt-left and alt-right do not work. I have some code that might work, but it doesn't: document.onkeyup = KeyCheck; function KeyCheck(e) { var KeyID = (window.event) event.keyCode : e.keyCode; switch(KeyID) { case 36: window.location.href="/"; break; case 37: if (document.getElementById('prev').childNodes[0]) { window.location.href = document.getElementById('prev').childNodes[0].getAttribute('href'); } break; case 39: if (document.getElementById('next').childNodes[0]) { window.location.href = document.getElementById('next').childNodes[0].getAttribute('href'); } break; } } this.onkeyup = function(e) { var t = this; var v = t.findShortcut(e); if (v != null && v != false) {; return false; } return true; }; this.onkeydown = function(e) { var t = this; var v = t.findShortcut(e); if (v != null && v != false) { return false; } return true; }; this.onkeypress = function(e) { var t = this; var v = t.findShortcut(e); if (v != null && v != false) { return false; } return true; }; Below is some of the code from my file: function init12() { if( 'Trivantis_' ) == -1 ) AICC_Lesson_Location.set( 'a001_what_is_coop_why_coop_.html' ) setTimeout( "preload( 'images/topbar.gif','images/bkgnd.gif','images/backoff.gif','images/backclk.gif','images/backrol.gif','images/homeoff.gif','images/homeclk.gif','images/homerol.gif','images/nextoff.gif','images/nextclk.gif','images/nextrol.gif','images/nih_logo_whitea.gif','images/coo_logo_04.jpg','images/whitearrow.gif','images/greencheck.gif','images/orslogoa.gif','images/help.gif','images/exit.gif' )", 0 ) button50869.init() button50871.init() text474.init() text467.init() image48600.init() button74.init() button76.init() button78.init() text42733.init() text48010.init() button74.activate() button76.activate() button78.activate() var trivGoToPage = null var trivCompleteCnt = 1; var hasProcessedExitActions = false; var trivGoToPage = null var trivCompleteCnt = 1; var hasProcessedExitActions = false; var trivWndFeedback = null; var trivWndImmFeedback = null; var currFeedbackIdx = 0; var trivPageExited = false; function trivExitPage( newPage, bFeedback ) { if( newPage.indexOf( "ObjLayerAction" ) >= 0 || newPage.indexOf( ".action" ) >= 0 || newPage.indexOf( "history.back()" ) >= 0) trivGoToPage = newPage else trivGoToPage = 'ObjLayerActionGoTo("' + newPage + '")' if( !hasProcessedExitActions ) { findWH() hasProcessedExitActions = true setTimeout( 'checkLeavePage()', 100) } } function trivLeavePage() { trivCompleteCnt-- if( trivCompleteCnt
onchange dropdown menu into text box   (474 Views)
hello..hi...i have a little prob here where i need to display selected item from dropdown menu into text box. i'm also combine the with php code. what i want to is when user select the item it will display on textbox call programme and also when button search is click it will display the total number of particular programme. for now both my function is not working. here is the code and interface... //for display on textbox function addOption(x) { sOption=document.getElementById('programme').value; sOptions=sOption.split("\n"); if (sOption == '') {document.getElementById('programme').value=x+"\n";} else { if (sOptions.length > 1) {document.getElementById('programme').value=sOption+x+"\n";} else {document.getElementById('programme').value=sOption+"\n"+x+"\n";} } document.getElementById('programme').focus(); } //for the design and php code Welcome [Logout] Programme Summary Programme Selected : Programme : --- Select Programme --- DIP IN MULTIMEDIA TECHNOLOGY DIP IN MULTIMEDIA (BUSINESS COMPUTING) DIP IN MARKETING WITH MULTIMEDIA DIP IN MANAGEMENT WITH MULTIMEDIA DIP IN COMPUTER SCIENCE Student Details Student Hostel Student Fee Student Payment Student Information Student Fees Programme Payment Inbox Send Copyright 2009 MMC Kuching Attached image(s)
JavaScript Timer   (492 Views)
I have this script and i need some help numcount=0; t=setTimeout("test()",30000); document.getElementById("incrementBtn").disabled=false; timer_on = 1; function increasecounter() { timer_on = 1; numcount++; document.getElementById('countdiv').innerHTML=numcount; t=setTimeout("test()",30000); } function test() { if(timer_on) { timer_on=0; document.getElementById("incrementBtn").disabled="true"; document.getElementById("score").innerHTML = document.getElementById("countdiv").innerHTML; } } function reset() { timer_on = 0; numcount=0; document.getElementById("incrementBtn").disabled=false; document.getElementById("countdiv").innerHTML = 0; document.getElementById("score").innerHTML = ""; } New Document 0 now how do i make it so the amount of time that is left is shown in the 'time' div if anybody could help me i would be very, very, VERY
passing selected radio button value from js to java   (492 Views)
Hi all, I have two radio button yes,no in a.jsp. var IncludeCharges = document.getElementById("IncludeCharges_no").value; If i select yes i need to pass 1 to the java file and in case of no i need to pass 0. but when i retrive the radio button value using int Includecharges = Integer.parseInt(request.getParameter("IncludeCharges_yes"); It shows undefined... How could i get the value
Ajax not working in Mozilla firefox   (460 Views)
I have tested following code and it works fine in IE but not Mozilla: var ajax = false; if (window.XMLHttpRequest) { ajax = new XMLHttpRequest(); } else if (window.ActiveXObject) { try { ajax = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e1) { try { ajax = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) {} } } if (!ajax) { alert ('Some page functionality is unavailable.'); } Please tell me what is the solution
Show text/html when js timer runs out?   (559 Views)
I'l post back when i get home... essential
tinymce editor   (442 Views)
hi, please tell me how to download tinymce editor . i want to download the below tinymce editor
Custom context menu to work in FireFox   (460 Views)
, I've run into a brick wall with this problem. I've been given a huge webapp that was designed for IE6, and I need to make it work(and look good) in Firefox 3.0 and IE7. So far, it's just been a bunch of CSS, JSF, and HTML changes, with some extra javascript to cover the behaviors they used for IE. However, the page I'm working on now is a tough one. It's a giant grid, with up to 400 or so rows(which can be set to however many rows you want per page) and when you rightclick, a custom context menu comes up with 15 or so options in IE. They used behaviors to do all the attaching. I can rewrite the behaviors using javascript, but i'm still getting the Firefox default context menu. The code for this part of the app is very convoluted, so I'd rather not post any, but is there something specific about context menus I'm missing Or if someone knows a good site to look at, I'd appreciate it. Thank you, Jmasta, Thank you! That's exactly what I was looking for. Jmasta
AJAX Update Panel for GridView in ASP.NET2.0   (434 Views)
I have a GridView which is geting fiiled on the click of a button have method "FilGrid" I want to use the update panel of AJAX so that the page should not get refreshed at the button click but i m not able to do it .. I have putted the Gridview in update panel
Google Maps - JavaScript Help   (470 Views)
hi.I have a google map in which I load a kml overlay file.Then I need a button on the page itself that could remove the overlay.In google api manual it says to enable the layer you need to do thisvar georssLayer = new google.maps.KmlLayer(''); georssLayer.setMap(map);To DISABLE you need to do this"You can hide a KmlLayer by setting this value to null within the setMap() method."However if I do this on my pageit doesn't work.I'm not really good with javascript.
XMLHttpRequest continually suggests I like the word 'undefined'   (464 Views)
I'm almost positive this is the Javascript code, because it was working until I copied and pasted my code into the function for a more efficient method of doing things. Just take a look at it, and tell me if you see something wrong. Javascript error console says nothing. function yuigo(valname, values, id1, id2, filename) { var val = document.getElementById(id1).value; var callback = { success: function(o) { if (o.responseText.substr(0, 4) == "Nice") { document.getElementById(id1).style.border = "solid green 4px"; document.getElementById(id2).innerHTML = this.responseText; } else { document.getElementById(id1).style.border = "solid red 4px"; document.getElementById(id2).innerHTML = this.responseText; } }, failure: function(o) { document.getElementById(id1).style.border = "solid red 4px"; document.getElementById(id2).innerHTML = "orlynao"; } }; YAHOO.util.Connect.asyncRequest('POST', filename, callback, valname+"="+values); } function xmlEmail() { var val = document.getElementById("email").value; yuigo('emailadd', val, 'email', 'changer1', 'emailver.php'); }
[link] Ten Oddities And Secrets About JavaScript   (472 Views)
QuoteJavascript. At once bizarre and yet beautiful, it is surely the programming language that Pablo Picasso would have invented. Null is apparently an object, an empty array is apparently equal to false, and functions are bandied around as though they were tennis balls. This article is aimed at intermediate developers who are curious about more advanced Javascript. It is a collection of Javascripts oddities and well-kept secrets. Some sections will hopefully give you insight into how these curiosities can be useful to your code, while other sections are pure WTF material. So, lets get started.
.removeChild Not Working...   (488 Views)
. I'm trying to remove an additional radio selection if another radio button is selected. There's suppose to be two additional selections if one particular button is chosen. Then if the user picks another button then this additional selection disappears. ...
cookie on different domain   (467 Views)
Is there anyway to set cookie on a different domain
AJAX innerHTML problem   (507 Views)
, I hope someone can clarify the following for me. I have page which replaces the code of a certain
tag with other code (which on itself contains another div). The replacing of the code is done with AJAX. ...
What did it happen to these developers JS netscape websites..?   (642 Views)
What did it happen to these developers JS netscape websites.. I try to access them today many times, but could not be sucessfull!
formatnumber   (437 Views)
How can I convert the number 123456789 to 123,456,789
Is javascript updating before mysql finishes?   (495 Views)
, I have a fun application I did for class the other day. I noticed a little bug in it though. I've already turned it in, but I want to know what I could be doing better for my own benefit. The assignment was to create a mysql database, put some information into it, and then be able to update it and view the updates (I paraphrase for brevity). I created everything just fine, and I decided that I want the site to be ajaxy. I put 2 tables reflecting data in the database, but for some reason, the tables only sometimes update with ajax. sometimes they do, sometimes they don't. I feel like the response might be getting sent back before mysql finishes updating, but I'm just speculating. This was my first time using ajax with jQuery, in the past I had to implement with pure javascript (assignment's rules, I wanted to use jQuery). To run the site, just make sure you have mysql installed, you can adjust the security credentials in functions.php. I know that this site is very open to SQL injection, but that wasn't a concern for me for this assignment. Here's the code: index.php Admin var stateRegEx = /^((AL)|(AK)|(AS)|(AZ)|(AR)|(CA)|(CO)|(CT)|(DE)|(DC)|(FM)|(FL)|(GA)|(GU)|(HI)|(ID)|(IL)|(IN)|(IA)|(KS)|(KY)|(LA)|(ME)|(MH)|(MD)|(MA)|(MI)|(MN)|(MS)|(MO)|(MT)|(NE)|(NV)|(NH)|(NJ)|(NM)|(NY)|(NC)|(ND)|(MP)|(OH)|(OK)|(OR)|(PW)|(PA)|(PR)|(RI)|(SC)|(SD)|(TN)|(TX)|(UT)|(VT)|(VI)|(VA)|(WA)|(WV)|(WI)|(WY))$/; function updateOwnerData() { document.create_edit_owner.state.value = document.create_edit_owner.state.value.toUpperCase(); if( document.create_edit_owner.first_name.value.length > 0 && document.create_edit_owner.last_name.value.length > 0 && document.create_edit_owner.age.value.length > 0 && parseInt(document.create_edit_owner.age.value) > 0 && parseInt(document.create_edit_owner.age.value) < 255 && stateRegEx.test(document.create_edit_owner.state.value) ){ $.post('transaction.php', { type: "updateOwner", OID: document.create_edit_owner.OID.value, first_name: document.create_edit_owner.first_name.value, last_name: document.create_edit_owner.last_name.value, age: document.create_edit_owner.age.value, state: document.create_edit_owner.state.value }, function(output){ $('#create_owner_result').html(output).show(); }); updateTable("owner","ownerTable"); populateOwnerSelects(); }else{ alert(" fields must have a value, state must be a valid state, age must be a number between 1 and 254 inclusive"); } } function resetOwner(id){ document.create_edit_owner.OID.value = "-1"; document.create_edit_owner.first_name.value = ""; document.create_edit_owner.last_name.value = ""; document.create_edit_owner.age.value = ""; document.create_edit_owner.state.value = ""; document.loadOID.OID.value = ""; $('#load_owner_result').html("").show(); } function getOwner(){ $.post('transaction.php', { type: "loadOID", OID: document.loadOID.OID.value }, function(output){ var out = jQuery.parseJSON(output); document.create_edit_owner.OID.value = out.OID; document.create_edit_owner.first_name.value = out.first_name document.create_edit_owner.last_name.value = out.last_name document.create_edit_owner.age.value = out.age document.create_edit_owner.state.value = out.state $('#load_owner_result').html(out.message).show(); }); } function deleteOwner() { $.post('transaction.php', { type: "deleteOwner", OID: document.delete_owner.OID.value }); updateTable("owner","ownerTable"); updateTable("vehicle","vehicleTable"); populateOwnerSelects(); } function queryByOwner(){ $.post('structures.php', { table: "ownerQuery", OID: document.query_by_owner.OID.value }, function(output){ $('#ownerQuery').html(output).show(); }); } function updateVehicleData() { if( parseInt(document.create_edit_vehicle.year.value) > 1901 && parseInt(document.create_edit_vehicle.year.value) < 2155 && document.create_edit_vehicle.year.value.length > 0 && document.create_edit_vehicle.make.value.length > 0 && document.create_edit_vehicle.model.value.length > 0 ){ $.post('transaction.php', { type: "updateVehicle", VID: document.create_edit_vehicle.VID.value, OID: document.create_edit_vehicle.OID.value, year: document.create_edit_vehicle.year.value, make: document.create_edit_vehicle.make.value, model: document.create_edit_vehicle.model.value, color: document.create_edit_vehicle.color.value }, function(output){ $('#create_vehicle_result').html(output).show(); updateTable("vehicle","vehicleTable"); }); }else{ alert("Year must be between 1901 and 2155 and all fields must have some value"); } } function deleteVehicle() { $.post('transaction.php', { type: "deleteVehicle", VID: document.delete_vehicle.VID.value }); updateTable("vehicle","vehicleTable"); } function resetVehicle(id){ document.create_edit_vehicle.VID.value = "-1"; document.create_edit_vehicle.year.value = ""; document.create_edit_vehicle.make.value = ""; document.create_edit_vehicle.model.value = ""; document.create_edit_vehicle.color.value = ""; document.loadVID.VID.value = ""; $('#load_vehicle_result').html("").show(); } function getVehicle(){ $.post('transaction.php', { type: "loadVID", VID: document.loadVID.VID.value }, function(output){ var out = jQuery.parseJSON(output); document.create_edit_vehicle.VID.value = out.VID; document.create_edit_vehicle.year.value = out.year; document.create_edit_vehicle.make.value = out.make; document.create_edit_vehicle.model.value = out.model; document.create_edit_vehicle.color.value = out.color; for (var i = 0; i < document.create_edit_vehicle.OID.length; i++) { if (document.create_edit_vehicle.OID.options[i].value == out.OID) { document.create_edit_vehicle.OID[i].selected = true; break; } } $('#load_vehicle_result').html(out.message).show(); }); } function queryByVehicle(){ $.post('structures.php', { table: "vehicleQuery", VID: document.query_by_vehicle.VID.value }, function(output){ $('#vehicleQuery').html(output).show(); }); } //validate age with ^([1-9][0-9]*)$ $(document).ready(function(){ updateTable("owner","ownerTable"); updateTable("vehicle","vehicleTable"); populateOwnerSelects(); }); function updateTable(name, whichTable) { $.post('structures.php', { table: name }, function(output){ $('#'.concat(whichTable)).html(output).show(); }); } function populateOwnerSelects(){ $.post('structures.php', { table: 'ownerSelectBox' }, function(output){ $(".owners").html(output).show(); }); } This section is for creating a new owner or updating an existing one. If you want to create a new owner, there is no need to enter an ID. If you want to edit an existing owner, please load the owner using the owner ID in the 'Load Owner from ID' section. First Name Last Name Age State ID Load Owner from ID Use this to load pre-existing owners for editing ID Owners Delete Owner By ID ID Get vehicles owned by a given owner Owner ID This section is for creating a new vehicle or updating an existing one. If you want to create a new vehicle, there is no need to enter an ID. If you want to edit an existing vehicle, please load the vehicle using the vehicle ID in the 'Load Vehicle from ID' section. This can also be used for changing the owner of an existing vehicle. Year Make Model Color Owner ID ID Load Vehicle from ID Use this to load pre-existing vehicles for editing ID Vehicles Delete Vehicle By ID ID Get the owner of a given vehicle Vehicle ID functions.php
why this function is not getiing "call"?   (387 Views)
I'm trying to record how much time user is taking to read a piece of text. I'm using ajax to fetch a text file and show it to html page. IT works fine, but the corresponding time watching functions are not showing any effect. To make the question clear, I'm copying my script here. Following is JS script. ajax object is defined in other file, and it is working fine. This script is included by a html page with two button elements and a div to display text. /* * This script uses ajax object defined in ajax.js file, to load content from * ajaxtest.html. */ //global variables to store start time, end time and reading time. stime = 0; etime = 0; rtime = 0; function watchTime() { //get current time into minutes: var today = new Date(); var h = today.getHours(); //get hour part of the day. var m = today.getMinutes(); //get minute part of the day. var mtemp = m * 60; var s = today.getSeconds(); //get second part of the day. return mtemp + s; } function startReading() { 'use strict'; stime = watchTime(); console.log(stime); } function endReading() { 'use strict'; etime = watchTime(); console.log(etime); rtime = etime - stime; console.log(rtime); } window.onload = function() { 'use strict'; document.getElementById('stbtn').onclick = function() { startReading(); //This function is not getting "call".'GET', 'resources/test.txt', true); ajax.send(null); } var ajax = getXMLHttpRequestObject(); //create function for onreadystatechange ajax.onreadystatechange = function() { if(ajax.readyState == 4) { if((ajax.status >= 200 && ajax.status < 300) || (ajax.status == 304)) { document.getElementById('output').innerHTML = ajax.responseText; } else { document.getElementById('output').innerHTML = 'Error' + ajax.statusText; } } //end of readyState IF. } //End of main function. document.getElementById('endbtn').onclick = endReading; //This line does not show any effect. }
I am difficulties with DOM   (436 Views)
I cant seem understand the problem. i have narrow it down to line 16-20 but i may be wrong. Here is my codes. Any assistance and guidance will be greatly appreciated.. var emptyCart = true; var salesTotal = 0; var curRow = 1; function addItem (selectedItem) { if (emptyCart == true) {document.getElementById("shoppingCart").deleteRow(0); emptyCart = false; }} var lastItem = document.getElementById("shoppingCart").rows.length; var cartTable = document.getElementById("shoppingCart"); var newRow = cartTable.insertRow(lastItem);document.getElementById("chocolateTable").rows[lastItem].id = "R" + curRow; var itemCell = newRow.insertCell(0); itemCell.innerHTML = selectedItem; var priceCell = newRow.insertCell(1); priceCell.innerHTML = itemPrice; var actionCell = newRow.insertCell(2); actionCell.innerHTML = ""; ++curRow; var curItem = document.getElementById("chocolateTable").rows[selectedItem].cells; var selectedItem = curItem[0].innerHTML; var itemPrice = curItem[1].innerHTML; salesTotal += parseFloat(itemPrice.substring(1));document.getElementById('total').innerHTML = "Sales total: $" + salesTotal.toFixed(2); function removeItem(rowNum) {if (document.getElementById("shoppingCart").rows.length == 1) { document.getElementById("shoppingCart").rows[0].cells[0].innerHTML = "Your shopping cart is empty"; document.getElementById("shoppingCart").rows[0].cells[1].innerHTML = "$0.00"; salesTotal = 0; document.getElementById('total').innerHTML = "$" + salesTotal.toFixed(2);emptyCart = true; } else { var selectedRow = document.getElementById(rowNum).rowIndex; document.getElementById("shoppingCart").deleteRow(selectedRow); var itemPrice = document.getElementById("shoppingCart").rows[0].cells[1].innerHTML; salesTotal = salesTotal - parseFloat(itemPrice.substring(1));document.getElementById('total').innerHTML = "$" + salesTotal.toFixed(2); } } Central Valley Chocolates Gourmet Chocolates Chocolate Truffles$34.99 Pecan Caramel Duets$14.99 Chocolate Covered Cherries$28.99 White Chocolate Ganaches$22.99 Chocolate Mints$17.99 Chocolate Caramels$14.99 Chocolate Toffee Bark$9.99 Your Shopping Cart Your shopping cart is empty   This post has been edited by Dormilich: 31 January 2012 - 01:05 AM Reason for edit:: please use [CODE] [/CODE] tags when posting code
onClick doesnt work in Mac   (462 Views)
I have this code, and it works fine in windows but not in mac, does anybody know why function checkAgreement(to) { if(accept.checked == 1) { if(to == "photo") { window.location = "/index.phpoption=com_jwallpapers&view=submit&Itemid=18"; } else if(to == "video") { window.location = "/index.phpoption=com_hwdvideoshare&task=upload&Itemid=25"; } } else { alert("You must first read and agree to the terms and conditions above"); } } Submit a Photo Submit a Video I even tried a return false; at the end of the onclick but still nothing. Thank you, Musya This post has been edited by musya: 07 October 2009 - 03:35 PM
Change table row height   (463 Views)
, once again I have a Javascriptin' problem! In my table I have a row which is hidden like so... Error: Unknown Error (The slashes are because It's rendered from a PHP script) Linked CSS classes: .fsa { text-align: right; } .err { color: #FF0000; display: none; visibility: hidden; } This makes the row completely hidden and not even a space where it should go. It's then made visible with Javascript like so:'block';'visible'; nameErr.innerHTML='Please enter your name.'; This also works fine. Now it's visible I want to hide it again when they start to type in the nearby input text box. So this is my code for that .. function updateCheck(x){ var nameErrC=document.getElementById('err_nameC'); if(x==document.details.ord_name){'none';'hidden'; } Now, when they type into the text box the table row disappers like it should do, but it leaves a space where it was, almost like it's just turned blank but is still there. Is there anyway to make it disappear like it was at the start I tried changing it's height but that doesn't work, when I tested the same height changing function on a visible table it worked so it can't seem to change the height of the "ghost row" as it doesn't exist. Hope this isn't too confusing to understand
JQuery slideToggle - JavaScript Help   (496 Views)
I have a funcytion which get the height of the div and I want this function to be running while the slidToggle effect is taking place, anyone have any ideas If I run it before it looks gittery, if I run with the callback function it looks jittery. This is the function taken out of the function and running at the callback. So ideally it should be a smooth transition with the div sliding down and the height of another div adjusting. $('.accordionHeader').click(function() { $(this).toggleClass('accordionHeaderActive'); $(this).next().slideToggle('slow', function(){ contentHeight = $(".content").outerHeight(); height = (contentHeight-500); //$("#adjuster").animate({"height" : height},"fast"); $("#adjuster").css('height', height); }); return false; }).next().hide();
Going to a specific table row - JavaScript Help   (452 Views)
does jquery have a way to go to a specific table rowI already have the row id and simply want to return to the same position in the table in the event I have to reload the table
help creating a counter - JavaScript Help   (440 Views)
has anyone made a counter before that increases every 2 seconds it doe not have to increase every time a user clicks on something, it just has to increase by itself every 2 seconds
jQuery animate image1 to image2 - JavaScript Help   (442 Views)
I would like to write a code to move image1 to place of image2 (removing image2 in process).It should be easy, but It does not move enough in x and y directions. var pic1 = $('#image1).offset(); var pic2 = $('#image2').offset(); var dx = pic2.left - pic1.left; var dy = -; $('#image2').hide(); $('#image1').css({position: 'absolute'}).animate({ 'left': dx, 'top': dy});Even it seems to work it does not move the entire way, image1 does not reach image2 place. I can't figure out whats the problem.
dynamically change text based on dropdown selection - JavaScript Help   (444 Views)
hai i am new to javascript so please try to bare with me.i have a code which does the job of changing the value show at the bottom of select box dynamically. but the thing is it should actually need to change between only two values only so how can i change the script to do thatmyarr=new Array()myarr[401] = "Local path "myarr[403] = "URL or Local path "myarr[404] = "URL or Local path "myarr[405] = "URL or Local path "myarr[406] = "URL or Local path "myarr[407] = "URL or Local path "myarr[408] = "URL or Local path "myarr[409] = "URL or Local path "myarr[410] = "URL or Local path "myarr[411] = "URL or Local path "myarr[412] = "URL or Local path "myarr[413] = "URL or Local path "myarr[414] = "URL or Local path "myarr[415] = "URL or Local path "myarr[500] = "URL or Local path "myarr[501] = "URL or Local path "myarr[502] = "URL or Local path "myarr[503] = "URL or Local path "myarr[504] = "URL or Local path "myarr[505] = "URL or Local path "function doIt(objval){document.getElementById("msg").firstChild.nodeValue=myarr[objval];} 401 Authorization Required 403 Forbidden 404 Not Found 405 Method Not owed 406 Not Acceptable (encoding) 407 Proxy Authentication Required 408 Request Timed Out 409 Conflicting Request 410 Gone 411 Content Length Required 412 Precondition Failed 413 Request Entity Too Long 414 Request URI Too Long 415 Unsupported Media Type 500 Internal Server Error 501 Not Implemented 502 Bad Gateway 503 Service Unavailable 504 Gateway Timeout 505 HTTP Version Not SupportedLocal path
jquery selectors problem - JavaScript Help   (379 Views)
hey, $("a[name^=del_comment]").click(function() { $.ajax({ type: "GET", url: "index.phpuserid={$core->input['userid']}&CODE=delete_comment&id="+$(this).attr('id'), context: document.body, success: function(msg){ alert(msg); $('#all_comments').fadeOut('slow').load("index.phpuserid={$core->input['userid']}&CODE=get_comments").fadeIn('slow'); } }); return false; }); all i trying to do is to set an "onclick" event to all tags which there names starts with "del_comment" X X X X this code works fine, but for some reason, when i hit one of the links, this works, but if i try to hit again one of them, this will not work,i mean this works only one time and i have to reload the page to get it wrok again...hope you understand...sorry for my poor english...THANKS!
check box checked along - JavaScript Help   (424 Views)
[syntax=php]function chk_view() { var theForm = document.myform; for (i=0; i