2012-03-03 4 views
1

фона:Как поместить эту форму в диалог?

Эта страница представляет собой форму, имеет таблицу, чтобы выбрать для разных согласия автора пользователей (только для чтения, редактирования) Для каждого переключателе, имя идентификатор пользователей.

Вопрос:

1) Как это можно поместить в диалоговом с помощью JQuery? Как я понял, что всплывающее окно не является новой страницей, как обычно, но только форма в элементе <div>, мне нужно использовать datatable в этом случае, поэтому я не могу просто сделать это.

2) Как получить значение после закрытия всплывающего окна? Для каждого selectbox имя является идентификатором пользователей, я хотел бы получить идентификатор пользователя и разрешение для каждого пользователя.

Благодарим Вас за любезно помочь

Это add.php (форма верхнего уровня)

<? 
include("../connection/conn.php"); 
session_start(); 

if($_SERVER['REQUEST_METHOD'] == "POST"){ 

if (!isset($_POST['subscribe'])) 
$_POST['subscribe']=0; 
if (!isset($_POST['unsubscribe'])) 
$_POST['unsubscribe']=0; 

$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 

try { 

    $listName = $_POST['lname']; 
    $listFromName = $_POST['fname']; 
    $listReplyTo = $_POST['remail']; 
    $listSubject = $_POST['sub']; 
    $listRemindSub = $_POST['subscribe']; 
    $listRemindUnSub = $_POST['unsubscribe']; 
    $listReminder = $_POST['creminder']; 

    $query="INSERT INTO list (ListID,ListName,FromName,ReplyTo,Subject,IsRemindSub,IsRemindUnSub,CreateDate,Reminder) VALUES ('',?,?,?,?,?,?,CURDATE(),?)"; 
    $stmt = $conn->prepare($query); 


    $stmt->bindParam(1, $listName , PDO::PARAM_STR); 
    $stmt->bindParam(2, $listFromName, PDO::PARAM_STR); 
    $stmt->bindParam(3, $listReplyTo, PDO::PARAM_STR); 
    $stmt->bindParam(4, $listSubject, PDO::PARAM_STR); 
    $stmt->bindParam(5, $listRemindSub, PDO::PARAM_INT); 
    $stmt->bindParam(6, $listRemindUnSub, PDO::PARAM_INT); 
    $stmt->bindParam(7, $listReminder, PDO::PARAM_STR); 

    $stmt->execute(); 


} 
catch(PDOException $e) 
    { 
    die ($e->getMessage().'<a href="add.php"> Back</a>'); 
    $conn->rollBack(); 
    } 


try { 
    $lastID=$conn->lastInsertId(); 
    $query="INSERT INTO require_attributes (ReqID,ListID,Attribute,Tag) VALUES ('',$lastID,'Email','{email}')"; 
    $stmt = $conn->prepare($query); 
    $stmt->execute(); 
    $query="INSERT INTO require_attributes (ReqID,ListID,Attribute,Tag) VALUES ('',$lastID,'FirstName','{fname}')"; 
    $stmt = $conn->prepare($query); 
    $stmt->execute(); 
    $query="INSERT INTO require_attributes (ReqID,ListID,Attribute,Tag) VALUES ('',$lastID,'LastName','{lname}')"; 
    $stmt = $conn->prepare($query); 
    $stmt->execute(); 
} 
catch(PDOException $e) 
    { 
    die ($e->getMessage().'<a href="add.php"> Back</a>'); 
    $conn->rollBack(); 
    } 

try { 
    $userID = $_SESSION['username']; 
    $query="INSERT INTO user_list (UserID,ListID,UserListRights) VALUES (?,$lastID,'Edit')"; 
    $stmt = $conn->prepare($query); 
    $stmt->bindParam(1, $userID, PDO::PARAM_STR); 

    $stmt->execute(); 

} 
catch(PDOException $e) 
    { 
    die ($e->getMessage().'<a href="add.php"> Back</a>'); 
    $conn->rollBack(); 
    }  


$conn = null; 

?> 
<div id="stylized" class="myform"> 
<div style="text-align:center;font-weight:bold;">You have created a list. By default Mail Address, First Name , Last Name is in your list. Add more field if you want. <a href='add.php'>Back</a></div> 
<div class="spacer"></div> 
</div> 
<? 
}else{?> 


<!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> 

<script src="../plugin/jquery-1.6.1.min.js"></script> 
<script src="../plugin/jquery.validate.min.js"></script> 
<script src="../plugin/jquery.form.js"></script> 
<link rel="stylesheet" type="text/css" href="../style/form.css" /> 
<script> 
function loadDialogBox() {' 
    $("#myEmptyDiv").load("popup.php", function() { 

     $("#myEmptyDiv").dialog({ 
     title: "Permission Setting", 
     autoOpen: false, 
     buttons: { "Submit" : submitDialogForm() } 
     }); 
     $("#myEmptyDiv").dialog("open"); 
    }); 
} 

$(function() { $("#openDialog").on('click', loadDialogBox); }); 

$(document).ready(function(){ 
$("#addlist").validate(); 
}); 
</script> 

</head> 
<body> 
<div id="stylized" class="myform"> 
<form id="addlist" method="post" action="add.php" > 
<h1>Create your new subscriber list</h1> 
<p>Create a new list before adding subscriber <label class="right"><em class="dot">*</em> indicates required</label></p> 

<label><em class="dot">*</em> List name: 
<span class="small">Add your list name</span> 
</label> 
<input id="lname" name="lname" class="required" /> 

<div class="spacer"></div> 

<label>Reminder: 
<span class="small">Remind the details of your list</span> 
</label> 
<textarea id="creminder" name="creminder" cols="52" ></textarea> 

<div class="spacer"></div> 

<p>Permission Setting ...</p> 

<a id="openDialog" href="#">Permission Settings</a> 
<label>Or open to other users</label> <input type="checkbox" class="checkbox" name="public" value="1"> 


<div class="spacer"></div> 

<p>Email me when ...</p> 
<label>People subscribe</label> <input type="checkbox" class="checkbox" name="subscribe" value="1"> 
<label>People unsubscribe</label> <input type="checkbox" class="checkbox" name="unsubscribe" value="1"> 


<div class="spacer"></div> 
<input class="submit" type="submit" name="submit" value="Submit"/> 
<div class="spacer"></div> 

</form> 
<div class="spacer"></div> 
</div> 
<br><br><br> 
<div id="stylized" class="myform"> 
<? 
try{ 
$sql = ' 
    SELECT * 
    FROM  list,user_list 
    WHERE user_list.UserID=? 
    AND list.ListID=user_list.ListID 
'; 
$stmt = $conn->prepare($sql); 
$stmt->execute(array($_SESSION['username'])); 
$result= $stmt->fetchAll(); 
$num_rows= $stmt->rowCount(); 
} 
catch(PDOException $e) 
    { 
    die ($e->getMessage().'<a href="add.php"> Back</a>'); 
    } 
$conn = null; 
if ($num_rows == 0) { 
    echo '<div style="text-align:center;font-weight:bold;">You have not created any list yet.</div>';} 
else { 
    echo '<h1>Your Subscriber List</h1> <p>You have created '.$num_rows.' list(s).</p>'; 
foreach ($result as $set) 
{ 
echo '<div style="font-weight:bold;">List Name : '.$set['FromName'].'</div><br>'; 
echo '<div style="font-weight:bold;">Subscriber : </div><br>'; 
echo '<div style="font-weight:bold;">Create Date : '.$set['CreateDate'].'</div><br>'; 
echo '<hr>'; 
}} 
    ?> 

<div class="spacer"></div> 
</div> 
</body> 
</html> 

<? 
} 
?> 

Это popup.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <style type="text/css"> 
     @import "../plugin/datatable/media/css/demo_page.css"; 
     @import "../plugin/datatable/media/css/demo_table.css"; 
    </style> 
    <script type="text/javascript" src="../plugin/datatable/media/js/jquery.js"></script> 
    <script type="text/javascript" src="../plugin/datatable/media/js/jquery.dataTables.js"></script> 
    <script> 

    function submitDialogForm() { 
    $.post("add.php", $("#myEmptyDiv form").serialize(), function(data) { 
    $("#yourUserIdDisplay").val(data.userId); 
    }); 
} 
    $(document).ready(function() { 
    $('#viewSub').dataTable(); 
    }); 
    </script> 
    </head> 
<body> 
<? 
include("../connection/conn.php"); 
session_start(); 
$sql = 
    "SELECT UserID,Name,Rights,Position 
    FROM  user 
    WHERE UserID != ? 
    AND Rights != 'Admin' 
    "; 
$stmt = $conn->prepare($sql); 
$stmt->execute(array($_SESSION['username'])); 
$num_rows= $stmt->rowCount(); 
if ($num_rows == 0) 
echo "There is no another user in this system"; 
else{ 
$result = $stmt->fetchAll(); 
?> 
<form> 
<table width="100%" class="display" id="viewSub"> 
<thead> 
<tr> 
<th field="col1" width="40%">Name:</th> 
<th field="col2" width="40%">Position:</th> 
<th field="col2" width="20%">Permission:</th> 
</tr> 
</thead> 
<tbody> 
<? 
foreach ($result as $set) 
{ 
    echo "<tr><td>".$set['Name']."</td><td>".$set['Position']."</td><td><select name=".$set['UserID']."><option value='default'>Not Share</option><option value='Read'>Read Only</option><option value='Edit'>Editable</option></select></td></tr>"; 
} 
?> 
</tbody> 
</table> 
<div style='text-align:center'> <button id='save'>Confirm</button></div> 
</form> 
<? 
} 
?> 
</body> 
</html> 

ответ

2

Во-первых, для загрузки страницы в диалог из jQuery, попробуйте что-то вроде этого:

function loadDialogBox() { 
    $("#myEmptyDiv").load("url-to-this-form.php", function() { 

     $("#myEmptyDiv").dialog({ 
     title: "your dialog title", 
     autoOpen: false, 
     buttons: { "Submit" : submitDialogForm() } 
     }); 
     $("#myEmptyDiv").dialog("open"); 
    }); 
} 

Теперь вы можете загрузить и открыть форму с помощью вызова функции loadDialogBox. Может быть, что-то вроде этого:

<a id="openDialog" href="#">Open Dialog</a> 

$(function() { $("#openDialog").on('click', loadDialogBox); }); 

Затем создайте функцию представить следующим образом:

function submitDialogForm() { 
    $.post("submit-page.php", $("#myEmptyDiv form").serialize(), function(data) { 
    // here you can parse your return data for userid or permission settings that come back from server 
    $("#yourUserIdDisplay").val(data.userId); 
    }); 
} 

Это будет сериализовать диалоговые данные формы и отправить его на сервер.

Надеюсь, это поможет!

+0

Жаль, что я новичок в этом. Итак, Open popup box - это способ открыть всплывающее окно? – user782104

+0

, пожалуйста, см. Обновленный ответ, он объясняет полное решение немного больше – shanabus

+0

Спасибо, я ищу результат отправки – user782104

0

используя диалог jQueryUI. Включите зависимости виджет диалога jQueryUI и CSS

http://jqueryui.com/demos/

/* ajax load form */ 
$('<div>').load(formURL, function(){ 

/* initialize dialog within ajax sucecss callback*/ 
    $(this).dialog({ 
     /* add any options from API*/ 

     close: function(){ 
      /* give form an ID in markup */ 


      /* how to access a field value */ 
      alert($('#formID').find('[name="name"]').val()); 
     } 

    }); 

}) 
+0

Спасибо. На самом деле я использую jquery easyui, и лучше использовать jquery ui для выполнения такой работы? – user782104

+0

не лучше ... однако никогда не указывалось. Должна быть легко адаптирована к использованию ui, которую вы используете – charlietfl

+0

, вам нужно будет немного погрузить данные. Поместите основные сценарии на главную страницу, нужно будет инициализировать в открывшемся диалоговом открытии, хотя данные для данных - большой избыток для простой формы – charlietfl

Смежные вопросы