jQuery Forum

Opening a select menu by clicking on image
[0Replies]
- 23-Feb-2012 09:24 AM
- Forum: jQuery Mobile
What I'm looking to do is to utilize whatever native styling a particular mobile operating system uses for select menus/form elements but, have it opened by clicking on an image.

Any thoughts on how I might go about accomplishing this? Thanks in advance!

Detect dialog close event
[1Reply]
- 24-Jan-2012 11:13 AM
- Forum: jQuery Mobile
Is there an event that is being fired off when a dialog is closing? If so, what is it and how do you detect it? Thanks!

jQuery plugin framework
[2Replies]
- 05-Jan-2012 12:30 PM
- Forum: Using jQuery Plugins
Working on creating my own plugin and realized that I would very likely end up doing this again in the future. Unfortunately, I have an extremely short memory when writing code. I frequently have to re-read the code I've created the day prior so I can get back on track with what I was doing. As such, I'm a fervent commenter in my code.

So, I'm creating a jQuery plugin framework with comments for everything that's going on in the framework to prevent my brain from having to re-learn everything in a month or so when I do another one.

What I would like help with from the community is for the plugin-savvy folks to take a look at this code and help me fill in the blanks and make corrections to those places where I'm way off base. As you'll likely notice rather quickly, this is taken from the jQuery plugin tooltip construct found here: http://docs.jquery.com/Plugins/Authoring

Thanks in advance for the help!
2. (function( $ ){
4. var methods = {
5. init : function( options ) { //default method called from the plugin
7. var defaults = {
8. // place default settings for plugin here
9. }
11. var options = $.extend(defaults, options); // combines any passed-in variables with the default variables and overwrites matching defaults
13. return this.each(function(){ // ensures chainability of the plugin
15. var $this = $(this),
16. data = $this.data('PLUGINNAME'); // ????
18. // If the plugin hasn't been initialized yet
19. if ( ! data ) { // ???? not sure how this can't be initialized as we just did this
21. /*
22. Do more setup stuff here
23. */
25. }
26. });
27. },
29. destroy : function( ) { // called using $.PLUGINNAME('destroy')
31. return this.each(function(){ // ensures chainability
33. var $this = $(this),
34. data = $this.data('PLUGINNAME'); // ????
36. // Namespacing FTW
37. $(window).unbind('.PLUGINNAME'); // remove bound actions from window events like resize ????
38. data.PLUGINNAME.remove(); // remove the plugin element from the DOM ????
39. $this.removeData('PLUGINNAME'); // removes associated data from the object
41. })
43. },
46. update : function( content ) { // example method. called using $.PLUGINNAME('update')
48. return this.each(function() { // ensures chainability
50. //do your update stuff here
52. })
54. }
56. };
58. $.fn.PLUGINNAME = function( method ) {
60. if ( methods[method] ) { // if the called method exists in the methods array
61. return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 )); // apply the passed-in arguments to the method and return result
62. } else if ( typeof method === 'object' || ! method ) { // ????
63. return methods.init.apply( this, arguments ); // apply passed-in arguments to the init method and return result
64. } else {
65. $.error( 'Method ' + method + ' does not exist on jQuery.PLUGINNAME' ); // method passed in does not exist in methods array
66. }
68. };
70. })( jQuery );

Page bug with headers and footers
[1Reply]
- 21-Dec-2011 11:16 AM
- Forum: jQuery Mobile
Another developer and I are working on separate parts of a JQM/PhoneGap app for the iPad. In both the app and when testing locally in Chrome or other browsers we're seeing this bug:

When clicking on links that stay within the index.html page there are no problems. However, if from index.html you go to any other .html page (like productselector.html) and then to a subpage on index.html ( like index.html#gmap ) the "Home" button on those pages still takes you to the primary page but the header and footer are now broken. This is the code for the "Home" button within the #gmap page on index.html:
1. <a href="#page" data-role="button" data-icon="back" data-rel="home">Home</a>
with, obviously, the id of the primary page being id="page".
Any thoughts?

Disabling visible <a> buttons
[2Replies]
- 01-Dec-2011 10:46 AM
- Forum: jQuery Mobile
I'm creating a web form using jQuery Mobile. Before the user can submit the form, a selection must be made in a series of select drop downs.

When the page loads, all select boxes are disabled as is the search button. A getJSON call pulls in options for the first select box and it is then enabled. After the first selection is made, the second select box populates using another getJSON call and is enabled. Then the third and so on. Once all of the select boxes are chosen, the search button is enabled.

My issue is my search button. After I disable it, it looks disabled (grayed out) but, you can still click on and it activates the page transition to the searchResults page. What I would like is for it to do nothing until the last select box has been selected.

BTW: I am using jQuery 1.7 with jQuery Mobile.

The button:
1. <a href="#searchResults" id="searchButton" data-role="button" data-icon="search">Search</a>
During the page initialization I deactivate it:
1. $(document).ready(function() {
2. var searchButton = $('#searchButton');
3. getFieldOne();
5. function getFieldOne() {
6. disableSearchButton();
7. //code to get JSON data goes here
8. }
10. function disableSearchButton() {
11. searchButton.removeClass('ui-enabled');
12. searchButton.addClass('ui-disable');
13. searchButton.off('click', submitSearch);
14. }
15. function enableSearchButton() {
16. searchButton.removeClass('ui-disable');
17. searchButton.addClass('ui-enabled');
18. searchButton.on('click', submitSearch);
19. }
20. function submitSearch() {
21. //code to handle search
22. }
23. });
So, how do I prevent the <a> button's default linking action from functioning while the form is being filled out? Thank you!

Styling multiple tables
[0Replies]
- 19-Apr-2011 03:27 PM
- Forum: Using jQuery
I have multiple tables with this similar structure:
1. <table>
2. <tr>
3. <th>Transaction Date</th>
4. <th>Description</th>
5. <th>Points</th>
6. </tr>
7. <tr>
8. <td>04/11/2011</td>
9. <td>New account bonus</td>
10. <td>100</td>
11. </tr>
12. <tr>
13. <td>04/11/2011</td>
14. <td>New account bonus</td>
15. <td>100</td>
16. </tr>
17. <tr>
18. <td>04/11/2011</td>
19. <td>New account bonus</td>
20. <td>100</td>
21. </tr>
22. </table>
I want to surround the central part of the table (not the th cells) with a border and have every other line starting with the first one below the table headers to be gray. Here are the styles I created
1. .tabletop {
2. border-top:1px solid #818180;
3. }
4. .tablebottom {
5. border-bottom:1px solid #818180;
6. }
7. .tablemiddle {
8. border-right:1px solid #818180;
9. border-left:1px solid #818180;
10. }
11. .tablegray {
12. background-color:#dddddd;
13. }
And this is the start of my jquery code
1. $(document).ready(function() {
2. $("tr:has(td)").addClass("tablemiddle");
3. $("table tr:has(td):last").addClass("tablebottom");
4. $("table").each(function() {
5. $(this).children("tr:has(td):even").addClass("tablegray"); //this isn't working
6. });
7. });
I'm trying to get it so that the top row under the header is gray. The above code isn't working and if I try this:
1. $("tr:has(td):even").addClass("tablegray");
instead of the table.each it obviously grabs ALL of the rows on the page which means that sometimes the top row isn't gray.

Additionally, how do I select the first table row with td's in each table to apply tabletop?
And how to select the last row in each table? This doesn't work:
1. $("table tr:has(td):last").addClass("tablebottom");
Thanks in advance for any help!

Response title

Attachments

jQuery Forum

Activity Trend