multi page setup
In a multi-page site, all <head> code is to be the same for all pages. Question: is there any problem with using a php include to stamp each page with the same head code? like so: <?php include 'theHeader.php'; ?> <html> <head> <title>My Site</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="jq/jquery.mobile-1.4.5.min.css"> <link rel="stylesheet" href="themes/sew16.min.css">" <link rel="stylesheet" href="css/sew16.css"> <script src="jq/jquery-2.1.4.min.js"></script>
Unhandled error when loading jQuery Mobile in a web-based Microsoft Office add-in
There must be something different about how web pages are hosted inside any supported Office application that is running one of the new web-based add-ins (in Outlook, Word, Excel, etc.). The following error is thrown when the page loads (while debugging in Visual Studio 2015 in my case): "Unhandled exception at line 2954, column 4 in jquery.mobile-1.4.5.js: 0x800a318f - JavaScript runtime error: Object expected" I've tracked it down to this line: window.history.replaceState( state, state.title
jQuery mobile, conflict with joomla?
I use jquery mobile within joomla. Desktop and mobile have different pages. jquerymobile - and therfore my problem - comes only with mobile devices. A button opens a popup and a click next to the popup window closes this window again. This works fine and can be repeated. If I change (with normal html) the page popup works not longer, but again when I made a browser reload. It's posible to reinitialize jquerymobile after paging, according to a reload? Or are there other solutions?
Issue on Windows Phone 8.1 with JQM 1.4.5
Hi I am experiencing a page refresh issue when using popups on windows mobile 8.1. I can even navigate direly to the JQM demos page from my phone and I can experience the issue. It looks like there is an overlay over the background op the mobile application with the popup on-top. It shows blocks and is really horrible. Does anyone experience the same issue? Software Versions: Nokia Lumia:1520 Windows 8.1 It is important to note that the behavior is present on the Demo's page so I do not think it
How to add a dropdown in header
Hi there, In header , I have a toolbar. I would like to add two button one on left and the other on the right of the toolbar. When clicked I want a drop down to appear which will list things like Preferences, About, Help and Quit. What jQuery mobile widget do I use. Thanks Joe
external toolbars tapToggle event don't work properly in ajax loaded page (jquery mobile)
In short, my problem is that the "tapToggle" event do not work as expected. For more details on the problem I posted the question on StackOverflow also to the following address: my problem Thanks
jQuery Mobile drop down in header
Hello, I want to put a drow-down menu in my jquery mobile webapp especially in the header. My webapp: mobile.wks-webapp.bplaced.de Login: User: MockMode Password: htlhl I want to put the dop-down menu in the header of uebersicht.html and detail.html My Problem is (uebersicht.html), when I open the drow-down menu I cannot open the Hilfe/Help PopUp. In detail.html the drop-down isn't visible and I don't know why.
jQuery Mobile loading spinner
Hello, I want to change the normal jQuery Loading Spinner. On my mobile webapp: mobile.wks-webapp.bplaced.de Login with: user: MockMode password: htlhl When you send a request (parser.js) it should show my custom spinner. After loading the data the spinner shouldn't be visible. I have a div id="loader-wrapper" which I set visible or none. 1. I have a problem when I want to use this spinner on different sites because the id is the same. 2. Setting the spinner visible and not visible doesn't work
.removeClass not removing class from panel menu link
My panel menu works, links work, but when I try to style it so that the current page's link is highlighted in the panel menu it doesn't want to cooperate. Here's the relevant html: <div data-role='panel' data-position='left' data-position-fixed='false' data-display='reveal' id='nav-panel'> <ul data-role='listview' style='margin-top:-16px;' class='nav-search'> <li class='menuitem'><a style='display:block;' href='#' data-rel='back'>Back</a></li> <li data-icon='delete' > <a href='#' data-rel='close'>Close
Popup using iframe does not work after first time load
I am trying to get a list of videoid and demo them using popup. however this works fine for first usage. The second time I load the page the popup does not work. The iframe is displayed after each img. <a href="#myPopup{{num}}" data-rel="popup" data-position-to="window" class="ui-corner-all ui-btn-inline"> <img src="http://img.youtube.com/vi/{{videoid}}/default.jpg"> </a> <div data-role="popup" id="myPopup{{num}}" data-overlay-theme="b" data-theme="a" data-tolerance="15,15" class="ui-content">
Return 3 closest locations to a users location (geolocation) and list those locations for them
Hi there, In my app, I'm finding users geolocation. I also have a geolocaion of cities. I can put the geolocation data of cities in array or SQLite database. How do I get and display the 3 closest cities near the users location. Thanks Joe
Overlay & Loader over Popup
Hi, I'm using standard JQM POPUP to create a dialog thru ajax call. Inside ajax call I can easily execute $.mobile.loading( 'show' ); to show overlay and loader before my popup dialog show up. However, when I execute again $.mobile.loading( 'show' ); on ajax call (button click) on same popup dialog page, only loader appear over the popup page. The overlay is not. This causes problem as I still are able to click any buttons on popup page. My current only solutions is before I call ajax, I will close
How to trigger a change on a radio buttons group
Hello,Could someone tell me how to trigger a change on radio buttons group? I have this group <fieldset data-role='controlgroup' data-type='horizontal' data-mini='true'> <input type='radio' name='rad_group' id='rad_Matin' value='Matin'> <label for='rad_Matin'>Matin</label> <input type='radio' name='rad_group' id='rad_Midi' value='Midi' > <label for='rad_Midi'>Midi</label> <input type='radio' name='rad_group' id='rad_Soir' value='Soir' > <label for='rad_Soir'>Soir</label> <input type='radio' name='rad_group'
How to update a slider value on change of an other one
Hello, Could someone help me? I try to update the value of one slider on change of the other one. here is the link jsfiddle thanks in advance
How to save user's selections on device
Hi there, I'm writing my first ever app. I would like user to save cities that they search for often. I do not plan on writing their selection on any external server but on their device itself. What are my options to save such information on the device? Thanks Joe
How to create a fixed header (that doesn't move on page transition) that is present on some but not all pages.
Hello! I have a simple application with around 5 views that all share the same header/nav, however it also has a login page that has no such nav. I am looking for a way to configure the document so that the login has the nav invisible/not present, then once it logs in, it transitions into a view with the nav (I'm using slide transition, but I guess the effects don't matter), and then any further navigations between these 5 views transition all but the header/nav, keeping it fixed. Finally, if the
How to get a return value from a popup
PLEASE DON'T SEND ME LINKS TO DIALOG TUTORIALS, THAT'S NOT WHAT I WANT! This should be a rather simple question. I create a popup and that popup acts as a confirmation box WITH options (which is why confirm() isn't applicable). Essentially this is a form within a popup and the 'X' acts as a cancel operation (which returns a FALSE), and the "OK" button acts as a submit which returns TRUE when pressed. <a href="#popupConfirm" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">Show Popup</a>
Issue with slide transition
Hi, i have an issue with the slide transition, the page slide and disapear but the new page don't follow the sliding page, it just show up after the slide transition. Have someone already see that? And how solve it?
Change text in JQM Collapsible without including <span>click to collapse contents</span> text
I am trying to change the heading text of a collapsible, but no matter what I try, it always includes the span text as well. Here is the enhanced HTML: <div data-role='collapsible' class='...'> <h4 class='...'> <a href='#' class='...'> "Some Text" <span class='ui-collapsible-heading-status'> click to collapse contents</span> ::after </a> </h4> </div> The selectors I have tried to isolate the "Some Text" so far: $("div
On click display content of external html page
Hi there, In my app, I have a link to external website's HTML page. Instead of opening a web browser, I would like to display the content of this external HTML page in a pop-up within my app.Is this possible?. If so, how to do this? Thanks Joe
jQuery Mobile v1.4.5 anchor tag fails to follow link after text has been changed
I realize JQM is quirky, but I really am having a hard time wrapping my arms around this issue. Since JQM enhances markup, I inspected the anchor elements before and after changing the text. They look identical to me, but after changing the text the links no longer work. Perhaps another set of eyes will help. Before: After: Please ignore the data-role="none" - it has been removed. HTML: <ul> <li><a href="#home" data-prefetch class="ui-btn ui-icon-home" data-icon="home">Home</a></li> <li><a href="#demo"
splashscreen not shown on android
Hi I'm using jQM 2.2.0 on android using phonegapBuild. only on android, the splash screen not shown. here is my config. <preference name="phonegap-version" value="cli-5.2.0" /> <!--3.7.0--> <preference name="SplashScreen" value="splash" /> <preference name="SplashScreenDelay" value="10000" /> <plugin name="org.apache.cordova.splashscreen" spec="0.3.4" source="pgb" /> <!-- Android splashes --> <gap:splash src="Resources/200x320.png" gap:platform="android" gap:density="ldpi" /> <gap:splash
refreshing div from ajax request with page stylesheet
Hi, i am trying to refresh a div container in a Html page with an ajax request from a php script. The Php-Script just returns the <li> elements for a <ul> list in the div container. But there is always the jquery mobile Stylesheet infos missing. Can someone tell me how to update this. The problem is that i just want to update the <li> elements and the website user should not see any scrolling or other things. Just the elements name should be changed. Thanks a alot. Here is my function: $(document).ready(function()
An example is giving me trouble
Hello everybody, I´ve got a little problem. There's an example in: swipe-list.html that I'm taking by reference to delete items in a list. The problem is in $( "#confirm #yes" ).on( "click", function() {... The sentence listitem.remove(), is executing as many times as items I've already deleted. This can be view using breakpoints in lines 55, 63 and 72. How can I do to execute that just one time? TIA James
Need help adding a search to mobile site
Hello, I'm new to JQuery and I'm trying to figure out how to add a search to a mobile site. I found this code snippet but I don't know how to setup the rest of the search function. Do I need a database or text file to search though? I'm not sure how to call a plugin either with JQuery. I'm assuming JQuery has a plugin available for this? I tried searching this forum but I can't find anything. Any help would be appreciated! <form method="post" action="backcountry_hiking.html"> <div class="ui-field-contain">
Use external and internal headers (toolbars) on the same app
I have a page that shows product details in my single-page catalog app. In order to support the "slide" transition between two product pages (which initially used the same page), I have defined two pages that act as a double buffer. So instead of having a "#detail" page, now I have "#detail-0" and "#detail-1", which are used alternatively as the user swipes the page to the right/left to see the previous/next product. This is working fine, but I would like the page header to remain fixed (not slide)
Navbar in footer: problem with height
Hi, I have a problem with a navbar inside a footer. It's just the example code: <div data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><font size="8px"><a href="#" data-icon="grid">Summary</a></font></li> </ul> </div><!-- /navbar --> </div><!-- /footer -->If instead of the navbar I write just some text with or without the <h> tag the height of the footer bar is "normal" With the code above the footer bar has a big margin
Jquery mobile only in some area?
Hi all. Can i load jquery mobile only in some area? Need only use some vmouse events in one div, and jquery mobile load page give dmg my css. Or if I can load only some event's what I needed? Thanks for answer.
JQuery Mobile Select list not working on Iphone
I am trying to load JQuery mobile on mobile devices for a form. The select lists work on IPad but not on IPhone. On IPhone, the select fields are not clickable. If I try to click on it, it will take me to the top of the page. Can anyone help me? I am using a multi-select list and a single select list.
Cannot see debug infos
Check that HTML code pls: I want to see that text before but its hidden by the following result of code: <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width, initial-scale=1'> <title>Pharma Warenwirtschaft Mobile</title> <link rel='stylesheet' href='css/themes/wawi.min.css' /> <link rel='stylesheet' href='css/themes/jquery.mobile.icons.min.css' /> <link rel='stylesheet' href='http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css'
Using JQM to Clone a page.
Hi, I have tried a few ways to clone a page and append it to the body. https://jsfiddle.net/m5rco7cv/ Basically I want to clone the page (#pageResult_0) and create a new page with the id #pageResult_1; I know how to clone elements of pages but not on an entire page. Any help would be great. Thanks in advance. PS, I have tried this but it doesn't seem to work either - https://jsfiddle.net/m5rco7cv/5/
Ipad click issue
Hi , My HTML Code look like below <div id="ActionTilePastDueWork1" class="actiontile" onclick=""><label text="test"></label></div> <label text="test"></label> <div id="ActionTilePastDueWork1" class="actiontile" onclick=""><label text="test"></label></div> <script type="text/javascript"> $(function(){$(document).delegate('#ActionTilePastDueWork1', 'click',{'actionTileCriteria':'from_whs=@warehouse, AGING_DATE_TIME<GETDATE();', 'url':'/scale/insights/2757?filters=SearchPaneWhs:{{{FROM_WHS}}},SearchPaneAdvCrit_Field:{{{WORK_GROUP}}},SearchPaneWrkTyp:{{{WORK_TYPE}}},SearchPaneAdvCrit_Field:{{{AGING_DATE_TIME}}}'
How to update JQM from 1.0 to 1.4.5 in Dreamweaver CS6?
Hello, Trying to update JQM 1.0 to 1.4.5 in Adobe Dreamweaver CS6 in a Win. 7 platform. Searching for help from Adobe has not helped. I can replace the old JQM files with the 1.4.5 into C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS6\configuration\Third Party Source Code\jquery-mobile or replace them in the index.html page and link them to the updated files. The problem is that the old C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS6\configuration\BuiltIn\Mobile Starters\_notes files are not
Themeroller beta 1.5
Is there a Themeroller for the beta version (1.5). It seems the 1.4.5 version is different enough that it makes testing the beta version difficult to know if there are bugs or if it's a change caused by differences in the theme.
why popup is shown
Hi, Why the datepicker popup is sown every time form is validating as you can see in the attached message and how to avoid? Thanks, Jassim
My app page height is too large
My app page height is too large, maximum 8000px. So for this reason the full app page not showing after app installation when I am show in iPhone. After few heights at the bottom - the app page not scroll. It is lock. Hay any problem at my app page? It is only for IOS. But android app has no problem.
Dynamic page theme swatch don't work properly
Hello, first of all I apologize for my bad english. I'm trying to dinamically change the page theme with the function found in the jquery mobile API documentation. The function is like that: $('[data-role="page"]).page( 'option', 'theme', 'b' ); If i run this function several times with different swatch themes, it add the page css class theme for each swatch instead of switch it. Example: I load the page with default theme. It add in the page class: ui-page-theme-a Then i execute: $('[data-role="page"]).page(
What is going on with jQuery Mobile? No more updates after 1.4.5
What is going on? the last update was 1.4.5 which was released in October 2014? Is it ever going to get updated ever again? why has it been so quiet?
Can not escaped the input value
I'm trying to a html escaped value into a input (submit). <div data-role="content" data-theme="a"> <div role="main" class="ui-content"> <form action="" method="post"> <input type="submit" value="<s>aaa</s>"> </form> </div> </div> I think display a value: <s>aaa</s> But displayed: aaa
Bizarre symbols on the buttons (Back button, home button)
Hi I'm using jQM 2.2.0 on android using phonegapBuild. everything works great on ios bur I have an issue on Android smatphones only: on the buttons (Back button, home button) there's a symbols, like the social media symbols ! with dashes on the border of the buttons ! my code: <div data-role="header" data-rel="back" data-add-back-btn="true" data-position="fixed" data-theme="b" data-tap-toggle="false" > <!--data-rel="back" data-add-back-btn="true"--> <a href="#" data-icon="arrow-l" title="Go
Next Page