隱藏，加載和顯示與JavaScript

DIV我有彼此幾頁用ID負載頁面交互，如下圖所示：隱藏，加載和顯示與JavaScript

內process.html

<div id="guest_details"> </div> 

<div id="first_start"> </div> 
<script> 
<! - 
$('#guest_details').load('?p=guest_details.html'); 
$('#first_start').load('?p=first_start.html') 
$('#guest_details').hide('slow'); 
$('#first_start').SlideUp('slow') 
-> 
</Script>

內guest_details.html

<form action="guest_details.php" <form method="POST" id="guest"> 
<!-- Some cell here --> 
<a onclick="$('#guest').submit();" class="button" id="first_start"> <span> <?php echo $button_submit;?> </span> </a> 
</Form>

那我想是當點擊提交按鈕，則：

數據guest_details.php
如果數據已經被髮送，則隱藏< DIV ID = 「guest_details」> </DIV>
表示節目< DIV ID = 「first_start」> </DIV>

但是，當我使它像上面那樣，不起作用，有人可以提供一個線索如何糾正？

非常感謝

來源

2010-11-25 jones

你甚至張貼使用AJAX的形式？ – 2010-11-25 18:53:58

btw：`.SlideUp（'slow'）`應該是`.slideUp（'slow'）` – 2010-11-25 18:59:10

你的html失敗了，窗體標籤中的一個表單：P。驗證你的代碼一段時間。 – 2010-11-25 18:59:54

在你前面的問題，你的標籤看，我以爲你是不是太瞭解AJAX的。

您需要

1.post異步形式（不重新加載頁面，使用AJAX）。
2.成功發送數據後，執行dom操作。

我建議使用jQuery做AJAX文章。

這裏是一個示例代碼，使用jQuery： -

$('#guest_details').load('?p=guest_details.html'); 
$('#first_start').load('?p=first_start.html') 

function ajaxPostForm() 
{  
    $.post('guest_details.php', 

    function(data) { 

    //Dom manipulation 
    $('#guest_details').hide('slow'); 
    $('#first_start').SlideUp('slow') 

    }); 

}

而且裏面guest_details.html需要你的HTML表單是這樣的： -

<form method="POST" id="guest"> 
<!-- Some cell here --> 
<a onclick="ajaxPostForm();" class="button" id="first_start"> <span> <?php echo $button_submit;?> </span> </a> 
</Form>

上面給出的$。員額是一個非常基本的AJAX帖子。您可以在Jquery Post中添加更多功能。

此外，如果你要發佈整個表格，你可以參考jQuery Form Plugin

更新
我想我明白你的問題好這段時間。您的更新裏，你說這個 -

默認guest_details.html是顯示和first_start.html藏匿

指的是部分爲guest_details和first_start會更有意義，因爲guest_details.html可能意味着您可能已在另一個窗口中打開的頁面guest_details.html。

無論如何，我相信你的意思是頁面process.html內部的部分，因爲你已經使用jquery。我們稱first_start.html和guest_details.html分別爲first_start和guest_details。

根據你更新你的意思如下： -

科guest_details顯示和first_start隱藏

案例/情境初始狀態
當內部guest_details部分形式是提交，然後隱藏部分guest_details並顯示first_start部分。

在此狀態下，當隱藏guest_details並顯示first_start時，可點擊first_start上的按鈕，然後再次點擊guest_details部分。

在這些狀態下，一個部分被隱藏，另一個顯示重新加載/刷新頁面應該保持狀態。

如果上面是完整的場景，這裏是代碼： -

<script> 
<! - 
initiateSections(<?php echo $this->session->data['display_state']; ?>); 
//state can have "display_first_start" or "display_guest_details" 
function initiateSections(state) 
{ 
    $('#guest_details').load('?p=guest_details.html'); 
    $('#first_start').load('?p=first_start.html') 


    if(state == "display_first_start") 
    { 
     displayFirstStart(); 
    } 
    else 
    {//If chosen or by default 
     displayGuestDetails(); 
    } 

} 

function ajaxPostGuestDetails() 
{  
    $.post('guest_details.php', //In this post request - set $this->session->data['display_state'] = 'display_first_start'; in php 

    function(data) 
    { 
     //Dom manipulation 
    displayFirstStart(); 
    }); 

} 

function ajaxPostFirstStart() 
{  
    $.post('first_start.php', //In this post request - set $this->session->data['display_state'] = 'display_guest_details'; 

    function(data) 
    { 
    //Dom manipulation 
     displayGuestDetails(); 
    }); 

} 

function displayGuestDetails() 
{ 
    $('#first_start').hide('slow'); 
    $('#guest_details').slideUp('slow'); 
} 

function displayFirstStart() 
{ 
    $('#guest_details').hide('slow'); 
    $('#first_start').slideUp('slow'); 
} 
-> 
</Script>

來源

2010-11-25 19:01:19

您需要實現AJAX發佈數據到PHP

http://api.jquery.com/jQuery.ajax/

使用AJAX做成功，你成功後activites。

一旦阿賈克斯成功做HTML操作

success: function(data) { 

    }

來源

2010-11-25 18:59:03 kobe

隱藏，加載和顯示與JavaScript

回答

相關問題