Скрыть, загрузить и показать div с помощью JavaScript

Question

У меня есть несколько страниц друг от друга, чтобы взаимодействовать со страницей с загрузкой идентификатора, как показано ниже:

внутри 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>

Я хочу, чтобы при нажатии кнопки отправки были:

1. данные, отправленные на guest_details.php
2. Если данные были отправлены, то скрыть
3. показ шоу

нокогда я делаю так, как описано выше, это не работает, может кто-нибудь дать подсказку, как исправить?

Большое спасибо

Answer 1

Глядя на ваш предыдущий вопрос и ваши теги, я предполагаю, что вы не очень хорошо знаете AJAX.

Вам необходимо

1.поставить форму асинхронно (без перезагрузки страницы, используя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')

  });

 }

И ваш html формы внутри guest_details.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>

Приведенный выше $ .post является очень простым постом AJAX.Вы можете добавить дополнительные функции, как указано в Jquery Post .

Также, если вы хотите опубликовать всю форму, вы можете обратиться к плагину jQuery Form

Обновления
Я думаю, что понял вашу проблемулучше на этот раз.Внутри вашего обновления, где вы говорите, это -

по умолчанию, guest_details.html показывает, а first_start.html скрывает

, ссылаясь на разделы как guest_details и first_start имеет больше смысла, потому что guest_details.html может означать страницу guest_details.html, которую вы могли открыть в другом окне.

В любом случае, я уверен, что вы имеете в виду разделы внутри страницы process.html, которые вы использовалиJQuery .load().Давайте назовем first_start.html и guest_details.html как секции first_start и guest_details соответственно.

В соответствии с вашими обновлениями вы имеете в виду следующее: -

Исходное состояние
Отображается раздел guest_details и first_start скрывается

Случаи / ситуации
Когда форма внутри раздела guest_details отправлена, скрыть раздел guest_details и show first_start section.

В этом состоянии, когда 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>

Answer 2

Вам нужно внедрить ajax для отправки данных в php

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

. Используйте ajax success, чтобы вы опубликовали успешные действия.

После успешного выполнения ajax выполните html манипуляции

success: function(data) {

  }