CODEWITHSUNDEEP
jqueryjquery-mobile
Diver Dan
Diver Dan

Reputation: 9963

cant get a jquery mobile dialog to show

I am using the library 1.1. I am trying to get a simple dialog to display, I dont want to load a page I just want to show a div tags content from the same page.

Do I need to add any special jquery references other than the standard 1.1 reference?

Lets say I have this

   <a href="#dialog" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">Find</a>

        <div data-role="dialog" id="dialog">
            <div data-role="header" data-theme="e">
                <h1>Foo</h1>
            </div>
            <div data-role="content" data-theme="e">
                <p>Bar</p>
            </div>
        </div>

What do I need to do to a page to get when clicking the button the dialog to appear?

Full output html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Plenfy</title>
<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="../../Scripts/jquery-1.7.1.js"></script>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="/Content/mobile/jquery.mobile-1.1.0.css" rel="stylesheet" type="text/css"      />


        <img src="/Content/mobile/images/logo-80.png"/>
 <p>
 </p>
 <ul data-role="listview" data-inset="true">
<li><a href="/Account/join">Join</a></li>
<li><a href="/Account/Login">Log In</a></li>
<li><a href="/contact-us">Contact Us</a></li>
</ul>   
       </div>
        <div data-role="page" id="start">
            <a href="#dialog" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">Find</a>
        </div>
        <div data-role="dialog" id="dialog">
            <div data-role="header" data-theme="e">
                <h1>Foo</h1>
            </div>
            <div data-role="content" data-theme="e">
                <p>Bar</p>
            </div>
        </div>
        ?



    </div>

</div>

<script src="/Scripts/mobile/jquery-1.6.4.js" type="text/javascript"></script>

Upvotes: 1

Views: 1356

Answers (1)

Baris Akar
Baris Akar

Reputation: 4965

Don't forget to include jQuery Mobile (css AND js) and jQuery core 1.6.4 OR 1.7.1 as stated in the jQuery Mobile Docs.

And make sure your page structure is valid:

<div data-role="page" id="start"> 
    <a href="#dialog" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">Find</a>
</div> 

<div data-role="dialog" id="dialog">
    <div data-role="header" data-theme="e">
        <h1>Foo</h1>
    </div>
    <div data-role="content" data-theme="e">
        <p>Bar</p>
    </div>
</div>​

Working jsfiddle example

Update according to your full html:

Don't including jQuery 1.7.1 AND 1.6.4, remove the script tag for jQuery 1.6.4 and include jQuery Mobile JS instead after including jquery 1.7.1. Your includes should look like this:

<script type="text/javascript" src="../../Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript" src="/Content/mobile/jquery.mobile-1.1.0.js"></script>
<link href="/Content/mobile/jquery.mobile-1.1.0.css" rel="stylesheet" type="text/css"/>

Upvotes: 1

Related Questions