JavaScript - Jquery Validate Outputting Error Messages At Top Of Screen
Hi all,
I have an issue that seems to relate to IE6 only. Tested and working in IE8 and FF3. If you go to the following page and click 'Buy Now' at the bottom of the page to submit the form the jQuery validate library error messages are displayed at the top of the page, rather than next to the corresponding form element: http://bit.ly/cc97GP Any help appreciated with this one. Seems to work fine in IE8 and FF3 as mentioned. Best Regards, Picco Similar TutorialsHi there, I am totally new to jquery and did manage to design a form and check fields on values (with a little help) with jquery. Now i also have 2 radio button options (gender), and at least 1 need to be checked. So i would like to validate this too before the form will be sent. Here is my validation now, without the radio funtion: Code: //ckeck if inputs aren't empty var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; var fields = $('#first_step input[type=text], #first_step textarea'); var error = 0; fields.each(function(){ var value = $(this).val(); if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='Email' && !emailPattern.test(value) ) ) { $(this).addClass('error'); error++; } else { $(this).addClass('valid'); } }); //check radio buttons Here my radio buttons check Does anybody know how to check if someone has filled in their gender? My radio group name ="gender". Furthermore if no radio button has been selected I would (really) like that the text within the spans, below, lights up red: Code: <div><label><span>Male</span><input type="radio" name="gender" id="Male" /><span>Female</span><input type="radio" name="gender" id="Female" /></label></div> If someone could help me out with this, u would really make my day! Tried a lot, but can't figure it out.. Thanks a lot for your time. Kind regards, Robbert HI I'm new to tinymce. I'm using tinymce with jquery validate with remote Methods. (Remote Methods: http://docs.jquery.com/Plugins/Valid...Methods/remote) I'm using jquery validate to check if email address already has been enter into the database, once it check the email hasn't been entered. It then enter the email with the tinymce textarea. Right now the email address gets enter but tinymce textarea is undefined. I understand I have to uses the var content = tinyMCE.get (editor_id);, but its still enter as undefined, here is my code below: Code: <html> <head> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.validate.js"></script> <script type="text/javascript" src="js/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({ // Location of TinyMCE script // General options mode : "textareas", elements : "editor_id", theme : "advanced", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true, content_css : "css/content.css", }); <script type="text/javascript"> $(document).ready(function(){ var validator = $("#myform").validate({ rules: { email: { required: true, minlength: 5, remote: { url: "test.php", type: "post", data: { dataType: 'json', email: function() { return $("#email").val(); }, content: function() { return $("content").val(); } }, }, } }, messages: { sub_name: { required: "Please enter a email address", minlength: "Your email addressmust be at least 5 characters long", remote: jQuery.format("Sorry but '{0}' has already been added. Please try again.") } }); }); </script> </head> <body> <form id="myform" action="" method="post"> <input type="text" name="email" id="email" size="15"/> <textarea id="editor_id" name="editor_id" rows="15" cols="80" ></textarea> <input type="submit" value="Submit"/> </form> Where do I added? Code: var content = tinyMCE.get('editor_id'); content = escape(content.getContent()); content = content.replace("+", "%2B"); content = content.replace("/", "%2F"); thanks I had posted a previous forum for help and solved a problem. However, than the links lost their formatting in the browser. I kept going as I am doing a lesson out of a textbook and the links are fixed now, but my coded object is not showing up. There should be a calendar in the upper righthand corner. I posted the javascript first and only a section of html after. Code: function calendar() { var calDate = new Date("March 18, 2011"); document.write("<table id='calendar_table'>"); writeCalTitle(calDate); writeDayNames(); writeCalDays(calDate); document.write("</table>"); } function writeCalTitle (calendarDay) { var monthName = new Array ("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"); var thisMonth=calendarDay.getMonth(); var thisYear=calendarDay.getFullYear(); document.write("<tr>"); document.write("<th id='calendar_head' colspan='7'>"); document.write(monthName[thisMonth]+" "+thisYear); document.write("</th>"); document.write("</tr>"); } function writeDayNames() { var dayName = new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"); document.write("<tr>"); for (var i=0; i < dayName.length; i++){ document.write("<th class='calendar_weekdays'> "+dayName[i]+"</th>"); } document.write("<tr>"); } function daysInMonth(calendarDay) { var thisYear = calendarDay.getFullYear(); var thisMonth = calendayDay.getMonth(); var dayCount = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); if (thisyear % 4 == 0) { if((thisyear % 100 != 0) || (thisyear % 400 == 0)){ dayCount[1] = 29; //this is a leap year } } return dayCount[thisMonth]; } function writeCalDays(calendarDay){ var dayCount = 1; var totalDays = daysInMonth(calendarDay); calendarDay.setDate(1); var weekDay = calendarDay.getDay(); document.write("<tr>"); for (var i = 0; i < weekday; i++) { document.write("<td></td>"); } while (dayCount <= totalDays) { if (weekDay == 0) document.write ("<tr>"); document.write("<td class='calendar_dates'>"+dayCount+"</td>"); if (weekday == 6) document.write ("</tr>"); dayCount++; calendarDay.setDate(dayCount); weekDay = calendarDay.getDay(); } document.write("</tr>"); } Code: <title>The Chamberlain Civic Center</title> <link href="ccc.css" rel="stylesheet" type="text/css" /> <link href="calendar.css" rel="stylesheet" type="text/css" /> <script src="cal.js" type="text/javascript"></script> </head> <body> <div id="head"> <script type="text/javascript"> calendar(); </script> <img src="logo.gif" alt="Chamberlain Civic Center" /> </div> If you want, I can upload the files to my school server so you can view the webpage in a browser. The error console says that there is a missing parenthetical where I have the ! symbol. I don't see that. Also it says that calendarDay is not defined. What can I do to find out what the errors in the error console mean?
Hi, Could I use javascript code to stop Internet Explorer script error messages? Bob Kuspe Hi, I'm using HTA with iframes contains external web pages, lot of pages (external - not mine) contains errors and while running 'script error' pops. If running the same pages in IE there are only error notice in the bottom left side of the browser. Can I do something to ignore those script error popups in my HTA? (I'm using also Javascript for my HTA) Could I use javascript code to stop Internet Explorer script error messages? Regards Bob Hello all, I have a form that submits a POST request when data is submitted. A Servlet then processes this POST request and a JavaBean is used to make some calculations. The HTML response is not generated within the Servlet but instead I forward the request to a JSP to generate the response. - This all works fine, thankfully. However, I am stupidly suck trying to validate the form on the client side with a JavaScript function before the form is submitted. Here is my index.jps: Code: <%-- Document : index Created on : 19-Nov-2009, 13:41:30 Author : lk00043 --%> <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/JavaScript"> <!-- Start hiding JavaScript Statements function validateForm() { var student; var score1, score2, score3, score4; student = document.getElementById('student'); s1 = document.getElementById('score1'); s2 = document.getElementById('score2'); s3 = document.getElementById('score3'); s4 = document.getElementById('score4'); score1 = parseInt(s1.value); score2 = parseInt(s2.value); score3 = parseInt(s3.value); score4 = parseInt(s4.value); if(student.value.length == 0) { document.getElementById('StudentError1').innerHTML = " Enter a student name!"; return false; } if ((isNaN(score1)) || (score1 < 0) || (score1 > 100)) { document.getElementById('Error1').innerHTML = " Enter a number between 0 and 100!"; return false; } if ((isNaN(score2)) || (score2 < 0) || (score2 > 100)) { document.getElementById('Error2').innerHTML = " Enter a number between 0 and 100!"; return false; } if ((isNaN(score3)) || (score3 < 0) || (score3 > 100)) { document.getElementById('Error3').innerHTML = " Enter a number between 0 and 100!"; return false; } if ((isNaN(score4)) || (score4 < 0) || (score4 > 100)) { document.getElementById('Error4').innerHTML = " Enter a number between 0 and 100!"; return false; } } // End hiding JavaScript Statements --> </script> <title>Lab Class 7 - Task 2</title> </head> <body> <h1>Lab Class 7</h1> <form name="collectgrades" action="AssessGrades" method="POST" onSubmit="validateForm()" > Name of Student: <input type="text" name="student" id="student"/><span id="StudentError1"> </span><br /> Presentation: <input type="text" name="score" id="score1"/><span id="Error1"> </span><br /> Writing style: <input type="text" name="score" id="score2"/><span id="Error2"> </span><br /> Technical content: <input type="text" name="score" id="score3"/><span id="Error3"> </span><br /> Depth of analysis: <input type="text" name="score" id="score4"/><span id="Error4"> </span><br /> Feedback:<select name="feedback" size="4" multiple="multiple"> <option>"Could be better structured."</option> <option>"Depth of analysis is good."</option> <option>"Very advanced material."</option> <option>"Very well structured."</option> </select><br /> <input type="submit" value="Submit" /> </form> </body> </html> Regardless of whether incorrect input is given, the data is still POSTed to the server and calculated on or a Server Side error is given. Am I correct in calling the function onClick? The validation essentially needs to be so that: - Student field contains a string - Score1, Score2, Score3 and Score 4 contain a number between 0 and 100 Any help is most appreciated, Cheers, Beetle. Hi, I'm trying to use a form which is existent on one of my sites and try re-creating a similar form on another site for the exact same purpose. Here is the URL for the form on our website Cast Iron Cookware Depot. I have everything duplicated but running into form validation errors. Right now without event entering any data into the form and also the verification code the form still gets submitted but ofcourse runs into "object expected" error at onsubmit="return validate(this);"> by IE Debugger. Below is the total code and would appreciate if any of you gurus point out where the mistake is and also why the exact same code is working on one site is not working on this site. Thanks much in advance. Please help me! ------------------------------------------------------------------------ Code: <style> .TableBG { background-color: #83a338; color: #ffffff; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; } .no { font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #333333; width: 35px; text-align:right; } input, textarea {border: 1px inset #cccccc; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 12px;} .input01 {width: 150px;} .input02 {width: 250px;} .button { background-color: #83a338; color: #000000; border: 1px outset #83a338; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; } </style><br /> <br /> <table width="600" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#FFFFFF" class="TableBG"> <tr> <td bgcolor="#FFFFFF"> <FORM name="form1" method="POST" action="http://s.p8.hostingprod.com/@castironcookwaredepot.com/php/tellafriend.php" onsubmit="return validate(this);"> <FORM name="form1" method="POST" action="http://s.p4.hostingprod.com/@bestsafetyapparel.com/php/tellafriend.php" onsubmit="return validate(this);"> <table width="100%" border="0" cellpadding="5" cellspacing="0"> <tr> <td class="TableBG"> </td> <td class="TableBG"><strong>Your Name: </strong></td> <td class="TableBG"><strong>Your Email: </strong></td> </tr> <tr> <td colspan="3" height="5"></td> </tr> <tr> <td> </td> <td> <input type="text" name="sName" class="input01" style="font-weight: bold;" /> </td> <td> <input type="text" name="sEmail" class="input02" size="40" style="font-weight: bold;" /> </td> </tr> <tr> <td colspan="3" height="5"></td> </tr> <tr> <td width="4%" class="TableBG"> </td> <td width="36%" class="TableBG"> Your Friend's Name :</td> <td width="60%" class="TableBG">Your Friend's Email:</td> </tr> <tr> <td colspan="3" height="5"></td> </tr> <tr> <td class="no"><strong>1.</strong></td> <td> <input type="text" name="name1" class="input01" /> </td> <td> <input type="text" name="email1" class="input02" size="40" /> </td> </tr> <tr> <td class="no"><strong>2.</strong></td> <td> <input type="text" name="name2" class="input01" /> </td> <td> <input type="text" name="email2" class="input02" size="40" /> </td> </tr> <tr> <td class="no"><strong>3.</strong></td> <td> <input type="text" name="name3" class="input01" /> </td> <td> <input type="text" name="email3" class="input02" size="40" /> </td> </tr> <tr> <td class="no"><strong>4.</strong></td> <td> <input type="text" name="name4" class="input01" /> </td> <td> <input type="text" name="email4" class="input02" size="40" /> </td> </tr> <tr> <td class="no"><strong>5.</strong></td> <td> <input type="text" name="name5" class="input01" /> </td> <td> <input type="text" name="email5" class="input02" size="40" /> </td> </tr> <tr> <td class="TableBG"> </td> <td colspan="2" class="TableBG">Your Message </td> </tr> <tr> <td colspan="3" height="5"></td> </tr> <tr> <td colspan="3" align="center"> <textarea name="comments" cols="65" rows="5" id="comments" style="width: 420px;"></textarea> </td> </tr> <tr> <td class="TableBG"> </td> <td colspan="3" class="TableBG">Enter Verification Code</td> </tr> <tr> <td colspan="3" height="5"></td> </tr> <tr> <td colspan="3" align="center" valign="absmiddle"><img src="http://s.p8.hostingprod.com/@castironcookwaredepot.com/php/captcha.php" align="absmiddle"> <input type="text" name="vercode" value="Enter Verification Code" onFocus="if(this.value=='Enter Verification Code') this.value='';" onBlur="if(this.value=='') this.value='Enter Verification Code';" size="25"/></td> </tr> <tr> <td colspan="3" align="center"> <input type="submit" name="Submit" value=" Send Email " class="button" /> </td> </tr> </table> </form> </td> </tr> </table> <script> function validate(frm) { name = frm.sName; email = frm.sEmail; name1=frm.name1; email1=frm.email1; err_flag = 0; if (name.value == "" || !removeSpaces(name.value)) { alert ("Please enter proper Name!"); name.value=""; name.focus(); return false; } else if (email.value == "" || !validate_email(email.value)) { alert ("Please enter proper Email!"); email.value=""; email.focus(); return false; } else if (name1.value == "" || !removeSpaces(name1.value)) { alert ("Please enter proper Friend\'s Name!"); name1.value=""; name1.focus(); return false; } else if (email1.value == "" || !validate_email(email1.value)) { alert ("Please enter proper Friend\'s Email!"); email1.value=""; email1.focus(); return false; } } function validate_email(e) { var str=e; var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i if (!filter.test(str)) return false; else return true; } function removeSpaces(string) { var tstring = ""; string = '' + string; splitstring = string.split(" "); for(i = 0; i < splitstring.length; i++) tstring += splitstring[i]; return tstring; } </script> <br /> <br /> Regards Learner Greetings all. Please let me apologize in advance if this is a tremendously stupid question, but I'm new to Jquery and ASP... and I'm suddenly building an entire site made of both. *sigh* I keep getting an error message in Firebug in relation to the accordion menu I created. "$ not defined $(function() {" If the navigation is isolated on its own page, the error does not exist. It only occurs once it is brought into the Store Master page. Working Version: http://www.stephenjosephinc.com/testing/ Non-Working Version: http://74.124.26.78/ The following code is cut from the head in the non-functional page: Code: <head id="ctl00_Head1"> <title>Shop Online</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link rel="icon" href="App_Master/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="App_Master/favicon.ico" type="image/x-icon" /> <link type="text/css" href="App_Master/css/custom-theme/jquery-ui-1.8.4.custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script> <link type="text/css" href="App_Master/theme/ui.all.css" media="screen" rel="stylesheet" /> <script type="text/javascript"> $(function() { $("#accordion").accordion({ collapsible: true, autoHeight: false, header: "h3"} ); }); </script> <link href="App_Themes/DefaultTheme/master.css" type="text/css" rel="stylesheet" /> <link href="App_Themes/DefaultTheme/menu.css" type="text/css" rel="stylesheet" /> </head> If it helps at all, you may view the entire code he http://74.124.26.78/full_code.txt Please note: I DID NOT create the code on the aforementioned page. It's an ugly, nightmarish mess (at least to my non-ASP-loving eyes), so please don't hate me for bad form in the body code. The only code that I wrote for this page is the bit you see above and the hrefs for the side nav. Any help would be massively appreciated! Thank you in advance! On my wordpress based website, I have jquery for the top button selection part on the homepage, and lightbox for the gallery, and they work fine. But when I enter the url with a GET (.com?something), they don't work. I can't figure out if it is a jQuery error, or jQuery with wordpress's url structure. Ex: http://www.naturallookinstitute.com/gallery/ - OK http://www.naturallookinstitute.com/gallery?get - Lightbox broken http://www.naturallookinstitute.com/ - OK http://www.naturallookinstitute.com?get - Top header selector broken Hello. I'm coding a simple hover-opacity thing for some images on my site on the navigation bar. Although I'm receiving this message in my Firebug. uncaught exception: Syntax error, unrecognized expression: . Here's the navigation code: Code: <div class="navigation"> <a href="home"><img class="home" src="images/navigation/home.gif" /></a> - <a href="home" class="home">Home</a> <a href="news"><img class="news" src="images/navigation/news.gif" /></a> - <a href="news" class="news">News</a> </div> So the effect I've made is, when I hover the image, its opacity gets set to 1. And when I move my mouse away the image changes opacity to .5 And when I hover the text "Home" or "News" the same effect happens with the image. And here's my jQuery: Code: $(function(){ $('.navigation img').css({ opacity: .5 }); $('.navigation img').hover(function(){ $(this).stop().animate({ opacity: 1 },300); }, function(){ $(this).stop().animate({ opacity: .5 },300); }); $('.navigation a').hover(function(){ var imageClass = $(this).attr('class'); $('.navigation img.' + imageClass).stop().animate({ opacity: 1 }, 300); }, function(){ var imageClass = $(this).attr('class'); $('.navigation img.' + imageClass).stop().animate({ opacity: .5 }, 300); }); }); I can't seem to find the error in my script(s). Any help is appreciated. EDIT: Apparently the error appears when I make anchor tags around the image. Code: <a href="home"><img ... /></a> This gives the error. :S Code: <img ... /> But this doesn't? How can this be? Hi all. I am using the Inline Form Validation Engine jQuery plugin found here, and though I have posted at their forum as well, am having a heck of a time (not being well versed in js OR Ajax, unfortunately) All I need to do is edit the code so that when the onSubmit function is processed, it returns only the first error it encounters, rather than keeping and display the array of every error. I have picked through the code several times, and can't seem to find where the array is stored. I thought perhaps I could find a for loop to limit, but am at a complete loss. Is there anyone out there who can help? I can post the code if needed; I didn't want to post the entire file (since I don't know which snippet is the one I need!) Thank you in advance! Hello, I am trying to add a simple script to my CSS menu for a little bit more eye candy. However, when I add the script - it causes issues in my online store (ex; the javascript-powered one page checkout stops working). Here is the exact error from the error console: Quote: Error: jQuery.validator is undefined Source File: https://www.gem-tech.com/store/pc/onepagecheckout.asp Line: 288 And here is the exact script: Quote: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" src="jquery.hoverIntent.minified.js"></script> <script type="text/javascript"> $(document).ready(function() { function megaHoverOver(){ $(this).find(".sub").stop().fadeTo('fast', 1).show(); //Calculate width of all ul's (function($) { jQuery.fn.calcSubWidth = function() { rowWidth = 0; //Calculate row $(this).find("ul").each(function() { rowWidth += $(this).width(); }); }; })(jQuery); if ( $(this).find(".row").length > 0 ) { //If row exists... var biggestRow = 0; //Calculate each row $(this).find(".row").each(function() { $(this).calcSubWidth(); //Find biggest row if(rowWidth > biggestRow) { biggestRow = rowWidth; } }); //Set width $(this).find(".sub").css({'width' :biggestRow}); $(this).find(".row:last").css({'margin':'0'}); } else { //If row does not exist... $(this).calcSubWidth(); //Set Width $(this).find(".sub").css({'width' : rowWidth}); } } function megaHoverOut(){ $(this).find(".sub").stop().fadeTo('fast', 0, function() { $(this).hide(); }); } var config = { sensitivity: 2, // number = sensitivity threshold (must be 1 or higher) interval: 100, // number = milliseconds for onMouseOver polling interval over: megaHoverOver, // function = onMouseOver callback (REQUIRED) timeout: 500, // number = milliseconds delay before onMouseOut out: megaHoverOut // function = onMouseOut callback (REQUIRED) }; $("ul#topnav li .sub").css({'opacity':'0'}); $("ul#topnav li").hoverIntent(config); }); </script> I believe there is some sort of conflict? Not sure though. Any input on this? Thanks, Hi, I have an image slider that uses the: jquery.min.js file this basically slides up and down smoothly when clicked. I then added a Jquery accordian menu. When I put the 2 together the menu doesn't work it just stays fully expanded. As soon as I remove jquery.min.js it works fine but then the slider doesn't. What could this be please? Thanks alot Joe Hi Friends, I am come with a new query in jQuery. I have a listing form in which the details showed , the View more Details is implemented using Ajax. When Click "+" sign there is a loading image show First then the Result show there ... It's all working Fine , But I need a way to show Error I mean some time Server Response is success with Empty String on that time I need to catch same .... I explain code Below: Code: if(proceed) { $.ajax({ type: "POST", data: "key="+id, dataType: 'json', async: true, url: "<?php echo site_url(); ?>/server/view_serverdet/", beforeSend: function() { $('#view_load'+id).show(); $('#view_load'+id).addClass(class); }, complete: function(){ $('#view_load'+id).hide(); } }, success: function (server_msg) { if (null == server_msg) { var warning = "<font color=\"red\">Unable to load server details</font>"; $('#view_load'+id).html(warning); } else { // Working Fine! } But that error Just Show and Hide ... How I can show that Error there, If you have any idea , pls help me ASAP... Thankfully Anes P.A Hi, I'm a newbie to the forum and jquery and have been trying to use it for a slick form wizard i found here. http://thecodemine.org/ It's almost complete but IE keeps giving me an error I've tried everything to fix with no luck. I'm using jquery-1.4.2.min.js and the error it's giving me is Unexpected call to method or property access. line 103 character 460 The code it highlights is: Code: {this.nodeType===1&&this.appendChild(a)})}, at the end of this line. Complete line is: Code: wrapInner:function(a){if(c.isFunction(a))return this.each(function(b){c(this).wrapInner(a.call(this,b))});return this.each(function(){var b=c(this),d=b.contents();d.length?d.wrapAll(a):b.append(a)})},wrap:function(a){return this.each(function(){c(this).wrapAll(a)})},unwrap:function(){return this.parent().each(function(){c.nodeName(this,"body")||c(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,true,function(a){this.nodeType===1&&this.appendChild(a)})}, Any help would be greatly appreciated. Thanks! FYI: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 1.1.4322; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) Timestamp: Tue, 15 Nov 2011 16:45:53 UTC Message: Unexpected call to method or property access. Line: 103 Char: 460 Code: 0 URI: http://custsatdev/contact/jqueryform...y-1.4.2.min.js So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes: Id be very gratefull if someone would help me out with this one. All related code can be found bellow (the ones that should be needed anyways): This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked Code: $(document).ready(function(){ //References var change = $("#menu li a"); var loading = $("#loading"); var content = $("#content"); //Manage click events change.click(function(){ //show the loading bar showLoading(); //load selected section if(this.id == "home") { change.load(this.className='current-page'); content.slideUp(); content.load("pages/index.php", hideLoading); content.slideDown(); } else if(this.id == "secondpage") { change.load(this.className='current-page'); content.slideUp(); content.load("pages/secondpage.php", hideLoading); content.slideDown(); } else { //hide loading bar if there is no selected section hideLoading(); } }); //show loading bar function showLoading(){ loading .css({visibility:"visible"}) .css({opacity:"1"}) .css({display:"block"}) ; } //hide loading bar function hideLoading(){ loading.fadeTo(1000, 0); }; }); Heres the structure of the menu/content Code: <ul id="menu"> <li><a id="home" class="normal" href="#Home"></a></li> <li><a id="secondpage" class="normal" href="#Secondpage"></a></li> </ul> <div id="content"> <ul id="sec-menu"> <li><a id="link1" class="normal" href="#">Link1</a></li> <li><a id="link2" class="normal" href="#">Link2</a></li> </ul> </div> Heres the code that jquery history plugin uses in demo for ajax Code: jQuery(document).ready(function($) { function load(num) { $('#content').load(num +".html"); } $.history.init(function(url) { load(url == "" ? "1" : url); }); $('#ajax-links a').live('click', function(e) { var url = $(this).attr('href'); url = url.replace(/^.*#/, ''); $.history.load(url); return false; }); }); My script runs, but it prints out to a new window. I want it to appear in the text box in the Answer <div>. I've tried using document.my_form.Answer.answerText.write() and window.document.my_form.Answer.answerText.value = " " I tried it with and without the <p></p> tags. I'm out of ideas. Can someone please help me figure this out? Code: <html> <head> <title>Magic 8 Ball</title> </head> <body> <form name="my_form"> <div id="question"> <h1>Ask your question here</h1> <input type="text" id="questionText" name="questionBox" /> </div> <div id="Answer"> <input type="submit" value="Submit" onClick="answer()"/> <h1>The magic 8 ball says:</h1> <script type="text/javascript"> function chance() { var ranNum = Math.floor(Math.random()*6); return ranNum; } function answer() { var nonsense = chance(); var reply = new Array(6); reply[0] = "Definitely"; reply[1] = "Quite possibly"; reply[2] = "Highly unlikely"; reply[3] = "Doubtful"; reply[4] = "No way!"; reply[5] = "Outlook is unclear, ask again later"; document.write('<p>' + reply[nonsense] + '</p>'); } </script> <input type="text" name="answerText" /> <input type="reset" value="Reset" /> </div> </form> </body> </html> i still cant ouput correctly this php parse rss: PHP Code: $doc = new DOMDocument(); $doc->load('http://www.lepoint.fr/content/system/rss/a_la_une/a_la_une_doc.xml'); $count_items=$doc->getElementsByTagName("item"); //echo count($count_items); $title=$doc->getElementsByTagName("item")->item(0)->getElementsByTagName("title")->item(0)->nodeValue; foreach($count_items as $value){ echo "<table border='1'><tr><td>".$value->getElementsByTagName('title')->item(0)->nodeValue."</td><td>".$value->getElementsByTagName('description')->item(0)->nodeType."</td></tr>";} using this js code : Code: <style> div#RSS{width: 700px;height: 600px;border:1px solid gray;} </style> <script> PHPscript="<?php $doc = new DOMDocument();$doc->load('http://www.lepoint.fr/content/system/rss/a_la_une/a_la_une_doc.xml');$count_items=$doc->getElementsByTagName('item');$title=$doc->getElementsByTagName('item')->item(0)->getElementsByTagName('title')->item(0)->nodeValue;foreach($count_items as $value){echo '<table border=\'1\'><tr><td>\'.$value->getElementsByTagName(\'title\')->item(0)->nodeValue.\'<\/td><td>\'.$value->getElementsByTagName(\'description\')->item(0)->nodeType.\'<\/td><\/tr>';} ?>" function ClickRSS(){ document.getElementById("link").onclick=ShowRSS } function ShowRSS(){ div=document.createElement("div"); div.id="RSS"; div.innerHTML=PHPscript; document.body.appendChild(div); } window.onload=ClickRSS; </script> <body> <a href="#no" id="link">LINK</a> </body> |