how do we find all ul [data-role=listview] li a items?
I'm trying to find all the rel="external" links that are only stored under <ul data-role="listview">...</ul>. How do we go about writing that? This is what I have so far, but don't know how to implement the "listview" part into it.... if ($('ul li a').attr("rel","external").length) { $('ul li a').attr("rel","external").append('goes out to full site'); } Thanks! *Break through the ice and never look back*
Jquery Mobile 1.1.1 + phonegap 2.0, Android 4.0.3 dynamic html page doesn't scroll
Hello, Jquery mobile 1.1.1 using with phonegap 2.0 on Android 4.0.3, adding dynamic html in data-role="content" div, page does not scroll. It scrolls to the static page height. I am using data-position="fixed" on header and footer. This issue i am facing only on Android ICS 4.0.x. On other versions its working perfectly fine. If i remove the data-position="fixed" than it scrolls properly. Any ideas?
Programmatically inserting/updating pages and style
I am programmatically inserting a new page, and calling .trigger("create"), then a call to $.mobile.changePage("#myId"). This is working fine. But when I replace an existing page with new content, and try to refresh it (call to .trigger("create") and changePage), I just get a blank page. The content is there, but hidden, and new style is not properly applied. Any idea why this is happening?
Photoswipe vs. android
Hi guys Ive recently implemented the photoswipe gallery to a webapp, and it works perfectly on iPhones, but not on android phones.. When I slide from right to left, the next image in line, flickers when it is shown. This doesn't happen when I slide from right to left. On top of that, once i've slided, like, 15-25 times, the app crashes, and i'm sent to the phones desktop. Is there anyone out there, that have been in the same situation, and have maybe found a solution to the android incompatability?
Difference changePage work: blink and not blink
Next problem: $('#categories').bind('swiperight', function() { $.mobile.changePage('#main', {transition: 'slide', reverse: true}); }); This code work perfect, and pages replaced correctly and beauty. But if I want to replace page by click button - I see artefacts: show parts of new page, blinking and after navigate to page. For example: <a href="#main" data-transition="slide" data-direction="reverse" class="ui-back">Main</a> When I`m trying fire `swiperight` event from code - see that problem
Newbie and facing problem with listview
Hi Everyone, I'm a newbie to jquerymobile and i'm building a mobile website in jquery mobile. Following is the code i'm facing problem with <ul data-role="listview" data-inset="true"> <li><img src="jquery-mobile/images/thumb.png" class="ui-li-thumb"><a href="#news"><h3 class="ui-li-heading">News</h3></a></li> <li><img src="jquery-mobile/images/thumb.png" class="ui-li-thumb"><a href="#images"><h3 class="ui-li-heading">Images</h3></a></li> <li><img src="jquery-mobile/images/thumb.png"
How to open one simpledialog2 from another?
I am using the simpledialog2 plugin and trying to call one dialog from another. Very simple. I have a first dialog that has 5 buttons on it. When the user presses one of these buttons, I want a second dialog to pop up where they can enter some text. Ideally, I'd like the first dialog to close before the second opens, but the important thing is that when the user hits a SEND button on the second dialog, both dialogs must exit. I have not been able to accomplish this. I can get the second dialog to
I have a problem with the css styles jquerymobile refesh
hello I have a problem with the css styles jquerymobile This is the function to imprimer results after clicking a button: printResult function (olist) { innerHtmlText var = getHtml (olist); alert (innerHtmlText); IDIV var = $ (result). append (innerHtmlText); alert ("before refresca1" + IDIV); $ ('# result ul li'). listview ("refresh"); alert ("after refresca3"); } Here the results are printed in a list in this layer <div id="result">
Cached partial page - Data is invalid!
I have a simple mobile app built to view/edit/close orders, so the data displayed to the user must be freshly received from database on every page/partial_page request. The problem is that after a partial page is received the first time (from the server), it is always cached from that point forward unless I clear cache in my browser (testing with IE9). This is my actionlink to call the page in question. <li>@Html.ActionLink("Open Orders (" & ViewBag.MyOpenOrderCount.ToString & ")", "OpenOrders",
native version of splitview-style jquerymobile?
The jQuery mobile website does a magnificent job of doing a splitview style rendering: two columns on big screens, one column (hide the nav) on a small screen. Are there any instructions on how to replicated this sort of approach? You'd think that if the JQM site is doing it, it should be both doable and hopefully readily-replicable, but I don't see how The "splitview" plugin is a lovely (if under-documented) approach, but it completely fails in IE: http://asyraf9.github.com/jquery-mobile/ The primary
refresh radiobutton
I have radio buttons in my jquery mobile page like this: <div data-role="page" id="mypage"> <div data-role="content" id="mycontent"> <div data-role="controlgroup" id="set"> <label><input type="radio" name="staffapproach" data-mini="true" value="great"/>Great</label> <label><input type="radio" name="staffapproach" data-mini="true" value="good"/>Good</label> <label><input type="radio" name="staffapproach" data-mini="true" value="needs improvement"/>Improvement</label>
Slider not updating dynamically
Hi all I have the following script that is supposed to do a calculation dynamically when the slider changes value. It doesn't work. If I manually changes the value in the textbox associated with the slider, the calculation is made and the result presented as I want it. I am not a programmer, and the code below is most likely a mess, but it (almost) works. I need the page shown on ipad only at an event. I hope to hear from someone in here. Thanks in advance. Application can be seen here: http://superfly.dk/e4d/app.html
Refresh navigation bar.
Hi, I have to add and remove items dynamically from navigation bar. I searched about this. Someone asks to call $("ul").navbar(). But it works only once. any ideas?
use of pageInit ?
i have code using jquery, i try to integrate for mobil plateform using jqueryMobile. Before to refresh some elements, i use a function called by <body onload="refresh_content();"> I seen, i can't still use onload, but pageinit, i tried to use it.... : At the first load of the page, it's ok (the function is called), but when i click on a button with http-link, the function isn't called again. where i must put code with pageinit, for the javascript function be called at any load of the page? $( document
$.mobile.changePage without ajax
Hi for navigating from one page to another i used $.mobile.changePage('test.html');. This works fine in android,symbian and blackberry6+.But I also want my application to run on blackberry5. Blackberry5 does not support ajax and therefore $.mobile.changePage('test.html'); not work for it. For this reason I use window.open("test.html"); and window.location.href = "test.html"; Here it works perfectly in all platform including blackberry4.6+ also. But now problem is I have header in test.html as: <div
html5 data attribute issue with long number
Hi I’ve found an issue with the data attribute. If we put long number as value of data attribute ( data-longnumber = 111111111111111222222222222222222222233333333333333333333333333333333333333333333333333331111111111111111122222222222222222222222222222222222222222222222222222222211111111111 ) and when fetched using jquery $(‘div’).data(‘longnumber’) it returns an exponential value like ( 1.1111111111111112e+209) What will be the issue? How can I get the real value? Is there any solution for this?
jquery mobile transitions not working properly in mozilla firefox 14.0.1 and chrome for the changePage
I am using the $.mobile.changePage($('#page3'), 'slide') in my html code but i cant get the effect of slide during the slide transition.
select menu with images
Hi everybody, Im new in this forum and also in jquerymobile world, Im developing an ios app, and i want to use a select menu in the header of the page, i have the select menu with only text, but i want to add an small icon or image next to the text, i try all the examples in the network (github for example) and it didnt work, and im really desperate because the due date of the project is tomorrow night, if somebody could help me i will appreciate it thanks in advance conchitabh and sorry for my bad
Dialog launched from footer breaks layout
Hi, I have a button in my page's footer that opens a popup dialog. The problem is, whenever I close the dialog (click X on top left), the page layout breaks and elements have the wrong vertical position (they are moved up so top of page is inaccessible). For this bug to happen, the page must be tall enough to show a scrollbar. This doesn't happen in desktop Firefox but happens in Android's browser (tested on my phone, and in Android Emulator 1.6-2.2). EDIT: Just noticed it happens in Google Chrome,
Are there plans of having a spinning wheel style datepicker?
Like the iPhone/Android? Or is the widget at http://cubiq.org/dropbox/sw/ the only choice? Sencha touch has a nice implementation of the datepicker and I am wondering if this is on the roadmap.
The 'Back' feature is not working under chrome extension
Hey, I've developed with this little tool to help users solving 'words games'. In iPhone/Andriod it's working great but as I've put it as chrome extension everything is working fine except the 'back' button that do nothing. The tool is using jQuery 1.5 and JQM 1.3a Thanks, Ido
Using IDs in jQuery Mobile Pages
Is it bad practice to use the same ID in separate jQuery Mobile pages, since they will appear on the same page via AJAX? For example, if I have two separate HTML files linked together in a jQuery Mobile site, both containing an element with the same ID (for example <div id="example">), could they potentially cause conflict when jQuery Mobile appends the content from the second page into the original document? Or is this just my desktop web experience saying we should never have two ID tags on the
How to dynamically add data-role="button"
I'm reading in some data from a web service to jquery mobile upon navigating to a new page (data-role="page") and I want to dynamically populate some jquery mobile link buttons, however it appears that the styles are not being applied through the data-role="button". My code is along the lines of var title = DataFromWebService; var newsButton = "<a href=\"#\" data-role=\"button\">"; newsButton+= title + "</a>"; $(".newslist").append(newsButton);The button renders as a plain a
Binding Click Events to Dynamically Created ListView?
I have a ListView that requires a click event. When I first initialize the list, everything works great. As I rebuild the list (as items are added, edited, and removed), the click event stops working. I have this HTML: <ul data-role="listview" data-theme="b" id="data-list" data-filter="true"></ul>I have this code in an init function that gets called on page load: // initialize listview if (window.localStorage.length - 1) { var contacts_list = [], i, key;
Problem with page navigation and multipage
Hi, I have the main HTML page "A" with only one data-role="page". I then load a new HTML page, which contains two data-role="page". JQM automatically shows the first data-role="page" and i am unable to link to the second one. Using firbug, i noticed that the second data-role="page" does not load in DOM. I tried using these urls: &ui-page=second_page /pagename&ui-page=second_page I also tried using data-url attribute for the data-role="page", using the same string as the ID. How can i solve this problem?
Reload jquery mobile styles after ajax call
I an currently refreshing the data in a div panel by making ajax calls, but the the content is comming as plain HTML and jquery mobile is not able to apply its styles as it do when full page reload is done. I have a table in the web page and when i reload the page, buttons comes fully styled. But when i make ajax calls the buttuns are not styled at all. Code for buttons: <div style="text-align: center;" data-type="horizontal" data-role="controlgroup"> <a href="#" data-role="button"> < </a>
Hide / protect source code
Hello, I'm developing a web application (a user interface). Is it possible to protect my code in any way? Thank you for your answers.
Remove Page from DOM
Hi all, I'm developing an app using jQuery Mobile that will use many pages, many of which will have images. The pages are in separate files, so I understand they will be injected via AJAX into the DOM as needed. I'm wondering if I need to worry about removing the pages from the DOM when the user is done with them, otherwise the DOM will contain lots of large hidden pages, that presumably could be eating up memory on phones. Is there a way to remove pages from the DOM and have them to be loaded
tap/click event firing multiple times for elements of listview
I currently have a simple, 2-page application. The first page is a splash page of sort with a single button that leads to a list view. When the application first loads, the listview is dynamically filled with content. A binding is then created on the "li" elements to capture any clicks/taps. This handler will ultimately be responsible for loading the next page, however, I'm having problems right now. Pretty sporadically, when list elements are clicked, the event will fire twice. Sometimes just once,
Indicating disabled items on a list view
Is there a simple way to indicate in jquery that a specific item in a list view should be disabled. By "disabled" I mean that the item must show up as greyed-out and it must not show the pointer cursor; instead it should show the default cursor for an item that cannot be clicked. Lastly, the disabled item should not have an action associated with it when a click occurs, so the anchor tag enclosed in the <li> element must not be followed when a click occurs. I am needing to disable and enable items
How to go back previous page programmatically?
Hello, how can i go back to the previous page programmatically? I used history.go(-1) but it is not good because the previous page will not be reloaded. Thanks
Ajax structure in JQM: impossible to monitize site w/ads?
Hi all, I'm trying to incorporate ad networks into my JQM site have not been able to find anything resembling an elegant solution. Most ad networks (such as Google Adsense, GreyStripe, and Admob) simply require that you copy/paste a few lines of JavaScript where you want an ad to show. This works on the first JQM page but fails on subsequent pages due to the way JQM loads pages via Ajax. I've been browsing the forums and found others with the same issues. As more people start evaluating JQM, I
Implement CSS
This might be a bit of a noob question, but I'm not that familiair with Javascript, so I'm not quite sure how this code works and executes. I'm currently working on building a webapp using HTML5. I've followed some tutorials and so far I've come up with the following for the layout and infrastructure, only the first link works, and the top(back) button: http://www.haragara.com/html5test/ Now during my research I've come across Jquery mobile, this seems like the perfect sollution to make my webapp
Pull down to Refresh - touch drag to make server call.
Hi, I was working with jQuery mobile and had thought in my mind to create some sort of UI to make server request. the UI looks like(i tried!!) Twitter app or facebook app refresh style. I have demo running, which uses the jQuery UI drag to accomplish this. Note that this is only proof of concept, UI is working but there is no server call. try it on mobile device. I have tested it on iphone , ipad. click here to see Demo screen shots: Let me know what you think. thanks Project9
changePage doesn't work after submitting form
i have a page with a form. submitting the form goes like this: $("#add_form").bind('submit', function(event){ event.preventDefault(); $.get('/~polling.php', {poll_type_select: $("#poll_type_select option:selected").val(), question_input: escape($("#question_input").val()), end_select: $("#end_select").val(), multi_string:multi_string, target_select: $("#target_select").val(), type: "add_poll", user_id:user_id}, function(data) { alert(data); $.mobile.changePage($('#list_page'), 'slideup', true,
Fixed footer toolbar and tap events
Hi, I've set a fixed footer toolbar. It works "ok" (looks really bad) on scrolling listviews, but it is disappearing ALSO with non scrolling tap events. I have a panel with button images, then when I tap on an image, the bar disappears. If I tap again, the same or another image, the toolbar reappears. That's utterly annoying, because it seems like a huge design (application) flaw. The pages are all dynamically inserted into the DOM, and many listviews are NOT so big to demand scroll, but the bar
Nested List Theme
I am using a nested list with the default dark theme. When I click on a list item to drill down into the list, the theme changes to the blue theme. How can I get my list to stay consistent and just have one theme the entire time?
Ajax problem: jQuery Mobile with jqplot
Hi, I've been seeing a problem when using jQuery mobile with jqplot when ajax enabled. I followed the basic instruction for jqplot, i.e., add a div and a simple javascript to make a chart: <div id="chartdiv" style="height:400px;width:300px;"></div> <script type="text/javascript"> $(document).ready(function() { $.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]); }) </script>when I disable the ajax, the chart will show up but if I enable the ajax, the chart
autocomplete="off" not working
hi, I'm currently doing some development on a Blackberry torch. and I'm creating a website with JQM. I'm runing into issues with Blackberry torch built in autocomplete blocking some of the buttons on my website. I tired using (autocomplete="off") in the html buts its not working. I would rather not have to ask the user to turn it off in the browser. Anyone have any ideas? Thanks
programmatically open dialog ?
I use currently: $.mobile.changePage("myDialog.html", "pop", false, false); but that does not really style the page as dialog. Anybody knows a better way ?
Next Page