navigate to another page with full page reload
i have a page1.html, with button click in page1.html, it should be navigated to page2.html with transition=slide. i have to make ajax call to retrieve some data from server when page2.html is loaded. but no javascript can be called in page2.html instead of loading static html tags. can someone tell me how to overcome this issue? thanks.
Search images by data attribute and return eq()
Hi, can anyone help me return the eq() of the image when I search the data-age attribute? For example the age 18 it would the eq() of 2? <div id="resutsBox"> <img src="gerrard_1.jpg" data-age="21" width="40" height="40" /> <img src="gerrard_2.jpg" data-age="43" width="40" height="40" /> <img src="gerrard_3.jpg" data-age="18" width="40" height="40" /> <img src="gerrard_4.jpg" data-age="54" width="40" height="40" /> </div> Thanks.
Find number of disabled images in a div.
Hi, if I have a div that contains four images and I disable one how would I find the number of disabled images? For example if I have: <div id="resutsBox"> <img src="gerrard.jpg" width="40" height="40" style="display:none" /> <img src="gerrard.jpg" width="40" height="40" /> <img src="gerrard.jpg" width="40" height="40" class="ui-disabled" /> <img src="gerrard.jpg" width="40" height="40" /> </div> How can I find out that I have one image disabled? Thanks.
Chrome Developer Tools - Sources blank
I rely heavily on Chrome Developer Tools - Sources to debug javascript in my web pages. I have recently begun building my first jquery mobile webapp and have been alarmed to discover that the Sources window, for each page, is completely blank. I use Chrome in mobile simulation mode to build and test all my pages before testing on a physical phone device. No js or html appears at all, for any of my pages. I surmise this is because of JM's approach to loading content behind the scenes rather than the
activate_subpage events
I had earlier an app, where I used pagebeforeshow events to prepare ajax calls and put some data on page. But now I make an other one, wish to use subpages instead of pages (due to side slider menu, to have the same toolbar in the header. My searches dont bring results. Are they some events like pagebeforeshow for activate_subpages? $(document).on('pagebeforeshow', '#overview', function (event) { or $("#overview").on(...same nothing works. Working will be checked with alert or console.log. But the
Using jQuery Mobile with webpack
I have a cordova mobile app build with jquery-mobile. Instead of importing the js files through script tag I want to using a packager webpack. I have tried to simply do var $ = require('jquery-mobile'); but I bump into a bunch of errors. Does anybody know how can I require jquery-mobile using webpack. I am a complete newbie in using webpack.
Why am I getting anerror due to Jquery?
I have created a mobile app and testing my app on real devices using www.pcloudy.com this tool and I am getting this error when trying to delete an application listing in my code. DELETE http://localhost:3000/apps/9 500 (Internal Server Error) jQuery.ajaxTransport.send @ jquery.self-d03a5518f45df77341bdbe6201ba3bfa547ebba8ed64f0ea56bfa5f96ea7c074.js?body=1:9660 jQuery.extend.ajax @ jquery.self-d03a5518f45df77341bdbe6201ba3bfa547ebba8ed64f0ea56bfa5f96ea7c074.js?body=1:9211 $.rails.rails.ajax @ jquery_ujs.self-ca5248a2fad13d6bd58ea121318d642f195f0b2dd818b30615f785ff365e8d1f.js?body=1:84
Grouped collapsible with listviews - expanded by default
I have a series of Grouped collapsible with listviews which work well for what I need. But for one of these listviews I need it expanded by default. As it stands now, these are always collapsed by default. I have read through the listview docs and can't find how to do this. I want the other collapsible listviews collapsed by default, just as it is now, but for 1 of them, I need expanded by default. http://demos.jquerymobile.com/1.4.5/listview/ Here is mine: <div data-role="collapsibleset" data-theme="a"
Strange question mark icons in navbar
I see strange question mark icons in navbar: Here is my full source code: <!DOCTYPE html> <html> <head> <title>Test Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"> <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div
GET Status 0 on local page load with Cordova
I am using jqm with Cordova. When a local page loads jqm uses GET but returns the content along with a status of 0. This is seen in the logging app I am using as an error (it was expecting a status = 200 for a GET). I saw this item in the docs but it did not make any difference: $.ajaxPrefilter( function(options, originalOptions, jqXHR) { if ( applicationCache && applicationCache.status != applicationCache.UNCACHED && applicationCache.status != applicationCache.OBSOLETE ) { // the important bit options.isLocal
swipe event select is not updated / refreshed; css bug
I have a problem with the update of a select-box <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>TimeControl</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </script> </head> <body> <select id="id1Auswahl4" name="auswahl4">
Clone a page and change new the new page ID?
Hi, I have a page that I want to clone. The page has the id: id="page_0_Result_0" When the confirm button is used I want to clone this page and change the id to: id="page_0_Result_1" https://jsfiddle.net/vs2jfqaa/147/ Thanks in advance.
JqueryMobile Grid not showing my 250 records
Hi , I'm loading JQM grid data from a method which is returning 250 records, its properly coming to ko viewmodel. When bindings completes we can see only 25 records in grid. Where are the rest records? How can i show the full records in grid? Thanks!
Getting the previous and next page Id.
Hi, how can I go about grabbing the previous page id (if there is one) and the id of the page it is transitioning to. Also, how can I remove a page from the history stack? For example if I have three pages: Page 1 > Page 2 > Page 3. How cand I remove Page 2 from history so that adding a back button to the header on a Page 3 reverts back to Page 1 instead of Page 2. Thanks in advance.
JQuery unable to change themes
Hi, I have a couple of buttons that when clicked, they change between themes "a" and "b", I'm using this script to change themes: <script> $(document).ready(function() { $("#blueThemeButton").click(function() { $('[data-role=page]').page({theme:'a'}); }); $("#greenThemeButton").click(function() { $('[data-role=page]').page({theme:'b'}); }); }); </script> This works as expected when change from theme "a" to theme "b", but it doesn't work if theme "b" is applied and I want to change back to theme "a".
Adding a class to input does not show it
I have a simple problem, i have made a html part with a class named toRed, defined like .toRed { background-color: red; } and this is the script and the html (very simple). <script type="text/javascript"> $(document).ready(function() { $("#btnIrRegistro").click(function() { $("#nombre").addClass("irARojo", 4000); }); }); </script> <title>JQuery Mobile Evaluacion Final</title> </head> <body> <div data-role="page" id="pagGestion">
tap and taphold background color
Hello, I have a project that uses jQuery Mobile 1.3.2 and wonder how I can change the background-color when tapping or tapholding in general. Currently it has a grey background when I for example taphold an element. I use an Android-device with Firefox-browser. For any hint I am very grateful. Regards, Afox
Mini silder show error, how to fix it?
I used code like these: <div data-role="fieldcontain"> <label for="silder2">mini silder：</label> <input type="range" name="silder2" id="silder2" data-mini="true" data-highlight="true" value="40" min="0" max="100" /> </div> but it show not good, like this pictrue. I found it may be a jquery version problem. In jquery.mobile-1.3.2,it works well. but in jquery.mobile-1.4.5,it wors error like this picture. How to fix it? please help me.
Jquery touchmove event fire when zoom mobile screen
Hi to all, I have a web page where i used touchmove event to navigate from one page to another.Now the problem is when i am trying to zoom the mobile screen IOS or Android it fire the touchmove event and page changed. How i can prevent touchmove mean navigation through touchmove while zoom the mobile screen. Here is the code for move from one next and previour page var currentX; var currentY; var lastX = 0; var lastY = 0; var lastT; $(document).bind('touchmove', function(e) { // If still
pagebeforechange event getting called multiple times
Hi, I'm using code under $(document).on('pagebeforechange', function (e, data) { //my code }) This method is getting called multiples time when i visit the page again. Also data.toPage[0] contains string some times and sometimes object. My code is failing as i am considering it object all the times. Please help me.
is this a bug?
Hi all, I'm new to this forum. Really strange not sure which section to report a bug(Please do move). I'm working on this few days but popup map wont work. Can you take a look at this? https://codepen.io/anon/pen/qXgRYW
Cose button
Hi all, I want to make some changes on this http://demos.jquerymobile.com/1.4.0/popup-iframe/ I just want to put close "X" button on upper-right corner (video player example). Also overlay should be close by only clicking close "X" button. I dont want to fade away or close by clicking outside area of the iframe. Thanks
Swipe to a different url?
Hi folks, Just starting out on JQM, and I can't seem to find any documentation on what I'm trying to do. I'm trying to create a series of pages with swipe navigation. Not virtual pages, but actual pages. I found a good example of how to do it with the hidden divs, but nothing on how to go to a different url with a swipe. Can someone provide me with a quick example? Like swipe right to load "about.htm" and swipe left to go to "contact.htm"?
jQuery Mobile Compatibility with .Net - Move popup widget's DIV to the inside the form tag
(apologies in advance if this is posted in the wrong place!) We’re using jQuery Mobile and .Net web forms for constructing mobile web pages. We’re using the latest compatible versions, jQuery 2.1.4 and jQuery Mobile 1.4.5. I’ve discovered a case where .Net web controls lose their values if they are inside a popup widget. Take the following example: Say a mobile page contains a jQuery popup DIV. Inside the popup, there are two .Net web controls, a TextBox and a LinkButton. Open the popup, type something
title of website in alert box with jquery mobile
Hello World ;-) ! I have a little problem with a alert box using jquery mobile I've got my website adress in title on a alert box and I want canceled it ! Is it possible in a different way or with a little code ? Thx
How to load two or more popup in sequence
I wanna use JS to load two or more popups in sequence, after i close the first popup, then display the second one . but it looks not working $("#popupMSG1").popup('open'); $("#popupMSG2").popup('open'); how can i do that? thanks a lot!
Responsive design and table click & touch events
Hi there, I planned to make a responsive web site, reachable with smarth phones, tablets and desktop computers. As I'm already familiar with jQuery I decided to add also jQ mobile and solve this problem because jQm looks nice, easy to implement... but I faced myself with input devices events; one of my project pages has a HTML tables with many columns (more than 12) and I planned to implement doubletap and press&hold onto table cell in order to call different dialogs or functions... but it fails!
Slider Redesign Suggestion or new widget
Hello, I am creating an app using jquery mobile. I wanted to use the slider. BUT, when using Chrome on Android and you move the slider VERT slowly, the browser will open a popup with the options: Open in new tab Copy Link address etc My suggestion is adding a [-] sign on the left and a [+] sign to the right, so that if you want to move the slider one at a time you could use those buttons instead of the slider. OR create a new widget [-] XX [+] where XX is the current value Thank you
Help, pagecontainerbeforeshow not fired!
Hi, I am very new to jQuery and Javascript. Recently I am learning from one jQuery Book. There is an example in the book which is about to use 'pagecontainerbeforeshow' to get content from json files and show them on a new page. I have tried this example on my env, but failed. The code piece as follows: <div data-role="page" id="homepage"> <div data-role="header"> <h1>Dynamic Pages</h1> </div> <div role="main" class="ui-content"> <ul id="peopleList" data-role="listview"
How to have 2 sliding panels open on screen?
Hi, I am trying to have 2 sliding panels open (one on the left side, the other on the right side) at the same time. Reading the documentation it said, it is possible to open them programmatically. Say that I have the following 2 panels: <div data-role="panel" id="panQuery" data-position-fixed="true" data-theme="none" data-display="overlay" class="transl_panel w33pct" data-dismissible="false" data-rel="close"></div> <div data-role="panel" id="panMap" data-position="right" data-theme="none" data-display="overlay"
Cloning Pages - Vertical Scroll Bar Appears. (Updated - posted the wrong link)
Hi, I want to clone a page dynamically which I can managed fine. I can then go to view these pages and swipe forwards and back. If I save these pages and reload them on the next run I get a vertical scroll bar appearing when swiping. I have included a fiddle: https://jsfiddle.net/a4poster/ysyxvtyp/422/ If you follow these steps you will see what I mean. 1. Click the "Click To Clone button" three times. 2. Goto and view the clone pages. 3. Swipe across them - this works fine. 4. Click the "Save All
JQuery mobile application returns to first page on update
I have created a single page application with two pages. This is used with hand held android barcode scanner devices that we use in our warehouse. The user scans a location tag on a shelf. This causes an ajax call to check that this is a valid location. If location is valid code moves to the barcode scan page. On this page we scan item barcodes. Each scan causes an ajax call to our back end and retrieves data on the item. This all works, except that after each ajax call the application returns to
Jquery Mobile Questions
Hello. 3 years ago, I programmed our School Division app, using jQuery Mobile, PHP, Apache Cordova etc. I am now onto a new project for my thesis, and I was going to use jQuery mobile. To my surprise...there seems to be lots of talk on the forums about jQuery Mobile being abandoned. So my question is....should I start my new project with jQuery mobile...or should I move to another framework. As well...It took me awhile to find jQuery, and it worked so well for me...is there a new recommend framework
Remove the hover effect on nav bar on a single page only.
Hi, is it possible to remove the hover effect on the nav bar for one page only? For example I have this on the footer of my first page and want to remove the hover effect on it but retain the hover effect on subsequent pages? Thanks in advance. <div data-role="footer" id="optionsFooter" data-position="fixed" data-theme="a"> <div data-role="navbar"> <ul> <li><a href="#" data-icon="custom">© Sports International, 2016.</a></li> </ul>
Filter a data-attribute and return the corresponding id in an array.
Is it possible to do the following; I want to filter through a div for to match a data-attribute. When it is correct how can I return the corresponding id in array so it can be used in the for/next loop after. https://jsfiddle.net/ysyxvtyp/416/ Thanks in advance.
jQuery Mobile 1.4 API inaccessible
As the title says, you can no longer reach 1.4 API documentation. These links do not contain content such as widget api info: http://api.jquerymobile.com/1.4/ http://api.jquerymobile.com/1.4/category/all There's nothing, or is it hidden? signed, Crippled dev
Dragging Panel Reveals Gray Background on iOS
If you open the jQuery Mobile demo page on iOS and then go to the bottom of the page and press and drag the panel, the entire panel moves up revealing a gray background. If you let go it then springs back. This of course happens in jquery mobile apps too and frustrates users. Is there a way to prevent this from happening? Note this does not do this in Android devices.
Radio grid finding the highest value non-disabled button.
Hi, what is the best way of return the highest value non-disabled radio button in a grid, checking each row and return the correct column? I have included a fiddle - https://jsfiddle.net/gb3f7v8k/161/ Thanks in advance.
Why is styling not applied after load?
I am a jQuery novice having problems using load. I basically want to develop an Ajax app with all the pages loaded dynamically. The loaded html is not styled properly the way it is if I hard code the exact same html, in fact not really styled at all (see code below). Any advice on what I am omitting or doing wrong would be appreciated Here is the index.html... <!doctype html> <html lang="en"> <head> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="pragma" content="no-cache">
jQueryMobile - First Code not working
Hi All, I have just started working on jQueryMobile and tried to run below code in EditPlus and Sublime Text both editors but it is not showing the result like it is described in the below video URL on YouTube: https://www.youtube.com/watch?v=OSrhbswjQww&index=3&list=PLGGfIkWckSmlf8bogwP-bMMEmo2bt27gD Here is the code which I have used: These CSS and JS files are placed in the same folder. I am getting the output as shown in Example.png in the attachment. <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
Next Page