Cacher, la charge, et de montrer div avec javascript

Question

J'ai quelques pages de l'autre pour interagir avec la page avec une charge identifiant, comme ci-dessous:

intérieur 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> 

intérieur 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> 

que je veux est lorsque le bouton est utilisé alors:

1. données envoyées à guest_details.php
2. Si les données ont été envoyées puis cacher < div id = "guest_details"> </div>
3. montrant le spectacle < div id = "first_start"> </div>

mais quand je le fais comme ci-dessus, cela ne fonctionne pas, Quelqu'un pourrait-il donner une idée de comment corriger?

Merci beaucoup

Answer 1

En regardant votre question précédente et vos tags, je suppose que vous n'êtes pas conscient de AJAX.

Vous devez

1.post la forme de manière asynchrone (sans recharger la page, en utilisant AJAX).
2. Une fois les données envoyées avec succès, effectuez les manipulations dom.

Je suggère d'utiliser jquery pour faire un post AJAX.

Voici un exemple de code, en utilisant 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') 

    }); 

} 

Et votre formulaire HTML à l'intérieur guest_details.html a besoin d'être comme: -

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

Le .post $ donnée ci-dessus est un très basique AJAX post. Vous pouvez ajouter d'autres fonctionnalités en donnant Jquery Post.

Aussi, si vous souhaitez publier tout le formulaire, vous pouvez consulter jQuery Form Plugin

Mises à jour
Je crois avoir compris votre problème mieux cette fois.A l'intérieur de votre mise à jour où vous dites this-

par guest_details.html par défaut est montrant et first_start.html se cache

se référant aux sections guest_details et first_start serait plus logique parce que guest_details.html peut signifier la page guest_details.html que vous avez peut-être ouverte dans une autre fenêtre.

Quoi qu'il en soit, je suis sûr que vous voulez dire les sections à l'intérieur de la page process.html que vous avez utilisé jquery .load(). Appelons les first_start.html et guest_details.html en tant que sections first_start et guest_details respectivement.

Comme par vos mises à jour voulez-vous dire ce qui suit: -

état initial
Section guest_details apparaît et first_start est caché

Cas/Situations
Lorsque formulaire dans guest_details section est soumis, puis masquer la section guest_details et afficher la section first_start.

A cet état quand guest_details est caché et first_start est représentée, sur le bouton first_start peut être cliqué et ce faisant, la section guest_details montre à nouveau.

Lors de ces états où une section est masquée et une autre est affichée rechargement/actualisation, la page doit conserver les états.

Si le scénario ci-dessus est complet, est ici le code: -

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

Answer 2

Vous devez mettre en œuvre ajax pour publier les données php

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

utilisation ajax succès pour vous faire postez activités de réussite.

Une fois ajax est réussie faire les manipulations html

success: function(data) { 

    }