jQuery Forum

Hi,

Hi,

Hi,

I am using jquery-2.1.0 and jquery.mobile-1.4.2.


I have applied themes using grunticon loader as prescribed in JQM demos. So code in my html head looks something like this:




<script>
window.grunticon=function(e){if(e&&3===e.length){var t=window,n=!(!t.document.createElementNS||!t.document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||window.opera&&-1===navigator.userAgent.indexOf("Chrome")),o=function(o){var r=t.document.createElement("link"),a=t.document.getElementsByTagName("script")[0];r.rel="stylesheet",r.href=e[o&&n?0:o?1:2],a.parentNode.insertBefore(r,a)},r=new t.Image;r.onerror=function(){o(!1)},r.onload=function(){o(1===r.width&&1===r.height)},r.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="}};
grunticon( [ "./mob/css/jquery.mobile.inline-svg-1.4.2.min.css", "./mob/css/jquery.mobile.inline-png-1.4.2.min.css", "./mob/css/jquery.mobile.external-png-1.4.2.min.css" ] );
</script>


<noscript id="grunticon-fallback">
<link href="./mob/css/jquery.mobile-1.4.2.css" rel="stylesheet">
</noscript>


<link rel="stylesheet" href="./mob/css/my.custom.theme-1.1.css" />





Now I created a new JQM 1.4.2 theme using themeroller. In the downloaded zip file I don't have all these css files(jquery.mobile.inline-svg-1.4.2.min.css, jquery.mobile.inline-png-1.4.2.min.css, jquery.mobile.external-png-1.4.2.min). So how to apply the downloaded theme using grunticon loader.

The downloaded zip file contains following files:
customTheme.css
customTheme.min.css
jquery.mobile.icons.min.css
images folder

One more doubt is, In my solution(The code snippet I have given above) I didn't include 'jquery.mobile.icons.min.css' and 'jquery.mobile.structure-1.4.2.css'. But while downloading the theme from themeroller, it guided me to include it. Should I include it? Which place should I include it in my solution. Is the sequence of css files and their inclusion incorrect in my solution.

Hi,

I am using jquery 2.1.0 and jquery mobile 1.4.2

I have a page to upload an image to the server. The form looks like this:

<form action="http://localhost:8080/JQMProject/mobile/uploadServlet" enctype="multipart/form-data" method="POST" data-ajax="false">
<p>
<label for="file-2">File: </label>
<input type="file" data-clear-btn="true" name="file-2" id="file-2">
</p>
<p>
<input type="reset" value="Reset" data-icon="recycle"/>
<input id="submitImage" value="Upload" type="submit" data-icon="check"/>
</p>
</form>


Now when I submit the form, I am able to get the image in my servlet code and process it. But when the response is send back, I am shown a blank page with "http://localhost:8080/JQMProject/mobile/uploadServlet" URL, which is obvious.

This is my issue. I want to show a meaningful JQM page with server response. As I am using data-ajax="false"(to make file upload work), I don't know where to handle server response and navigate to a meaningful page.

I might be missing some feature of jquery mobile. Please help.

Thanks in advance

Hi,

I am using jquery-2.1.0 and jquery.mobile-1.4.2.

I have header html something like following:

<div data-role="header" data-position="fixed">
<div data-role="navbar">
<ul>
<li>
<a class="ui-btn ui-btn-inline ui-icon-phone ui-btn-icon-left" href="../common/notifications.html">Notifications</a>
</li>
</ul>
</div>
</div>


This hyperlink text 'Notifications' gets truncated on the mobile screen(I observed in chrome emulator). After reviewing css found out that css "display: block;" was causing this truncated text.

I do not want this truncation. I tried to set different values for ".ui-navbar li .ui-btn" class, but with no help.

Please suggest what value should I set to avoid truncation in my css:


.ui-navbar li .ui-btn
{
display: <What value???>;
}


Or is there any other way to achieve this?

Thanks in advance.

Hi,

Hi,

I am using jquery.mobile-1.3.2.js and jquery-1.10.2.js. I needed much flexibility in my application like
1. Be able to change the theme at runtime (from server)
2. any component inside the body might change as per the user logged in.
3. different ads at different locations on the page as per user's profile.

Due to these(and some other reasons), I ended up in following design:
I create the complete html page(except the main <div> in html body) using the server response through javascript in pagebeforecreate listener(using $(pageSelector).append(html_string)).

Every thing works fine. But I face some unexpected behavior when i press browser's back button many times(some times a blank page occurs or some times a not enhanced page occurs). For each generated html tag I have a separate id as well(implemented using a counter in javascript). I created these IDs because I read in some post that having same IDs might also be an issue.
I read in
https://forum.jquery.com/topic/how-to-ask-for-jquery-mobile-help
 that using IDs is not good. So I am confused here as well.

Could u suggest that is my design has a loophole or there is something extra as well which I should be taking care of.

Hi,