Search jQuery

jQuery Forum

JQuery Mobile style doesn't apply on the loaded page.

in jQuery Mobile • 3 months ago

WebForm1.aspx will call WebForm2.aspx, and show the result in the divResult of the WebForm1.

However the JQuery Mobile style doesn't apply on the result. But if I added the following scripts on the WebForm2.aspx, there will be duplicated controls on the WebForm1.

WebForm1.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="JQueryTest.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="Content/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="Scripts/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#test').click(function () {
$('#divResult').load("WebForm2.aspx");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div data-role="content">
<a id="test">click to test</a>
<input type="search" name="search" id="Search1" value="" />
</div>
<div id="divResult">
</div>
</form>
</body>
</html>

WebForm2.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="JQueryTest.WebForm2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<select name="select-choice-0" id="select1">
<option value="standard" id="o1">option1</option>
<option value="standard" id="o2">option2</option>
<option value="standard" id="o3">option3</option>
</select>
</div>
</form>
</body>
</html>

Replies(19)

cullari.c..

Re: JQuery Mobile style doesn't apply on the loaded page.

3 months ago

Try calling $('#divResult').trigger('create');

Jim Wang

Re: JQuery Mobile style doesn't apply on the loaded page.

3 months ago

$('#divResult').trigger("create","WebForm2.aspx");

?? it doesn't work.

cullari.c..

Re: JQuery Mobile style doesn't apply on the loaded page.

3 months ago

that actually is not the correct syntax...you would want

$('#divResult').load("WebForm2.aspx").trigger("create");

Jim Wang

Re: JQuery Mobile style doesn't apply on the loaded page.

3 months ago

Thanks cullari,

It's same, not change anything...

Jim

cullari.c..

Re: JQuery Mobile style doesn't apply on the loaded page.

3 months ago

You may want to move the trigger("create") call into the pageshow event instead of the click event

Jim Wang

Re: JQuery Mobile style doesn't apply on the loaded page.

3 months ago

Hi,

I'm not sure if that could possiblely fix the issue.

plus, pageshow/hide event are not supported by IE8/9, I need a generic method to do that.

Thanks

poonkave

Re: JQuery Mobile style doesn't apply on the loaded page.

3 months ago

I am not sure how loading through aspx works. But suggest to try this.

after load.

$("#select1").selectmenu('refresh');

or just

$("#select1").selectmenu();

Jim Wang

Re: JQuery Mobile style doesn't apply on the loaded page.

3 months ago

Thanks but this doesn't work neither.

Note the duplicate controls are on the WebForm1.aspx.

poonkave

Re: JQuery Mobile style doesn't apply on the loaded page.

3 months ago

what I assume is webform1.aspx return html and renders in ui when doing

$('#divResult').load("WebForm2.aspx");

are you getting unstyled selectbox after this?

after this call below to style selectbox.

$("#select1").selectmenu('refresh');

or just

$("#select1").selectmenu();

if you can zip and attach the sample project I can try it at my end...

Jim Wang

Re: JQuery Mobile style doesn't apply on the loaded page.

3 months ago

Hi ya,

You could just copy/paste the WebForm1.aspx and WebForm2.aspx into Visual Studio 2010 (create a new Webform application), there is nothing more than these two files,so it should work.

Cheers,

Jim

poonkave

Re: JQuery Mobile style doesn't apply on the loaded page.

3 months ago

refer this...

http://jquerymobile.com/demos/1.0.1/docs/forms/selects/custom.html

Samples in http://jquerymobile.com/demos/1.0.1/docs/forms/selects/ show options as normal selectbox....

Modified webform2.aspx as follows.

Let us know it helped....

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs"
Inherits="JQueryTest.WebForm2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.6.4.min.js"></script>
<script>
$(document).bind('mobileinit', function () {
$.mobile.selectmenu.prototype.options.nativeMenu = false;
});
</script>
<script type="text/javascript" src="Scripts/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<select name="select-choice-0" id="select1">
<option value="standard" id="o1">option1</option>
<option value="standard" id="o2">option2</option>
<option value="standard" id="o3">option3</option>
</select>
</div>
</form>
</body>
</html>

Jim Wang

Re: JQuery Mobile style doesn't apply on the loaded page.

3 months ago

Thanks poonkave,

I think I didn't make the question clear:

The webform2.aspx works fine. The problem is on webform1 - duplicated controls on the WebForm1.

So this code is duplicated after call Webform2: <input type="search" name="search" id="Search1" value="" />

See attachment.

poonkave

Re: JQuery Mobile style doesn't apply on the loaded page.

3 months ago

Jim Wang, what I guess is since you are loading jquery again in webform2, its restyling all items including type='search'

I modified webform2.aspx as below

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs"
Inherits="JQueryTest.WebForm2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script>
$('select').selectmenu();
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<select type='select' name="select-choice-0" id="select1" data-native-menu="false"
class='selectclass'>
<option value="standard" id="o1">option1</option>
<option value="standard" id="o2">option2</option>
<option value="standard" id="o3">option3</option>
</select>
</div>
</form>
</body>
</html>

Jim Wang

Re: JQuery Mobile style doesn't apply on the loaded page.

3 months ago

It does fix the issue, thanks so much!

poonkave

Re: JQuery Mobile style doesn't apply on the loaded page.

3 months ago

I can see a listview and within that a collapsible-set.
I am not sure its proper hierrachy....

see http://jquerymobile.com/test/docs/content/content-collapsible.html

By refresh, you meant how to enrich(apply style)?

And refresh which element ?

poonkave

Re: JQuery Mobile style doesn't apply on the loaded page.

3 months ago

Not sure what you are trying to achieve with combination of listview and collapsible-set.

$(":jqmData(role=listview)").listview();

Please go through

http://jquerymobile.com/demos/1.0.1/docs/lists/docs-lists.html

every element have its own method....

“Give a man a fish; you have fed him for today. Teach a man to fish; andyou have fed him for a lifetime”

:):):)

Jim Wang

Re: JQuery Mobile style doesn't apply on the loaded page.

3 months ago

Sorry, my bad, I copied the wrong code, there isn't a listview, just div:

                        <div data-role="collapsible-set" data-theme="c" data-content-theme="d">
                                <div data-role="collapsible">
                                    <h3>Header</h3>
                                    <p>Content</p>
                                </div>
                        </div>

Now I try to 'styled' the collapsible-set.

poonkave

Re: JQuery Mobile style doesn't apply on the loaded page.

3 months ago

I haven't tried this....

$(":jqmData(role=collapsible)").collapsible();

Jim Wang

Re: JQuery Mobile style doesn't apply on the loaded page.

3 months ago

You are a star!

Top Reply

Response title

Attachments

jQuery Forum

JQuery Mobile style doesn't apply on the loaded page.

Replies(19)

Re: JQuery Mobile style doesn't apply on the loaded page.

Re: JQuery Mobile style doesn't apply on the loaded page.

Re: JQuery Mobile style doesn't apply on the loaded page.

Re: JQuery Mobile style doesn't apply on the loaded page.

Re: JQuery Mobile style doesn't apply on the loaded page.

Re: JQuery Mobile style doesn't apply on the loaded page.

Re: JQuery Mobile style doesn't apply on the loaded page.

Re: JQuery Mobile style doesn't apply on the loaded page.

Re: JQuery Mobile style doesn't apply on the loaded page.

Re: JQuery Mobile style doesn't apply on the loaded page.

Re: JQuery Mobile style doesn't apply on the loaded page.

Re: JQuery Mobile style doesn't apply on the loaded page.

Re: JQuery Mobile style doesn't apply on the loaded page.

Re: JQuery Mobile style doesn't apply on the loaded page.

Re: JQuery Mobile style doesn't apply on the loaded page.

Re: JQuery Mobile style doesn't apply on the loaded page.

Re: JQuery Mobile style doesn't apply on the loaded page.

Re: JQuery Mobile style doesn't apply on the loaded page.

Re: JQuery Mobile style doesn't apply on the loaded page.

Statistics

Tags

Actions

Related Posts