ControlGroup HUGE Input Text Box, please help...
Hello, I hope everything goes fine with you all! , I'm sorry to bother you but I have a problem I would like to resolve... I would like to do a simple inputbox with a button on the right side... similar to screenshot1 (attached)... but no matter if I copy the html code and the CSS from the jquery mobile page, it produces a HUGE inputbox with a lot of padding... (please check screenshot2)... here's my code... <div data-role="controlgroup" data-type="horizontal"> <select> <option>1</option>
An issue of JQM
Hello, My website has both header and footer, which are fixed and not toggleable. I want them stick at the top and bottom of window, no matter what happens. However, in some browsers, when a pop-up dialog with a text input shows, the header and footer become not fixed. They disappear automatically. And when that pop-up dialog closed, they do not show again. The header stick at top of webpage and the footer stick at the bottom of webpage. They should return to the top and bottom of window, right?
Load content of Prev page on Back button click from next page
Hi, I am using a mobile page which gets data from server on load. Same page is having "+" button which takes you to another page. Next page is having a back button "<=" to go back the previous page, but when we click back button it goes to prev page , but don't load the data. I figured out this code is not getting executed when user comes back. $(document).ready(function () { //Code to load data using $.ajax call. });
Flipswitch widget rendered as dropdown inside panel widget
I noticed that the flipswitch widget is rendered as dropdown inside a panel, if i put the flipswitch widget inside a page it's rendered as i see in the jQuery mobile demos, is there a way to render it as in the demo?
Visual issue mixing listview and collapsible
I'm trying to dynamically generate a listview with a filter that contains entries of collapsible items (each of which also contains a listview). If a create the listview element (either by using 'data-role="listview"' or calling listview() on the element), the view looks fine. However, as soon as I filter on anything, all the collapsible items get a big white border put around them. It seems like the 'ui-li-static' class is being added to each item. I believe this happens when a listview item doesn't
data-transition not working
I use the code below to open a dialog. It appears to work only within a certain length of the page. It seams I am not the only one who encounters this problem. Is there something known about this? I use only single pages. <a href="#PageRel1" data-transition="flip">Test me</a>
Clicking collabsible scrolls to far down
I experience the collapsibleset and collapsible as a great feature, just fantastic. But I have been struggling for a while with the following problem. I am very grateful if someone wants to help me. When collapsibles contain more content than a bit, there is a problem. The following code is the code that I use, so just as prescribed. Nothing special. Do the following to test: I have looked at page https://api.jquerymobile.com/collapsible/ where the following is stated: "Note: Collapsible is deprecated
noobie Q about style setting for collapsible element
hello i'm using a little piece of code that i pasted from the web. i guess it's kind of old but if i can make it work then it don't matter i just wanna add one parameter, the "padding: 10px;" and change the h2 element a bit. anyone know why the padding is being ignored by the browser? thanx, mike <!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
Cambiar value de input
Hola, al principio tengo esto: <input type = "button" id = "btnChangeStylePage" value = "Tema oscuro"> Pero más tarde cuando hago clic en javascript para cambiar el valor, y no puedo hacerlo con .attr () o .val (). ¡Saludos!
Reusing Same HTML5 Code In JQueryMobile
Hello Code Works From HTML docMy existing upload.html doc when clicking a button points to the upload.php doc which successfully inserts photos into a database. <form action="upload5.php" method="post" enctype="multipart/form-data"> <input type="file" name="vfImageName" /> <br> <input type="text" name="photo_cost" /> <input type="submit" name="vButtonSubmit" value="Click To Upload" /> </form> However, Same Code Using JQueryMobile Button Does Not Work I tried inserting
#page anchor links not all working, only some???
Hi All, I am using JQuery Mobile viewing it on my Laptop/Desktop. My page anchors were working, but now only a few of the links are working. When i change the #name of link to the page name that are working, it works. I don't know what could be interfering with page anchor link call? Thanks in advance. Mike B.
tabs widget showing content from all tabs
Using JQM 1.4.5 with JQ 2.1.4 I have a really basic tab control, it has three divs and no matter how much clicking I do on the tab/navbar portion the content of all three divs is constantly displayed. JQM doesn't seem to be adding any classes to/from the content divs. Am I missing something here? (Well obviously I am, but what? My includes are: <link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css" /> <script src="jquery.mobile/jquery-2.1.4.min.js"></script> <script src="jquery.mobile/jquery.mobile-1.4.5.min.js"></script>
Scale (or zoom?) on Phonegap
Hello; I have a jquery-mobile interface with some text, buttons, combo boxes, check buttons, tables and so; it looks prety well on ios or phone devices, with Firefox, Chrome, Samsung Explorer, and Safari; but when I run it with Phonegap, visual components are all much bigger. It seems all those browsers are doing a different zoop setting that makes things to fit much better. I build and tested this project using always the default settings for testing in all the browsers, and the app looks very
pagecontainer 'change' produces unrecognized expression in jquery
I may not be doing this right. I'm trying to change to an inline page with a parameter using this call: $(':mobile-pagecontainer').pagecontainer('change', $('#messagePage?msg_id=' +this.id), {reverse: false, msg_id: +this.id}); And that call produces this error (which it shouldn't): Uncaught Error: Syntax error, unrecognized expression: #messagePage?msg_id=18 at Function.ga.error (jquery-2.1.4.min.js:2) at ga.tokenize (jquery-2.1.4.min.js:2) at ga.select (jquery-2.1.4.min.js:2)
Shorten a piece of code.
Is there a way to shorten a piece of code like this. https://jsfiddle.net/j8w5qwta/218/ I was thinking if it would be possible to combine these two lines somehow: $("#page2").find("[data-blue] div").eq(2).addClass("ui-disabled"); $("#page2").find("[data-red] div").eq(2).addClass("ui-disabled"); Thanks in advance.
go to Search WITHOUT VIEW ANY OTHER PHP GENERATED LISTVIEW GETTING Problematic FIRST SHOT
When enter App... live in real Device or in Ripple emulator if go to Search WITHOUT VIEW ANY OTHER PHP GENERATED LISTVIEW GETTING Problematic FIRST SHOT when go to another page with Listview all OK as second shot... when re-enter Search list view again AFTER VIEWED another list view Search List view is OK like lat two shots... well??? success: function(results) { if ( results[0] ) { var list = self.config.recent, items = []; self.createH2new(rec.data_polis); var i, len = results.length, row; //alert("len2");
trying migrate to jquery.mobile-1.4.5 a nested listview
I am trying this I have a nested listview[only first li tag is having nested ul tag]... jquery.mobile-1.3.2. and trying migrate to jquery.mobile-1.4.5 but BOTH LISTS SEEM IN RIPPLE EMULATOR - HOW hide the inner list....? <body> <div id="home0" data-add-back-btn="true" data-back-btn-text="Back" data-role="page" data-title="Polis Town Guide"> <div data-role="header" data-position="fixed" data-id="vs_header"> <h1>Polis Travel Guide</h1> </div><div data-role="ui-content" id="wrapper"></div>
Loader widget halfway down the page using fakeFixLoader jqm 1.4.5 Solved
On older phones, the loader widget shows, but is half way down the page off the screen, you have to scroll down to see it. It seems to calculate the screen position incorrectly. fix Add this to your "mobileinit" or (function($){..}(jQuery)) $.mobile.loader.prototype.fakeFixLoader = function() { var activeBtn = $("." + $.mobile.activeBtnClass ).first(), scrollTop = this.window.scrollTop() || $("html").scrollTop() || $("body").scrollTop(); this.element.css({top: $.support.scrollTop
Clone page but vertical scrollbar appears momentarily on transition.
Hi, I have added a updated fiddle as although I can clone a page after the initial clone subsequent calls to clone the original page displays a vertical scroll bar on transition. https://jsfiddle.net/j8w5qwta/216/ Can anyone help? Thanks.
Autocomplete: Filters again after remote data call?
It looks like the remote data option for autocomplete is re-filtering the results? How it breaks: I want a search for "John Smith" and a search for "John Jr." to both return from the server "John Smith, Jr." - and I'm handling that logic server-side. The first search will work, but the second search gets back the result from the server, then filters it out because it couldn't match the string "John Jr." against the results from the server. It seems like in the server call case, it shouldn't re-run
Customize jQM close button on multiple selectmenu dialog
I am trying to change the close button on a jqm dialog to something other than X. The reason that I want to modify the icon is that the close button leaves the user confused as to whether his selection will be cleared or not (since it is a multiple select). I need to change it to a Done button. The selectmenu has data-native-menu = "false" and my jqm version is 1.4.2. I have tried changing the buttonMarkup on pagebeforeshow and on pageinit without success.
when redirecting to a new page using $.mobile.changePage(url), the url has added new url after original url with '#'
Recently, when i was checking my webapp pages on Chrome, I found one big issue: when i was redirecting from page B to page A, the url of page B has kept in the url ! ! And it was put before page A. eg: page A : https:mydomain/home.html page B : https:mydomain/Optimization/List when i redirected from page B, the url of page A has changed to https:mydomain/Optimization/List#/home.html After many tests, i found that when anchors using relative address would cause the issue. And this issue was found
Local Site in JQuery mobil Inserting data into Database
Hello! I started a project to create a local site in mobile JQuery. This site has a form (drop-down list, text fields and sending an image) which once completed must transmit the informations collected via a ''Envoyer'' (submit) button to my MySql database previously create. The concern is at this level; Once the ''Envoyer'' (submit) has been activated, I have this error message: Notice: Undefined index: upload in C: \ wamp64 \ www \ impricolor-final2 \ insert.php on line 27 PS: In simple HTML the
Cloning a page but transition to a separate page (not the directly cloned page)
Can anyone help me. I have successfully cloned a page but I don't want to transition to it. https://jsfiddle.net/lammie71/j8w5qwta/192/ As you can see it in the code it changes to the cloned page and works fine: $.mobile.changePage('#page_Result_'+a6, {transition: "slide", reverse: false, changeHash: false}); Although this works fine, I only want to clone the page at this stage and not transition to it. Instead I want to transition to the page #page_Asda. $.mobile.changePage('#page_Asda', {transition:
Line Break Textarea
Hello, i have the problem that jquery mobile prevents an automatically line break at the end of a textarea row. <form action='textarea2.php' method='post'> <textarea name='area' rows='3' cols='15' wrap='hard'> </textarea> <input type='submit' value='Abschicken'> </form> When i press enter everything is fine and a line break will transfer to "textarea2.php". But if i write more then 15 chars the text goes up to a new line but the line break will not transfer to "textarea2.php". If i not use
Jquery Mobile Autocomplete Still hidden after changing "ui-screen-hidden" class
Hi All, I am using Jquery Mobile Autocomplete and able to add my data to list using ajax call. It results me to add list items in UL, initially they comes with class "ui-screen-hidden". I have code to remove the hidden class and add my own classes, but it will not get updated on browser. While debugging i can see class changes in UL items, but when it renders it renders with initial hidden classes which leads to hidden autocomplete ul li. Already
Shortening a block of code.
Is there a way of writing the code below in a shortened version? $(".radioButtScoreGrid").eq(n).find("input:lt(3)").prop("disabled", false); $(".radioButtScoreGrid").eq(n).find("input:lt(3)").prop("checked", false); $(".radioButtScoreGrid").eq(n).find("input:eq(4)").prop("disabled", false); $(".radioButtScoreGrid").eq(n).find("input:eq(4)").prop("checked", false); I was thinking of something along the lines of: $(".radioButtScoreGrid").eq(n).find("input:lt(3) && input:eq(4)").prop("disabled",
Facing Issue with selectmenu
I have fighting with this issue for a while. Dynamically creating a selectmenu object, displays strangely on both android and wp8. It shows up with two boxes - one inside another, with two select icons (attached screenshot). You can select from both the boxes and it ends up displaying separate values. Code snippet below: //----------------------------------------------------------------------- var l = document.createElement("select"); l.id = "alist"; l.setAttribute("data-native-menu","true"); l.setAttribute("data-mini","true");
jQuery UI mobile comprehensive book
Hello there, Honestly speaking, I started web site creating at first by using PHP & Javascript, and AJAX, jQuery were for me unknown terrain and I left it behind my need and interest sphere. Later in my life arrived cell phones and tablets and regular web pages became old fashioned in many ways. I started to learn jQuery and made some useful web sites for my needs and needs of my work fellows. Also tried to implement responsive web pages but in many cases my work fellows use mobile devices and they
Goggle voice typing not working in popup text box
JQuery Mobile 1.45, Samsung Galaxy S7, Android 7.0, Cordova 6.3.1 -- In my Cordova project Google voice typing works fine in a JQM text box or text area on a page, but not in a popup. Tapping a text box or text area in the JQM popup brings up the keyboard, but subsequently tapping the microphone key causes the popup to flash and the keyboard to recede. Normal typing into the popup text/ text area box works fine, but tapping the microphone causes the popup to disappear and reappear quickly and the
How to dynamically change the value of a slider?
I have a page that has been dynamically created that contains a mobile slider. After this page has been dynamically created, I am loading Ajax data and wish to update the slider position before the page is displayed. How can this be done? The slider was created as follows: <input type="range" name="cvote" id="cvote" value="0" min="0" max="10" /> I've tried: $(#cvote).val("3"); $(cvote).slider('refresh'); Above does not work. Suggestions?
Hide keyboard Key JQuery Mobile
Hi, I’m developing tablet functionality,fields should only accept numbers. But is displayed “, + . = How can I hide these keyboard key ? I also noticed that all these keys have the same value for event.which (229), backspace also. I’m using tablet with Android 4.4.2
Returning the total of the combined values in an array.
Hi, if I have an array of numbers, myArray = new Array(0,3,2,5,9,7);Is there a quicker way of adding the numbers together to get the combined total instead of using a for/next loop like I am currently doing. Thanks in advance.
no event when loading an external page into the dom
Ok, first off do NOT confuse my use of the word "external" with the keyword external used in <a tags. That's NOT what this is about! I have a multiple page document and everything there works fine. I also have several other .html pages that are rarely ever used so I don't want to clutter the dom with them. An example would be the about.html page. When loaded, this page will (or should) give some info about the device it's running on as well as the version number of my app. So, inside my index.html
The direction of jQuery Mobile
When in doubt, simplify... Although I compliment the time and effort that the team puts in to jQuery Mobile, it is obvious that it is not enough to sustain it. So I was wondering whether another route should not be taken, that simplifies the goals and therefor is more realistic to achieve. I develop a healthcare and psychological test web application. A while ago, I used jQuery Mobile to create a nice look and feel, responsive, and with great looking page transitions. Today I completed the work on
jQuery Mobile and iPhoneX
Hi, Has anyone tried using jQuery Mobile (inside a hybrid application) on iPhoneX? I'm trying to use the safe areas and set headers, content and body styling but it does not seem to be working. I'm using following styles following this link: Safe area constants: .ui-page .ui-header { /* Status bar height on iOS 10 */ padding-top: 20px; /* Status bar height on iOS 11.0 */ padding-top: constant(safe-area-inset-top); /* Status bar height on iOS 11+ */ padding-top: env(safe-area-inset-top);
Finding number of images that are not hidden on the second page on document ready.
Hi, I have created two pages, one has a link to the second that has some images on. I want to be able to hide images on the second page when the document is first shown and then when the button on the first page is pressed return the number of images that are not hidden - in this case two? https://jsfiddle.net/a4poster/j8w5qwta/178/ Can I do this as I am stumped.
Return the index when two data-attributes match.
Hi, is it possible to do the following: https://jsfiddle.net/vs2jfqaa/151/ I want to return the index when the filter matches the criteria of two data-attributes: I tried with something like this but it doesn't work: var a1 = $("#page2").find(".resultsBox img[data-ba*='smith'],[data-cd*='london'").filter(... So if the data-ba="jones" & data-cd="london" it will return the index? Thanks.
Popup problem with Chrome 62
Hello, Popups are no longer displayed since Chrome 62 update : http://api.jquerymobile.com/popup/ I'm on Ubuntu 17.10 with Chrome 62.0.3202.75 (Official Build) (64-bit) Did you have this problem ? Arnaud
Can't click link button to trigger popup after return to page
I have a link button that, when entering my Manage Job page for the first time (and in most cases) works fine and triggers the popup as expected: <a href="#dialogCompletion" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-calendar ui-btn-icon-left ui-btn-b" aria-haspopup="true" aria-owns="dialogCompletion" aria-expanded="false">Job Complete</a> When clicked, my popup launches, presents a date and a button, I can change the
Next Page