jQuery errorPlacement / error positioning problem


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   I agree to the Terms and Conditions And the JS errorLabelContainer:("#tsandcs"), errorElement: "p", errorPlacement: function(error, element){ error.appendTo($("div#tsandcs_error")); }
I really could do with some help as I need the error text to display underneath the "I agree to ....." text rather then to the right.
Posted On: Saturday 24th of November 2012 03:59:26 AM Total Views:  390
View Complete with Replies

RELATED TOPICS OF JavaScript PROGRAMMING LANGUAGE




jquery structure help

Please delete This post has been edited by polska03: 12 July 2011 - 08:23 PM
VIEWS ON THIS POST

169

Posted on:

Wednesday 21st November 2012
View Replies!

is jquery the right tool for the job? (ajax)

Im a php coder and new to the world of javascript and I am wondering if someone familiar with jquery can tell me if it would be the right tool for task I would like to undertake. In short, what I have is a database table that contains a list of items. Each item in the database table has an ID field and a parent ID field. This means that each record is either a top level item or a child item to an existing item in the table. Using php I query the database and collect all the top level items (ie everything with a parent ID of 0) and present this to the user in an html dropdown. Using a simple jquery ajax call the id of the selected item is handed out to another php script which does another database query and collects all the items that have a parent ID equal to the one chose in the initial dropdown presented to the user and in turn build another dropdown that is presented to the user. The above works well but I am in a situation where there may be additional levels under those presented by the ajax built dropdown but being new to javascript and jquery I cant quite figure out if or how I can basically have created nested ajax dropdowns. To further clarify here is an fictional example of the data I am working with....... Autos - ID 1 - parentID 0 ford - ID 2 - parentID 1 chevy - ID 3 - parentID 1 F150 - ID 4 -parentID 2 4wheel drive - ID5 - parentID 4 2wheel drive - ID6 - parentID 4 1500 - ID7 - parentID 3 4wheel drive - ID8 - parentID 3 2wheel drive - ID9 - parentID 3 boats - ID10 - parentID 0 paddle boats - ID11 - parentID 10 motor boats - ID12 - parentID10 Tree view of the above data Autos ->ford ->->f150 ->->->4wheel drive ->->->2wheel drive ->chevy ->->1500 ->->->4wheel drive ->->->2wheel drive boats ->paddle boats ->motor boats My default page creates a dropdown with the options Autos and Boats. When I select autos I have jquery ajax calling another php function that returns a dropdown in a div just below my original dropdown with ford and chevy opions and that is as far as I can get. Of course changing it from autos to boats would yield a div refresh and the dynamic dropdown contents would change from ford and chevy to padle boats and motor boats but I cant seem to figure out how to use jquery to get any deeper. Can I easily use jquery to further create dynamic nested dropdowns of (theoretic) unlimited depth If so does anyone have a link to a related tutorial, blog post etc that may help
VIEWS ON THIS POST

167

Posted on:

Wednesday 21st November 2012
View Replies!

Facing problem in jquery contextmenu plugin

I'm using jquery context menu to create rows and columns on right click. For that when i click on the child div present in row its taking the parent div id and appending the rows and columns to parent div. how can i restrict parent div id to get only child id. here i'm using unique id's for every div...
VIEWS ON THIS POST

221

Posted on:

Wednesday 21st November 2012
View Replies!

jquery tabs ajax mode

. I need some help with tabs jQuery v2.7.4 of stilbuero. I want to use Ajax Mode and open the links in a specifically container. For example: Tab one Tab two Tab three ... Can you tell me how to do it Sorry for my bad English. A greeting.
VIEWS ON THIS POST

178

Posted on:

Wednesday 21st November 2012
View Replies!

Delete a dynamically generated html using jquery

Hi I have a table filled out with data from the mysql DB, I have a DELETE button next to each row to allow user to delete the specific row of the table. but my code only removes the first lines of the table on each click I have tried many other suggested ways in this forum but no one works for me. here is the code please help. I know this code just delete the first lines on each click, please tell me which syntax and commands should i use, will be appreciated if you help me to get it right. the HTML table $query = "SELECT * FROM $table_select"; $result = mysql_query($query); $num = mysql_num_rows($result); $i=0; while ($i < $num) { $f1=mysql_result($result,$i,"manager_st"); $f2=mysql_result($result,$i,"freelancer_st"); $f3=mysql_result($result,$i,"link"); $f4=mysql_result($result,$i,"photo"); $f5=mysql_result($result,$i,"unit_price"); $f6=mysql_result($result,$i,"qty"); $f7=mysql_result($result,$i,"express"); $f8=mysql_result($result,$i,"customer_st"); $f9=mysql_result($result,$i,"additional_link"); $totao_unit_price = $f5*$f6; $row = mysql_result($result,$i,"product_id"); > Delete
VIEWS ON THIS POST

226

Posted on:

Thursday 22nd November 2012
View Replies!

Delay in jquery requests, is it my code or the server?

I am using JQuery to populate a drop-down menu based on a previous drop-down menu selection. When the user selects a 'Specialty', the script recognizes the change event and calls a PHP page passing that Specialty ID. The PHP page then generates 'Sub-Specialty' options based on that ID. The response is sent back and the 'Sub-Specialty' drop-down is populated. The script functions; however, there is a reasonably long delay for the items to load when the 'Specialty' drop-down changes. Could this be an issue with the hosting company server or my code (note: checked the PHP/MySQL code alone and loads very fast) Here is the code (it was once inside document. ready but took it out thinking it would speed things up -- did not): $(function(){ // If specialty drop-down menu changes $("#search_specialty").change(function(){ // Show updating image $("#updating").show(); // Request PHP page with specialty ID to generate show all related subspecialties $.ajax({ type: "POST", data: "data=" + $(this).val(), url: "findspecialty.php", success: function(msg){ if (msg != ''){ // Populate sub-specialty drop-down menu with repsonse $("#search_subspecialty").html(msg).show(); $("#updating").hide(); }else{ } } }); }) }) Any advice would help greatly.
VIEWS ON THIS POST

180

Posted on:

Thursday 22nd November 2012
View Replies!

how to submit form using jquery without refreshing page

Sir, how can I submit form without refreshing page using jquery or Ajax.
VIEWS ON THIS POST

181

Posted on:

Thursday 22nd November 2012
View Replies!

jquery show/hide required fields

How strange... could have sworn I saw the form submit first before the errors came back (the page reloaded) which lead me to assume it was a server-side thing. Ah well, glad to hear you have it fixed :)
VIEWS ON THIS POST

180

Posted on:

Saturday 24th November 2012
View Replies!

how to use jquery ajax in php

im trying to understand to create a form that process in php but shows the erros in ajax. heres a sample of something i want Click Here, i already understand some jquery but not everything , like when i create a form in html do i had to create a id for each input for the $_post to send to the php page to get process or can i just create a id for the form
VIEWS ON THIS POST

155

Posted on:

Saturday 24th November 2012
View Replies!

jquery .load() issue when hard refresh

hi, im having an issue when using the .load() function of jquery. im using my index .php file to dynamically load contents in a div using the load function. but when i refresh the browser i taken to index.php. can u please suggest me
VIEWS ON THIS POST

194

Posted on:

Saturday 24th November 2012
View Replies!

Interactive world map in jquery

I developed an website having interactive world map . When I rollover / mouse over a country ,it displays country's information. It is ok but when it is viewed on tablet or mini laptop with screen resolution 1028 x 600 then country rollover information partially going out of screen . What is the solution Link:http://csoft.csoftindia.net/csoftworld/partner/#/JPN/arrivals
VIEWS ON THIS POST

165

Posted on:

Saturday 24th November 2012
View Replies!

user authentication with php and jquery

Hi After learning jquery for about a month, I make an attempt to make username & password authentication form. Howver, i get stuck 2 days now, and i will soon start bumping my head against the wall. What I am trying to do is if user enter the wrong username or password to display the message without reloading the page, and if he enter right username and password, php page that make the check against the database should redirect the user. I will post my function(s) that doesnt work here, and if anyone can help me to make them work it will be great. If not, any link to some step by step tutorial will also do the trick (under the condition that jquery library is used) Here is what i have now, and it work partially because if the user enter wrong username and password messge is shown to him, but if he enter right username and password, he remain stuck on the login page, due the e.preventDefault() function 1: formLogin.on('submit', function(e){ $.ajax({ type: 'POST', url: 'loginCheck', data: $(formLogin).serialize(), dataType: 'json', success: function(errorMessage){ if(errorMessage.length > 0) { $('#errorMessageTop').fadeIn(); } } }); e.preventDefault(); }); function 2: formLogin.on('submit', function(e){ $.post('loginCheck', formLogin.serialize(), function(errorMessage) { if(errorMessage.length > 0) { $('#errorMessageTop').fadeIn(); } else if (errorMessage.length == 0) { console.log(errorMessage.length); } }); return e.preventDefault(); });
VIEWS ON THIS POST

129

Posted on:

Saturday 24th November 2012
View Replies!

problems understanding jquery methods in script: get(),?

Hi peeps, I wonder if you can help me at all undertanding this code. Unfortunately I don't have it live anywhere, it is something I have seen somebody working on Here's the code and I will explain breifly what it does and what's not clear (which needless to say is in the jquery script). (Apologies if the formatting is not correct but I am having terrible problems with this thread, the scrollbar doesn't scroll all the way down to the end so I can't access the bottom part and format it as it should be, sorry) HTML See the range on offer Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet nisi gravida lacus tempor semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae ... Car1 Car1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam urna tellus, scelerisque dictum vulputate et, posuere scelerisque mi. Morbi eu purus libero. car2 car2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam urna tellus, scelerisque dictum vulputate et, posuere scelerisque mi. Morbi eu purus libero. ... CSS .image_container{ background:url('ajax-loader-black.gif') no-repeat 50% 50%; width:940px; border:1px solid blue; margin:0 auto; } .image_invisible{display:none} .image_visible{display:block} .clear{clear:both;} .thumbnails{ width:820px; /*border:1px solid red;*/ margin:10px auto; } .car_model_description p{ font-size:1.2em; text-align:left; /*padding-bottom:16px;*/ width:600px; } .car_model_description h3{ text-align:left; } .car_model_description{ position:relative; padding-right:215px; width:725px; min-height:70px; } .compare_button { position:absolute; width:215px; top:50%; right:0; } .thumbnails_row{ /*border:1px solid green;*/ width:940px; margin-top:10px; } .thumbnails_row img{ cursor:pointer; } .thumbnails_row h3, .thumbnails_row p { display:none; } .thumbnails_row a span{ display:block; text-align:center; } .thumbnails_row a{ display:inline-block; margin-right:25px; } SCRIPT function changeImage(calledFrom, big_image){ var newImage = $('#placeholder_image'); var newTitle = $(calledFrom).find('h3').html(); var newText = $(calledFrom).find('p').html(); newImage.attr('src', big_image); $('.car_model_description') .find('h3').html(newTitle).end() .find('p').html(newText); } function resetThumbnails(){ $('.thumbnails a').each(function(){ $(this).stop(true, true).fadeTo(500,1); }); } $(document).ready(function(){ $('.thumbnails') .mouseleave(function(){ resetThumbnails(); }) .find('a').hover(function(){ hoverThumbnail(this); }); }); function hoverThumbnail(calledFrom){ var $calledFrom = $(calledFrom); $('.thumbnails a').each(function(){ if($(this).get(0) == $calledFrom.get(0)){ $(this).fadeTo(0,1); } else { $(this).fadeTo(0,0.5); } }); } Right. Just to clarify, the HTML and the css produce a centred container which has a placeholder image. Below the container there is a list of tags containing: 1 thumbnail image, 1 and 1 paragraph (by the way there are only 2 thumbnails in the example above but the real one has around 20 of them all properly styled with css). The idea is that by clicking one of the thumbnails, the big placeholder image in the big div will change to the corresponding image stored in the image_container div which has a class of image_invisible. The script brings things further by creating some nice fade effect so that when you hover on one of the thumbnails the hovered on keeps the opacity at 1, all the other ones will fade to opacity of 0.5. Finally when you then move the mouse away all the thumbnails will all go back to opacity 1. Now, main problem is the script, there are few things that I would like to get clarified please. The first bit when we change the src of the image is fairly straighforward. The function resetThumbnails gets the a tags in the thumbnails div and for each of them it stops the animation and resets the opacity to 1. In here: $(document).ready(function(){ $('.thumbnails') .mouseleave(function(){ resetThumbnails(); }) .find('a').hover(function(){ hoverThumbnail(this); }); }); we select the thumbnails div and on mouseleave we run the resetFunction, fine. The we find the a tag and on hover we run the hoverThumbnail function passing a parameter 'this'. Now, I assume that 'this' stands for the a tag, as in the a tag is what's passed to the hoverThumbnail, or is it .thumbnails Finally the last function: function hoverThumbnail(calledFrom){ var $calledFrom = $(calledFrom); $('.thumbnails a').each(function(){ if($(this).get(0) == $calledFrom.get(0)){ $(this).fadeTo(0,1); } else { $(this).fadeTo(0,0.5); } }); } Right. Here the hoverThumbnail function receives a parameter, again not sure what that stands for, either or .thumbnails I know things can be done in a different way, but I am not looking for an alternative, I just want to make sure I understand this code perfectly. This is one of the lines I have problems with: var $calledFrom = $(calledFrom); what does that do Isn't $calledFrom the same as $(calledFrom) In other words what does this assignment do, and what's the advantage of assigning $(calledFrom) to a variable called $calledFrom Moving on, we select the 's within the div with a class of thumbnails and for each of them we run a function. Now, this bit if($(this).get(0) == $calledFrom.get(0)){ $(this).fadeTo(0,1); } else { $(this).fadeTo(0,0.5); } is meant to be where the fading magic happens: hover on a thumbnail and the selected one keeps the opacity at 1, the rest of the thumbnails instead, as said before. get a 0.5 opacity. Now, I don't quite get how this happens. This if($(this).get(0) == $calledFrom.get(0)){ says that if this (whic refers to thumbnails a) at position 0, so the first a tag is equal to the a tag (I assume) at position 0 sent as a parameter to the function then it keeps the opacity at 1, if not the opacity is 0.5...don't quite get this bit at all any suggestion/translation I should say
VIEWS ON THIS POST

160

Posted on:

Saturday 24th November 2012
View Replies!

jquery hover action fail on clicking category tab

all, I am having problem with jquery hover action. When ever i refresh a page the hover action is working but whenever i click on any tab (category tab section) hover action is failed. I am tired of finding solution on google. Please help me. The site url is http://www.apprs.com/noruw/portfolio/
VIEWS ON THIS POST

147

Posted on:

Saturday 24th November 2012
View Replies!

$.each jquery problem

I have looked at this code and I cannot see the problem. If anyone can spot the error then I will be very grateful. Basically I am returning an array from a .PHP in json format the code is here. echo json_encode($anarray); the array is made up like "vegetable" => "leek" etc etc. Now when the array is echo'd back onto the page for the jQuery to pick up I use this code. $.post('../ajax/list.php', {"test":"test"} , function(data) { $.each(data ,function(name,value) { console.log(name + '=' + value); }); }); Now the json object (data in the above code) returns this "[{vegetable":"leek" , "price":50}] This is as expected but when run over the $.each all that happens is it says invalid identifier. There must be a simple error there but so far I cannot spot it. Can anyone else see it
VIEWS ON THIS POST

165

Posted on:

Saturday 24th November 2012
View Replies!

is this ajax/jquery acceptable?

I'm populating a chained linked dropdown box with the following code: $(document).ready(function() { var data = ; var id; function getData(passCatID){ var content = ''; var content = '
VIEWS ON THIS POST

152

Posted on:

Saturday 24th November 2012
View Replies!

looking for a jquery code

I can't think of how this thing is called and so I can't find any example on google, I'll try to explain my vision best I can. I want to have a list of square divs, each has contant (but that's not the point), so the divs are standing in a line from right to left and the one on the center of the screen is the biggest of all, and I have a way of moving this list of divs to the left or to the right, and so the divs are either getting bigger (if they are near the center) or getting smaller (or not visable at all as they move to the side). it loos something like RocketDock menu if u know it - http://prameg.ucoz.com/_fr/0/8939033.jpg can anyone tell me how is this thing called! and if u have a link to a code or example please share!
VIEWS ON THIS POST

164

Posted on:

Saturday 24th November 2012
View Replies!

moving from php to jquery

I just added a .show for a div to a page where users can rate movies, works just fine as it is. I would like to change it up a bit by showing an image for the number rating that they gave it, 1-5. I have something like it set up in php that does that if they leave the page and come back. I would like this to work as soon as they click on the rate button. but im not sure how to add that to the .show. Any pointers would be helpful.
VIEWS ON THIS POST

161

Posted on:

Saturday 24th November 2012
View Replies!

How to create watermark using jquery

How to create watermark using jquery and css I want to print text on image using javascript in diagonal direction.
VIEWS ON THIS POST

135

Posted on:

Saturday 24th November 2012
View Replies!

jquery slider dynamic search using ajax

I've got a form which searches my database dynamically using ajax every time someone makes a change to it. Problem is, it doesn't perform when I change the slider... only when I change like a checkbox or something. Should be pretty simple to solve, but I'm just not seeing it. Here's my code for the applicable part of the form: Students: Northeast Midwest South West Outlying Areas (like Hawaii and Alaska) Here's my code for one of the sliders: $(function() { $( "#slider-range2" ).slider({ orientation: "vertical", range: true, min: 0, max: 70000, values: [ 0, 70000 ], step: [1000], slide: function( event, ui ) { $( "#amount2" ).val( "" + ui.values[ 0 ] + " - " + ui.values[ 1 ] ); $("#minStudents").val(ui.values[ 0 ]); $("#maxStudents").val(ui.values[ 1 ]); } }); $( "#amount2" ).val( "" + $( "#slider-range2" ).slider( "values", 0 ) + " - " + $( "#slider-range2" ).slider( "values", 1 ) ); }); Here's my search code: $(function() { $('#boogie').change(function(){ var form = $('#boogie'); var dura_sch1 = $('#DURA_SCH1').val(); if ($("#DURA_SCH1").is(":checked")) { dura_sch1 = "DURA_SCH=1"; } var dura_sch2 = $('#DURA_SCH2').val(); if ($("#DURA_SCH2").is(":checked")) { dura_sch2 = "DURA_SCH=2"; } var ctrl_sch1 = $('#CTRL_SCH1').val(); if ($("#CTRL_SCH1").is(":checked")) { ctrl_sch1 = "CTRL_SCH=1"; } var ctrl_sch2 = $('#CTRL_SCH2').val(); if ($("#CTRL_SCH2").is(":checked")) { ctrl_sch2 = "CTRL_SCH=2"; } var popu_area_sch1 = $('#POPU_AREA_SCH1').val(); if ($("#POPU_AREA_SCH1").is(":checked")) { popu_area_sch1 = "POPU_AREA_SCH=1"; } var popu_area_sch2 = $('#POPU_AREA_SCH2').val(); if ($("#POPU_AREA_SCH2").is(":checked")) { popu_area_sch2 = "POPU_AREA_SCH=2"; } var popu_area_sch3 = $('#POPU_AREA_SCH3').val(); if ($("#POPU_AREA_SCH3").is(":checked")) { popu_area_sch3 = "POPU_AREA_SCH=3"; } var popu_area_sch4 = $('#POPU_AREA_SCH4').val(); if ($("#POPU_AREA_SCH4").is(":checked")) { popu_area_sch4 = "POPU_AREA_SCH=4"; } var region_sch1 = $('#REGION_SCH1').val(); if ($("#REGION_SCH1").is(":checked")) { region_sch1 = "REGION_SCH=1"; } var region_sch2 = $('#REGION_SCH2').val(); if ($("#REGION_SCH2").is(":checked")) { region_sch2 = "REGION_SCH=2"; } var region_sch3 = $('#REGION_SCH3').val(); if ($("#REGION_SCH3").is(":checked")) { region_sch3 = "REGION_SCH=3"; } var region_sch4 = $('#REGION_SCH4').val(); if ($("#REGION_SCH4").is(":checked")) { region_sch4 = "REGION_SCH=4"; } var region_sch5 = $('#REGION_SCH5').val(); if ($("#REGION_SCH5").is(":checked")) { region_sch5 = "REGION_SCH=5"; } var minStudents = $('#minStudents').val(); var maxStudents = $('#maxStudents').val(); var minCharge = $('#minCharge').val(); var maxCharge = $('#maxCharge').val(); var minSATverbal = $('#minSATverbal').val(); var maxSATverbal = $('#maxSATverbal').val(); var minSATmath = $('#minSATmath').val(); var maxSATmath = $('#maxSATmath').val(); var minSATwriting = $('#minSATwriting').val(); var maxSATwriting = $('#maxSATwriting').val(); $.ajax ({ url: "searchit.php", type: 'POST', data: ({d1 : dura_sch1, d2 : dura_sch2, p1 : popu_area_sch1, p2 : popu_area_sch2, p3 : popu_area_sch3, p4 : popu_area_sch4, r1 : region_sch1, r2 : region_sch2, r3 : region_sch3, r4 : region_sch4, r5 : region_sch5, minsts : minStudents, maxsts : maxStudents, minchg : minCharge, maxchg : maxCharge, minsatv : minSATverbal, maxsatv : maxSATverbal, minsatm : minSATmath, maxsatm : maxSATmath, minsatw : minSATwriting, maxsatw : maxSATwriting}), dataType: 'text', success: function(d) { $('#result').html(d);// an element that should contain your results. process.php generates html this adds that html to your DOM } }); }); }); BTW, I know it's messy. Clean it up at your own risk :icon_lol: ! Important thing is just getting that search to work.
VIEWS ON THIS POST

158

Posted on:

Saturday 24th November 2012
View Replies!