#7797 closed enhancement (duplicate)

Opened October 14, 2011 10:37PM UTC

Closed October 15, 2011 12:37PM UTC

Last modified October 15, 2011 01:33PM UTC

use iframe for navegate

Reported by: ppkrauss Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.dialog Version: 1.8.16
Keywords: Cc:
Blocked by: Blocking:
Description

It is so ease for user (a programmer that is using jQuery-UI) point a URL

to navigate, like a "help hypertext", into the modal dialog.

Attachments (0)
Change History (4)

Changed October 14, 2011 11:02PM UTC by ppkrauss comment:1

Another problem have a not simple (!!!) work-around,

Suppose that the (modal) dialog is a form that need to validate data and return to yourself.

<?php
/**
 * form_ws.php
 * REMOTE FORM DEMO: submit and return here with php-processed fields.
 * (need only HTML fragments)
 */
 $s = @$_POST['s'];
 $s = $s? "OLD($s)": ''; // do something with it
?>
<h2>On dialog opened form</h2>
<form action="form_ws.php" onsubmit="return postFormAtResult(this,'#_callModal_',event);">
	<input type="text" size="40" name="s" placeholder="Enter something..." value="<?=$s?>" />
	<input type="submit" value="GO" />
</form>

Then suppose the man page, the caller, it need some extra-javascript general functions (postFormAtResult and callModal) to perform the "remote recurrence".

<!DOCTYPE html>
<html>

<head>

<title>form_getFormModal</title>
<link type="text/css" href="css/ui-lightness/jquery-ui.custom.css" rel="stylesheet" />	
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
/**
 * postFormAtResult 1.0
 *  Use at tag form submit="postFormAtResult(this,'#name',event)"
 *  to show response-form data at a result-div.
 */
function postFormAtResult(form,result,event) {
	var f = $(form);
	event.preventDefault(); 
	$.post(	f.attr('action'), 	// url
		f.serialize(),		// send all input
		function( data ) {	// resopnse with all result
		  $( result ).empty().append( data );
		}
	);
	return false;
}

/**
 * callModal 1.0
 *   Use into a onClick event to show a jQueryUI-modal-dialog.
 */
function callModal(event,url,title) {
	return callModal_main(event,url,title,'70%',400);
}
var callModal_main_obj;  // global for close, see INIT.
function callModal_close() {
	callModal_main_obj.remove();
}
function callModal_main(event,url,dgtitle,dgwidth,dgheight) {
	event.preventDefault();
	if (dgtitle==undefined) {dgtitle='';}
	callModal_main_obj.load(
		url, {}, //old {_idresult_: idresult},  removido porque polui o $_POST e o usuário!
		function (responseText, textStatus, XMLHttpRequest) {
		    callModal_main_obj.dialog({
			width: dgwidth,
			height: dgheight,
			modal: true,
			title: dgtitle,
			close: function(event, ui) {
			    callModal_main_obj.remove();
			}
		    }); //dialogg
		} // function
	); // load
	return false;
}
$(document).ready(function() {  // INIT callModal
	callModal_main_obj = $('<div id="_callModal_" style="display:none">').appendTo('body');
});
</script>
</head>

<body>
<a href="#" onclick="callModal(event,'form_ws.php?modo=form', 'TITLE')">ACTIVATE MODAL FORM</a>
</body>
</html>

Changed October 15, 2011 12:37PM UTC by scottgonzalez comment:2

resolution: → duplicate
status: new → closed

Changed October 15, 2011 12:37PM UTC by scottgonzalez comment:3

Duplicate of #5300.

Changed October 15, 2011 01:33PM UTC by ppkrauss comment:4

Replying to [comment:3 scott.gonzalez]:

Duplicate of #5300.

This tiecket NOT is a #5300 duplication (!): THERE ARE A PROBLEM OF NAVIGATION,

$( el ).load( url ).dialog();

IS NOT A SOLUTION FOR BASIC HTML HYPERTEXT: user can not navigate.

... And solutions like "parse all page",

http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/

are not an acceptable solution (it is a hack!).

THIS TICKET IS ABOUT PROBLEM of NAVIGATION, and the added comment show how this also impact on FORMS (send/response in the same dialog).