Search Results

Search found 25118 results on 1005 pages for 'jquery ui widget'.

Page 66/1005 | < Previous Page | 62 63 64 65 66 67 68 69 70 71 72 73  | Next Page >

  • jQuery trigger custom event synchronously?

    - by Miguel Angelo
    I am using the jQuery trigger method to call an event... but it behaves inconsistently. Sometimes it call the event, sometimes it does not. <a href="#" onclick=" $(this).trigger('custom-event'); window.location.href = 'url'; return false; ">text</a> The custom-event has lots of listeners added to it. It is as if the trigger method is not synchronous, allowing the window.location.href be changed before executing the events. And when window.location.href is changed a navigation occurs, interrupting everything. How can I trigger events synchronously? Using jQuery 1.8.1. Thanks! EDIT I have found that the event, when called has a stack trace like this: jQuery.fx.tick (jquery-1.8.1.js:9021) tick (jquery-1.8.1.js:8499) jQuery.Callbacks.self.fireWith (jquery-1.8.1.js:1082) jQuery.Callbacks.fire (jquery-1.8.1.js:974) jQuery.speed.opt.complete (jquery-1.8.1.js:8991) $.customEvent (myfile.js:28) This proves that jQuery trigger method is asynchronous. Oohhh my... =\

    Read the article

  • 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

  • How to move child element from one parent to another using jQuery

    - by Kapslok
    I am using the jQuery DataTables plugin. I would like to move the search box (.dataTables_filter) and number of records to display dropdown (.dataTables_length) from their parent element (.dataTables_wrapper) to another div on my page without losing any registered javascript behavior. For instance the search box has a function attached to the 'keyup' event and I want to keep that intact. The DOM looks like this: <body> <div id="parent1"> <div class="dataTables_wrapper" id="table1_wrapper"> <div class="dataTables_length" id="table1_length"> <select size="1" name="table1_length"> <option value="10">10</option> <option value="25">25</option> <option value="50">50</option> <option value="100">100</option> </select> </div> <div class="dataTables_filter" id="table1_filter"> <input type="text" class="search"> </div> <table id="table1"> ... </table> </div> </div> <div id="parent2"> <ul> <li><a href="#">Link A</a></li> <li><a href="#">Link B</a></li> <li><a href="#">Link C</a></li> </ul> </div> </body> This is what I would like the DOM to look like after the move: <body> <div id="parent1"> <div class="dataTables_wrapper" id="table1_wrapper"> <table id="table1"> ... </table> </div> </div> <div id="parent2"> <div class="dataTables_filter" id="table1_filter"> <input type="text" class="search"> </div> <div class="dataTables_length" id="table1_length"> <select size="1" name="table1_length"> <option value="10">10</option> <option value="25">25</option> <option value="50">50</option> <option value="100">100</option> </select> </div> <ul> <li><a href="#">Link A</a></li> <li><a href="#">Link B</a></li> <li><a href="#">Link C</a></li> </ul> </div> </body> I've been looking at the .append(), .appendTo(), .prepend() and .prependTo() functions but haven't had any luck with these in practice. I've also looked at the .parent() and .parents() functions, but can't seem to code a workable solution. I have also considered changing the CSS so that the elements are absolutely positioned - but to be frank the page is setup with fluid elements all over, and I really want these elements to be floated in their new parents. Any help with this is much appreciated.

    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 Scrollable Dynamic

    - by Coron3r
    Hi, I am doing a site where I need to change dynamically the amount of items in one slide depending on the resolution. I'm using the Jquery Tools scrollable For better understanding, here is the basic markup <div class="scrollable"> <!-- root element for the items --> <div class="items"> <!-- 1-5 --> <div> <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" /> <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" /> <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" /> <img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" /> <img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" /> </div> <!-- 5-10 --> <div> <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" /> <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" /> <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" /> <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" /> <img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" /> </div> <!-- 10-15 --> <div> <img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" /> <img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" /> <img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" /> <img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" /> <img src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg" /> </div> </div> </div> Ok and now I would like to set, that if I have a resolution bellow 1440, I would show only e.g. 3 images <div class="scrollable"> <!-- root element for the items --> <div class="items"> <!-- 1-3 --> <div> <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" /> <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" /> <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" /> </div> <!-- 3-6 --> <div> <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" /> <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" /> <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" /> </div> ..etc </div> </div> I know that I should use the screen.width(); function but how to slice and parse it depending on the resolution? Thanks for your comments!

    Read the article

  • jQuery Cycle Plugin - Content not cycling

    - by fmz
    I am setting up a page with jQuery's Cycle plugin and have four divs set to fade. I have the code in place, the images set, but it doesn't cycle properly. Firefox says there is a problem with the following code: <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' }); }); </script> Here is the html: <div class="slideshow"> <div id="mainImg-1" class="slide"> <div class="quote"> <h2>Building Big Relationships with Small Business.</h2> <p>&ldquo;This is quote Number One.<br /> They are there when I need them the most.&rdquo;</p> <p><span class="author">Jane Doe &ndash; Charlotte Flower Shop</span></p> <div class="help"><a href="cb_services.html">Let Us Help You</a></div> </div> </div> <div id="mainImg-2" class="slide"> <div class="quote"> <h2>Building Big Relationships with Small Business.</h2> <p>&ldquo;This is quote Number Two.<br /> They are there when I need them the most.&rdquo;</p> <p><span class="author">Jane Doe &ndash; Charlotte Flower Shop</span></p> <div class="help"><a href="cb_services.html">Let Us Help You</a></div> </div> </div> <div id="mainImg-3" class="slide"> <div class="quote"> <h2>Building Big Relationships with Small Business.</h2> <p>&ldquo;This is quote Number three.<br /> They are there when I need them the most.&rdquo;</p> <p><span class="author">Jane Doe &ndash; Charlotte Flower Shop</span></p> <div class="help"><a href="cb_services.html">Let Us Help You</a></div> </div> </div> <div id="mainImg-4" class="slide"> <div class="quote"> <h2>Building Big Relationships with Small Business.</h2> <p>&ldquo;This is quote Number Fout.<br /> They are there when I need them the most.&rdquo;</p> <p><span class="author">Jane Doe &ndash; Charlotte Flower Shop</span></p> <div class="help"><a href="cb_services.html">Let Us Help You</a></div> </div> </div> Here is the CSS: .slideshow { width: 946px; height: 283px; border: 1px solid #c29c5d; margin: 8px; overflow: hidden; z-index: 1; } #mainImg-1 { width: 946px; height: 283px; background: url(../_images/main.jpg) no-repeat 9px 9px; } #mainImg-2 { width: 946px; height: 283px; background: url(../_images/main.jpg) no-repeat 9px 9px; } #mainImg-3 { width: 946px; height: 283px; background: url(../_images/main.jpg) no-repeat 9px 9px; } #mainImg-4 { width: 946px; height: 283px; background: url(../_images/main.jpg) no-repeat 9px 9px; } #mainImg-1 .quote, #mainImg-2 .quote, #mainImg-3 .quote, #mainImg-4 .quote { width: 608px; height: 168px; float: right; margin: 80px 11px 0 0; background: url(../_images/bg_quoteBox.png) repeat-x; } Before you go off and say, "hey, those images are all the same". You are right, the images are all the same right now, but the text should be rotating as well and there is a slight difference there. In addition, the fade should still show up. Anyway, you can see the dev page here: http://173.201.163.213/projectpath/first_trust/index.html I would appreciate some help to get this cycling through as it should. Thanks!

    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

  • 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

  • get the start position of an item using the jquery ui sortable plugin

    - by Rippo
    I am using the jQuery UI sortable plugin and I am trying to get 2 alerts I want the staring position of the element and the finished position of the element. $(function() { $("#filterlist ul").sortable({ opacity: 0.6, cursor: 'move', update: function(event, ui) { alert(ui.item.prevAll().length + 1); } }); }); I can get the position of the item after it has been dragged by using:- ui.item.prevAll().length + 1 What do I use to get the position it started from?

    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

  • Php and Jquery Validation: with Jquery Form Plugin

    - by Jacinto
    Hi, This is the first time I have attempted to make a form using jquery and php. I used the folks over at Mid Mo Design as an example but even with that tutorial am still having trouble getting it to do what I want. This is the code I have been using. As well as jquery 1.4.1 and jQuery Form Plugin 2.43. Any help would be greatly appreciated. css scrollContact { border-top: double 1px #0D0D0D; padding: 100px 50px 50px 50px; background: #020303; position: relative; overflow: hidden; width: 924px; text-align: justify; } .contactInfo { float:left; width: 214px; margin-right: 10px; margin-top: 5px; } contactForm { float: left; width: 700px; } contactForm span { float: left; margin:5px; width: 455px; } input, textarea { -moz-border-radius:5px 5px 5px 5px; border:1px solid #001932; color:#BBBBBB; font:1.1em Verdana,Geneva,sans-serif; background: #0A0A0A; } input:hover, textarea:hover { border:1px solid #0278f2; background: #242424; } contactForm span input { line-height:1.8em; width:430px; padding:11px 10px; margin: 0px 0px 10px 0px; } contactForm input { line-height:1.8em; width:200px; padding:11px 10px; margin: 5px; } contactForm textarea { height:190px; line-height:1.8em; width:430px; padding:10px; } .message { background:#eee; color:#000; display:none; padding:10px; height: 70px; position: absolute; bottom:0px; } Html Contact Navigate To: Work services about contact Get A Free Quote Thank you for your interest in contacting me. Please use the form to the right to contact me via email. I will respond to your inquiry as soon as possible. Please note all fields are required. What Next? Thank you for your interest in contacting me. Please use the form to the right to contact me via email. I will respond to your inquiry as soon as possible. Please note all fields are required. Your Message Php <?php $sendto = '[email protected]'; $subject = 'Contact from contact form'; $errormessage = 'Oops! There seems to have been a problem. May we suggest...'; $thanks = "Thanks for the email! We'll get back to you as soon as possible!"; $honeypot = "You filled in the honeypot! If you're human, try again!"; $emptyname = 'Entering your name?'; $emptyemail = 'Entering your email address?'; $emptytitle = 'Entering The Subject?'; $emptymessage = 'Entering a message?'; $alertname = 'Entering your name using only the standard alphabet?'; $alertemail = 'Entering your email in this format: [email protected]?'; $alerttitle = 'Entering the subject using only the standard alphabet?'; $alertmessage = "Making sure you aren't using any parenthesis or other escaping characters in the message? Most URLS are fine though!"; $alert = ''; $pass = 0; function clean_var($variable) { $variable = strip_tags(stripslashes(trim(rtrim($variable)))); return $variable; } if ( empty($_REQUEST['last']) ) { if ( empty($_REQUEST['contactName']) ) { $pass = 1; $alert .= "" . $emptyname . ""; } elseif ( ereg( "[][{}()*+?.\^$|]", $_REQUEST['contactName'] ) ) { $pass = 1; $alert .= "" . $alertname . ""; } if ( empty($_REQUEST['contactEmail']) ) { $pass = 1; $alert .= "" . $emptyemail . ""; } elseif ( !eregi("^[_a-z0-9-]+(.[_a-z0-9-]+)@[a-z0-9-]+(.[a-z0-9-]+)(.[a-z]{2,3})$", $_REQUEST['contactEmail']) ) { $pass = 1; $alert .= "" . $alertemail . ""; } if ( empty($_REQUEST['contactTitle']) ) { $pass = 1; $alert .= "" . $emptytitle . ""; } elseif ( ereg( "[][{}()*+?.\^$|]", $_REQUEST['contactTitle'] ) ) { $pass = 1; $alert .= "" . $alerttitle . ""; } if ( empty($_REQUEST['contactMessage']) ) { $pass = 1; $alert .= "" . $emptymessage . ""; } elseif ( ereg( "[][{}()*+?\^$|]", $_REQUEST['contactMessage'] ) ) { $pass = 1; $alert .= "" . $alertmessage . ""; } if ( $pass==1 ) { echo "$(\".message\").hide(\"slow\").show(\"slow\"); "; echo "" . $errormessage . ""; echo ""; echo $alert; echo ""; } elseif (isset($_REQUEST['message'])) { $message = "From: " . clean_var($_REQUEST['contactName']) . "\n"; $message .= "Email: " . clean_var($_REQUEST['contactEmail']) . "\n"; $message .= "Telephone: " . clean_var($_REQUEST['contactTitle']) . "\n"; $message .= "Message: \n" . clean_var($_REQUEST['contactMessage']); $header = 'From:'. clean_var($_REQUEST['contactEmail']); mail($sendto, $subject, $message, $header); echo "$(\".message\").hide(\"slow\").show(\"slow\").animate({opacity: 1.0}, 4000).hide(\"slow\"); $(':input').clearForm() "; echo $thanks; die(); } } else { echo "$(\".message\").hide(\"slow\").show(\"slow\"); "; echo $honeypot; } ?

    Read the article

  • jQuery user input 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: "NUMBER I WANT TO CONTROL" }, On the HTML side I've <input type="text" id="jqueryControl" /> I want when a user enters a number into 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 display a jquery dialog box before the entire page is loaded?

    - by obarshay
    On my site a number of operations can take a long time to complete. When I know a page will take a while to load, I would like to display a progress indicator while the page is loading. Ideally I would like to say something along the lines of: $("#dialog").show("progress.php"); and have that overlay on top of the page that is being loaded (disappearing after the operation is completed). Coding the progress bar and displaying progress is not an issue, the issue is getting a progress indicator to pop up WHILE the page is being loaded. I have been trying to use JQuery's dialogs for this but they only appear after the page is already loaded. This has to be a common problem but I am not familiar enough with JavaScript to know the best way to do this. Here's simple example to illustrate the problem. The code below fails to display the dialog box before the 20 second pause is up. I have tried in Chrome and Firefox. In fact I don't even see the "Please Wait..." text. Here's the code I am using: <html> <head> <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.dialog.js"></script> </head> <body> <div id="please-wait">My Dialog</div> <script type="text/javascript"> $("#please-wait").dialog(); </script> <?php flush(); echo "Waiting..."; sleep(20); ?> </body> </html>

    Read the article

< Previous Page | 62 63 64 65 66 67 68 69 70 71 72 73  | Next Page >