JavaScript - Ajax Call Is Not Showing Correctly
i'm doing the following on a select box to load the next select box (in a td with the id)
if I look at the html returned by the ajax call I get PHP Code: <select name=optionvalue /><option value='test 1'>test 1</option><option value='test 2'>test 2</option><option value='test 3'>test 3</option></select> but it's showing as the select box and then test 1test 2test 3 my javascript code is PHP Code: function Loadoptionvalueselect() { //alert("here"); urltoajax = "getoptionsvaluesselect.asp?1=1" strarea = document.getElementById('optionid').value; urltoajax = urltoajax + '&optionid=' + strarea urltoajax = urltoajax + '&rnd=' + Math.round(Math.random() * 10000) // alert(urltoajax); $.ajax({ url: urltoajax, cache: false, success: function(html) { $("#troptionvalue").html(html); } }); } any ideas what could be causing this? Similar TutorialsHi, I am hoping I just need to be pointed in the right direction with this. I have Page1. When Page1 body onloads it uses Ajax to call PartA Within PartA I have a message board so members can write messages which will be sent to my database in PartA[1] and immediately posted for view on to PartA[2]. As I want to have my request to the server updating regularly I want to have PartA[2] on a timed loop to refresh - I do not need the content of PartA[1] to refresh. So the order of events would look like this: Page1 | onload call | v PartA / \ V V PartA[1] PartA[2] (loads once) (constantly refreshes) What I am not sure about is that I have <body> and <head> attributes in Page1 only. I have already used my body onload to call PartA (and can't use it to call PartA[2] before PartA has loaded anyway). I do not want the user to have to click a button or do anything to call up PartA[2]. So my question is how would I get PartA[2] to automatically load within PartA? I hope I have made this clear, but if I haven't let me know and I will try again. Right for day's i've searching for a jQuery/js/ajax script that opens like facebooks box where you can delete things update posts and so on... But i don't want that facebox thing i want a tut where i can buy things that will insert into the database and delete things and sooo on... I've made the box i just want the script for it.... I'm not good with js/jQuery/ajax.... Thanks. hihi i am doing a project regarding ajax how am i going to call the title because normally if you call start year is like var detail = eval.... then for loop it inside should be var start year="" startyear += ...[i].startyear something like this but how am i going to call the title inside the note? Code: { "infos": { "info": [ { "startYear": "1900", "endYear": "1930", "timeZoneDesc": "daweerrewereopreproewropewredfkfdufssfsfsfsfrerewrBlahhhhh..", "timeZoneID": "1", "note": { "notes": [ { "id": "1", "title": "Mmm" }, { "id": "2", "title": "Wmm" }, { "id": "3", "title": "Smm" } ] }, "links": [ { "id": "1", "title": "Red House", "url": "http://infopedia.nl.sg/articles/SIP_611_2004-12-24.html" }, { "id": "2", "title": "Joo Chiat", "url": "http://www.the-inncrowd.com/joochiat.htm" }, { "id": "3", "title": "Bake", "url": "https://thelongnwindingroad.wordpress.com/tag/red-house-bakery" } ] } Hi there How to send data from a text feild in GET method using an AJAX call... I already have codes working Code: to = "interfaces/add_department.jsp"; parm = "name="+name.value+ "&name2="+name2.value; alert(parm) post(to,parm,callBackFunctionForAddDepartment); Here the variable name may have "me&you" or "me you" like that.... so how do i encode it so that it reaches properly? I'm poking in the blind with javascript and hope that you can help with this issue. A javascript function is making a call to an external php file, which checks the compares the current time with a time stored in a mysql database. If a certain time passes, the php will send back instructions to redirect the user to a different page. The issue is that the page refreshes every time the is javascript function is executed. This resets any forms, or videos that the user is watching on the page. Here is the relevant code: Code: function checkTimer() { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { window.location.href = xmlhttp.responseText; } } xmlhttp.open("POST","php/5minforpage10.php",true); xmlhttp.send(); } window.setInterval(checkTimer,15000); Is there a way to achieve the goal of checking the time against the server time (via the php code) without refreshing the page? Thanks kindly! OK, I've just been working with kwyl, trying to intergrate a like/dislike script to her site. There was an original script, and although bugged, it's almost the What works The user clicks the like/dislike icon. Ajax sends a request to PHP: Either the like/dislike gets inserted into the database. OR, if the user has already liked/disliked that post, an alert error gets returned. What doesn't work If you click to like/dislike a post, it won't appear (the current count is in brackets beside the icons) unless the page is refreshed. How would I use this along side Ajax for auto update? $data = mysql_fetch_object(mysql_query('SELECT `like`,`unlike` FROM posts WHERE id="'.$row['id'].'"')); It's used he Code: $data = mysql_fetch_object(mysql_query('SELECT `like`,`unlike` FROM posts WHERE id="'.$row['id'].'"')); ?> <br /> <div class="vote"> <a href="javascript:;" onclick="doAction('<?php echo $row['id']; ?>','unlike');"> <input type="image" name="submit" src="images/down.gif" /></a> (<span id=""><?php echo $data->unlike;?></span>) <a href="javascript:;" onclick="doAction('<?php echo $row['id']; ?>','like');"> <input type="image" name="submit" src="images/up.gif"></a> (<span id=""><?php echo $data->like;?></span>) I hate javascript and this is utterly driving me up the wall. Any help would be much appreciated. If you need more informaton/code please ask. Hi, I have a form which goes to my insert page which inserts the data into the table. Except I didn't want to do a redirect to another page so I thought I would do an Ajax call. Both pages work until I change it to an ajax call. I am pretty certain that it is because I took out the <form action="insert.php"> because otherwise the page would redirect but if that is the case I don't know my way around it and if it isn't the problem I'm not sure what is. But here is my code: Form: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html><head> <script type="text/javascript"> function loadXMLDoc(File,ID){ if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("POST",File,true); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById(ID).innerHTML=xmlhttp.responseText; } } xmlhttp.send(); } </script> </head> <body> <div id="txtHint"> <form action="" method="post"/> <div class="scroll"> <textarea rows="6" cols="60" class="input" name="para1" required="required" onclick="clearMe(this)"> Insert Paragraph 1 </textarea> </div> <br /> <br /> <div class="scroll"> <textarea rows="6" cols="60" class="input" name="para2" onclick="clearMe(this)"> Insert Paragraph 2 </textarea> </div> <br /> <br /> <input type="submit" value="Submit" onclick="loadXMLDOC('insert.php','txtHint')" /> </form> </div> </body> And my insert.php is: Code: <?php $con = mysql_connect("localhost","user","password"); if (!$con){ die('Could not connect: ' . mysql_error()); } mysql_select_db("mydb", $con); $sql="INSERT INTO abc (para1, para2, date, time) VALUES ('{$_SESSION['para1]}', '{$_POST['para2']}',CURDATE(), CURTIME())"; mysql_query($sql) or die('Error: ' . mysql_error()); mysql_close($con) ?> Hey guys..... I've built a tool where users can search for something & the results show up in a select list as selectable options..... sometimes the results can take a few seconds to load depending on how many results there are... so I was attempting to show some "Results are loading" text when they search, & then hide it when they are displayed. However for some reason it's not working correctly...... both commands don't appear to work until the select list options have loaded & hence rendering them redundant.... I have tried putting them inside separate functions but no change in the behavior. What basically happens is I press the button to search & it searches & once the results show up so does the loading text.... however if I include the hide text command then the text doesn't show at all as it's hidden as soon as it's shown. Here is the code I am using.. PHP Code: function searchCats(text) { // Set URL for ajax request var url = 'search_cats.php?search_text='+text; // Set up element we're modifying var results = document.getElementById('cat_list'); // Trim string text.replace(/^ss*/, '').replace(/ss*$/, ''); if (text.length < 3) { alert('Please enter a search string more than 2 characters.'); return; } // Send the request, giving it an anonymous function that acts as the oncomplete event ajaxRequest(url, (function(ajaxResponse) { /* Deal with results */ // First we remove all current childs while(results.hasChildNodes()) { while (results.childNodes.length >= 1) { results.removeChild(results.firstChild); } } if (ajaxResponse == '') { // Display no results text document.getElementById('no_results').style.display='block'; } else { // Hide no results text document.getElementById('no_results').style.display='none'; // Display loading text document.getElementById('loading_results').style.display='block'; // Check for occurence of cat seperator (if not there then we know we only have one results) var sep_found = ajaxResponse.indexOf('!@!'); if (sep_found === -1) { // One result only // Seperate ID & cat name var parts = ajaxResponse.split('^@^'); // Create option element var option = document.createElement('option'); // Add attribute option.setAttribute('value', parts[0]); // Create text node var textNode = document.createTextNode(parts[1]); // Append text node to option element option.appendChild(textNode); // Now append option element to select list results.appendChild(option); } else { // Seperate cat data var cats = ajaxResponse.split('!@!'); // Loop through cat data for(i = 0; i < cats.length; i++) { // Seperate ID & cat name var parts = cats[i].split('^@^'); // Create option element var option = document.createElement('option'); // Add attribute option.setAttribute('value', parts[0]); // Create text node var textNode = document.createTextNode(parts[1]); // Append text node to option element option.appendChild(textNode); // Now append option element to select list results.appendChild(option); } } } })); // Hide loading text document.getElementById('loading_results').style.display='none'; } Thanks guys! 0 down vote favorite I have been struggling with this for some time.. I searched around but didnt get a solution yet. This is only an issue on production server. In my development environment, everything works just fine. I am using JQuery/Ajax to update product information based on product's Color attribute. for example, a product has A and B color, the price for color A is different from color B. When user choose different color, the price information is updated as well. What I did is to first add a javascript function: function updateProductVariant() { var myval = jQuery("#<%=colorDropDownList.ClientID%>").val(); jQuery.ajax({ type: "POST", url: "/Products.aspx/GetVariantInfoById", data: "{variantId:'" + myval + "'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (response) { var obj = jQuery.parseJSON(response.d); jQuery("#<%=lblStockAvailablity.ClientID%>").text(obj.StockMessage); jQuery(".price .productPrice").text(obj.CurrentPrice); jQuery(".price .oldProductPrice").text(obj.OldPrice); } }); } Then I can register the dropdown list's 'onclick' event point to function 'updateProductVariant' GetVariantInfoById is a Web method in the codebehind, its also very straightforward: [WebMethod] public static string GetVariantInfoById(string variantId) { int id = Convert.ToInt32(variantId); ProductVariant productVariant = IoC.Resolve<IProductService>().GetProductVariantById(id); string stockMessage = productVariant.FormatStockMessage(); StringBuilder oBuilder = new StringBuilder(); oBuilder.Append("{"); oBuilder.AppendFormat(@"""{0}"":""{1}"",", "StockMessage", stockMessage); oBuilder.AppendFormat(@"""{0}"":""{1}"",", "OldPrice", PriceHelper.FormatPrice(productVariant.OldPrice)); oBuilder.AppendFormat(@"""{0}"":""{1}""", "CurrentPrice", PriceHelper.FormatPrice(productVariant.Price)); oBuilder.Append("}"); return oBuilder.ToString(); } All these works fine on my local box, but if i upload to the production server, catching the traffic using fiddler, /Products.aspx/GetVariantInfoById becomes a 302 Object moved Object moved to here. On my local box, HTTP/1.1 200 OK Server: ASP.NET Development Server/10.0.0.0 Date: Thu, 03 Mar 2011 09:00:08 GMT X-AspNet-Version: 4.0.30319 Cache-Control: private, max-age=0 Content-Type: application/json; charset=utf-8 Content-Length: 117 Connection: Close But when deployed on the host, it becomes HTTP/1.1 302 Found Proxy-Connection: Keep-Alive Connection: Keep-Alive Content-Length: 186 Via: 1.1 ADV-TMG-01 Date: Thu, 03 Mar 2011 08:59:12 GMT Location: http://www.pocomaru.com/Products.asp...d/default.aspx Server: Microsoft-IIS/7.0 X-Powered-By: ASP.NET then of course, then it returns 500 error title>Unknown web method GetVariantInfoById/default.aspx. Parameter name: methodName Can someone please take a look? I think its some configuration in the production server which automatically redirects my webservice call to some other URL, but since the product server is out of my control, i am seeking a local fix for this. Thanks for the help! I would like this image gallery to sit behind everything else. right now white shows through on either side. Any help would be greatly appreciated. Code: <!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"> <meta name="Generator" content="Get Hosting With Joe (13.0.1.020)"> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"> <title>Home</title> <script type="text/javascript" src="wpscripts/jquery.js"></script> <script type="text/javascript" src="wpscripts/jquery.timers.js"></script> <script type="text/javascript" src="wpscripts/jquery.wpgallery.js"></script> <script type="text/javascript"> var nImgNum_pg_2 = 0; wp_imgArray_pg_2 = new Array(); wp_imgArray_pg_2[nImgNum_pg_2++] = new wp_galleryimage("wpimages/6ec6f779d991.jpg", 844, 369, "wpimages/6ec6f779d991t.jpg", ""); wp_imgArray_pg_2[nImgNum_pg_2++] = new wp_galleryimage("wpimages/8dcdb90c2d41.jpg", 844, 370, "wpimages/8dcdb90c2d41t.jpg", ""); </script> <style type="text/css"> body {margin: 0px; padding: 0px;} </style> <script type="text/javascript" src="wpscripts/jspngfix.js"></script> <script type="text/javascript"> var blankSrc = "wpscripts/blank.gif"; </script> <script type="text/javascript"> $(document).ready(function() { $('#wp_gallery_pg_2').wpgallery({ imageArray: wp_imgArray_pg_2, nTotalImages: nImgNum_pg_2, nGalleryLeft: 77, nGalleryTop: -183, nGalleryWidth: 844, nGalleryHeight: 842, nImageDivLeft: 0, nImageDivTop: 0, nImageDivWidth: 844, nImageDivHeight: 842, nControlBarStyle: 0, nControlBarExternalTop: 10, bNavBarOnTop: false, bShowNavBar: false, nNavBarAlignment: 0, strNavBarColour: 'none', nNavBarOpacity: 1.0, nNavBarIconWidth: 24, nNavBarIconHeight: 24, bShowCaption: false, bCaptionCount: true, strCaptionColour: '#ffffff', nCaptionOpacity: 0.6, strCaptionTextColour: '#000000', nCaptionFontSize: 12, strCaptionFontType: 'Courier New,Arial,_sans', strCaptionAlign: 'center', strCaptionFontWeight: 'normal', bShowThumbnails: false, nThumbStyle: 1, nThumbPosition: 0, nThumbLeft: 30, nThumbTop: 732, nThumbOpacity: 0.5, nTotalThumbs: 2, nThumbSize: 40, nThumbSpacing: 10, bThumbBorder: false, strThumbBorderColour: '#000000', strThumbBorderHoverColour: '#ffffff', strThumbBorderActiveColour: '#ffffff', bShowThumbnailArrows: false, nThumbButtonSize: 24, nThumbButtonIndent: 50, nColBorderWidth: 2, nTransitionStyle: 1, nStaticTime: 3044, nTransitTime: 1015, bAutoplay: true, loadingButtonSize: 38, bPageCentred: true, nPageWidth: 1000, nZIndex: 100, loadingButtonSrc: 'wpimages/wpgallery_loading_1.gif', blankSrc: 'wpscripts/blank.gif', rewindButtonSrc: 'wpimages/wpgallery_rewind_0.png', prevButtonSrc: 'wpimages/wpgallery_previous_0.png', playButtonSrc: 'wpimages/wpgallery_play_0.png', pauseButtonSrc: 'wpimages/wpgallery_pause_0.png', nextButtonSrc: 'wpimages/wpgallery_next_0.png', forwardButtonSrc: 'wpimages/wpgallery_forward_0.png', thumbRewindButtonSrc: 'wpimages/wpgallery_rewind_0.png', thumbForwardButtonSrc: 'wpimages/wpgallery_forward_0.png', rewindoverButtonSrc: 'wpimages/wpgallery_rewind_over_0.png', prevoverButtonSrc: 'wpimages/wpgallery_previous_over_0.png', playoverButtonSrc: 'wpimages/wpgallery_play_over_0.png', pauseoverButtonSrc: 'wpimages/wpgallery_pause_over_0.png', nextoverButtonSrc: 'wpimages/wpgallery_next_over_0.png', forwardoverButtonSrc: 'wpimages/wpgallery_forward_over_0.png', thumboverRewindButtonSrc: 'wpimages/wpgallery_rewind_over_0.png', thumboverForwardButtonSrc: 'wpimages/wpgallery_forward_over_0.png', strRewindToolTip: 'Reverse', strPreviousToolTip: 'Previous', strPlayToolTip: 'Play', strPauseToolTip: 'Pause', strNextToolTip: 'Next', strForwardToolTip: 'Forward', strThumbRewindToolTip: 'Reverse', strThumbForwardToolTip: 'Forward' }); }) </script> </head> <body text="#000000" style="background-color:#ffffff; text-align:center; height:1200px;"> <div style="background-color:transparent;text-align:left;margin-left:auto;margin-right:auto;position:relative;width:1000px;height:1200px;"> <div id="wp_gallery_pg_2" style="position:absolute; left:77px; top:-183px; width:844px; height:842px; overflow:hidden;"></div> <img src="wpimages/wp7d3e6c5d_06.png" width="997" height="1197" border="0" alt="" onload="OnLoadPngFix()" style="position:absolute;left:0px;top:3px;"> </div> </body> </html> IE, Chrome, and Safari all display this page correctly: http://eataustineat.com/testfolder2/ here is what i mean by Firefox displays it incorrectly in firefox: 1) type 'f' into the search field 2) you should move over to a youtube video 3) now click the Search tab at the bottom 4) you should notice the a portion of the video remains visable. the site uses jquery for the slider. what should I be looking for? I thought this would be simple. Evidently it's not With the date below (and it being 11.45 on the 27th as I type this), the counter returns the correct number of hours/mins/seconds remaining, but shows 33 days. It seems to be adding 31 days to the count, but I can't figure out where Code: function countdown(){ var bigday = new Date(2009,10,29,14,30,0,0); var today = new Date(); var difference = bigday - today; var remaining = Math.floor(difference/1000); // want seconds, not milliseconds var days = Math.floor(remaining/86400); remaining = remaining % 86400; var hours = Math.floor(remaining/3600); remaining = remaining % 3600; var minutes = Math.floor(remaining/60); remaining = remaining % 60; seconds = Math.floor(remaining); var out = days + " days, " + hours + " hours, " + minutes + " minutes and " + seconds + " seconds left..."; $('#countdown').text(out); setTimeout(countdown, 1000); } Hi Guys, I'm trying to do up a contact form that after a user submits the information, the drop down contact box will slide back up instead of redirecting to another page. The script works fine in Chrome and Safari, but Firefox and IE keeps redirecting to the php page. Hope someone can shed some light here, thanks! Html form: Code: <div class="left"> <!-- Login Form --> <form class="clearfix" action="contactengine.php" name="cform" method="post"> <h4>Drop us a mail</h4> <label class="grey" for="emailName">Name:</label> <input class="field" type="text" name="emailName" id="emailName" value="" size="23" /> <label class="grey" for="emailFrom">Email Address:</label> <input class="field" type="text" name="emailFrom" id="emailFrom" value="" size="23" /> <label class="grey" for="message">Message:</label> <textarea type="text" name="message" id="message" size="23"></textarea> <div class="clear"></div> <input type="submit" rows="" cols="" name="submit" value="Submit" class="bt_register" /> <span id="messageSent">Message sent successfully!</span> </form> <script language="JavaScript" type="text/javascript"> //You should create the validator only after the definition of the HTML form var frmvalidator = new Validator("cform"); frmvalidator.addValidation("emailName","req","Please enter your Name"); frmvalidator.addValidation("emailName","maxlen=20", "Max length for Name is 20"); frmvalidator.addValidation("emailFrom","maxlen=50", "Max length for email is 50"); frmvalidator.addValidation("emailFrom","req","Please enter your Email"); frmvalidator.addValidation("emailFrom","email","Please enter a valid email"); </script> </div> <div class="left right"> <!-- Register Form --> <h4>Contact Details</h4> <p class="grey"><b>XXX<br /></b>XXX<br />XXX<br />XXX</p> <p class="grey">T: 999<br />F: 999</p> <h5>Stalk Us</h5> <a href="index.html"><img src="misc/fb.png" border="0" alt="Facebook" /></a> <a href="index.html"><img src="misc/twit.png" border="0" alt="Twitter" /></a> </div> </div> </div> <!-- The tab on top --> <div class="tab"> <ul class="login"> <li class="left"> </li> <li>Hello there</li> <li class="sep">|</li> <li id="toggle"> <a id="open" class="open" href="#">Contact Us</a> <a id="close" style="display: none;" class="close" href="#">Close Panel</a> </li> <li class="right"> </li> </ul> </div> <!-- / top --> The Slider JS: Code: $(document).ready(function() { // Expand Panel $("#open").click(function(){ $("div#panel").slideDown("slow"); }); // Collapse Panel $("#close").click(function(){ $("div#panel").slideUp("slow"); }); // Switch buttons from "Hey There | Contact us" to "Close Panel" on click $("#toggle a").click(function () { $("#toggle a").toggle(); }); //submission scripts $('div#panel').submit( function(){ //statements to validate the form var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; var email = document.getElementById('emailFrom'); if (!filter.test(emailFrom.value)) { $('.email-missing').show(); } else {$('.email-missing').hide();} if (document.cform.emailName.value == "") { $('.name-missing').show(); } else {$('.name-missing').hide();} if (document.cform.message.value == "") { $('.message-missing').show(); } else {$('.message-missing').hide();} if ((document.cform.emailName.value == "") || (!filter.test(email.value)) || (document.cform.message.value == "")){ return false; } if ((document.cform.emailName.value != "") && (filter.test(email.value)) && (document.cform.message.value != "")) { //hide the form $('.div#panel').hide(); //show the loading bar $('.loader').append($('.bar')); $('.bar').css({display:'block'}); //send the ajax request $.post('contactengine.php',{emailName:$('#emailName').val(), emailFrom:$('#emailFrom').val(), message:$('#message').val()}, //return the data function(data){ //hide the graphic $('.bar').css({display:'none'}); $('.loader').append(data); }); //waits 2000, then closes the form and fades out $("#messageSent").show("slow"); setTimeout('$("#toggle a").toggle(); $("div#panel").slideUp("slow")', 2000); //stay on the page return false; } }); }); The PHP Code: PHP Code: <?php $EmailFrom = "xxx@xxx.com"; $EmailTo = "xxx@xxx.com"; $Subject = Trim(stripslashes($_POST['Webmail'])); $Name = Trim(stripslashes($_POST['emailName'])); $Email = Trim(stripslashes($_POST['emailFrom'])); $Message = Trim(stripslashes($_POST['message'])); // validation $validationOK=true; if (!$validationOK) { print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">"; exit; } // prepare email body text $Body = ""; $Body .= "Name: "; $Body .= $Name; $Body .= "\n"; $Body .= "Email Adress: "; $Body .= $Email; $Body .= "\n"; $Body .= "Message: "; $Body .= $Message; $Body .= "\n"; // send email $success = mail($EmailTo, Webmail, $Body, "From: <$EmailFrom>"); // redirect to success page if ($success){ print "<meta http-equiv=\"refresh\" content=\"0;URL=success.html\">"; } else{ print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">"; } ?> I have a form and javascript that doesn't work correctly. I think there's a problem with the javascript, but it's possible the form is the culprit. I'm new at this. Here is the form code for a search boxx: Code: <form id="search" method="get" name="search" action="promotions.html"> <input type="text" size="15" name="ws" maxlength="500" value="pen, keychain, etc." onfocus="this.value='';return false;" /> <button type="submit" value="Search">Go</button> <input type="hidden" name="ID" value="64857723-2161-4778-BDEB-3EE622F6CFF3" /> </form> Here is the javascript that's in the head of /promotions.html: Code: <script type="text/javascript"> function FrameRedirect() { var q = window.location.search; q = (q.length > 1) ? q.substring(1, q.length) : 0; var s = q.substring(0, 2); switch (s) { case 'ws': q = 'http://www.asiconnection.com/ProductSearch/LinkInQS.aspx?'+q; document.getElementById('Content').className = 'active'; break; case 'bn': q = q.substring(3,q.length); document.getElementById('RD2').className = 'active'; break; default: document.getElementById('RD1').className = 'active'; break; } iframe = '<iframe id="frame" src="'+q+'" width="780" scrolling="yes" frameborder="0" height="500"></iframe>'; document.getElementById('Content').innerHTML = iframe; } </script> The search box code is suppose to send the inputted search word to the javascript on /promotions.html page and then load the search results http://www.asiconnection.com/Product.../LinkInQS.aspx into the iframe on that page. The only thing that appears in that iframe is "Oops. Firefox cannot find productsearch" Can someone help me figure this out? Thanks in advance. I have some javascript code: first it gets string of the url in the address bar then it splits the string at the ? and grabs the right half it then makes an IFrame go to that string(which is yet another url I would manually insert) here is the code: Code: function redirect(){ var raw=window.document.location.href; if(content_address_start=raw.indexOf("?")!=-1){ var content_address=raw.split("frame.html?")[1]; window.document.getElementById('content').src=content_address; } } 'content' is the id of the IFrame, and frame.html is the html file this code is inside. Ok, so everything works perfectly when I test this code offline, but as soon as I load it to my website, and the .src line occurs, it just loads a blank page in the IFrame. What could be causing this? Perhaps certain sites will not allow themselves to be inside iframes? Much thanks in advance. I hope I gave enough information and relayed my problem clearly. EDIT: It seems that the code works on other sites, just not youtube. Why would it do this and are there any ways around it? Hey guys, My code works perfectly fine in internet explorer and google chrome, however, in firefox it does not. I have created an online form, but nothing happens when pressing the "submit" button firefox, whereas in other browsers, it works correctly. Also, the centering of the form is different. Please help me if possible. Thanks <!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> <title>Airduct Cleaning</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <link href="text.css" rel="stylesheet" type="text/css"> <script type="text/JavaScript"> function gosubmit(){ musimw.submit(); } </script> <style type="text/css"> #text { width: 250px; position: relative; margin-left: 200px; } </style> </head> <body leftmargin="0" topmargin="0"> <table width="998" heigt="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="147" valign="top"> <!----LEFT MENU---------> <? include "left_menu.php"; ?> </td> <td width="591" valign="top" colspan="1"> <!----TOP---------> <? include "top.php"; ?> <!----TITLE---------> <table width="100%" heigt="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="590" height="33" background="images/top_bg2.gif" valign="bottom"><img src="images/title_sub09_01.gif" /></td> <td width="1" bgcolor="#d3dfe6"></td> </tr> </table> <!----CONTENT---------> <!----story------> <form action=sendmail2.php method=post name=musimw enctype=multipart/form-data onSubmit="return musimm_check(this);"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr style=" position: relative; margin-left: 28px;"> <td width="50"></td> <td><p><span class="stxt2">Call for a Free Estimate</span><br> <br> <img src="images/img25.gif" align="left"><strong>For a free estimate, call: </strong></p> <div id="text"> Office: Insert Office #<br /> Toll-Free: Insert Toll Free # <br /> Email: Insert Email<br /> <br><em>Or, submit the online form below.</em> </div> </td> </tr> <tr> <td width="50"></td> <td> <table width="530" align="center" border="0" cellspacing="0" cellpadding="0" bgcolor="#EFEFEF"> <tr> <td width="10"></td> <td width="180" height="25">*First name</td> <td style="padding:10px 5px 5px 5px"><input type="text" size="20" name='fname'/></td> </tr> <tr> <td width="10"></td> <td width="180" height="25">*Last name</td> <td style="padding:10px 5px 5px 5px"><input type="text" size="20" name='lname'/></td> </tr> <tr> <td></td> <td >Phone Number<br /></td> <td style="padding:10px 5px 5px 5px"><input type="text" size="20" name='ptel'/> <select name='pteltype'> <option value='Home'>Home</option> <option value='Work'>Work</option> </select></td> </tr> <tr> <td></td> <td >Cell Phone Number<br /></td> <td style="padding:10px 5px 5px 5px"><input type="text" size="20" name='ctel'/></td> </select></td> </tr> <tr> <td></td> <td height="25">*Email Address</td> <td style="padding:10px 5px 5px 5px"><input type="text" size="20" name='email'/></td> </tr> <tr> <td></td> </tr> <tr> <td colspan="3"height="1" background="images/point.gif"></td> </tr> <tr> <td width="10"></td> <td width="180" height="25">*Type of Service</td> <td style="padding:10px 5px 5px 5px"><select name='bnametype'> <option value='Air Duct Cleaning'>Air Duct Cleaning</option> <option value='Dryer Vent Cleaning'>Dryer Vent Cleaning</option> <option value='Chimney Cleaning'>Chimney Cleaning</option> </select></td> </tr> <tr> <td></td> <td height="25">Square Footage<br /></td> <td style="padding:10px 5px 5px 5px"><input type="text" size="20" name='feet'/></td> </tr> <tr> <td></td> <td height="25">Approximate # of Ducts<br /></td> <td style="padding:10px 5px 5px 5px"><input type="text" size="20"name='vent' /></td> </tr> <tr> <td></td> <td height="25">Number of furnaces</td> <td style="padding:10px 5px 5px 5px"><select name='furnaces'> <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> </select></td> </tr> <tr> <td colspan="3"height="1" background="images/point.gif"></td> </tr> <tr> <td></td> <td valign="top" style="padding-top:5px">*Address</td> <td style="padding:10px 5px 5px 5px"><input type="text" class="inputPlain004" size="30" name='address'></td> <tr> <td></td> <td height="25">*City<br /></td> <td style="padding:10px 5px 5px 5px"><input name="city" type="text" class="inputPlain004" value="" size="12"></td> </tr> <tr> <td></td> <td height="25">*State </td> <td style="padding:10px 5px 5px 5px"><select name='statetype'> <option value='State'>IL</option></td> </tr> <tr> <td></td> <td height="25">*Zip Code</td> <td style="padding:10px 5px 5px 5px"><input name="zip" type="text" class="inputPlain004" value="" size="12"></td> </tr> <tr> <td colspan="3"height="1" background="images/point.gif"></td> </tr> <tr> <td></td> <td valign="top" style="padding-top:5px">Comments or Questions</td> <td style="padding:10px 5px 5px 5px"><textarea name='Comment' cols="45" rows="8"></textarea></td> </tr> <tr> <td colspan="3"height="1" background="images/point.gif"></td> </tr> </table> <!---BUTTON---> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="50" align="center"><a href="javascript:gosubmit()"><img src="images/bt_submit.gif"></a> <a href="#"><img src="images/bt_cancel.gif"></a></td> </tr> </table> </form> </td> <td width="1" bgcolor="#d3dfe6"></td> </tr> </table> </td> <td width="260" valign="top"> <!----RIGHT--------> <? include "right_menu.php"; ?> </td> </tr> </table> <!------BOTTOM----------> <? include "foot.php"; ?> </body> </html> Hiya, I'm looking for some guidance on a part of some coding practice I'm stuck on! I've created a shopping cart using javascript, the items save to the arrays etc and it all works fine. If the user adds the same product again to the cart the quantity is added onto the previous quantity that is already in the cart. To check if the item is already in the cart I've ued the below code, but what it does is update the quantity for the first cart, and when it updates the quantity for the second item it updates the quantity but keeps adding the same product to the cart in seperate elements of the array as well (if that makes sense? here are the two functions used: Code: function additem(id) { itemName = document.getElementById('name' + id).innerHTML; itemQuantity = parseInt(document.getElementById('quantity' + id).value); itemPrice = parseFloat(document.getElementById('price' + id).innerHTML); if(numitems == 0){ items[++numitems] = new Item(itemName,itemPrice,itemQuantity); displaycart(); } else{ checkarray(id, itemName, itemQuantity, itemPrice); } } function checkarray(id, itemName, itemQuantity, itemPrice){ for(i=1;i<=numitems;i++) { if(items[i].name == itemName){ items[i].quantity += parseInt(document.getElementById('quantity' + id).value); displaycart(); return true; } items[++numitems] = new Item(itemName,itemPrice,itemQuantity); } } It may jsut be a simple mistake I've made but it's been bugging me a lot and I can't seem to fix it, any help/pointers would be greatly appreciated. Hi I want to pass a strings from JS client to PHP server and vice versa. Problem is that I can't find a simple method of escaping them that gives consistent results. I've tried escape, unescape, urlencode and urldecode, but there are problems with some characters eg + From what I've read, JSON is the most reliable way to do this. I've figured out how to use json_encode to get a php string to a javascript variable, but I can't go the other way. How do I get the JSON string that represents a javascript object? Thanks for any help. I wasn't quite sure where to post this request as its JSON, javascript and php, so please tell me if I'm in the wrong place. I'm a js noob but have managed to cobble together some code for a simple calculator. All the math works well, but changing the radio button doesn't have any effect. Basically, I have 4 set of equations (long if/then statements) - 2 are to be used when one radio button is checked, 2 if the other is checked. Code: <html><head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <script language="JavaScript"> function temp(form) { var r1 = form.r1.value; var GNW = parseFloat(form.GNW.value, 10); var BNW = parseFloat(form.BNW.value, 10); var totalfee = 0; var netfee = 0; var discount = 0; //if the "old" radio button is selected, use the the next two if/then formulas if (r1=1) { for brevity sake, I'll omit the first two if/then equations Code: //close out the "old" options } //use the "new" option else if (r1=2) { // two more if/then statements } // this applies to all conditions discount = totalfee - netfee; form.totalfee.value = totalfee/4; form.netfee.value = netfee/4; form.discount.value = discount/4; } and now the radio buttons Code: <input name="r1" value=1 type="radio" checked="checked">Old (3m/3m) <input name="r1" value=2 type="radio" >Current (5m/5m)</p><p> hopefully the brevity makes the answer apparent, the full code is attached if I've left out a crucial detail. Code: I am trying to get the following image fade code to work but can't seem to figure out what the problem is. The images appear quickly (don't fade one to the other) in Firefox and Google and in IE8 when the image fades, even though the images are the same size, the new image starts out smaller and grows to the final size. Any suggestions are greatly appreciated. <SCRIPT LANGUAGE="JavaScript"> <!-- Begin // Set slideShowSpeed (milliseconds) var slideShowSpeed = 5000; // Duration of crossfade (seconds) var crossFadeDuration = 2500; // Specify the image files var Pic = new Array(); Pic[0] = 'images/Monsanto.gif' Pic[1] = 'images/Test2.jpg' Pic[2] = 'images/Test3.jpg' Pic[3] = 'images/Test4.jpg' Pic[4] = 'images/Test5.jpg' Pic[5] = 'images/Test1.jpg' var t; var j = 0; var p = Pic.length; var preLoad = new Array(); for (i = 0; i < p; i++) { preLoad[i] = new Image(); preLoad[i].src = Pic[i]; } preLoad.sort(function() {return 0.5 - Math.random()}); function runSlideShow() { if (document.all) { document.images.SlideShow.style.filter="blendTrans(duration=2)"; document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"; document.images.SlideShow.filters.blendTrans.Apply(); } document.images.SlideShow.src = preLoad[j].src; if (document.all) { document.images.SlideShow.filters.blendTrans.Play(); } j = j + 1; if (j > (p - 1)) j = 0; t = setTimeout('runSlideShow()', slideShowSpeed); } // End --> </script> |