Search Results

Search found 19971 results on 799 pages for 'jquery plugins'.

Page 60/799 | < Previous Page | 56 57 58 59 60 61 62 63 64 65 66 67  | Next Page >

  • How to use Jquery UI in my Custom Function? (Autocomplete)

    - by bakazero
    I want to create a function to simplify configuration of jQuery UI AutoComplete. Here is my function code: (function($) { $.fn.myAutocomplete = function() { var cache = {}; var dataUrl = args.dataUrl; var dataSend = args.dataItem; $.autocomplete({ source: function(request, response) { if (cache.term == request.term && cache.content) { response(cache.content); } if (new RegExp(cache.term).test(request.term) && cache.content && cache.content.length < 13) { var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); response($.grep(cache.content, function(value) { return matcher.test(value.value) })); } $.ajax({ url: dataUrl, dataType: "json", type: "POST", data: dataSend, success: function(data) { cache.term = request.term; cache.content = data; response(data); } }); }, minLength: 2, }); } }) (jQuery); but when I'm using this function like: $("input#tag").myAutocomplete({ dataUrl: "/auto_complete/tag", dataSend: { term: request.term, category: $("input#category").val() } }); It's give me an error: Uncaught ReferenceError: request is not defined

    Read the article

  • ASP.NET MVC: Using jQuery context menu with tables

    - by DigiMortal
    I needed to add context menus to some tables of my intranet application. After trying some components I found one that does everything I need and has no overhead. In this posting I will show you how to use jQuery context menu plug-in and how to attach it to tables. I found context menu plug-in by Chris Domigan and it was very easy to integrate to my application (when comparing some other plug-ins that work only on demo pages and in simple scenarios). Thanks, Chris, for great work! Now let’s use this context menu plug-in with table. Before we go on let’s see what we are trying to achieve. The following screenshot fragment shows simple context menu that we want to attach to our table. And when we click some menu option then something should happen too. :) Installing context menu plug-in Download plug-in (if download link is broken then open demo page and I think you know how to get plug-in from there). Copy jquery.contextmenu.js to your scripts folder. Include it in your masterpage or in the page where you plan to use context menus. Make sure plug-in is included correctly (use Firebug or some other tool you like). Save the page. Defining context menu Now let’s define context menu. Here is fragment on context menu definition from my code. <div class="contextMenu" id="myMenu1">     <ul>     <li id="email"><img src="/img/e-mail.png" />E-mail</li>     <li id="homepage"><img src="/img/homepage.png" />Homepage</li>     </ul> </div> div with id myMenu1 is container of context menu. Unordered list inside container defines items in context menu – simple and elegant! Adding context menu to table I have table with persons. It is simple HTML. I omitted commands column from this and the next table to keep them simple and more easily readable. <table>   <tr>     <th>Name</th>     <th>Short</th>     <th>Address</th>     <th>Mobile</th>     <th>E-mail</th>   </tr>   <% foreach(var person in Model.Results) { %>   <tr>     <td><%=person.FullName %></td>     <td><%=person.ShortName %></td>     <td><%=person.FullAddress %></td>     <td><%=person.Mobile %></td>     <td><%=person.Email %></td>   </tr>   <% } %> </table> To get context menu linked to table rows first cells we need to specify class for cells and ID. We need ID because we have to know later which ID has the row on which user selected something from context menu. <table>   <tr>     <th>Name</th>     <th>Short</th>     <th>Address</th>     <th>Mobile</th>     <th>E-mail</th>   </tr>   <% foreach(var person in Model.Results) { %>   <tr>     <td class="showContext" id="<%= person.Id %>"><%=person.FullName %></td>     <td><%=person.ShortName %></td>     <td><%=person.FullAddress %></td>     <td><%=person.Mobile %></td>     <td><%=person.Email %></td>   </tr>   <% } %> </table> Now we have only one thing to do – we have to write some code that attaches context menu to table cells. Catching context menu events Now we will make everything work. Relax, it is only couple of lines of code, thank to jQuery. <script type="text/javascript">   $(document).ready(function () {     $('td.showContext').contextMenu('myMenu1', {         bindings: {         'email': function (t) {           document.location.href = '/contact/sendmail/' + t.id;         },         'homepage': function (t) {           document.location.href = '/contact/homepage/' + t.id;         }       }     });   }); </script> I think that first lines doesn’t need any comments. Take a look at bindings. We gave ID to table cells because it is carried also to bound events. We can use also more complex ID-s if we have more than one table with context menus on our form. Now we are done. Save all files, compile solution, run it and try out how context menu works. Conclusion We saw than using jQuery with context menu component allows us easily create powerful context menus for our user interfaces. Context menu was very easy to define. We were also able to attach context menu to table and use ID of current row entity also in events of context menu. To achieve this we needed only some minor modifications in view and couple of lines of JavaScript.

    Read the article

  • Where does jQuery fit-in with frameworks like JavaScriptMVC, BackboneJS, SproutCore and Knockout?

    - by Prisoner ZERO
    I have been happily using JQuery for the last 2 years and have been quite sucessful creating some really cool functionality with it...so I am very comfortable with it. I also beleive the future of the web will continue on the current client-side path. However... The next challenge seems to be coming in the form of various controller frameworks: KnockoutJS, BackboneJS, SproutCore, JavaScriptMVC (the list goes on). Additonally, there are some great AMD Loader tools for use like RequireJS or LabJS etc. However, jQuery now has define and then capabilities baked-in. It's getting harder-and-harder to keep track of it all... And now, my task seems to be to evaluate/decide-on a strategic-direction for using some form of either an MVC or MVVM framework client-side...but I have so many questions. Where does JQuery fit-in with the various controller-frameworks mentioned above? Is JQuery used alongside each or do some of them have their own 'JQuery-styled version' baked-in? Are tools like RequireJS still needed if you implement one of the various controller-frameworks mentioned above? Does the define and then capabilities baked-into JQuery now supercede the AMD Loader mentioned above? Which one seems most modular? (see notes below) NOTES: One thing I don't want in any future-framework is the requirement of having to take-in vast amounts of functionality that I don't use. Meaning, I would rather use a framework that is truly modular. For example, to use jQuery UI you have to take-in a lot other core libraries that you might not actually use. I will be experimenting with each one, but some REAL feedback would be great. I've seen some 'similar' questions, but none have really answered the above skew. Thanks in advance!

    Read the article

  • Issue with image lightbox and enlargement / Jquery Mobile

    - by Matt
    I'm working on a redesign of my weather website using Jquery Mobile. I have it set up so that you drill down through a series of content containers to get to the weather info (each group of info opens in a dialog display). Everything's worked well, but I've run into an issue with my images. I have them sized so that they fit a mobile device's screen nicely, but because of that, when you look at them in a desktop browser, you can't really make out what the image is. I've tried several image lightbox / enlargement solutions, but for some reason, none of them have worked. Either nothing happens or the images open in a new window. I thought that this might be caused by Jquery Mobile somehow overwriting the scripts and css of the lightbox / enlargements I've tried. I'm not completely sure though that this is the case, and if it is, how I can get around it to be able to enlarge the images to their original size, preferably onclick. Here is a working (for the most part - still some kinks to work out) example. If you look under the "Tropical" section at the "Satellite-Derived Products", you'll see what I mean. http://www.suncoaststormwatch.com/Beta/Index.html

    Read the article

  • How to create repeatable table with unique ID's using jQuery

    - by milbert
    I need to create a table structure that can be "copied" and populated with a new set of data. However, each table must have unique IDs for functions that must access them later. For example: <table class="main"> <thead><tr><th class="header"></th></tr></thead> <tbody> <tr class="row"><td class="col0"></td><td class="col1"></td></tr> </tbody> </table> My current thought is to use jQuery to load the table from a seperate html file into a variable. Using this saved table I could then create a function that copies it, traverses the table to add an ID to each section where information will need to be appended from a seperate data source, and return this new table. I am new to jQuery and feel like I may be missing an easier/better way to accomplish this. Any help on this subject would be appreciated.

    Read the article

  • JQuery/JavaScript confusion with Previous and Next buttons.

    - by Anders H
    I've got some inherited JQuery code that isn't working as I'd think and I'm just not even sure what to research or look up next. The Problem: I've got a few DIVs within the HTML: a container, a "frame" and the content. If the content is longer than the frame, it's cut off using overflow:hidden and a Next - button appears. The next button works correctly. However, there's also a previous button with similar code, but it does not work as expected and just displays whenever the next button does. Whenever either button is hidden, it will not reappear again when navigating back through the "pages". When the I may be overlooking something in the code, but here it is in full. The HTML: <div id="draggable" class="ui-widget-content"> <div id="draggable-title" class="cufon">about</div> <a id="draggable-close" href="javascript:void(0);"><div class="close-img icon"></div></a> <div class="clear"></div> <div id="draggable-frame"> <div id="draggable-content"> </div> </div> <a id="prevContent" href="javascript:void(0);">&laquo; previous</a><a id="nextContent" href="javascript:void(0);">next &raquo;</a> </div> The JavaScript: $(function() { $("#draggable").draggable(); }); $(document).ready(function(){ $("#draggable-frame").scrollTop(0); $("#prevContent").click(function(){ $("#draggable-content").fadeOut("medium"); setTimeout("showPrev()", 250); if($("#draggable-frame").scrollTop()+$("#draggable-frame").height() >= $("#draggable-content").height()) { $("#prevContent").hide(); } $("#draggable-content").fadeIn("medium"); }); $("#nextContent").click(function(){ $("#draggable-content").fadeOut("medium"); setTimeout("showNext()", 250); if($("#draggable-frame").scrollTop()+$("#draggable-frame").height() >= $("#draggable-content").height()) { $("#nextContent").hide(); } $("#draggable-content").fadeIn("medium"); }); $("#draggable-close").click(function(){ $("#draggable").fadeOut("medium"); }); $("#prevContent").hide(); $("#nextContent").hide(); showContent("about"); $(".opener").click(function(){ $("#draggable-frame").scrollTop(0); $("#draggable").fadeIn("medium"); showContent($(this).attr("title")); }); }); // function showPrev() { $("#draggable-frame").scrollTop($("#draggable-frame").scrollTop() - $("#draggable-frame").height()); } // function showNext() { $("#draggable-frame").scrollTop($("#draggable-frame").scrollTop() + $("#draggable-frame").height()); } function showContent(title) { $("#draggable-title").html(title); $("#draggable-content").html($("#"+title).html()); Cufon.replace('.cufon', { fontFamily: 'cav', hover: true }); $("#nextContent").hide(); $("#prevContent").hide(); if($("#draggable-content").height() > $("#draggable-frame").height()) { $("#nextContent").show(); } if($("#draggable-content").height() > $("#draggable-frame").height()) { $("#prevContent").show(); } } Even just point me in the right direction to research would be a big help right now. Thank you.

    Read the article

  • Adding UL to jQuery UI Tabs

    - by Dave Kiss
    It seems like whenever I try to add a UL inside of the containers when using jQuery UI - Tabs, it breaks the javascript. Is there a way I can use a UL inside of these containers that I am missing? Thanks <div id="tabs"> <div id="fragment-1"> <h4>Pre-Press Requirements</h4> ? SAMPLE of final artwork with noted sizes. ? NATIVE FILES & High Resolution PDF preferred. Files must be created or saved to the listed accepted file formats. ? FONTS used in files need to be supplied in a separate folder marked "fonts". Please ensure all families (screen & printer) fonts are supplied for the job. ? IMAGES must be saved as CMYK and no less than 300dpi. NO RGB FILES! We prefer images to be TIF or EPS formats. If you are submitting artwork for spot color printing vector artwork is preferred. Your images should be supplied in a separate folder marked "links". This will ensure proper reproduction of your artwork. ? COLORS need to be clearly specified. Pantone (PMS) colors preferred. Please specify if job is to be printed CMYK, spot color, etc. ? BLEEDS should be no less than .25" ? PDF's should be High Resolution. Please include any spot colors or CMYK format for full color printing. NO RGB FILES! All bleeds should be included with trim marks. All fonts must be embedded or outlined. No "layered" PDF files. </div> <div id="fragment-2"> <p>Our presses are all capable of sizes up to 11" x 17" using spot color or full color.</p> </div> <div id="fragment-3"> <p>USA Quickprint has complete in house bindery to finish each job to meet your needs.</p> <ul> <li>Folding</li> <li>Scoring</li> <li>Perforation</li> <li>Drilling</li> <li>Shrink Wrap</li> <li>Trimming</li> <li>Collating</li> <li>Spiral Binding</li> <li>GBC Binding</li> <li>Padding</li> <li>Stapling</li> <li>Numbering</li> <li>Lamination</li> </ul> </div>

    Read the article

  • jQuery custom validation for a selected radio selection

    - by Kaushik Gopal
    Hey peeps, This is my requirement: I have a bunch of radio box selections (types of workflows). If one of the radios are selected(i.e one particular type of workflow selected), I want to run a custom validation on that. This is what i tried, but it's not behaving well. Any help? jQuery part: $(document).ready(function() { // this part is to expand the child radio selection if particular parent workflow selected $("#concernedDirectorChoice").hide(); $("input[name^=workflowChoice]").change( function (){ if($(this).attr("class")=='chooseDir'){ $("#concernedDirectorChoice").show(); }else{ $("#concernedDirectorChoice").hide(); } }); // FORM VALIDATION $.validator.addMethod("dirRequired", function(value, element) { return this.optional(element) || ($("input[name^=rdDir:checked]").length); }, "That particular workflow requires a Director to be chosen. Please select Director"); $("#contExpInitiateForm").validate({ debug:true ,rules:{ RenewalNo: {required: true, number: true}, chooseDir: {dirRequired: true}, workflowChoice: {required: true} } ,errorPlacement: function(error, element) { $('.errorMessageBox').text(error.html()); } }); }); HTML form part: <!-- Pick type of workflow --> <table class="hr-table" > <tr> <td class="hr-table-label " colspan=2 >Pick Workflow Type</td> </tr> <tr> <td> <input type="radio" name="workflowChoice" value="1"> </input> </td> <td> Workflow 1 </td> </tr> <tr> <td> <input type="radio" name="workflowChoice" value="2" class="chooseDir"> </input> </td> <td> Workflow 2 (Dir selection required) </td> </tr> <tr> <td> <input type="radio" name="workflowChoice" value="3"> </input> </td> <td> Workflow 3 </td> </tr> </table> <!-- Pick Director for Workflow type 2 --> <table id="concernedDirectorChoice" name="concernedDirectorChoice" > <tr><td class="hr-table-label" colspan=2 > Choose Concerned Director</td></tr> <tr> <td><input type="radio" value='Dir1' name="rdDir" /></td> <td>Director 1</td> </tr> <tr> <td><input type="radio" value='Dir2' name="rdDir" /></td> <td>Director 2</td> </tr> <tr> <td><input type="radio" value='Dir3' name="rdDir" /></td> <td>Director 3</td> </tr> </table>

    Read the article

  • jQuery hold form submit until "continue" button pressed

    - by Seán McCabe
    I am trying to submit a form, which I have had working, but have now modified it to include a modal jQuery UI box, so that it won't submit until the user presses "continue". I've had various problems with this, including getting the form to hold until that button is pressed, but I think I have found a solution to that, but implementing it, I am getting a SyntaxError which I can't find the source of. With the help of kevin B managed to find the answer was the form was submitting, but the returned JSON response wasn't quite formatted right. The response was that the form wasn't being submitted, so that problem is still occurring. So updated the code with the provided feedback, now need to find out why the form isnt submitting. I know its something to do with the 2nd function isnt recognising the submit button has been pressed, so need to know how to submit that form data without the form needing to be submitted again. Below is the new code: function submitData() { $("#submitProvData").submit(function(event) { event.preventDefault(); var gTotal, sTotal, dfd; var dfd = new $.Deferred(); $('html,body').animate({ scrollTop: 0 }, 'fast'); $("#submitProvData input").css("border", "1px solid #aaaaaa"); $("#submitProvData input[readonly='readonly']").css("border", "none"); sTotal = $('#summaryTotal').val(); gTotal = $('#gptotal').val(); if(gTotal !== 'sTotal'){ $("#newsupinvbox").append('<div id="newsupinvdiagbox" title="Warning - Totals do not match" class="hidden"><p>Press "Continue", to submit the invoice flagged for attention.</p> <br /><p class="italic">or</p><br /> <p>Press "Correct" to correct the discrepancy.</p></div>') //CREATE DIV //SET $("#newsupinvdiagbox").dialog({ resizable: false, autoOpen:false, modal: true, draggable: false, width:380, height:240, closeOnEscape: false, position: ['center',20], buttons: { 'Continue': function() { $(this).dialog('close'); reData(); }, // end continue button 'Correct': function() { $(this).dialog('close'); return false; } //end cancel button }//end buttons });//end dialog $('#newsupinvdiagbox').dialog('open'); } return false; }); } function reData() { console.log('submitted'); $("#submitProvData").submit(function(resubmit){ console.log('form submit'); var formData; formData = new FormData($(this)[0]); $.ajax({ type: "POST", url: "functions/invoicing_upload_provider.php", data: formData, async: false, success: function(result) { $.each($.parseJSON(result), function(item, value){ if(item == 'Success'){ $('#newsupinv_window_message_success_mes').html('The provider invoice was uploaded successfully.'); $('#newsupinv_window_message_success').fadeIn(300, function (){ reset(); }).delay(2500).fadeOut(700); } else if(item == 'Error'){ $('#newsupinv_window_message_error_mes').html(value); $('#newsupinv_window_message_error').fadeIn(300).delay(3000).fadeOut(700); } else if(item == 'Warning'){ $('#newsupinv_window_message_warning_mes').html(value); $('#newsupinv_window_message_warning').fadeIn(300, function (){ reset(); }).delay(2500).fadeOut(700); } }); }, error: function() { $('#newsupinv_window_message_error_mes').html("An error occured, the form was not submitted"); $('#newsupinv_window_message_error').fadeIn(300); $('#newsupinv_window_message_error').delay(3000).fadeOut(700); }, cache: false, contentType: false, processData: false }); }); }

    Read the article

  • Use JQuery to target unwrapped text inside a div

    - by Chris
    I'm trying to find a way to wrap just the inner text of an element, I don't want to target any other inner dom elements. For example. <ul> <li class="this-one"> this is my item <ul> <li> this is a sub element </li> </ul> </li> </ul> I want to use jQuery to do this. <ul> <li class="this-one"> <div class="tree-item-text">this is my item</div> <ul> <li> <div class="tree-item-text">this is a sub element</div> </li> </ul> </li> </ul> A little background is I need to make an in-house tree structure ui element, So I'm using the UL structure to represent this. But I don't want developers to have to do any special formatting to use the widget. update: I just wanted to add the purpose of this is I want to add a click listener to be able to expand the elements under the li, However, since those elements are within the li the click listener will activate even when clicking on the children, So I want to attach it to the text instead, to do this the text needs to be targetable, which is why I want to wrap it in a div of it's own. So far I've come up with wrapping all the inner elements of the li in a div and then moving all inner dom elements back to the original parent. But this code is pretty heavy for something that might be much simpler and not require so much DOM manipulation. EDIT: Want to share the first pseudo alternative I came up with but I think it is very tasking for what I want to accomplish. var innerTextThing = $("ul.tree ul").parents("li").wrapInner("<div class='tree-node-text'>"); $(innerTextThing.find(".tree-node-text")).each(function(){ $(this).after($(this).children("ul")); }); Answered: I ended up doing the following, FYI i only have to worry about FF and IE compatibility so it's untested in other browsers. //this will wrap all li textNodes in a div so we can target them. $(that).find("li").contents() .filter(function () { return this.nodeType == 3; }).each(function () { if ( //these are for IE and FF compatibility (this.textContent != undefined && this.textContent.trim() != "") || (this.innerText != undefined && this.innerText.trim() != "") ) { $(this).wrap("<div class='tree-node-text'>"); } });

    Read the article

  • jquery tabs with form help

    - by sico87
    Hello, I am implementing jQuery tabs on mysite, one of the tabs holds a form and this is my problem, the form is loaded in via ajax as it is used multiple time throughout the site. My issue is that when the form is submitted the page leaves the tabbed area, whereas I need to stay within the tabbed system. Below is the code I am using TABS HTML <div id="tabs"> <ul> <li><a href="#tabs-1">Active Categories</a></li> <li><a href="#tabs-2">De-activated Categories</a></li> <li><a href="<?=base_url();?>admin/addCategory">Add A New Category</a></li> </ul> FORM MARKUP <div id="contact_form"> <?php // open the form echo form_open(base_url().'admin/addCategory'); // categoryTitle echo form_label('Category Name', 'categoryTitle'); echo form_error('categoryTitle'); $data = array( 'name' => 'categoryTitle', 'id' => 'categoryTitle', 'value' => $categoryTitle, ); echo form_input($data); // categoryAbstract $data = array( 'name' => 'categoryAbstract', 'id' => 'categoryAbstract wysiwyg', 'value' => $categoryAbstract, ); echo form_label('Category Abstract', 'categoryAbstract'); echo form_error('categoryAbstract'); echo form_textarea($data); // categorySlug $data = array( 'name' => 'categorySlug', 'id' => 'categorySlug', 'value' => $categorySlug, ); echo form_label('Category Slug', 'categorySlug'); echo form_error('categorySlug'); echo form_input($data); // categoryIsSpecial /*$data = array( 'name' => 'categoryIsSpecial', 'id' => 'categoryIsSpecial', 'value' => '1', 'checked' => $checkedSpecial, ); echo form_label('Is Category Special?', 'categoryIsSpecial'); echo form_error('categoryIsSpecial'); echo form_checkbox($data);*/ // categoryOnline $data = array( 'name' => 'categoryOnline', 'id' => 'categoryOnline', 'value' => '1', 'checked' => $checkedOnline, ); echo form_label('Online?', 'categoryOnline'); echo form_checkbox($data); echo form_error('categoryOnline'); //hidden field check if we are adding or editing echo form_hidden('edit', $edit); echo form_hidden('categoryId', $categoryId); // categorySubmit $data = array('class' => 'submit', 'id' => 'submit', 'value'=>'Submit', 'name' => 'categorySubmit'); echo form_submit($data); echo form_close(); ?> </div> FORM PROCESS function saveCategory() { $data = array(); // we need to set the what element the form errors get displayed in $this->form_validation->set_error_delimiters('<div class="formError">', '</div>'); // we need to estabilsh some rules so the form can be submitted without error, // or if there is error then the form needs show errors. $config = array( array( 'field' => 'categoryTitle', 'label' => 'Category title', 'rules' => 'required|trim|max_length[25]|xss_clean' ), array( 'field' => 'categoryAbstract', 'label' => 'Category abstract', 'rules' => 'required|trim|max_length[150]|xss_clean' ), array( 'field' => 'categorySlug', 'label' => 'Category slug', 'rules' => 'required|trim|alpha|max_length[25]|xss_clean' ), /*array( 'field' => 'categoryIsSpecial', 'label' => 'Special category', 'rules' => 'trim|xss_clean' ),*/ array( 'field' => 'categoryOnline', 'label' => 'Category online', 'rules' => 'trim|xss_clean' ) ); $this->form_validation->set_rules($config); // with the validation rules set we can no run the validation rules over the form // if any the validation returns false then the error messages will be returned to the view // in the delimiters that we set further up the page. if($this->form_validation->run() == FALSE) { // we should reload the form $this->load->view('admin/add_category'); } }

    Read the article

  • Ajax loaded content , jquery plugins not working

    - by Sylph
    Hello, I have a link that calls the ajax to load content, and after the content is loaded, my jquery function doesn't work anymore Here is my HTML <a href="#" onclick="javascript:makeRequest('content.html','');">Load Content</a> <span id="result"> <table id="myTable" valign="top" class="tablesorter"> <thead> <tr> <th>Title 1</th> <th>Level 1</th> <th>Topics</th> <th>Resources</th> </tr> </thead> <tbody> <tr> <td>Example title 1</td> <td>Example level 1</td> </tr> <tr> <td>Example title 2</td> <td>Example level 2</td> </tr> </tbody> </table> </span> The table is sorted using jquery table sorter plugin from http://tablesorter.com/docs/ After the ajax content is loaded, another set of table with different data will be displayed. However, the sorting doesn't work anymore. Here is my ajax script which is use to load the content : var http_request = false; function makeRequest(url, parameters) { http_request = false; if (window.XMLHttpRequest) { // Mozilla, Safari,... http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { // set type accordingly to anticipated content type //http_request.overrideMimeType('text/xml'); http_request.overrideMimeType('text/html'); } } else if (window.ActiveXObject) { // IE try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!http_request) { alert('Cannot create XMLHTTP instance'); return false; } http_request.onreadystatechange = alertContents; http_request.open('GET', url + parameters, true); http_request.send(null); } function alertContents() { if (http_request.readyState == 4) { // alert(http_request.status); if (http_request.status == 200) { //alert(http_request.responseText); result = http_request.responseText; document.getElementById('result').innerHTML = result; } else { alert('There was a problem with the request.'); } } } Any idea how I can get the jquery plugins to work after the content is loaded? I have searched and changed the jquery.tablesorter.js click function into live() like this $headers.live("click",function(e) but it doesn't work as well. How can I make the jquery functions to work after the content is loaded? Thank you

    Read the article

  • PHP, MySQL, jQuery, AJAX: json data returns correct response but frontend returns error

    - by Devner
    Hi all, I have a user registration form. I am doing server side validation on the fly via AJAX. The quick summary of my problem is that upon validating 2 fields, I get error for the second field validation. If I comment first field, then the 2nd field does not show any error. It has this weird behavior. More details below: The HTML, JS and Php code are below: HTML FORM: <form id="SignupForm" action=""> <fieldset> <legend>Free Signup</legend> <label for="username">Username</label> <input name="username" type="text" id="username" /><span id="status_username"></span><br /> <label for="email">Email</label> <input name="email" type="text" id="email" /><span id="status_email"></span><br /> <label for="confirm_email">Confirm Email</label> <input name="confirm_email" type="text" id="confirm_email" /><span id="status_confirm_email"></span><br /> </fieldset> <p> <input id="sbt" type="button" value="Submit form" /> </p> </form> JS: <script type="text/javascript"> $(document).ready(function() { $("#email").blur(function() { var email = $("#email").val(); var msgbox2 = $("#status_email"); if(email.length > 3) { $.ajax({ type: 'POST', url: 'check_ajax2.php', data: "email="+ email, dataType: 'json', cache: false, success: function(data) { if(data.success == 'y') { alert('Available'); } else { alert('Not Available'); } } }); } return false; }); $("#confirm_email").blur(function() { var confirm_email = $("#confirm_email").val(); var email = $("#email").val(); var msgbox3 = $("#status_confirm_email"); if(confirm_email.length > 3) { $.ajax({ type: 'POST', url: 'check_ajax2.php', data: 'confirm_email='+ confirm_email + '&email=' + email, dataType: 'json', cache: false, success: function(data) { if(data.success == 'y') { alert('Available'); } else { alert('Not Available'); } } , error: function (data) { alert('Some error'); } }); } return false; }); }); </script> PHP code: <?php //check_ajax2.php if(isset($_POST['email'])) { $email = $_POST['email']; $res = mysql_query("SELECT uid FROM members WHERE email = '$email' "); $i_exists = mysql_num_rows($res); if( 0 == $i_exists ) { $success = 'y'; $msg_email = 'Email available'; } else { $success = 'n'; $msg_email = 'Email is already in use.</font>'; } print json_encode(array('success' => $success, 'msg_email' => $msg_email)); } if(isset($_POST['confirm_email'])) { $confirm_email = $_POST['confirm_email']; $email = ( isset($_POST['email']) && trim($_POST['email']) != '' ? $_POST['email'] : '' ); $res = mysql_query("SELECT uid FROM members WHERE email = '$confirm_email' "); $i_exists = mysql_num_rows($res); if( 0 == $i_exists ) { if( isset($email) && isset($confirm_email) && $email == $confirm_email ) { $success = 'y'; $msg_confirm_email = 'Email available and match'; } else { $success = 'n'; $msg_confirm_email = 'Email and Confirm Email do NOT match.'; } } else { $success = 'n'; $msg_confirm_email = 'Email already exists.'; } print json_encode(array('success' => $success, 'msg_confirm_email' => $msg_confirm_email)); } ?> THE PROBLEM: As long as I am validating the $_POST['email'] as well as $_POST['confirm_email'] in the check_ajax2.php file, the validation for confirm_email field always returns an error. With my limited knowledge of Firebug, however, I did find out that the following were the responses when I entered email and confirm_email in the fields: RESPONSE 1: {"success":"y","msg_email":"Email available"} RESPONSE 2: {"success":"y","msg_email":"Email available"}{"success":"n","msg_confirm_email":"Email and Confirm Email do NOT match."} Although the RESPONSE 2 shows that we are receiving the correct message via msg_confirm_email, in the front end, the alert 'Some error' is popping up (I have enabled the alert for debugging). I have spent 48 hours trying to change every part of the code wherever possible, but with only little success. What is weird about this is that if I comment the validation for $_POST['email'] field completely, then the validation for $_POST['confirm_email'] field is displaying correctly without any errors. If I enable it back, it is validating email field correctly, but when it reaches the point of validating confirm_email field, it is again showing me the error. I have also tried renaming success variable in check_ajax2.php page to other different names for both $_POST['email'] and $_POST['confirm_email'] but no success. I will be adding more fields in the form and validating within the check_ajax2.php page. So I am not planning on using different ajax pages for validating each of those fields (and I don't think it's smart to do it that way). I am not a jquery or AJAX guru, so all help in resolving this issue is highly appreciated. Thank you in advance.

    Read the article

  • Jquery mobile page structure

    - by Die 20
    I built a jquery mobile site a while back and I have recently been expanding on it and noticing performance issues. I believe it is because I constructed the site using a multi-page set up where a single php file houses the following pages: **ALL_PAGES.PHP** <html> <head> /* external css and js files */ </head> <body> <div date-role="page" id="main"> <div class="page_link"> page 1 </div> <div class="page_link"> page 2 </div> <div class="page_link"> page 3 </div> </div> <div date-role="page" id="page 1"> <div class="page_link"> main </div> <div class="page_link"> page 2 </div> <div class="page_link"> page 3 </div> </div> <div date-role="page" id="page 2"> <div class="page_link"> main </div> <div class="page_link"> page 1 </div> <div class="page_link"> page 3 </div> </div> <div date-role="page" id="page 3"> <div class="page_link"> main </div> <div class="page_link"> page 1 </div> <div class="page_link"> page 2 </div> </div> </body> </html> **end ALL_PAGES.PHP ** I want to break away from this multi-page setup on one php file, and move to a setup where each page is a separate php file. To accomplish this I took the html from each page and moved it to its own php page. Then I added href links in replace of the mobile.change() functions I used for the "page_link" classes. **MAIN.PHP** <html> <head> external css and js files </head> <body> <div date-role="page" id="page 1"> <a href="/main.php"> main </a> <a href="/page_2.php"> page 2 </a> <a href="/page_3.php"> page 3 </a> </div> </body> </html> **end MAIN.PHP** **PAGE_1.PHP** <div date-role="page" id="page 1"> <a href="/main.php"> main </a> <a href="/page_2.php"> page 2 </a> <a href="/page_3.php"> page 3 </a> </div> **end PAGE_1.PHP** **PAGE_2.PHP** <div date-role="page" id="page 2"> <a href="/main.php"> main </a> <a href="/page_1.php"> page 1 </a> <a href="/page_3.php"> page 3 </a> </div> **end PAGE_2.PHP** **PAGE_3.PHP** <div date-role="page" id="page 3"> <a href="/main.php"> main </a> <a href="/page_1.php"> page 1 </a> <a href="/page_2.php"> page 2 </a> </div> **end PAGE_3.PHP** The site works fine except when the user hits the refresh button in the browser. When that happens each page loses access to any external css and js files located on the main page. I am fairly new to JQM so any advice would be helpful.

    Read the article

  • Jquery Serialize data

    - by Richard
    So I have several text boxes, drop down menus, and radio options on this form. When the user clicks submit i want to save ALL that information so I can put it into a database. So this is all the form's inputs <div id="reg2a"> First Name: <br/><input type="text" name="fname" /> <br/> Last Name: <br/><input type="text" name="lname" /> <br/> Address: <br/><input type="text" name="address" /> <br/> City: <br/><input type="text" name="city" /> <br/> State: <br/><input type="text" name="state" /> <br/> Zip Code: <br/><input type="text" name="zip" /> <br/> Phone Number: <br/><input type="text" name="phone" /> <br/> Fax: <br/><input type="text" name="fax" /> <br/> Email: <br/><input type="text" name="email" /> <br/> Ethnicity: <i>Used only for grant reporting purposes</i> <br/><input type="text" name="ethnicity" /> <br/><br/> Instutional Information Type (select the best option) <br/> <select name="iitype"> <option value="none">None</option> <option value="uni">University</option> <option value="commorg">Community Organization</option> </select> <br/><br/> Number of sessions willing to present: <select id="vennum_select" name="vnum"> <?php for($i=0;$i<=3;$i++) { ?> <option value="<?php echo $i ?>"><?php echo $i ?></option> <?php } ?><br/> </select><br/> Number of tables requested: <select id="tabnum_select" name="tnum"> <?php for($i=1;$i<=3;$i++) { ?> <option value="<?php echo $i ?>"><?php echo $i ?></option> <?php } ?> </select><br/><br/> Awarding of a door prize during the conference will result in a reduction in the cost of your first table. <br/><br/> I am providing a door prize for delivery during the conference of $75 or more <select id="prize_select" name="pnum"> <option value="0">No</option> <option value="1">Yes</option> </select><br/> Prize name: <input type="text" name="prize_name" /><br/> Description: <input type="text" name="descr" /><br/> Value: <input type="text" name="retail" /><br/><br/> Name of Institution: <br/><input type="text" name="institution" /> <br/><br/> Type (select the best option) <br/> <select name="type"> <option value="none">None</option> <option value="k5">K-5</option> <option value="k8">K-8</option> <option value="68">6-8</option> <option value="912">9-12</option> </select> <br/><br/> Address: <br/><input type="text" name="address_sch" /> <br/> City: <br/><input type="text" name="city_sch" /> <br/> State: <br/><input type="text" name="state_sch" /> <br/> Zip Code: <br/><input type="text" name="zip_sch" /> <br/> <form name="frm2sub" id="frm2sub" action="page3.php" method="post"> <input type="submit" name="submit" value="Submit" id="submit" /> </form> </div> This is my jquery function: $("#frm2sub").submit( function() { var values = {}; values["fname"] = $("#fname").val(); }); I can do this for each one of the input boxes but I want to give all this data to the next page. So how do I put this array into $_POST? Btw, I've tried doing var data = $("#reg2a").serialize(); and var data = $(document).serialize(); Data ended up being empty. Any ideas? Thanks

    Read the article

  • Abstracting the adding of click events to elements selected by class using jQuery

    - by baroquedub
    I'm slowly getting up to speed with jQuery and am starting to want to abstract my code. I'm running into problems trying to define click events at page load. In the code below, I'm trying to run through each div with the 'block' class and add events to some of its child elements by selecting them by class: <script language="javascript" type="text/javascript"> $(document).ready(function (){ $('HTML').addClass('JS'); // if JS enabled, hide answers $(".block").each(function() { problem = $(this).children('.problem'); button = $(this).children('.showButton'); problem.data('currentState', 'off'); button.click(function() { if ((problem.data('currentState')) == 'off'){ button.children('.btn').html('Hide'); problem.data('currentState', 'on'); problem.fadeIn('slow'); } else if ((problem.data('currentState')) == 'on'){ button.children('.btn').html('Solve'); problem.data('currentState', 'off'); problem.fadeOut('fast'); } return false; }); }); }); </script> <style media="all" type="text/css"> .JS div.problem{display:none;} </style> <div class="block"> <div class="showButton"> <a href="#" title="Show solution" class="btn">Solve</a> </div> <div class="problem"> <p>Answer 1</p> </div> </div> <div class="block"> <div class="showButton"> <a href="#" title="Show solution" class="btn">Solve</a> </div> <div class="problem"> <p>Answer 2</p> </div> </div> Unfortunately using this, only the last of the divs' button actually works. The event is not 'localised' (if that's the right word for it?) i.e. the event is only applied to the last $(".block") in the each method. So I have to laboriously add ids for each element and define my click events one by one. Surely there's a better way! Can anyone tell me what I'm doing wrong? And how I can get rid of the need for those IDs (I want this to work on dynamically generated pages where I might not know how many 'blocks' there are...) <script language="javascript" type="text/javascript"> $(document).ready(function (){ $('HTML').addClass('JS'); // if JS enabled, hide answers // Preferred version DOESN'T' WORK // So have to add ids to each element and laboriously set-up each one in turn... $('#problem1').data('currentState', 'off'); $('#showButton1').click(function() { if (($('#problem1').data('currentState')) == 'off'){ $('#showButton1 > a').html('Hide'); $('#problem1').data('currentState', 'on'); $('#problem1').fadeIn('slow'); } else if (($('#problem1').data('currentState')) == 'on'){ $('#showButton1 > a').html('Solve'); $('#problem1').data('currentState', 'off'); $('#problem1').fadeOut('fast'); } return false; }); $('#problem2').data('currentState', 'off'); $('#showButton2').click(function() { if (($('#problem2').data('currentState')) == 'off'){ $('#showButton2 > a').html('Hide'); $('#problem2').data('currentState', 'on'); $('#problem2').fadeIn('slow'); } else if (($('#problem2').data('currentState')) == 'on'){ $('#showButton2 > a').html('Solve'); $('#problem2').data('currentState', 'off'); $('#problem2').fadeOut('fast'); } return false; }); }); </script> <style media="all" type="text/css"> .JS div.problem{display:none;} </style> <div class="block"> <div class="showButton" id="showButton1"> <a href="#" title="Show solution" class="btn">Solve</a> </div> <div class="problem" id="problem1"> <p>Answer 1</p> </div> </div> <div class="block"> <div class="showButton" id="showButton2"> <a href="#" title="Show solution" class="btn">Solve</a> </div> <div class="problem" id="problem2"> <p>Answer 2</p> </div> </div>

    Read the article

  • Phonegap / jquery mobile slide transition not workign properly on first call

    - by Alexander Casassovici
    I have an awkward visual glitch. I want nice transition when changing pages on the app. Unfortunately first time i change to another page, Instead of sliding current pagg out and new page in , current page is immediately replaces by the new page, then slides out... and when it's out of view it's the new page is shown... the second time around it works like a charm though !!! This is running on iphone with jquery mobile + phonegap I made a video to make the issue clear: http://www.youtube.com/watch?v=Ybvzh_wTnSE <body style="background-color: #000;"> <div id="container" style="display:none;"> <div id="side-menu" style="display:none;"> <div id="header_top"></div> <a href="#dives" onclick="showdives();"><div id="header_dives" class="selected"></div></a> <div id="header_spacer1"></div> <a href="#explore" onclick="showexplore();"><div id="header_explore"></div></a> <div id="header_spacer2"></div> <a href="#search" onclick="showsearch();"><div id="header_search"></div></a> <div id="header_spacer3"></div> <a href="#settings" onclick="showsettings();"><div id="header_settings"></div></a> <div id="header_bottom"></div> </div> <div id="slide_mask"> <!-- START of LOGIN page --> <div data-role="page" id="login"> <div id="home_frame"> <div id="home_logo"></div> <div id="home_fblogin" onclick="login()"></div> <div class="home_login"> <p>Email: <input type="text" name="user[email]" size="30"/></p> <p>Password: <input type="password" name="user[password]" size="30"/></p> <button onclick="show_page_home();">LOGIN</button> </div> </div> </div> <!-- END of LOGIN page --> <!-- START of LOGIN page --> <div data-role="page" id="dives" class="right_pane"> <p>My dives !</p> </div><!-- /content --> <div data-role="page" id="explore" class="hidden right_pane"> <p>My explore !</p> </div><!-- /content --> <div data-role="page" id="search" class="hidden right_pane"> <p>My search !</p> </div><!-- /content --> <div data-role="page" id="settings" class="hidden right_pane"> <p>My settings !</p> <button onclick="logout_db();">logout</button> </div><!-- /content --> <!-- END of LOGIN page --> </div> </div> <div id="log"></div> <div id="data"></div> </body> And the relevant CSS: body {margin: 0; font: 18px Helvetica; text-align: center; background-color: #000; background: url(../img/bg_big.png) repeat; -webkit-user-select: none; /* prevent copy paste for all elements */ } #container { width:320px; height:460px; overflow: hidden;} input{ -webkit-user-select: text; /* enable copy paste for elements with this class */} a {-webkit-user-select: none; /* prevent copy paste for all elements */} span {-webkit-user-select: none; /* prevent copy paste for all elements */} #side-menu {z-index: 1000 !important; position: fixed; height: 460px; width: 56.5px; background: url(../img/bg_big.png) no-repeat; display: inline-block; overflow: hidden; top: 0px; left: 0px; } #header_top {background: url(../img/header/header_top.png) no-repeat; background-size: 56.5px 48.96px; width: 56.5px; height: 48.96px; display: block;} #header_dives {background: url(../img/header/dives.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;} #header_dives.selected{background: url(../img/header/dives_selected.png) no-repeat;} #header_spacer1{background: url(../img/header/header_space1.png) no-repeat; background-size: 56.5px 13.9px; width: 56.5px; height: 13.9px; display: block;} #header_explore{background: url(../img/header/explore.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;} #header_explore.selected{background: url(../img/header/explore_selected.png) no-repeat;} #header_spacer2{background: url(../img/header/header_space2.png) no-repeat; background-size: 56.5px 15.33px; width: 56.5px; height: 15.33px; display: block;} #header_search{background: url(../img/header/search.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;} #header_search.selected{background: url(../img/header/search_selected.png) no-repeat;} #header_spacer3{background: url(../img/header/header_space3.png) no-repeat; background-size: 56.5px 17.73px; width: 56.5px; height: 17.73px; display: block;} #header_settings{background: url(../img/header/settings.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;} #header_settings.selected{background: url(../img/header/settings_selected.png) no-repeat;} #header_bottom{background: url(../img/header/header_bottom.png) no-repeat; background-size: 56.5px 160px; width: 56.5px; height: 160px; display: block;} .hidden {display: none;} .right_pane{width: 263.5px !important; background: url(../img/right_bg.png) no-repeat; background-size:263.5px 460px; width: 263.5px; height: 460px; left: 56.5px !important;} #slide_mask{ display: inline-block; overflow: hidden; padding-left: 56.5px; width: 263.5px; height: 460px; top: 0;} and the bit of JS: /////////////////////////////////// //MENU MECHANICS /////////////////////////////////// function showdives(){ $("#side-menu .selected").removeClass("selected"); $("#header_dives").addClass("selected"); } function showexplore(){ $("#side-menu .selected").removeClass("selected"); $("#header_explore").addClass("selected"); } function showsearch(){ $("#side-menu .selected").removeClass("selected"); $("#header_search").addClass("selected"); } function showsettings(){ $("#side-menu .selected").removeClass("selected"); $("#header_settings").addClass("selected"); } the onclick only add/remove the "selected" class to the menu items so... any hint ? been trying eveything for hours and still can't get it neat .. :(

    Read the article

  • difficulties in developing gantt chart using jquery plugins

    - by Lina
    Hi, I'm trying to develop a gantt like chart using jquery plugins and asp.net mvc2... on the y-axis i like to have names of people to whom tasks will be assigned... while on the x-axis i like to have the tasks... i haven't found good plugins for this...so any suggestions??? it is also important to have more than 1 task on a row, i.e. sam kan have more than 1 task on the same row... i'm thankful for your help Lina

    Read the article

  • How to sorting by Dates with DataTables jquery plugin?

    - by chobo2
    Hi I am using the datatables jquery plugin and want to sorty by dates. I know they got a plugin but I can't find where to actually download it from http://datatables.net/plug-ins/sorting I believe I need this file: dataTables.numericComma.js yet I can't find it anywhere and when I download datatables it does not seem to be in the zip file. I am also not sure if I need to make my own custom date sorter to pass into this plugin. I am trying to sort this format MM/DD/YYYY HH:MM TT(AM |PM) Thanks

    Read the article

  • jQuery: Get height of hidden element in jQuery 1.4.2

    - by mkoryak
    I need to get height of an element that is within a div that is hidden. Right now I show the div, get the height, and hide the parent div. This seems a bit silly. Is there a better way? I'm using jQuery 1.4.2: $select.show(); optionHeight = $firstOption.height(); //we can only get height if its visible $select.hide();

    Read the article

  • jQuery user intput to control option of one jquery function

    - by Tristan
    Hello, i'd like an input to control that : jQuery.ajax({ type: "get", dataType: "jsonp", url: "http://www.foo.com/something.php", data: {numberInput: "NUMER I WANT TO CONTROL" }, On the HTML side i've <input type="text id="jqueryControl" /> I want when a user enters a number ito the jqueryControl to insert it in the .ajax function and reload the data according to the new value entered. Any idea to do that please ? Thanks

    Read the article

  • How Do I Create Expand All and Collapse All Links Outside of the jQuery Treeview Plugin?

    - by Ben Griswold
    The jQuery Treeview Plugin adds Collapse All, Expand All and Toggle All links to the "treeviewcontrol" div when the control property is defined as follows: $("#black, #gray").treeview({ control: "#treecontrol", persist: "cookie", cookieId: "treeview-black" }); This works great, but I'd like the ability to expand and collapse the treeview from other page elements outside of the treeview itself. I've looked at the source, but I can't figure it out.

    Read the article

  • Is there way to extend jQuery to handle a custom enter key event?

    - by Ken
    I write the following code all the time to handle when the enter key pressed: $("#selectorid").keypress(function (e) { if (e.keyCode == 13) { var targetType = e.originalTarget ? e.originalTarget.type.toLowerCase() : e.srcElement.tagName.toLowerCase(); if (targetType != "textarea") { e.preventDefault(); e.stopPropagation(); // code to handler enter key pressed } } }); Is there a way to extend jQuery so that I could just write: $("#selectorid").enterKeyPress(fn);

    Read the article

< Previous Page | 56 57 58 59 60 61 62 63 64 65 66 67  | Next Page >