Home/ Questions/Q 8157569
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T17:19:45+00:00

I am using the library 1.1. I am trying to get a simple dialog

  • 0

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>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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"/>
    • 0