 |
การใช้ Jquery Dialog Form ให้ Load เฉพาะ ส่วน ผมอยากทราบวิธีการทำให้ Jquery Dialog ในรูปแบบ Form หลังจาก insert ข้อมูลเรียบร้อยแล้ว |
|
 |
|
|
 |
 |
|
ผมอยากทราบวิธีการทำให้ Jquery Dialog ในรูปแบบ Form หลังจาก insert ข้อมูลเรียบร้อยแล้ว
ให้มันLoad เฉพาะ ส่วน ไม่ใช่refresh ใหม่ทั้งหน้า อยากให้มันดูเหมือน ajax จิงๆน่ะครับ
Code (PHP)
if ($("#myform").validate().form() == true) {
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="../images/ajax-loader.gif" align="absmiddle"> <span class="loading">Loading Comment...</span>');
$.ajax({
modal: true,
type: "POST",
url: "../query/Query_Section.php",
data: dataString,
error: function() {
alert("Failed to submit");
},
cache: false,
success: function(html){
$("#display").after(html);
location.reload();
}
});
ส่วนข้างบนคือส่วนของ Jquery ที่ได้ส่ง การ post ไปแล้ว ตอนนี้ที่ผมทำคือ ให้ refresh หน้าหลักทั้งหน้าครับ
อยากทราบว่าพอมีวิธีที่ทำให้ Load เฉพาะส่วนได้ป่ะครับ รบกวนผู้รู้ช่วยตอบ
หน่อยครับ
Code (PHP)
<? /*## แสดงส่วนของ master_section ##*/ ?>
<div id="flash"></div>
<div id="display"></div>
<table width="98%" border="0" align="center">
<tr>
<td class="head" colspan="2">master_section
<hr align="center" width="100%" size="2" noshade="noshade"
color="#db002b" /> </td>
</tr>
<tr>
<td height="34" class="normal"><label>
<img src="../images/plus.png" width="16" height="16" />
<input name="btnAddSec" type="submit" class="normal" value="เพิ่มรายการ" id="create-sec" />
</label>
</td>
<td align="right" class="normal">
ค้นหา
<label> <input name="textfield22" type="text"
class="normal" size="40" /> <input name="Submit232"
type="submit" class="normal" value="ค้นหา" />
</label>
</td>
</tr>
<tr>
<td bgcolor="#cadded" colspan="2" >
<table width="98%" border="0" align="center" cellspacing="1" class="table1">
<tr>
<td width="33%" height="20" align="center" bgcolor="#a6b4bb" class="boldwhite">Department</td>
<td width="33%" height="20" align="center" bgcolor="#a6b4bb" class="boldwhite">Section</td>
<td width="54%" align="center" bgcolor="#a6b4bb" class="boldwhite">Status</td>
<td width="13%" bgcolor="#a6b4bb"> </td>
</tr>
<?
$slc_all = "SELECT SectionID,master_section.DepartmentID,SectionName ";
$slc_all.= ",SectionStatus,master_section.EffDate,master_department.DepartmentName ";
$slc_all.= ",master_division.DivisionName,master_division.DivisionID ";
$slc_all.= "FROM master_section INNER JOIN master_department ";
$slc_all.= "ON master_section.DepartmentID = master_department.DepartmentID ";
$slc_all.= "INNER JOIN master_division ";
$slc_all.= "ON master_department.DivisionID = master_division.DivisionID ";
$slc_all.= "ORDER BY SectionID DESC ";
$result_all = mysql_query($slc_all,$db_con)or die("ไม่สามารถค้นหา ข้อมูล Section ได้");
/* ### Code แบ่ง Page ###*/
$i=1;// $i คือ ตัวเลขที่ใช้คำนวณ การสร้างสีครับ
/* เป็นการแบ่งหน้า*/
$Per_Page =15;
if(!$Page)
{
$Page =1;
}
$Prev_Page =$Page-1;
$Next_Page = $Page+1;
$Page_Start = ($Per_Page*$Page)-$Per_Page;
$Num_Rows = mysql_num_rows($result_all);
if($Num_Rows<=$Per_Page)
{
$Num_Pages=1;
}
else if(($Num_Rows%$Per_Page)==0)
{
$Num_Pages = ($Num_Rows/$Per_Page);
}
else
{
$Num_Pages = ($Num_Rows/$Per_Page)+1;
}
$Num_Pages=(int)$Num_Pages;
if( ($Page>$Num_Pages) || ($Page<0) )
{
print "จำนวน$Pageมากกว่า$Num_Pages";
}
//เพิ่ม Limit เข้าไป
$slc= $slc_all." LIMIT $Page_Start,$Per_Page ";
$result_sec =mysql_query($slc,$db_con)or die("ไม่สามารถติดต่อฐานข้อมูลได้");
while($row_sec = mysql_fetch_array($result_sec))
{
$bgcolor =($i++ %2)?'#FFFFFF':'#F3F2F4';
//ตรวจสอบ
$status = "Active";
if($row_sec["SectionStatus"] == 0)
{
$status="InActive";
}
else
{
$status="Active";
}
$effDate;
$effDate = convertDateTimeDBToString($row_sec['EffDate']);
?>
<tr bgcolor="<? echo $bgcolor; ?>" >
<td height="32" id = '<? echo $row_sec["DepartmentID"];?>'><? echo $row_sec["DepartmentName"]; ?></td>
<td height="32" id = '<? echo $row_sec["SectionName"];?>'><? echo $row_sec["SectionName"]; ?></td>
<td height="32" id = '<? echo $row_sec["SectionStatus"]; ?>' ><? echo $status; ?> </td>
<td height="32"><table width="65%" border="0" align="center">
<tr>
<td align="center" id = '<? echo $effDate; ?>' >
<a id='<? echo $row_sec["SectionID"];?>' class='edit' title='Edit'>
<img src="../images/edit.png" width="17" height="16" style="cursor:pointer" /></a></td>
<td align="center"><img src="../images/del.png" width="13" height="16" /></td>
</tr>
</table></td>
</tr>
<?
}
if($Num_Rows==0)
{
?>
<tr>
<td colspan="4" align="center" class="normal">ไม่มีข้อมูลในรายการนี้</td>
</tr>
<?
}
?>
</table>
<?
if($Num_Rows!=0)
{
?>
<div align="right" class="normal">
<?
if($Prev_Page)
{
?>
<a href="<?=$_SERVER['PHP_SELF']?>?Page=<? echo $Prev_Page ?>" class="normal"><< Back </a>
<?
}
for($index=1;$index<=$Num_Pages;$index++)
{
if($index!=$Page)
{
?>
[<a href="<?=$_SERVER['PHP_SELF']?>?Page=<? echo $index ?>" class="data"><? echo $index?></a>]
<?
}
else
{
echo "<b> $index </b>";
}
}
if($Page!=$Num_Pages)
{
?>
<a href="<?=$_SERVER['PHP_SELF']?>?Page=<? echo $Next_Page ?>" class="normal"> Next >></a>
<?
}
} mysql_close($db_con);
mysql_free_result($result_sec);
?>
</div>
<p> </p> </td>
</tr>
</table>
ส่วนนี้จะเป้นส่วนที่จะให้load แสดงผลครับ
ขอบคุณมากครับ
Tag : - - - -
|
|
 |
 |
 |
 |
Date :
2009-11-01 15:38:21 |
By :
kingnaka |
View :
7725 |
Reply :
7 |
|
 |
 |
 |
 |
|
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
ดูในบทความ Ajax Tutorials น่ะครับ มีอยู่บางบทความครับ
|
 |
 |
 |
 |
Date :
2009-11-01 19:36:57 |
By :
webmaster |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
ผม งง อยู่อย่างหนึ่งทำไมต้อง location.reload(); ด้วยละครับ
คือหน้าที่คุณไป get ข้อมูลมาชื่อว่า Query_Section.php ใช่รึเปล่าครับ ค่าที่ถูกส่งกลับมามันเป็นยังไงผมก็ไม่รู้ด้วยสิครับแต่ถ้าคุณหมายความว่าจะเอาข้อมูลที่ใช้ ajax ไปดึงมาแล้วเอามาใส่ใน <div id="display"></div> ละก็ ลองแบบนี้ดูนะ
Code (PHP)
success: function(html){
$("#display").html(html);
}
ตัดแค่ location.reload(); ไปแค่นั้นเองครับ
|
 |
 |
 |
 |
Date :
2009-11-02 02:31:34 |
By :
ผ่านมา |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
ค่าที่ส่งกลับมาจะไม่มีครับ
จะให้มัน query insert ไปในไฟล์ Query_Section ครับ
และที่ผมใช้ reload เพราะในหน้าที่แสดงผลข้อมูล ผมอยากให้มัน อัพเดต หลังจาก insert ไปแล้ว จึงให้มัน reload ครับ
แต่ที่อยากให้มันทำได้คือ ไม่อยากให้มัน refresh ทั้งหน้าน่ะ จะทำได้หรือเปล่าครับ
|
 |
 |
 |
 |
Date :
2009-11-02 14:53:13 |
By :
kingnaka |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
รบกวนผู้รู้ช่วยตอบหน่อยน่ะครับ
หรือว่าแบบที่ผมเข้าใจมันผิดประการใดก็ขอชี้แจงด้วยครับ
|
 |
 |
 |
 |
Date :
2009-11-03 10:31:23 |
By :
kingnaka |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
Quote:HTML Markup
<div id="loader" class="loading"></div>
Quote:CSS
DIV#loader {
border: 1px solid #ccc;
width: 500px;
height: 500px;
}
/**
* While we're having the loading class set.
* Removig it, will remove the loading message
*/
DIV#loader.loading {
background: url(images/spinner.gif) no-repeat center center;
}
Quote:jQuery
// when the DOM is ready
$(function () {
var img = new Image();
// wrap our new image in jQuery, then:
$(img)
// once the image has loaded, execute this code
.load(function () {
// set the image hidden by default
$(this).hide();
// with the holding div #loader, apply:
$('#loader')
// remove the loading class (so no background spinner),
.removeClass('loading')
// then insert our image
.append(this);
// fade our image in to create a nice effect
$(this).fadeIn();
})
// if there was an error loading the image, react accordingly
.error(function () {
// notify the user that the image could not be loaded
})
// *finally*, set the src attribute of the new image to our image
.attr('src', 'images/headshot.jpg');
});
Quote:Added Functionality
$(img)
.load(function () {
$(this).hide();
// our bespoke ajax hit that's required with the image
// it will return the HTML for the <map> element and
// linked <area> element.
$.ajax({
url: 'image-map.php',
data: 'img=' + i.src, // the image url links up in our fake database
dataType: 'html',
success: function (html) {
// because we're inside of the success function, we must refer
// to the image as 'img' (defined originally), rather than 'this'
$('#loader')
.removeClass('loading')
.append(img)
.append(html);
// now show the image
$(img).fadeIn();
}
});
})
// code continues as before
ตัวอย่าง
http://jqueryfordesigners.com/demo/image-load-demo.php
ปล. ผมไม่รู้เรื่อง jquery เลยครับแต่อยากช่วยมากก็เลยค้นหาไปเจอตัวนี้มาไม่รู้ว่าได้หรือเปล่านะครับ
เครดิต http://jqueryfordesigners.com/image-loading/
|
 |
 |
 |
 |
Date :
2009-11-03 11:00:21 |
By :
somparn |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
ขอบคุณ คุณ phpbasic
เด้วไงลอง นำไปใช้ดูครับ
ขอบคุณมากครับ
|
 |
 |
 |
 |
Date :
2009-11-03 14:00:17 |
By :
kingnaka |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
คุณต้องส่ง response อะไรก็ได้กลับมาแล้วใช้ java จัดการกับ response ที่ถูกส่งกลับมาครับ ส่งมาเป็น json ก็ได้เพราะตราบไดที่คุณใช้ location.reload(); สิ่งที่คุณทำมาจะศูนย์เปล่า เพราะถ้าเป็นแบบนี้สู้คุณให้มัน reload หน้าแบบปกติยังจะดีกว่าอีกนะครับ เพราะสุดท้ายคุณก็ต้อง reload อยู่ดี
สรุปยังไงคุณก็ต้องใช้ข้อมูลที่ response มาครับ วิธีที่ง่ายที่สุดก็คือส่งมาว่า insert สำเร็จหรือไม่ ถ้าสำเร็จก็ใช้ $().load() ไปโหลดหน้าแสดงข้อมูลมาไว้ใน div ก็ได้ (.load() ก็คือ ajax เหมือนกัน)
|
 |
 |
 |
 |
Date :
2009-12-10 12:01:19 |
By :
เหอๆ |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
|
|