jQuery Forum

See the examples here:
http://demos.jquerymobile.com/1.4.5/listview-autocomplete/
http://demos.jquerymobile.com/1.4.5/listview-autocomplete-remote/

There is the search box, then there is a "View Source" button. When suggestions are displayed, they are inserted before the "View Source" button and thus, the page grows in length.

I would like the suggestions to float on top of the rest of the page.

I *think* I could play with zindex to make this happen but am not sure - my CSS is not the best.

Anybody care to share some ideas? Or even why I might *not* want to do something like floating the suggestions? Would some devices handle that poorly? I would have thought it would be performance enhancing.

I appreciate help/direction/pointers...

Thanks

I have an 4 input tags and it displays each on its own line, full width. I expect an short input - five or six characters maximum. I can set the maximum input, but visibly, the box is still drawn full width. Other than putting each input tag inside the column of a table, how else can I force the input box to appear short (50px for example).

I did try CSS of
input.Num4      { width: 50px; text-align: right; }

It limited the input, but the box that was drawn was full length.

All help... greatly appreciated :)

Something that has troubled me for some time - I solved it just now and thought I would share...

Using listview autocomplete

http://demos.jquerymobile.com/1.4.5/listview-autocomplete/

I have a form for entering a business name and address. When the operator (user) enters a business name, I want it to list similar names already on file.  Purpose: Give the operator the chance to either edit an existing record, or give them an idea the record already exists, or allow them to add a new record that is similar to an existing record.

What worked was incomplete solution... Enter a business name and existing similar named businesses were suggested as list items. Operator could select one and the form correctly populated.

Problem 1: After the operator selected an existing business/list item, and the form was populated, the suggested list items stayed visible.

I tried various solutions, like dynamically hiding the list items after form was populated etc but each solution came with some ugliness.

Problem 2: I could only edit/select one address. Attempting to repeat the process on a second record meant I was offered no suggested list items.


After some head scratching I found reference at the bottom of this page: http://demos.jquerymobile.com/1.4.5/filterable/

The filterable widget runs the filter a single time during startup to make sure the list of children reflects the value entered in the search input. You can avoid this step by specifying the data-enhanced="true" attribute. When set to true, the filterable will assume that you have correctly applied the class ui-screen-hidden to those children that should be initially hidden.

The solution that worked for me:
Adding data-enhanced="true" did nothing for me so perhaps I mis-read it as a potential solution.  However... after operator selects an item from the list view, I add "ui-screen-hidden" to all items and they hide. If I enter a new business name in the search box, it correctly offers me suggestions.

Does this make sense? I hope it helps someone going forward...

I code on a WAMP server and latest jQuery and jQuery Mobile app works fine when tested via latest Firefox, jquery, jquery mobile and with Apache/MySQL Zend serving content.

I thought I had a bright idea, it does not work and hoped someone might edukate me as to why it does not work like I expected.

My "bright idea": Instead of my jquery mobile app being served from my web server, I called it directly from the filesystem. Afterall, I expect to bundle it and stick it into an app store, and have it talk across the internet to my server. Hence why I separate the two for some testing.

My jQuery Mobile app which works just fine when called from the server, fails when called from the filesystem.  In firefox, I get "NS_ERROR_DOM_BAD_URI: Access to restricted URI denied" which I believe is a security limitation enforcing same origin policy.

So...

If I am to wrap my code into an app (ie PhoneGap) I should expect the same security limitation from occuring, or no?

Has anyone walked this narrow path, and if so, how was it safely/cleanly resolved for you? How does your packaged jquery mobile app log on to a remote server using ajax for example?

All help appreciated...

I have a client that has a 'switch' - when on it run's various routines every 30 seconds - when off, it avoids running the routines. 

I have a jquery mobile ui that permits the operator to switch the status on/off in the client browser.

When the switch is on, there are additional values that are stored (a session name, the last record id that the service client previously processed).

I am storing the state and additional values via using the switch as a jquery selector and $.data() but I am thinking in hindsight, perhaps its better I just have a global object as my single point of reference. From a performance point of view, it takes the heat of jquery having to set/get the data.

I can understand that $.Data() can be useful for some situations (remove something from the DOM and its related events and associated data gets kicked with it all at once). But in my example above, I suspect that a global object variable would probably be 'more correct'.

Anyway care to comment on my understanding/method of syncing?

thanks

I have two offline apps - let's call them A and B. Both using same/latest version of jquery and jquerymobile

When A log's on, jquery does an ajax call, if credentials are good, the page changes to the main menu.
When B log's on, jquery does an ajax call, if credentials are good, the page does NOT go to the main menu.

Both have <a href='mainmenu' id='login'> HTML tags.
Both have $("#login").click( LoginFunction )
Both return true inside the success call of ajax.
Both return false inside the error call of ajax.
Both have return outside the call to ajax.

My understanding is in jqmobile, a return of true will ensure the <a href> link is followed. Anything other than a true return means the link is not followed.

Any suggestions/ideas on what I am doing in one, but not in the other?

For reference:
jquery-2.1.1.min.js
jquery.mobile-1.4.5.min.js

Problem exists in bigger project, I pulled code into a test page and tried to fix. I failed. I hope someone can direct me forward.

Problem: I dynamically insert buttons into my page. Afterwards, I want to apply .data() values to each of the buttons - The buttons exist in the "generated source code" but any reference to the data key/value are missing.

Interestingly, my js can reference the key/value pair as if it exist in the page though it is missing in the generated source code (using firefox 33.1 on Windows 7 with developer plugin).

My test HTML:
<form><div id='SidePage'>&nbsp;</div></form>

My test js

1. function one()
   {
       var LANG="EN";
       var limit=50;
       var data=new Array();
       for( var counter=0; counter<limit; ++counter )
       {
           data.push({ "id_Content": counter, "EN": "Blurb"+counter });
       }
      
       var keys=GetObjKeys( data );
       var limit=keys.length;
       var id_Content=0;
       var label="";
       var buttonList=new Array();
       var id="";
   
       for( var counter=0; counter<limit; ++counter )
       {
           key=keys[counter];
           record=data[key];
           if( record[LANG] )
           {
               label=record[LANG];
               id_Content=record.id_Content;
               id="prodCont"+id_Content;
               buttonList.push("\n<a href='#' id='"+id+"' data-value='"+id_Content+"' data-role='button' class='crap ui-btn ui-btn-inline product-content'>"+label+"("+id_Content+")</a>");
           }
       }
       $("#SidePage").prepend( buttonList.join("\n") )+"</span>";
       $(".crap").data("one","two");
      
       var abc=$(".crap").eq(1).data("one");
       console.log( "abc="+abc );
   
       return true;
   }
   
   ///////////////////////////////////////////////////////////////////////////////////////////
   
   $(document).ready(
       function ()
       {
           one();
       });

The "generated source code" produces the following (note there is no reference to "data-one='two'" anywhere. My question is WHY?!

<form>
        <div id="SidePage">
<a href="#" id="prodCont0" data-value="0" data-role="button" class="crap ui-btn ui-btn-inline product-content">Blurb0(0)</a>

<a href="#" id="prodCont1" data-value="1" data-role="button" class="crap ui-btn ui-btn-inline product-content">Blurb1(1)</a>

<a href="#" id="prodCont2" data-value="2" data-role="button" class="crap ui-btn ui-btn-inline product-content">Blurb2(2)</a>

<a href="#" id="prodCont3" data-value="3" data-role="button" class="crap ui-btn ui-btn-inline product-content">Blurb3(3)</a>

<a href="#" id="prodCont4" data-value="4" data-role="button" class="crap ui-btn ui-btn-inline product-content">Blurb4(4)</a>
                &nbsp;
        </div>
    </form>

I have six <a> tags, each with class "myClass"

1. console.log( $(".MyClass").length );

writes 6 to the log file like I expected, but

1. $(".MyClass").each( function()
2. {
3.       console.log("test");
4. });

Only writes one "test" to the console log - why not six times? One for each .MyClass being found...

Can someone advise ?

Much appreciated!

What is the official method to read the value of a checked radio/checkbox?  Is there something I am not reading, because I can find out how to create but not read (or set) these input tags?

For example: http://demos.jquerymobile.com/1.4.4/checkboxradio-checkbox/

It has proven frustrating bug tracing my code only to find why I was not saving my 'ticked' box values.  In the end, I discovered a class " ui-btn-active" is set when the operator 'ticks' a box and I must use this to get the corresponding value.

Other than the Demos and the API (which shows how to dynamically create a checkbox) I cannot find anything that describes how to read the selected values.  Is there some documentation I should, but am not reading?

All help appreciated...

I have created buttons before, but not using the same methods - this one is causing me some grief. Basically, I am dynamically adding a button based on a select from an autocomplete. I was not getting what I wanted so I removed autocomplete out of the equation and worked on a simple pretense of creating a single button as described in the API example page http://api.jqueryui.com/button/#entry-examples guide - but I get different results than those described there.

My code:

1.     $("#ProductMain").after("<button class='Top Button ProductData Multiple' id='aaa' type='button'>button label<button>");
2.     $("button").button();

Using Firefox 32 the above code gives me two jQueryUI buttons - both are same height/width and colour, the first one has text "button label". The second one is blank. HTML generated code:

1. <button role="button" class="Top Button ProductData Multiple ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="aaa" type="button">
2.       <span class="ui-button-text"> button label </span>
3. </button>
4. <button role="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
5.       <span class="ui-button-text"> </span>
6. </button>

Info on what I have done to help myself:
I have tested to see if my function is being called twice by inserting 
an "alert(1);" - and the alert displays only once.

I can confirm that I have only one "#ProductMain".
I changed the last line of my code to $("#aaa").button() and it still 
creates two buttons, except the first one has the jqueryui css layout, 
and the second one is the gray ugly html standard button (similar height, 
no text label).

Any ideas? (Thanks for reading the post)

( jQuery v2.1.1 and jQuery UI - v1.11.0)

Folks,
I have used the example listed on the api page:
http://api.jquery.com/val/

// Get the value from a set of radio buttons
$( "input:radio[name=bar]:checked" ).val();

but I don't get a value (I get nothing, not "undefined", not 0, nothing).

My html is as follows:

Yes<input type="radio" name="ProductExtraActive" id="ProductExtraActiveY" value="Y" checked>
No<input type="radio" name="ProductExtraActive" id="ProductExtraActiveN" value="N">

Some of my attempts that have returned empty:
$( "input:checked" ).val();

                $( "input:radio" ).each(
                        function()
                        {
                            var xyz=$(this).val();
                            alert(xyz);
                        });

                var xyz=$( "input[type=radio]:checked" ).val();
                alert(xyz);

I have tried referencing the name, the class, tried using "each" to trap attr("checked") and found a length of 1, but the value was empty.

Cans someone put me out of my misery?

Thanks!

Sorry for the intrusion but... I'm in Germany, my internet connection is fine and my quad core, 8Gb of RAM is at best under a light load. 

Folks,

Folks,

I hope this question does not rub folk up the wrong way however I have been developing an application that has both desktop and tablet audience - until now I have developed using jQuery and jQueryUI. The tablet dependancy has until now utilised Dialog and Buttons and for the most part, delivered what I want.

Folks,

Hi all,

Hi All,

Folks,
I am using .data() to store some data. It fails during my intended action. My syntax is, I believe correct because the same command/syntax works fine when it is placed elsewhere in the code. Thus, in the example below I would expect the alert to give me "123" but instead, it gives me "undefined".  If I place the store request else where (inside the GetDefaults() function but external to the $.ajax request, it works. If I place it before GetDefaults() it also works. But when executed as part of a ajax success, it fails.  Note, my recall.php does return successful (I have tested by placing another alert box in there just to be safe).

So - what gives? What am I not seeing? What am I doing wrong? Or have I discovered a bug?

All help greatly appreciated!
Thanks



function GetDefaults()
{     $.ajax({
        url:    'recall.php',
        dataType: "json",    cache:    false,
        success: function(data)
            {   
                $("body").data("n","123");
            },
    });   
    return true;
}


    $(document).ready(
        function(){
            GetDefaults();
           
            var x=$("body").data("n");
            alert(x);
    });