Search Results

Search found 17311 results on 693 pages for 'jquery chaining'.

Page 248/693 | < Previous Page | 244 245 246 247 248 249 250 251 252 253 254 255  | Next Page >

  • creating a JQuery function

    - by Russell Parrott
    Sorry to bother you guys & girls again on Christmas eve, but I need help creating a reusable JQuery function. I have "badly crafted" this set of code that all works. But I would really like to put it as a function so I don't have to keep repeating everything for each form. I am not too sure about how all the if statements can be combined etc. that is why I wrote it as it is. Any help much appreciated - Oh I suppose it could also be some kind of plugin but that might be the next step if I can understand how the function works. $(':input:visible').live('blur',function(){ if($(this).attr('required')) { if($(this).val() == '' ) { $(this).css({'background-color':'#FFEEEE' }); $(this).parent('form').children('input[type=submit]').hide(); $(this).next('.errormsg').html('OOPs ... '+$(this).prev('label').html()+' is required'); $(this).focus(); $(this).attr('placeholder').hide(); } else { $(this).css({'background-color':'#FFF' , 'border-color':'#999999'}); $(this).next('.errormsg').empty(); $(this).parent('form').children('input[type=submit]').show(); } } return false; }); $(':input[max]').live('blur',function(){ if($(this).attr('max') < parseInt($(this).val()) ){ $(this).next('.errormsg').html( 'OOPs ... the maximum value is '+$(this).attr('max') ); $(this).parent('form').children('input[type=submit]').hide(); $(this).focus(); } else {} return false; }); $(':input[min]').live('blur',function(){ if($(this).attr('min') > parseInt($(this).val()) ){ $(this).next('.errormsg').html( 'OOPs ... the minimum value is '+$(this).attr('min') ); $(this).parent('form').children('input[type=submit]').hide(); $(this).focus(); } else {} return false; }); $(':input[maxlength]').live('keyup',function(){ if($(this).val()==''){ } else { $(this).next('.errormsg').html( $(this).attr('maxlength')- $(this).val().length +' chars remaining'); } return false; }); As said, help much appreciated with one small (I hope) thing, how can I break out of any function IF there are no error messages to actually submit the form?

    Read the article

  • Unsure how to design JavaScript / jQuery functionality which uses XML to create HTML objects

    - by Jack Roscoe
    Hi, I'm using JavScript and jQuery to read an XML document and subsequently use the information from the XML to create HTML objects. The main 'C' nodes in the XML document all have a type attribute, and depending on the type I want to run a function which will create a new html object using the other attributes assigned to that particular 'C' node node. Currently, I have a for loop which extracts each 'C' node from the XML and also it's attributes (e.g. width, height, x, y). Also inside the for loop, I have an if statement which checks the 'type' attribute of the current 'C' node being processed, and depending on the type it will run a different function which will then create a new HTML object with the attributes which have been drawn from the XML. The problem is that there may be more than one 'C' node of the same type, so for example when I'm creating the function that will run when a 'C' node of 'type=1' is detected, I cannot use the 'var p = document.createElement('p')' because if a 'C' node of the same type comes up later in the loop it will clash and override that element with that variable that has just been created. I'm not really sure how to approach this? Here is my entire script. If you need me to elaborate on any parts please ask, I'm sure it's not written in the nicest possible way: var arrayIds = new Array(); $(document).ready(function(){ $.ajax({ type: "GET", url: "question.xml", dataType: "xml", success: function(xml) { $(xml).find("C").each(function(){ arrayIds.push($(this).attr('ID')); }); var svgTag = document.createElement('SVG'); // Create question type objects function ctyp3(x,y,width,height,baC) { alert('test'); var r = document.createElement('rect'); r.x = x; r.y = y; r.width = width; r.height = height; r.fillcolor = baC; svgTag.appendChild(r); } // Extract question data from XML var questions = []; for (j=0; j<arrayIds.length; j++) { $(xml).find("C[ID='" + arrayIds[j] + "']").each(function(){ // pass values questions[j] = { typ: $(this).attr('typ'), width: $(this).find("I").attr('wid'), height: $(this).find("I").attr('hei'), x: $(this).find("I").attr('x'), y: $(this).find("I").attr('x'), baC: $(this).find("I").attr('baC'), boC: $(this).find("I").attr('boC'), boW: $(this).find("I").attr('boW') } alert($(this).attr('typ')); if ($(this).attr('typ') == '3') { ctyp3(x,y,width,height,baC); // alert('pass'); } else { // Add here // alert('fail'); } }); } } }); });

    Read the article

  • Multiple task in one page?(php - mysql - jquery)

    - by python
    My goal is to build an application in a page that can be use multiple task(crud) for example in this html code.there are multiple submit,multiple action in the same page after (user submit (CURD) it will load result table below.) In juery how Can I do this.? <script type="text/javascript" src="jquery.js"></script> <script> $(document).ready(function(){ $("#button1").click(function(){ $('form#crudform').attr({action: "script_1.php"}); $('form#crudform').submit(); }); $("#button2").click(function(){ $('form#crudform').attr({action: "script_2.php"}); $('form#crudform').submit(); }); $("#button3").click(function(){ $('form#crudform').attr({action: "script_3.php"}); $('form#crudform').submit(); }); }); </script> Form CRUD: <form id="crudform" method="post"> <p>Name: <input type="text" name="name"/></p> <p>Age: <input type="text" name="age"/></p> <input type="button" id="button1" value="Cancel" /> <input type="button" id="button2" value="Save" /> <input type="button" id="button3" value="Update" /> </form> Result: <form id="result" method="post"> <table border="1"> <tr> <tr><td></td><td>Name</td><td>Age</td> </tr> <tr><td><input type="checkbox" name="name1"></td><td>Name1</td><td>10</td><tr> <tr><td><input type="checkbox" name="name1"></td><td>Name2</td><td>15</td></tr> <tr><td><input type="checkbox" name="name3"></td><td>Name3</td><td>16</td></tr> </table> <input type="button" id="button4" value="change" /> <input type="button" id="button5" value="drop" /> </form> Anybody know the tutorials relating ..with my tasks.or tips,guide.....are welconme :)

    Read the article

  • Having issues with JQuery progress bar

    - by Roland
    I'm busy creating a poll but am experiencing issues creating a progress bar for a poll using jquery, thus I have a couple of options and then when the page loads the div tags should increase in width, but it's not doing anything only if I have on option in the poll code <?php foreach($votes as $v): ?> <div><?php echo $v['name'].':'; ?></div> <div> <?php echo 'Votes: '.$v['num'].' | '.$v['percent'].'%'; ?> </div> <script type="text/javascript"> load(<?=$v['name']?>,<?=$v['percent']?>); </script> <div style="width:100%; height:10px; background-color:#effdff;"><div id="<?=$v['name']?>" style=" height:10px; background-color:#ff0000;"></div></div> <br /> <?php endforeach; ?> <?php if(!empty($loginMsg)): ?> <?php echo $loginMsg; ?><br /> <?php endif; ?> Votes: <?php echo $totalVotes+$totalComments; ?> | Comments: <?php echo $totalComments ?> <script type="text/javascript"> var interval=''; var progress = 0; function load(id,val){ alert(id); if (interval=="") { interval=window.setInterval("display('"+id+"','"+val+"')",200); } } function display(id,val) { progress += 1; if(progress == val){ window.clearInterval(interval) interval = ''; progress = 0; } $("#"+id).css("width",progress+'%'); } </script>

    Read the article

  • ASP.Net MVC Ajax form with jQuery validation

    - by Tomas Lycken
    I have an MVC view with a form built with the Ajax.BeginForm() helper method, and I'm trying to validate user input with the jQuery Validation plugin. I get the plugin to highlight the inputs with invalid input data, but despite the invalid input the form is posted to the server. How do I stop this, and make sure that the data is only posted when the form validates? My code The form: <fieldset> <legend>leave a message</legend> <% using (Ajax.BeginForm("Post", new AjaxOptions { UpdateTargetId = "GBPostList", InsertionMode = InsertionMode.InsertBefore, OnSuccess = "getGbPostSuccess", OnFailure = "showFaliure" })) { %> <div class="column" style="width: 230px;"> <p> <label for="Post.Header"> Rubrik</label> <%= Html.TextBox("Post.Header", null, new { @style = "width: 200px;", @class="text required" }) %></p> <p> <label for="Post.Post"> Meddelande</label> <%= Html.TextArea("Post.Post", new { @style = "width: 230px; height: 120px;" }) %></p> </div> <p> <input type="submit" value="OK!" /></p> </fieldset> The JavaScript validation: $(document).ready(function() { // for highlight var elements = $("input[type!='submit'], textarea, select"); elements.focus(function() { $(this).parents('p').addClass('highlight'); }); elements.blur(function() { $(this).parents('p').removeClass('highlight'); }); // for validation $("form").validate(); }); EDIT: As I was getting downvotes for publishing follow-up problems and their solutions in answers, here is also the working validate method... function ajaxValidate() { return $('form').validate({ rules: { "Post.Header": { required: true }, "Post.Post": { required: true, minlength: 3 } }, messages: { "Post.Header": "Please enter a header", "Post.Post": { required: "Please enter a message", minlength: "Your message must be 3 characters long" } } }).form(); }

    Read the article

  • expand div with focus-jquery

    - by Joel
    Hi guys, I'm revisiting this after a few weeks, because I could never get it to work before, and hoping to now. Please look at this website-notice the newsletter signup form at the top right. http://www.rattletree.com I am wanting it to look exactly this way for now, but when the user clicks in the box to enter their email address, the containing div will expand (or simply appear) above the email field to also include a "name" and "city" field. I'm using jquery liberally in the sight, so that is at my disposal. This form is in the header so any id info, etc can't be withing the body tag... This is what I have so far: <div class="outeremailcontainer"> <div id="emailcontainer"> <?php include('verify.php'); ?> <form action="index_success.php" method="post" id="sendEmail" class="email"> <h3 class="register2">Newsletter Signup:</h3> <ul class="forms email"> <li class="email"><label for="emailFrom">Email: </label> <input type="text" name="emailFrom" class="info" id="emailFrom" value="<?= $_POST['emailFrom']; ?>" /> <?php if(isset($emailFromError)) echo '<span class="error">'.$emailFromError.'</span>'; ?> </li> <li class="buttons email"> <button type="submit" id="submit">Send</button> <input type="hidden" name="submitted" id="submitted" value="true" /> </li> </ul> </form> <div class="clearing"> </div> </div> css: p.emailbox{ text-align:center; margin:0; } p.emailbox:first-letter { font-size: 120%; font-weight: bold; } .outeremailcontainer { height:60px; width: 275px; background-image:url(/images/feather_email2.jpg); /*background-color:#fff;*/ text-align:center; /* margin:-50px 281px 0 auto ; */ float:right; position:relative; z-index:1; } form.email{ position:relative; } #emailcontainer { margin:0; padding: 0 auto; z-index:1000; display:block; position:relative; } Thanks for any help! Joel

    Read the article

  • Jquery hover function doesn't work for a table...

    - by chandru_cp
    I dynamically added rows to a table but it doesn't seem to take hover effects given in jquery... Here is my code, <table id="chkbox" cellpadding="0" cellspacing="2" width="100%" class="table_Style_Border"> <tr> <td style="width:150px" class="grid_header" align="center">RackName</td> <td style="width:150px" class="grid_header" align="center">LibraryName</td> <td style="width:200px" class="grid_header" align="center">LibrarianName</td> <td style="width:200px" class="grid_header" align="center">Location</td> <td style="width:1%" class="grid_header"></td> </tr> <? if(isset($comment)) { echo '<tr><td class=table_label colspan=5>'.$comment.'</td></tr>'; } ?> <?php foreach($rackData as $key => $row) { ?> <?php printf('<tr class="%s">', ($key % 2) ? 'rowcolor' : 'alternaterowcolor'); ?> <td align="left" class="table_label"> <?=$row['rack_name']?> </td> <td align="left" class="table_label"> <?=$row['library_name']?> </td> <td align="center" class="table_label"> <?=$row['librarian']?> </td> <td align="center" class="table_label"> <?=$row['location']?> </td> <td align="center"> <input type="checkbox" name="group" id="group" value="<?=$row['rack_id']?>" onclick="display(this);" > </td> </tr> <? } ?> </table><div align="right" class="pagination"> <?php /*?><?php echo $links;?><?php */?></div> <script type="text/javascript"> $("#chkbox").hover(function() { $(this).addClass("resultshover"); }, function() { $(this).removeClass("resultshover"); }); </script>

    Read the article

  • Layout issue regarding a JQuery smoothDivScroll

    - by MichaelMcCabe
    Hi all. I have been scratching my head for a while on this one. I dont really play around with HTML formatting that often. I have a smoothDivScroll using JQuery (http://maaki.com/thomas/SmoothDivScroll/) to scroll through dynamically generated images. What I want it for, is to have multiple small images lined up right next to each other, and each image has a section of writting underneath. about 25 images, 140px width each in a 7560px span. I acheived this great by putting a table inside the div, and each image inside a<td>.This works problem i have, is that i need the slider to start from the furthest RIGHT image, and slide automatically left. This is acheived by (if you look at the link above) - startAtElementId: But if I am using a table inside the div, it is taking the TABLE as a element and not the TD... so it doesnt work. I know this because if I change every image to be inside tables (i.e 25 tables), it works... but obviously then the formatting is not how I want. Can anyone think of a way I can use this slider (modifications to the js code or not), with 25 images that NEED to be right next to each other, no gap. I guess this is more of a formatting question, than about the slider. Because I only know ONE way of doing what I want, and thats to have below which will not alow me to set startAtElementId. <div class="scrollableArea"> <table width="7560px" class="index-body"> <tr> <td width="140px"><center><a onclick="__doPostBack('getEarlierDate');" ><img src="../images/olderGraphs.gif" width="140" height="60"></a>Click for more</center></td> <td width="300px"><center><a onclick="__doPostBack('chartClicked25');" ><cewolf:img chartid="verticalbar25" renderer="cewolf" width="300" height="60"/></a><c:out value="${date25}"/></center></td> <td width="300px"><center><a onclick="__doPostBack('chartClicked24');" ><cewolf:img chartid="verticalbar24" renderer="cewolf" width="300" height="60"/></a><c:out value="${date24}"/></center></td> and so on

    Read the article

  • dynamically embedding youtube videos with jquery

    - by danwoods
    Hello all, I'm trying to retrieve a listing of a user's youtube videos and embed them in a page using jQuery. My code looks something like this: $(document).ready(function() { //some variables var fl_obj_template = $('<object width="260" height="140">' + '<param name="movie" value=""></param>' + '<param name="allowFullScreen" value="true"></param>' + '<param name="allowscriptaccess" value="always"></param>' + '<embed src="" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="260" height="140"></embed>' + '</object>'); var video_elm_arr = $('.video'); //hide videos until ready $('.video').addClass('hidden'); //pull video data from youtube $.ajax({ url: 'http://gdata.youtube.com/feeds/api/users/username/uploads?alt=json', dataType: 'jsonp', success: function(data) { $.each(data.feed.entry, function(i,item){ //only take the first 7 videos if(i > 6) return; //give the video element a flash object var cur_flash_obj = fl_obj_template; //assign title $(video_elm_arr[i]).find('.video_title').html(item.title.$t); //clean url var video_url = item.media$group.media$content[0].url; var index = video_url.indexOf("?"); if (index > 0) video_url = video_url.substring(0, index); //and asign it to the player's parameters $(cur_flash_obj).find('object param[name="movie"]').attr('value', video_url); $(cur_flash_obj).find('object embed').attr('src', video_url); //alert(cur_flash_obj); //insert flash object in video element $(video_elm_arr[i]).append(cur_flash_obj); //and show $(video_elm_arr[i]).removeClass('hidden'); }); } }); }); (of course with 'username' being the actual username). The video titles appear correctly but no videos show up. What gives? The target html looks like: <div id="top_row_center" class="video_center video"> <p class="video_title"></p> </div>

    Read the article

  • Problem with JQuery swapImage();

    - by VUELA
    Hello!~ On my articles page (http://www.adrtimes.squarespace.com/articles) I have each entry start with an image that changes on rollover. This is working fine. However, on my homepage (http://www.adrtimes.squarespace.com), I am loading in the 2 most recent articles that are not categorized as video, and the 2 most recent articles that are tagged as video. I am using jQuery load() to pull in the content from the articles page. Everything works ok with that except the swapImage rollovers on the homepage. i tried including the swapImage function as callbacks but only one group or the other will rollover properly, not both groups of content. I'm not sure what the problem is!! Here is the code: <script type="text/javascript"> <!-- $(function(){ $.swapImage(".swapImage"); /* Homepage */ // load recent articles $("#LoadRecentArticles").load("/articles/ .list-journal-entry-wrapper .journal-entry-wrapper:not(.category-video)", function(){ //callback... $("#LoadRecentArticles .journal-entry-wrapper").wrapAll('<div class="list-journal-entry-wrapper" />'); $("#LoadRecentArticles .journal-entry-wrapper:gt(1)").remove(); // modify Read More tag $('.journal-read-more-tag a:contains(Click to read more ...)').each(function(){ var str = $(this).html(); $(this).html(str.replace('Click to read more ...','Continue reading—')); }); $.swapImage(".swapImage"); }); // load recent videos $("#LoadRecentVideos").load("/articles/category/video .list-journal-entry-wrapper", function(){ //callback... $("#LoadRecentVideos .journal-entry-wrapper:gt(1)").remove(); $('<div class="VideoTag">—video</div>').insertBefore("#LoadRecentVideos .category-video .body img"); // modify Read More tag $('.journal-read-more-tag a:contains(Click to read more ...)').each(function(){ var str = $(this).html(); $(this).html(str.replace('Click to read more ...','Continue reading—')); }); $.swapImage(".swapImage"); }); }); --> </script> And here is a sample of the html for the images in an article entry: <a href="/articles/2010/5/6/article-title-goes-here.html"><img class="swapImage {src: '/storage/post-images/Sample2_color.jpg'}" src="/storage/post-images/Sample2_bw.jpg" /></a>

    Read the article

  • jQuery UI dialog + WebKit + HTML response with script

    - by Anthony Koval'
    Once again I am faced with a great problem! :) So, here is the stuff: on the client side, I have a link. By clicking on it, jQuery makes a request to the server, gets response as HTML content, then popups UI dialog with that content. Here is the code of the request-function: function preview(){ $.ajax({ url: "/api/builder/", type: "post", //dataType: "html", data: {"script_tpl": $("#widget_code").text(), "widgets": $.toJSON(mwidgets), "widx": "0"}, success: function(data){ //console.log(data) $("#previewArea").dialog({ bgiframe: true, autoOpen: false, height: 600, width: 600, modal: true, buttons: { "Cancel": function() { $(this).dialog('destroy'); } } }); //console.log(data.toString()); $('#previewArea').attr("innerHTML", data.toString()); $("#previewArea").dialog("open"); }, error: function(){ console.log("shit happens"); } }) } The response (data) is: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript">var smakly_widget_sid = 0 ,widgets = [{"cols": "2","rows": "2","div_id": "smakly_widget","wid": "0","smakly_style": "small_image",}, ] </script> <script type="text/javascript" src="/media/js/smak/smakme.js"></script> </head> <body> preview <div id="smakly_widget" style="width:560px;height:550px"> </div> </body> </html> As you see, there is a script to load: smakme.js, somehow it doesn't execute in WebKit-based browsers (I tried in Safari and Chrome), but in Firefox, Internet Explorer and Opera it works as expected! Here is that script: String.prototype.format = function(){ var pattern = /\{\d+\}/g; var args = arguments; return this.replace(pattern, function(capture){ return args[capture.match(/\d+/)]; }); } var turl = "/widget" var widgetCtrl = new(function(){ this.render_widget = function (w, content){ $("#" + w.div_id).append(content); } this.build_widgets = function(){ for (var widx in widgets){ var w = widgets[widx], iurl = '{0}?sid={1}&wid={2}&w={3}&h={4}&referer=http://ya.ru&thrash={5}'.format( turl, smakly_widget_sid, w.wid, w.cols, w.rows, Math.floor(Math.random()*1000).toString()), content = $('<iframe src="{0}" width="100%" height="100%"></iframe>'.format(iurl)); this.render_widget(w, content); } } }) $(document).ready(function(){ widgetCtrl.build_widgets(); }) Is that some security issue, or anything else?

    Read the article

  • Converting a list into a select with jquery

    - by Davemof
    I'm trying to convert the following list into a select list so it can be submitted via a form - the element within the lists will become the value of each option: <ul class="selected connected-list ui-sortable" style="height: 279px;"> <li class="ui-helper-hidden-accessible" style=""></li> <li title="Owner Name 1 - " class="ui-state-default ui-element ui-draggable" style="display: block; position: relative; top: 0px; left: 0px;"><span class="ui-icon-arrowthick-2-n-s ui-icon"></span>Owner Name 1 - <em class="thenumber">4.4796E+11</em><a class="action" href="#"><span class="ui-corner-all ui-icon ui-icon-minus"></span></a></li> <li title="David Moffat - " class="ui-state-default ui-element" style="display: block; position: relative; top: 0px; left: 0px;"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>David Moffat - <em class="thenumber">07730423005</em><a class="action" href="#"><span class="ui-corner-all ui-icon ui-icon-minus"></span></a></li> </ul> This should convert to the following format: <select style="display:none" class="selectoption" name="p_num[]" multiple="multiple"> <option value="">4.4796E+11</option> <option value="">07730423007</option> </select> I have tried the following jquery code, but after many hours I'm pulling my hair out: $('a.sendform').click(function(){ $('ul.selected').each(function() { var $select = $('<select />'); $(this).find('li').each(function() { var $option = $('<option />'); $option.attr('value', $(this).('em')).html($(this).html()); $select.append($option); }); $(this).replaceWith($select); }); }); Any help might save my remaining hair. Many thanks David

    Read the article

  • removing contents of div using Jquery "empty" doesn't work

    - by Andrew
    I'm trying to remove contents of particular div which are basically list items and a heading by using jquery empty so that I could replace with new contents. What happens when I run the code is, the whole div element blinked and flash the replaced content and then the old one reappear. Can anyone tell me what am I doing wrong? Here's an excerpt of my code - <pre> $("#msg_tab").bind("click",function(){ $("#sidebar1").remove(); var html="<ul><li><h2>test</h2><ul><li><a href='#'>Compose New Message</a></li><li><a href='#'>Inbox</a></li><li><a href='#'>Outbox</a></li><li><a href='#'>Unread</a></li><li><a href='#'>Archive</a></li></ul></li></ul>"; $("#sidebar1").append(html); }); <div id="sidebar1" class="sidebar"> <ul> <li> <h2>Messages</h2> <ul> <li><a href="#">Compose New Message</a></li> <li><a href="#">Inbox</a></li> <li><a href="#">Outbox</a></li> <li><a href="#">Unread</a></li> <li><a href="#">Archive</a></li> </ul> </li> </ul> </div> Another question is, how do I write multiple line html code string in javascript so that java would recognize as a string value? Placing forward slash at the end is ok when the string is not a html code but, in html code, I can't figure out how to escape forward slash from ending tags.I've tried escaping it with backward slash but doesn't work. I would be appreciated if anyone could shed a light on this matter as well.

    Read the article

  • I'm having trouble traversing a newly appended DOM element with jQuery

    - by culov
    I have a form that I want to be used to add entries. Once an entry is added, the original form should be reset to prepare it for the next entry, and the saved form should be duplicated prior to resetting and appended onto a div for 'storedEntries.' This much is working (for the most part), but Im having trouble accessing the newly created form... I need to change the value attribute of the submit button from 'add' to 'edit' so properly communicate what clicking that button should do. heres my form: <div class="newTruck"> <form id="addNewTruck" class='updateschedule' action="javascript:sub(sTime.value, eTime.value, lat.value, lng.value, street.value);"> <b style="color:green;">Opening at: </b> <input id="sTime" name="sTime" title="Opening time" value="Click to set opening time" class="datetimepicker"/> <b style="color:red;">Closing at: </b> <input id="eTime" name= "eTime" title="Closing time" value="Click to set closing time" class="datetimepicker"/> <label for='street'>Address</label> <input type='text' name='street' id='street' class='text' autocomplete='off'/> <input id='submit' class='submit' style="cursor: pointer; cursor: hand;" type="submit" value='Add new stop'/> <div id='suggests' class='auto_complete' style='display:none'></div> <input type='hidden' name='lat' id='lat'/> <input type='hidden' name='lng' id='lng'/> ive tried using a hundred different selectors with jquery to no avail... heres my script as it stands: function cloneAndClear(){ var id = name+now; $j("#addNewTruck").clone(true).attr("id",id).appendTo(".scheduledTrucks"); $j('#'+id).filter('#submit').attr('value', 'Edit'); $j("#addNewTruck")[0].reset(); createPickers(); } the element is properly cloned and inserted into the div, but i cant find a way to access this element... the third line in the script never works. Another problem i am having is that the 'values' in the cloned form revert back to the value in the source of the html rather than what the user inputs. advice on how to solve either of these issues is greatly appreciated!

    Read the article

  • Lining up Divs, while using JQuery

    - by user630581
    I am trying to create a flash header like element in JQuery, that has three images that fade to other images. I have each group of images in a div, but the divs line up vertically down the page, I want them to line up horizontally in a row. Currently my css code is: div#demos{ width:940px; border:0; } .s1{ float:left; display:inline; background-color:#000000; width:225px; margin:0; } .s2{ float:right; display:inline; background-color:#000000; width:225px; margin:0; } .s3{ float:left; display:inline; background-color:#000000; width:225px; margin:0; } and my markup is: <div id="demos"> <div id="s1" class="pics"> <img src="Image1.jpeg" width="200" height="200" /> <img src="Image2.jpeg" width="200" height="200" /> <img src="Image3.jpeg" width="200" height="200" /> </div> <div id="s2" class="pics"> <img src="Image4.jpeg" width="200" height="200" /> <img src="Image5.jpeg" width="200" height="200" /> <img src="Image6.jpeg" width="200" height="200" /> </div> <div id="s3" class="pics"> <img src="Image7.jpeg" width="200" height="200" /> <img src="Image8.jpeg" width="200" height="200" /> <img src="Image9.jpeg" width="200" height="200" /> </div> <div style="clear:both"></div> </div>

    Read the article

  • Jquery-UI tabs : Double loading of the default tab with

    - by Stephane
    I use jqueryui-tabs to display a tabbed UI. here is how my markup looks in a MasterPage: <div id="channel-tabs" class="ui-tabs"> <ul class="ui-tabs-nav"> <li><%=Html.ActionLink("Blogs", "Index", "Blog", new { query = Model.Query, lang = Model.SelectedLanguage, fromTo = Model.FromTo, filters = Model.FilterId }, new{ title="Blog Results" }) %></li> <li><%=Html.ActionLink("Forums", "Index", "Forums", new { query = Model.Query, lang = Model.SelectedLanguage, fromTo = Model.FromTo, filters = Model.FilterId }, null) %></li> <li><%=Html.ActionLink("Twitter", "Index", "Twitter", new { query = Model.Query, lang = Model.SelectedLanguage, fromTo = Model.FromTo, filters = Model.FilterId }, null) %></li> </ul> <div id="Blog_Results"> <asp:ContentPlaceHolder ID="ResultPlaceHolder" runat="server"> </asp:ContentPlaceHolder> </div> If the content is loaded via ajax, I return a partial view with the content of the tab. If the content is loaded directly, I load a page that include the content in the ContentPlaceHolder. somewhat like this : <asp:Content ID="Content2" ContentPlaceHolderID="BlogPlaceHolder" runat="server"> <%=Html.Partial("Partial",Model) %> </asp:Content> //same goes for the other tabs. With this in place, if I access the url "/Forums" It loads the forum content in the Blog tab first, trigger the ajax load of the Blog tab and replace the content with the blog content. I tried putting a different placeholder for each tab, but that didn't fix everything either, since when loading "/Forums" it will sure load the forum tab, but the Blog tab will show up first. Furthermore, when using separate placeholders, If I load the "/Blogs" url, It will first load the content statically in the Blog contentplaceholder and then trigger an ajax call to load it a second time and replace it. If I just link the tab to the hashtag, then when loading the forum tabs, I won't get the blog content... How would you achieve the expected behaviour? I feel like I might have a deeper probelm in the organization of my views. Is putting the tabs in the masterpage the way to go? Maybe I should just hijax the links manually and not rely on jquery-ui tabs to do the work for me. I cannot load all tabs by default and display them using the hash tags, I need an ajax loading because it is a search process that can be long. So to sum up : /Forum should load the forum tab, and let the other tabs be loaded with an ajax call when clicking on it. /Twitter should load the twitter tab and let the other tabs.... the same goes for /Blogs and any tabs I would add later.

    Read the article

  • manipulate variable made up of html before adding it to the dom (new in jQuery 1.4???)

    - by pedalpete
    I thought I had seen this in the first announcement of jQuery 1.4, but can't seem to find anything now. I have a calendar table which is built dynamically from a json ajax response. The table is built in a variable called putHtml. Currently, once the table is added to the DOM, I run a showEvents function which takes each event and adds it to the appropriate cell in the table. Unfortunately, when I have 100 events, that means I am updating the DOM 100 seperate times. Which is getting rather slow. I use the showEvents function to add events dynamically, so it would be really nice if I could just use the same function, and specify to look in the DOM for the cell to add the event to, or look in the variable (assuming I've got it right, and you can actually do this with jQuery). The code I use currenlty is this jQuery('div#calendars').append('putHtml.join('')); for(var e in thisCal.events){ showEvent(thisCal.events[e]); } What I had attempted to do instead was for(var e in thisCal.events){ showEvent(thisCal.events[e],putHtml); } jQuery('div#calendars').append('putHtml.join('')); the showEvents function looks like this function showEvents(event){ var eventDate=event.date; var eventTime=event.time; var eventGroup=event.group; var eventName=event.name; var eventType=event.type; var whereEvent=jQuery('div.a'+eventDate, 'table.'+eventGroup); var putEvent='<div class="event" id="a+'eventDate+'_'+eventTime+'">'+eventName+'</div>' jQuery(whereEvent, 'div#calendar').append(putEvent); if(eventType2){ jQuery(whereEvent, 'div#listings').append(putEvent); } } when attempting to manipulate the variable putHtml before adding to the dom, I was passing putHtml into the showEvent function, so instead of '(whereEvent, 'div#calendar'), I had (whereEvent, putHtml), but that didn't work. of course, the other method to accomplish this would be that when I make each cell, I iterate over the events json, and apply the appropriate html to the cell at the time, but that means repetitively running over the entire json in order to get the event to put in the cell. Is there another/better way to do something like this?

    Read the article

  • jQuery nextUntill id < num or alternative

    - by Volmar
    Hi, i'm using jQuery to show/hide different LI-elements based on their classes. Look at this example. <li id="1" class="fp de1"></li> <li id="2" class="fp de1"><button onclick="hide(2,2);"></li> <li id="3" class="fp de2"><button onclick="hide(3,3);"></li> <li id="4" class="fp de3"><button onclick="hide(4,4);"></li> <li id="5" class="fp de4"></li> <li id="6" class="fp de3"></li> <li id="7" class="fp de3"></li> <li id="8" class="fp de1"><button onclick="hide(8,2);"></li> <li id="9" class="fp de2"><button onclick="hide(9,3);"></li> <li id="10" class="fp de3"><button onclick="hide(10,4);"></li> <li id="11" class="fp de4"></li> You se that some of these have a button with a hide funcion. what i want is that when you press the hide button The following elements the have a highernumber in the .de# class should be hidden untill it reaches a LI with the same .de#-class. so if you press the hide(), i want LIs with ids 3,4,5,6,7 to be hiden. if i press the next on i want 4,5,6,7, and the thirs i want id 5 to be hidden. so this is the Javascript i made for it: function hide(id,de){ var de2 = de-1; $('#'+id).nextUntil('li.de'+de2).hide(); } The problem is that this function is not working exactly as i want. it would work correctly in the first hide()-function and the thirs but not in hide()function number two. here it will hide IDs: 4-8. so i want to do something. so i want the nextuntill() to hide elements untill it reaches a LI-element with the same .de# or a lower .de#. i hope i didn't complicate it to much in my description of the problem. if you have better idea than using nextUntill i'm all ears.

    Read the article

  • Show/hide jQuery

    - by Banderdash
    Not much experience with JavaScript, hopefully one of you gurus can help. <div id="themes"> <h2>Research Themes</h2> <ul> <li><a href="">Learn about our approach to the <strong>environment</strong></a><span><a href="#">Expand</a></span></li> <ul class="tier_2 hide"> <li><a href="">Project name numero uno goes here</a></li> <li><a href="">Project name numero dos goes here</a></li> <li><a href="">Project name numero tres goes here</a></li> </ul> <li><a href="">Learn about our approach to <strong>human health</strong></a><span><a href="#">Expand</a></span></li> <ul class="tier_2 hide"> <li><a href="">Project name numero uno goes here</a></li> <li><a href="">Project name numero dos goes here</a></li> <li><a href="">Project name numero tres goes here</a></li> </ul> <li class="last"><a href="">Learn about our approach to <strong>national defense</strong></a><span><a href="#">Expand</a></span></li> <ul class="tier_2 hide"> <li><a href="">Project name numero uno goes here</a></li> <li><a href="">Project name numero dos goes here</a></li> <li><a href="">Project name numero tres goes here</a></li> </ul> </ul> </div><!-- // end themes --> This is my markup. As you can see under each of the first tier of li's there are ul's with classes of tier_2 and hide. I've been trying to create some simple jQuery that on click will remove the hide class from it's child ul, but at the same time check that no other ul's with class of tier_2 are shown (aka the other's have the hide class). This should keep a visitor from expanding so many items at once that it will make the layout look funky. Just not sure how to accomplish this, any ideas?

    Read the article

  • Dynamically loaded jQuery with GreaseMonkey inconsistent on pages (refreshing seems to fix it)... do

    - by uprightnetizen
    Hi, I want a custom page analysis footer on every site I visit... so I've used a method to attach JQuery to unsafeWindow. I then create a floating footer on the page. I want to be able to call commands in a menu, do some processing, then put the results in the footer. Unfortunately it sometimes works, sometimes it doesn't. At least two alerts should happen in the printOutput function. Sometimes it only fires one, then it (crashes?) without error? On other pages, both alerts fire and it finds the element, but it doesn't add the extra text. (e.g. www.linode.com) Refreshing the page, then running the printOutput command again seems to always work. Does anyone know what's going on??? The userscript can be installed at: http://www.captionwizard.com/test/page_analysis.user.js // ==UserScript== // @name page_analysis // @namespace markspace // @description Page Analysis // @include http://*/* // ==/UserScript== (function() { // Add jQuery var GM_JQ = document.createElement('script'); GM_JQ.src = 'http://code.jquery.com/jquery-1.4.2.min.js'; GM_JQ.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(GM_JQ); var jqueryActive = false; //Check if jQuery's loaded function GM_wait() { if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); } else { $ = unsafeWindow.jQuery; letsJQuery(); } } GM_wait(); function letsJQuery() { jqueryActive = true; setupOutputFooter(); } /******************************* Analysis FOOTER Functions ******************************/ function printOutput(someText) { alert('printing output'); if($('div.analysis_footer').length) { alert('is here - appending'); $('div.analysis_footer').append('<br>' + someText); } else { alert('not here - trying again'); setupOutputFooter(); $('div.analysis_footer').append('<br>' + someText); } } GM_registerMenuCommand("Test Output", testOutput, "k", "control", "k" ); function testOutput() { printOutput('testing this'); } function setupOutputFooter() { $('<div class="analysis_footer">Page Analysis Footer:</div>').appendTo('body'); $('div.analysis_footer').css('position','fixed').css('bottom', '0px').css('background-color','#F8F8F8'); $('div.analysis_footer').css('width','100%').css('color','#3B3B3B').css('font-size', '0.8em'); $('div.analysis_footer').css('font-family', '"Myriad",Verdana,Arial,Helvetica,sans-serif').css('padding', '5px'); $('div.analysis_footer').css('border-top', '1px solid black').css('text-align', 'left'); } }());

    Read the article

  • jQuery - Sorting an array?

    - by Probocop
    Hi, I'm using Ajax to get some XML, and then filling in some fields on a form with the results. There is a numerical field on the form and I would like to sort the results by this number (highest first). How would I go about doing this in jQuery? My js function code is currently: function linkCounts() { ws_url = "http://archreport.epiphanydev2.co.uk/worker.php?query=linkcounts&domain="+$('#hidden_the_domain').val(); $.ajax({ type: "GET", url: ws_url, dataType: "xml", success: function(xmlIn){ results = xmlIn.getElementsByTagName("URL"); for ( var i = 0; i < results.length; i++ ) { $("#tb_domain_linkcount_url_"+(i+1)).val($(results[i].getElementsByTagName("Page")).text()); $("#tb_domain_linkcount_num_"+(i+1)).val($(results[i].getElementsByTagName("Links")).text()); } $('#img_linkcount_worked').attr("src","/images/worked.jpg"); }, error: function(){$('#img_linkcount_worked').attr("src","/images/failed.jpg");} }); } The Links tag is the one I'm wanting to sort it on. Thanks For reference the XML that's getting returned is like the following: <?xml version="1.0" encoding="utf-8" standalone="yes"?> <Response> <ResponseCode>1</ResponseCode> <ResponseStatus>OK</ResponseStatus> <ReportId>2</ReportId> <UrlChecked /> <MaxLinks>75</MaxLinks> <PagesFound>121</PagesFound> <URLs> <URL> <Page>http://www.epiphanysolutions.co.uk/blog</Page> <Links>78</Links> </URL> <URL> <Page>http://www.epiphanysolutions.co.uk/blog/</Page> <Links>78</Links> </URL> <URL> <Page>http://www.epiphanysolutions.co.uk/blog/author/daniel-peden/</Page> <Links>78</Links> </URL> <URL> <Page>http://www.epiphanysolutions.co.uk/blog/author/daniel-peden/page/2/</Page> <Links>78</Links> </URL> </URLS> </Response>

    Read the article

  • jQuery mobile ajax login form authentication

    - by Jakub Zak
    I know i already asked simillar question, but now when I work with jQuery Mobile I can't figure it out. So I have this form: <div data-role="page" data-theme="a" id="login_page"> <div data-role="header" data-position="fixed"> <h1>****</h1> </div> <div data-role="content"> <form id="login_form" method="POST" data-ajax="false"> <label for="basic">Username:</label> <input type="text" name="name" id="username" value=""/> <label for="basic">Password:</label> <input type="password" name="password" id="password" value=""/> <input type="submit" value="Login" id="login" name="login"/> </form> </div> <div data-role="footer" data-position="fixed"> <div data-role="navbar"></div> </div> </div> And I need to submit Username and Password to php script, where php replies and send "success" or "failed". Here is php: <?php session_start(); $username = $_POST["name"]; $password = $_POST["password"]; include('mysql_connection.php'); mysql_select_db("jzperson_imesUsers", $con); $res1 = mysql_query("SELECT * FROM temp_login WHERE username='$username' AND password='$password'"); $count=mysql_num_rows($res1); if($count==1){ echo "success"; }else{ echo "failed"; } ?> And to do all this I want to use this script: $(document).ready(function() { $("form").submit(function(){ $.mobile.showPageLoadingMsg(); $.ajax({ url: "http://imes.jzpersonal.com/login_control.php", type: "POST", dataType: "jsonp", jsonp: "jsoncallback", data: $("form#login_form").serialize(), success: function( response ){ $.mobile.changePage( "http://imes.jzpersonal.com/user_panel.html"); } }); return false; }); }); But I can't make it work, I know I must have mistakes in there, I just can't find them, or better way to do it. Thank you in advance for any help.

    Read the article

  • I get an `Cannot read property 'slice' of undefined` message when I use the scrollTo jQuery plugin inside this function

    - by alexchenco
    I'm using the jQuery scrollTo plugin. I get this error in my JS Console: 16827Uncaught TypeError: Cannot read property 'slice' of undefined d.fn.scrollToindex.html.js:16827 jQuery.extend.eachindex.html.js:662 d.fn.scrollToindex.html.js:16827 jQuery.extend.eachindex.html.js:662 jQuery.fn.jQuery.eachindex.html.js:276 d.fn.scrollToindex.html.js:16827 popupPlaceindex.html.js:18034 (anonymous function)index.html.js:17745 jQuery.extend._Deferred.deferred.resolveWithindex.html.js:1018 doneindex.html.js:7247 jQuery.ajaxTransport.send.script.onload.script.onreadystatechange When I place $(".menu").scrollTo( $("li.matched").attr("id"), 800 ); inside it. function popupPlace(dict) { $popup = $('div#dish-popup'); $popup.render(dict,window.dishPopupTemplate); if(typeof(dict.dish) === 'undefined') { $popup.addClass('place-only'); } else { $popup.removeClass('place-only'); } var $place = $('div#dish-popup div.place'); var place_id = dict.place._id; if(liked[place_id]) { $place.addClass('liked'); } else { $place.removeClass('liked'); } if(dict.place.likes) { $place.addClass('has-likes'); } else { $place.addClass('zero-likes'); } var tokens = window.currentSearchTermTokens; var tokenRegex = tokens && new RegExp($.map(tokens, RegExp.escape).join('|'), 'gi'); $.each(dict.place.products, function(n, product) { $product = $('#menu-item-'+product.id); if(liked[place_id+'/'+product.id]) { $product.addClass('liked'); } if(tokens && matchesDish(product, tokens)) { $product.addClass('matched'); $product.highlight(tokenRegex); } else { $product.removeClass('matched'); $product.removeHighlight(); } if(product.likes) { $product.addClass('has-likes'); } else { $product.addClass('zero-likes'); } }); $('#overlay').show(); $('#dish-popup-container').show(); // Scroll to matched dish //$("a#scrolll").attr("href", "#" + $("li.matched").attr("id")); //$("a#scrolll").attr("href", "#" + $("li.matched").attr("id")); //$("a#scrolll").trigger("click"); $(".menu").scrollTo( $("li.matched").attr("id"), 800 ); // Hide dish results on mobile devices to prevent having a blank space at the bottom of the site if (Modernizr.mq('only screen and (max-width: 640px)')) { $('ol.results').hide(); } $(".close-dish-popup").click(function() { $("#overlay").hide(); $("#dish-popup-container").hide(); $('ol.results').show(); changeState({}, ['dish', 'place', 'serp']); }); showPopupMap(dict.place, "dish-popup-map"); } Any suggestion to fix this?

    Read the article

  • jQuery: load refuses to get dynamic content in IE6

    - by user260157
    jQuery refuses to load my dynamic content in IE6. All in FireFox & Safari works fine. Only IE6 is being a pain. When I try the a html with <p>Hello World</p> that works. Properly. But when loading a PHP it doesn't work! As you can see it's doing multiple things. <script type="text/javascript"> // When the document is ready set up our sortable with it's inherant function(s) $(document).ready(function() { // Sort list & amend in database function sortTableMenuAndReload() { var order = $('#menuList').sortable('serialize'); $.post("PLUGINS/SortableMenu/process-sortable.php",order); $("#menuList").load("PLUGINS/SortableMenu/sortableMenu_ajax.php"); } function sortTableOrder() { var order = $('#menuList').sortable('serialize'); $.post("PLUGINS/SortableMenu/process-sortable.php",order); } function sortTableOrderAndRemove(removeID) { $('#listItem_'+removeID).remove(); var order = $('#menuList').sortable('serialize'); $.post("PLUGINS/SortableMenu/process-sortable.php",order); $("#menuList").load("PLUGINS/SortableMenu/sortableMenu_ajax.php"); } $("#menuList > li > .remove").live('click', function () { var removeID = $(this).attr('id'); $.ajax({ type: 'post', url: 'PLUGINS/SortableMenu/removeLine.php', data: 'id='+removeID, success: sortTableOrderAndRemove(removeID) }); }); $("#menuList > li > .publish").live('click', function () { var publishID = $(this).attr('id'); $.ajax({ type: 'post', url: 'PLUGINS/SortableMenu/publishLine.php', data: 'id='+publishID, success: sortTableOrder }); }); $('#new_documents > li').draggable({ addClasses: false, helper:'clone', connectToSortable:'#menuList' }); $("#menuList").droppable({ addClasses: false, drop: function() { var clone = $("#menuList > li#newArticleTYPE1"); $(clone).attr("id","listItem_newArticleTYPE1"); } }); $("#menuList").sortable({ opacity: 0.6, handle : '.handle, .remove', update : sortTableMenuAndReload }); }); </script>

    Read the article

  • Why jQuery selector can't work but getElementById works in this scenario?

    - by Stallman
    Here is the HTML: <html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="jquery-1.7.2.js"></script> <script type="text/javascript" src="access.js"></script> </head> <body> <button id="trigger"></button> <img id= "testElement" style= "position: absolute; border-color: white; top:340px; left:615px;" width="34px" height= "34px" /> </body> </html> And the access.js file is: $(document).ready( function(){ $('#trigger').click(function(){ $('#testElement').src="success.png"; //THIS WON'T WORK. document.getElementById('testElement').src= "success.png"; //BUT THIS WORKS. }); }); I know that if I use $, the return object is a jQuery object. It's not the same as getElementById. But why the jQuery selector can't work here? I need the jQuery object to make more operations like "append/style"... Thanks. UPDATE Too much correct answers appear at almost the same time... Please give more explanations to let me decide who I should give the credit, thanks!!! Sorry for my poor understanding of your correct answer... I just want more detail. Are all the attribute nodes(src/width/height...) not the property of jQuery object? So does the jQuery selector only select DOM Element Node like ? Thank you! 3. List item

    Read the article

< Previous Page | 244 245 246 247 248 249 250 251 252 253 254 255  | Next Page >