隐藏，加载和显示与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

回答

相关问题