CODEWITHSUNDEEP
jquery-mobile
user1916608
user1916608

Reputation: 51

Jquery Mobile Dialog Form

I'm working with jQueryMobile and I want to use a form to input some values in a database.

I have a form which works and uses the test123.php to submit data to a database this:

  <form method="get" action="test123.php?test=1">
         <input type="submit" value="spiegel" />
  </form>

I get a button, but the new page is shown as a normal page.

With this solution:

  <a  data-role="button" data-rel="dialog" href="#test">
           spiegel
  </a>

I get a dialog with the same output (i get the message "spiegel").

But I want the confirmation site to appear as a dialog.

A link with data-rel"dialog" so i want to use my php site but i want to look it like a dialog after i submitted my data do a database. I'm not sure how to do this.

Thank you for your help

Upvotes: 0

Views: 2450

Answers (3)

Erum
Erum

Reputation: 790

<!DOCTYPE html> 
<html> 
<head>
  <!--add all your jquery,jquery mobile as well as its CSS refrences here-->
 </head>
<body>
<div data-role = "page">
    <div data-role="header">
<a href="#login" data-role="button" data-rel="dialog" data-transition="pop" data-icon="plus">opendialogpage</a>
</div>
    <div data-role="content">
<p>just for sample display</p></div>
</div>
    <div data-role="dialog" id="login">
    <div data-role="header" data-theme="e"></div>
    <div data-role="content">
        <form id="login_form">
            <fieldset>
                <div data-role="fieldcontain">
                <label>USER NAME:</label>
                <input type="text" id="name" value=""/>
                </div>
                <div data-role="fieldcontain">
                    <label>EMAIL ID:</label>
                    <input type="text" id="email" value=""/></div>
            </fieldset>  
</form>
</div>
</div>
</body>

Upvotes: 1

TDave00
TDave00

Reputation: 374

I struggled with this too for a while. Finally took a look at the html that jquery mobile creates for a dialog page. Just create a page with the structure below, and it will always open as a dialog page (as though it had been opened from a link with data-rel="dialog").

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 
<!-- include your css, jquery, and jquery mobile files here -->
</head> 
<body> 
<div data-role="dialog">
<div data-role="content">   
<!-- content goes here -->
</div><!-- /content -->
</div><!-- /dialog -->
</body>
</html>

All you are doing is changing data-role="page" to data-role="dialog".

Upvotes: 0

cjds
cjds

Reputation: 8426

Okay, so you want data from your PHP page to open in the dialog and not in the next page.

What your looking for is AJAX.

AJAX allows you to refresh and change part of your HTML page without changing the entire page.

$.ajax({
   url: 'test123.php',
   type: 'POST',
   data: {spiegel : 'spiegel'}
   error : function (){ document.title='error'; }, 
  success: function (data) {
    $('#ajax_content').html(data);
}

});

So this function will return into variable data whatever was generated by test123.php

Link to Docs: http://api.jquery.com/jQuery.ajax/

Upvotes: 0

Related Questions