2010-11-27 3 views
1

Кто-нибудь знает, как это сделать? каждый раз, когда я пробовал, он просто обновляет страницу и блокирует закрытие ui! Я включил образец блока ui, чтобы начать все.Передача значений формы для блокировки окна ui

благодарю вас заранее!

<script type="text/javascript"> 
    $(document).ready(function() { 

     $('#test').click(function() { 
      $.blockUI({ message: $('#question'), css: { width: '275px' } }); 
     }); 

     $('#yes').click(function() { 
      // update the block message 
      $.blockUI({ message: "<h1>Remote call in progress...</h1>" }); 

      $.ajax({ 
       url: 'wait.php', 
       cache: false, 
       complete: function() { 
        // unblock when remote call returns 
        $.unblockUI(); 
       } 
      }); 
     }); 

     $('#no').click(function() { 
      $.unblockUI(); 
      return false; 
     }); 

    }); 
</script> 

... 

<input id="test" type="submit" value="Show Dialog" /> 

... 

<div id="question" style="display:none; cursor: default"> 
     <h1>Would you like to contine?.</h1> 
     <input type="button" id="yes" value="Yes" /> 
     <input type="button" id="no" value="No" /> 
</div> 

вот мой длинный код, чтобы сравнить его против:

<?php require_once('Connections/rent.php'); ?> 
<?php 
if (!function_exists("GetSQLValueString")) { 
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{ 
    if (PHP_VERSION < 6) { 
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue; 
    } 

    $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue); 

    switch ($theType) { 
    case "text": 
     $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL"; 
     break;  
    case "long": 
    case "int": 
     $theValue = ($theValue != "") ? intval($theValue) : "NULL"; 
     break; 
    case "double": 
     $theValue = ($theValue != "") ? doubleval($theValue) : "NULL"; 
     break; 
    case "date": 
     $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL"; 
     break; 
    case "defined": 
     $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue; 
     break; 
    } 
    return $theValue; 
} 
} 

$colname_driver = "-1"; 
if (isset($_GET['id'])) { 
    $colname_driver = $_GET['id']; 
} 
mysql_select_db($database_rent, $rent); 
$query_driver = sprintf("SELECT * FROM rent WHERE id = %s", GetSQLValueString($colname_driver, "int")); 
$driver = mysql_query($query_driver, $rent) or die(mysql_error()); 
$row_driver = mysql_fetch_assoc($driver); 
$totalRows_driver = mysql_num_rows($driver); 

$user = $_GET['user']; 
?> 





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" href="resources/css_02.css"> 
     <style type="text/css"> 
@import "resources/jquery.keypad.css"; 
</style> 
<link rel="shortcut icon" href="resources/favicon.ico"> 
     <script src="resources/jquery.js"></script>  
     <script src="resources/jquery.keypad.js"></script> 
     <script src="resources/blockui.js"></script> 
     <script type="text/javascript"> 
    $(document).ready(function() { 

     $("#pay").click(function() { 
      $.blockUI({ message: $('#question'), css: { width: '1024px' } }); 
       return false; //stop the <form> from submitting, refreshing the page 
     }); 

     $('#yes').click(function() { 
      // update the block message 
      $.blockUI({ message: "<h1>Remote call in progress...</h1>" }); 

      $.ajax({ 
       url: 'wait.php', 
       cache: false, 
       complete: function() { 
        // unblock when remote call returns 
        $.unblockUI(); 
       } 
      }); 
     }); 

     $('#no').click(function() { 
      $.unblockUI(); 
      return false; 
     }); 

    }); 
</script>   
<script type="text/javascript"> 
$(function() { 
    $('#rentPaid').keypad(); 
    $('#driver').keypad(); 
    $('#previousRent').keypad(); 
}); 
</script>    
    <script> 
    $(document).ready(function(){ 
     $('#previousRent').change(function(){ 
     calcResult(); 
     }); 
     $('#rentPaid').change(function(){ 
     calcResult(); 
     }); 
    }); 
function calcResult() { 
     $('#result').val(parseFloat($('#previousRent').val() - $('#rentPaid').val())); 
    } 
    </script> 
<script type="text/javascript"> 
<!-- This function just gets the value of the text box 'name1' and assigned to the hidden for text box 'name2'... --> 
function valuepassing() 
{ 
var a = document.show.status.value; 
var b = document.show.pRent.value; 
var c = document.show.rentPaid.value; 
var d = document.show.pDate.value; 
var e = document.show.result.value; 
document.hiddenform.status2.value = a; 
document.hiddenform.pRent2.value = b; 
document.hiddenform.rentPaid2.value = c; 
document.hiddenform.pDate2.value = d; 
document.hiddenform.result2.value = e; 

<!-- This command submits the hidden form... Nothing but what you have done previously with submit button directly... Now you can get the value from 'name2' text box of hidden form through $_POST method and you can populate the datas as usual..... 
document.hiddenform.submit(); 
} 
</script> 
<title>Speedy CMS</title> 
</head> 
<body style="text-align: left;"> 





     <!-- div --> 

<div id="question" style="display: none; cursor: default; padding: 20px;"> 
     <span style="font-size: 24px; font-weight: bold;">Would you like to save all the changes and print the receipt?</span> 
     <p> 
     <div style="border: 1px black solid; padding: 20px; width: 175px; margin-left: auto; margin-right: auto;"> 
     <img src="resources/speedline.png" width="161" height="58" /> 
     <p> 
     DRIVER <?php echo $_GET['id']; ?> RECEIPT 
     <br /><span style="font-size:11px"> 
     <?php 
$oBeginDate = new DateTime('last wednesday'); 
$oEndDate = new DateTime('next wednesday'); 
echo $oBeginDate->format('d/m/Y') . ' to ' . $oEndDate->format('d/m/Y'); 
?> 
     </span> 
     <p> 
     <table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-size: 12px;"> 
<tr> 
    <td align="left">TOTAL RENT</td> 
    <td align="left">£<?php echo $_POST['pRent2']; ?></td> 
    </tr> 
    <tr> 
    <td align="left">RENT PAID</td> 
    <td align="left">£<?php echo $_POST['rentPaid2']; ?></td> 
    </tr> 
    <tr> 
    <td align="left">&nbsp;</td> 
    <td></td> 
    </tr> 
    <tr> 
    <td align="left">REMAINING</td> 
    <td align="left">£<?php echo $_POST['result2']; ?></td> 
    </tr> 
</table><br /> 
<span style="font-size:9px">THANK YOU FOR YOUR PAYMENT. PLEASE KEEP THIS RECEIPT FOR FUTURE REFERENCE. YOU WILL BE ASKED TO PRESENT IT AS EVIDENCE OF PAYMENT MADE.<p>RECEIVED ON <?php echo date("d/m/y H:i a"); ?><p></span> 
     </div> 
     </p> 
     <input type="button" id="yes" value="Save/Print" style="width: 150px; height: 100px;"/> 
     <input type="button" id="no" value="Cancel" style="width: 150px; height: 100px;"/> 
</div> 





     <!-- heading --> 

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td width="68%"><img src="resources/speedline.png" /></td> 
     <td width="32%" align="right"><span style="font-size: 12px;"><a href="main.php?user=<?php echo $_GET['user']; ?>" class='login2' style="font-size: 20px;">VIEW SUMMARY</a></span><img src='resources/spacer.gif' alt="" width='50px' height='1px'/><a href="index.php" class='login2' style="font-size: 20px;">LOG OFF</a></td> 
    </tr> 
</table> 
<p> 
<span style="font-size: 12px;"><?php echo date("l F d, Y, G:i A") ?><br> 
<img src='resources/spacer.gif' width='1px' height='10px'/> 
<p style="font-size: 20px;">RENT PAYMENT (<?php echo $_GET['user']; ?> for DRIVER <?php echo $_GET['id']; ?>) 
- <?php 
$oBeginDate = new DateTime('last wednesday'); 
$oEndDate = new DateTime('next wednesday'); 
echo $oBeginDate->format('d/m/Y') . ' to ' . $oEndDate->format('d/m/Y'); 
?> 





     <!-- hidden form --> 

<form action=" " name="hiddenform" method="post"> 
<input type="hidden" name="status2" /> 
<input type="hidden" name="pRent2" /> 
<input type="hidden" name="rentPaid2" /> 
<input type="hidden" name="result2" /> 
<input type="hidden" name="pDate2" value="<?php echo date("l F d, Y, G:i A") ?>" /> 
</form> 





     <!-- keypad form --> 

<form name="show"> 
    <table width="99%" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td width="33%">Status</td> 
     <td width="33%">Total Rent (£)</td> 
     <td width="33%">Rent Paid (£)</td> 
    </tr> 
    <tr> 
     <td><select name="status" style="width: 320px; font-size: 56px;" size="5"> 
     <option value="vacant" <?php if (!(strcmp("vacant", $row_driver['status']))) {echo "selected=\"selected\"";} ?>>vacant</option> 
     <option value="clear" <?php if (!(strcmp("clear", $row_driver['status']))) {echo "selected=\"selected\"";} ?>>clear</option> 
     <option value="awaiting" <?php if (!(strcmp("awaiting", $row_driver['status']))) {echo "selected=\"selected\"";} ?>>awaiting</option> 
     <option value="paid" <?php if (!(strcmp("paid", $row_driver['status']))) {echo "selected=\"selected\"";} ?>>paid</option> 
     <option value="not working" <?php if (!(strcmp("not working", $row_driver['status']))) {echo "selected=\"selected\"";} ?>>not working</option> 
     </select></td> 
     <td valign="top"><input name="pRent" type="text" id="previousRent" style="height: 60px; width: 200px; font-size: 56px;" value="<?php if ($row_driver['pRent'] == 0) { echo ""; } else { echo $row_driver['pRent']; } ?>"/></td> 
     <td valign="top"><input type="text" id="rentPaid" name="rentPaid" style="height: 60px; width: 200px; font-size: 56px;"/></td> 
    </tr> 
    <tr> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td>Last Paid On</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td> 
     <input type="text" id="pDate" name="pDate" style="border: #FFF; height: 60px; width: 400px; font-size: 46px;" readonly="readonly" value="<?php if ($row_driver['pDate'] == 0) { echo "N/A"; } else { echo $row_driver['pDate']; } ?>"/> 
     </td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td height="19">&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td>Remaining (£)</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td valign="top"><input type="text" id="result" name="result" style="border: #FFF; height: 60px; width: 200px; font-size: 56px;" readonly="readonly"/></td> 
     <td colspan="2" align="center"><input type="button" name="pay" id="pay" value="Pay" style="width: 150px; height: 100px;" onclick="return valuepassing()"/> 
     <img src="resources/spacer.gif" width="25px" height="1px" /> 
     <input type="reset" name="reset" id="reset" value="Reset" style="width: 150px; height: 100px;"/>  </td> 
    </tr> 
    <tr> 
     <td><img src="resources/spacer.gif" width="1" height="50px" /></td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
    </table> 
    </form> 





     <!-- footer --> 

<img src='resources/spacer.gif' width='1px' height='10px'/><img src='resources/spacer.gif' width='1px' height='10px'/><br /> 
<span class="bottom">&copy; <?php echo date("Y"); ?> Speedline</span> 





<?php 
mysql_free_result($driver); 
?> 

ответ

2

поведение по умолчанию для отправки страницы, вам необходимо отключить это с event.preventDefault() (или return false, но это излишеством ИМО), как это:

$('#test').click(function(e) { 
    $.blockUI({ message: $('#question'), css: { width: '275px' } }); 
    e.preventDefault(); //stop the <form> from submitting, refreshing the page 
}); 
+0

ни, кажется, работает ... blockui появляется на долю секунды, а затем исчезает :-( – methuselah 2010-11-27 21:11:26