Hi, I need to create modal window with iframe. Iframe will show some data which i will select and will press button to post to page. There are two pages. One is index.php and other is ajax.php. index.php contains list of name and surnames, and for to add new name and surname i need modal ajax pop-up window and I will fill fields with info then press button to post back index.php. Similar example is here: http://jqueryui.com/demos/dialog/modal-form.html But i need pop-up window to be iframe, because there are some more data to choice from. Can someone give me an example please of sample code.
In the example you posted, replace <div id="dialog-form" title="Create new user"> <p class="validateTips">All form fields are required.</p> <form> <fieldset> <label for="name">Name</label> <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /> <label for="email">Email</label> <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" /> <label for="password">Password</label> <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" /> </fieldset> </form> </div> Code (markup): with <div id="dialog-form" title="Create new user"> <p class="validateTips">All form fields are required.</p> <iframe src="..." width="..." height="..."></iframe> </div> Code (markup):
Please do not PM for personalized help when you can ask a question in the forum. In more detail: Basically take the example jquery code you posted, and replace the form with an iframe and it will show a modal iframe. From that iframe, use "top" to access the parent window, and top.document to access the parent document. This will only work if both pages (the top and the iframe) are on the same domain.
I have done what you said, copied it into my wamp and modified required fields, I have created external ajax.php for to use in iframe and inserted into that file removed fields from first file and it gaved me three undefined message for every column Please help me at least on this form, not by PM
May I ask why you want the popup window to be an iframe? Since (from what I know) it's pretty complex to communicate with iframes and most of the times other solutions are better/easier ( such as including or dynamicly loading content into a div ). I may be misunderstanding your case but wouldn't a simple use of AJAX (to dynamicly load the content into the 'popup window') solve your matter? Furthermore could you provide us with your code perhaps? EDIT: since you're using jquery you can use 'their' ajax() function to load content dynamicly into the dialog div. For example: <script> $.ajax({ url: "page_to_load.html", success: function(return_html){ $("div#dialog-content").html(return_html); } }); </script> <div id="dialog-form" title="Create new user"> <p class="validateTips">All form fields are required.</p> <div id="dialog-content"> </div> </div> HTML: Again if that's not what you mean, just tell. If it is, let me know and I'll write the code for your case for if you need assistance on that.
See URL here, then you will understand why I need it: http://turkela.com/prj/benoistco/wp-content/plugins/project.php
see link I have posted, where can I use your code there? currently I have added fancybox for iframe, check-boxed rows have to be posted main page to specific columns
What about something like this: <script> function loadFile(filename, data) { $.ajax({ url: filename, type: "POST", date: data, success: function(return_html){ $("div#dialog-form").html(return_html); } }); } </script> <div id="dialog-form" title="Create new user"> </div> HTML: And then use the loadFile function to load the next pages into the dialog div dynamicly. E.g.: file1.php: <include jquery> <a onClick="loadFile('file2.php', 'clicked_item=1');">Item 1</a> <a onClick="loadFile('file2.php', 'clicked_item=2');">Item 2</a> ... etc ... ... but I assume you have a PHP code that gets the items that can be clicked, then use the ID of the item to pass through to the next page ... HTML: file2.php: <include jquery> <?php //... the next page, is called through file1.html and output is shown in dialog/'popup-window' (e.g. your form) ... /* ... E.G.: Handle POST data gained from previous page and show new form ($_POST['clicked_item']) ... */ ?> <form id='myForm'> ... some form input fields ... <input type="button" onClick="loadFile('next_file.php', $("#myForm").serialize());"> </form> PHP: where in the 2nd file the onClick event of the button can be anything that needs to be done with the form data ( e.g. in your case inserting the fields, but I do not know what code you're using for that ). Just an example to give you an idea of how my approach would be (without the hassle of having an iframe).
Thank you very much for trying to help me I think this will not work with this, the code in that file is: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="http://turkela.com/prj/benoistco/wp-content/plugins/web-invoice/js/jquery.fancybox-1.3.4.pack.js"></script> <link rel='stylesheet' href='http://turkela.com/prj/benoistco/wp-content/plugins/web-invoice/css/jquery.fancybox-1.3.4.css?v=1.3.4' type='text/css'type='text/css' media='all' /> <script type="text/javascript"> $(document).ready(function() { $("#wp_tables_reloaded").fancybox({ 'width' : '75%', 'height' : '75%', 'autoScale' : false, 'transitionIn' : 'none', 'transitionOut' : 'none', 'type' : 'iframe' }); }); </script> </head> <body> <?php if(isset($_GET[''])) {echo '1'; return;} include('./../../wp-load.php'); global $wpdb; $wp_reloaded = get_option('wp_table_reloaded_tables'); if(isset($_GET['table_id'])) { $data = get_option($wp_reloaded[$_GET['table_id']]); echo '<form action="" method="">'; echo '<table border="1"><tr><th>Select</th><th>Qty</th><th>Model No</th><th>Wt</th><th>Description</th></tr>'; for($i=1; $i < count($data['data']); $i++) { echo '<tr><td><input type="checkbox"></input><td>'.$data['data'][$i][1].'</td><td>'.$data['data'][$i][0].'</td><td>'.$data['data'][$i][2].'</td><td>'.$data['data'][$i][4].'</td></tr>'; } echo '</table></form>'; echo '<a href="#">Insert</a>'; } elseif(isset($_GET['table'])) { $url = get_option('siteurl').'/wp-content/plugins/project.php'; foreach ($wp_reloaded as $cus) { $result = get_option($cus); echo '<a id="wp_tables_reloaded" href="'.$url.'?table_id='.$result['id'].'">'.$result['name'].'</a><br /></body></html>'; } ?> <?php } else { ?> <div id="content"> <table> <tr><th>Qty</th><th>Model.No</th><th>Wt</th><th>Description</th></tr> <tr><td><input type="text" name="qty" id="name" /></td> <td><input type="text" name="modelno" id="name" /></td> <td><input type="text" name="wt" id="name" /></td> <td><input type="text" name="desc" id="name" /></td></tr> </table> <br /> <li><a id="wp_tables_reloaded" href="http://turkela.com/prj/benoistco/wp-content/plugins/project.php?table">Select Inventory Items</a></li> </div> <?php } ?> PHP:
http://turkela.com/prj/benoistco/wp-content/plugins/project.php# seems like you got it to work already ?