jQuery Forum

Hi,
I've created a dynamic list (populated from web service result in JSON format) and whenever user will click on list-item, dynamically another page will be loaded like the example mentioned here: http://jquerymobile.com/demos/1.0/docs/pages/page-dynamic.html 
However, when user comes back to main list and navigates to new dynamic page with new sub-item data, the styling gets lost. I don't see sub-items with proper styling. I'm tried executing listview refresh() but doesn't work.
Please help     

Hi,
I'm building a chat application like Gmail/Fb chat. I'm able to create a chat window and currently showing it as a dialog. I want that window to remain in browser even if user navigates to other page. How do I do it?
Thanks

Hi,
I want to have multiple buttons in a list item, say 3-4 count bubbles. How can I do it? I tried, div, span, p but doesn't work really well.
Please help

Hi,
I created a simple site to test on WP7 device (HTC Mozart). At first it wasn't showing it properly (very low size text). I searched on forum and its rendering fine now (by setting viewport size).
However, effects (like while changing pages, loading pages, page transitions) are not working. Any solution?
Thanks.

Hi,
I was using Alpha 2 for my jQuery Mobile app. The UI was perfect. When I upgraded to Alpha 4, some icons are missing. Please refer attached image file for reference. Any idea, why this is happening and any solution for this?

Hi,
I'm using following code to detect location and update accordingly. If I put this code in separate js it works perfectly, however when I put this inside html file (which improved the performance of site drastically), it navigates to index.html rather than executing the call back function show_map. Please help.

1.  $('#btnLocationUpdate').live('click', function (e) {
                       alert('updating location'); // this works perfect
                       if (Modernizr.geolocation) { // from here, it navigates
                           navigator.geolocation.getCurrentPosition(show_map);
                       }
                       else {
                           alert('Location not supported');
                       }
                   });
                   function show_map(position) {
                       var lat = position.coords.latitude;
                       var lon = position.coords.longitude;
                       var locationUpdateUrl = 'locate updated to server';
                       alert(locationUpdateUrl);
                       $.ajax({ type: 'GET', contentType: 'application/json', dataType: 'json', url: locationUpdateUrl, success: onUpdateSuccess });
                   }
                   function onUpdateSuccess(result) {
                       if (result.code == 200) {
                           alert('Located now');
                       }
                   }

Hi,
I'm using data-theme="e". Previously, using this theme I could see loading UI (normal rectangle with loading screen) with same theme i.e. Yellow color. However, now I'm getting black rectangle without the animation. I don't understand what I've made wrong in my code. Please help.

Hi,
I was wondering about what is a good approach. Whether we should put jquery mobile/javascript code inside corresponding html files and call the script on ready() OR put it inside different js files and call these functions once html is loaded?
Please help,

Hi,

I've jquery mobile mobile application with 4 forms. In it, I've google map on first and last form. However, when I open my web site, it doesn't show the map. But, if I navigate from one page to another and come back to first page, bingo - it's there.

How can I make sure that its there as soon as I launch my site?

Thanks     

Hi,

I'm developing one jQuery Mobile web site. In this site, I've kept html files and js files separate. So, whenever user clicks on a link corresponding html page is loaded and js is executed. However, I've noticed that, sometimes, function executes before DOM is loaded and thus I can't get desired and predictable output.
Any solution for this?

Thanks.

Hi,

I'm doing lot of ajax calls and DOM processing. Meanwhile it happens, I want to show loading screen (just like the one in Jquery Mobile). Any idea, how I can do it melodramatically.

Thanks.

Hi,
How can I remove the arrow in a list. I don't need it as there is no action associated with it.
Thanks

Hi,
Due to immediate closing of dialog box (before completing code execution), I implemented following lines of code. Now, the dialog box waits till the web service call gets completed.

1. event.preventDefault();
   event.stopPropagation();

However, now I need to forcefully close the dialog. Any idea how to do it?

Hi,
I've a list and when I use it statically, it works perfect and shows arrow on right, takes perfect CSS and looks good.
But, when I try to modify it dynamically, it doesn't look good. Why is that so?
I'm using following technique:

1. <ul data-role="listview" data-theme="e" data-position="fixed" id="content_list"></ul>
   
   
   

1. for ($i = 0; $i < (result.data.item.length); $i++) {
                       var text2 = '<li>';
                       if (result.data.item[$i].count > 0) {
                           text2 = text2 + '<img alt="punten" src="icons/brightness32.png"/> ';
                       }
                       else {
                           text2 = text2 + '<img alt="punten" src="icons/brightness16.png"/> ';
                       }
                       text2 = text2 + result.data.item[$i].title + '</a></br> ' + result.data.item[$i].count + ' Punten</li>';
                       $('div').find('#content_list').append(text2);                   
                   }

What's wrong in this?

Hi,
I'm trying to dynamically create a count bubble list. And using following code:

1. var text = '<li style="padding:10px" class="ui-btn-up-e"><a style="text-decoration: none; color: #000000;" href="' +
                           result.data.item[$i].url + '">' + result.data.item[$i].title + '</a><span class="ui-li-count">' +
                               result.data.item[$i].reward + '</span></li>';

However, rather than showing points in count bubble, they overlap each other at the end of the list. Any workaround / solution for this?

Hi,
I've few pages and wanted to show login page as a dialog if user accesses any secure page. Previously, I used to check with jStorage plugin and change the index page with Login page. Now, I want it as a dialog.
Any ideas?
Thanks.
Mayur Tendulkar

Hi,
Using fixed positioning, I created a tab-bar (which is actually a navigation bar fixed on top). This tab bar is linked to 3 different pages. When I launch the site and click any one of the tab, respective page is launched. However, from next page onwards, the tab-bar looks fine, but respective page doesn't get displayed.
Any solution?
Thanks.

Hi,
I'm building a login mechanism. The start page of my site is index.html. If user is not authenticated before, he goes to login.html and if he's authenticated before he goes to index.html. However, whenever I'm redirecting from one page to another (window.location or even $.mobile.changePage) it doesn't maintain the style/UI as if I load index.html directly. Else, i.e. when I go to another page from index.html using <a> it works.
Please help.

Hi,
How I can set the position of a slider control using code? When I use code, it sets the text in slider's label, but doesn't position the thumb of a slider to particular location.
Please help.

Hi,
I'm trying to show markers on a map. These markers will show tweet locations using tweeter APIs. I can show these markers and these markers are dynamically added whenever the bounds of a map changes.
However, when I click on the marker; sometimes I get the correct infowindow and sometimes nothing works.
I've used following code to achieve this

1. marker = new google.maps.Marker({
         position: new google.maps.LatLng(latitude, longitude),
         map: map,
         icon: 'http://www.sunloverholidays.com.au/libimages/googleMapMarkerSmall.png'
         });
   markersArray.push(marker);
   google.maps.event.addListener(marker, 'click', function () {
         var contentString = items.text;
         var infowindow = new google.maps.InfoWindow({
         content: contentString
         });
         infowindow.open(map, marker);
   });

Please help.
Thanks,
Mayur Tendulkar