Меню
Что нового?

Пример Аякса

Serious2008

Новичок
Помогите пожалуйста с простым примером.
1. Появляется форма из php файла. Где можно выбрать что-нибудь например чекбоксом.
2. Нажать на кнопку. Предаётся значение этого чексбокса в тот же php файл.
3. Появилось сообщение что значение передано. И кнопка, чтобы отобразился первый пункт.
 
KorP

KorP

Новичок
Ты покажи что сделал и опиши что не получается - тогда помогут, иначе - сам разбирайся, примеров в гугле навалом, тут тебе вряд ли кто то будет что то показывать.
 

Serious2008

Новичок
Первая форма

PHP: 
<form id="myForm" method="post" action="/poll-15-3.html">

<p align=center><b>asdasd</b></p>

<input type=radio value="0" name="vopros[]"> asdasdasd
<br><input type=radio value="1" name="vopros[]"> asdasdasdasd
<br><input type=radio value="2" name="vopros[]"> asdasdasdasd<br>&nbsp;

<input type=submit value=Отправить>



</form>



<div id="output">111</div>

<br><p align=center><a href="/poll-stat-15.html">Статистика голосований</a></p>

<script type="text/javascript">

$(document).ready(function(){



  var options = { 



    target: "#output",

    beforeSubmit: showRequest,

    success: showResponse, 

    timeout: 3000

  };

  

$('#output').hide();

  $('#myForm').submit(function() { 

    $(this).ajaxSubmit(options); 



    return false;

  }); 



});



// вызов перед передачей данных

function showRequest(formData, jqForm, options) { 



    var queryString = $.param(formData); 





    return true; 

} 

 

// вызов после получения ответа 

function showResponse(responseText, statusText)  { 

$('#myForm').hide();

$('#output').show();



}

</script>

<div id='output'></div>
По итогу выполнения. Вылазит вот эта форма.

PHP: 
<form id="myForm" method="post" action="/poll-random.html">
<input type=submit value=Следующий опрос>
</form>
<div id="output"></div>
Когда нажимаю ещё раз отправить. Он без аякса уже выполнял эту команду правильно. Когда сменил назавние второй на myForms и outputs, И повесил доп скрипт с обработкой относительно этих данных, он вообще фиг знает куда посылает это.
 
KorP

KorP

Новичок
Serious2008 написал(а):
А вот непонятно куда он посылает. Там маленькая область под этот яваскрипт и он на какую-то страницу посылает
Нажмите для раскрытия...
если ты не знаешь что делает твой скрипт, то тебе в нём и ковыряться
за тебя дебажить никто не будет, могут лишь пнуть в верном направлении
бери firebug и дебаж
 

Serious2008

Новичок
KorP написал(а):
если ты не знаешь что делает твой скрипт, то тебе в нём и ковыряться
за тебя дебажить никто не будет, могут лишь пнуть в верном направлении
бери firebug и дебаж
Нажмите для раскрытия...
Я дебажу при помощи хрома, там есть одна фича подобная firebug. Но я смотрю вроде бы всё правильно, но не работает.
 

Serious2008

Новичок
KorP
а можно ли. Как-нибудь сделать, чтобы при нажатии на кнопку, содержимое дива обновлялось на новое? Т.е. нажали кнопку с этого дива внутри которого форма передать информацию в php и спрятать этот див. Потом когда передали и сохранили информацию, мы опять нажимаем на кнопку и выводим тот же див, только с другими данными?

Скрыть я умею, а вот менять содержимое, вот это уже немного трудней.
 
KorP

KorP

Новичок
я честно не понимаю как твой кусок кода что то там делает и куда и что он передаёт и возвращает
а твоя манера изложения, крайне не способствует понимаю сути задачи
если ты хочешь, что бы выводился какой то контент6 возвращаемый после передачи твоему скрипту, надо как то так
PHP: 
$.post("action.php",{a: '123'},
		function(data) {
			if (data.error)
			{
				$('#notice').empty().append(data.msg);
			}
		}, "json"
	);
	return false;
в общем читай ман по jquery раз уж ты его взялся юзать, там всё просто
 

Serious2008

Новичок
KorP написал(а):
я честно не понимаю как твой кусок кода что то там делает и куда и что он передаёт и возвращает
а твоя манера изложения, крайне не способствует понимаю сути задачи
если ты хочешь, что бы выводился какой то контент6 возвращаемый после передачи твоему скрипту, надо как то так
PHP: 
$.post("action.php",{a: '123'},
		function(data) {
			if (data.error)
			{
				$('#notice').empty().append(data.msg);
			}
		}, "json"
	);
	return false;
в общем читай ман по jquery раз уж ты его взялся юзать, там всё просто
Нажмите для раскрытия...
Всё чётко расписываю мысль.
PHP: 
<div id="form">тут форма<div>
<div id="output">Тут сообщение и кнопка отправки формы<div>
Так вот изначально. У нас будет только вот этот див с формой. И второй див, но в нём будет только кнопка.
Потом мы нажали кнопку. И у нас прячется первый див. С формы мы передали данные в php файл. Обработали их. Это не сложно, до сюда я могу реализовать.
И по итогу работы. Мы во второй див, добавляем сообщение. А в первом диве меняем прошлое содержимое, на новое. И сообщение и содержимое для первого дива, нам вернёт php файл.
В этот момент. У нас первый див спрятан и с новым содержимым. На экране у нас кнопка и надпись. Мы ещё раз нажимаем на кнопку. У нас прячется надпись, и появляется первый див.
Ну а дальше, уже действия по кругу.
 

Serious2008

Новичок
KorP
Вообще мне нужно сделать. Опрос, потом проголосовали вывели сообщение, потом следующий опрос. И всё это на аяксе. Подобных опросов нигде не нашёл.
 

Serious2008

Новичок
Вот как у меня в оригинале.
PHP: 
<div id="output">

<form id="myForm" method="post" action="/poll-15-3.html">

<p align=center><b>asdasd</b></p>

<input type=radio value="0" name="vopros[]"> asdasdasd
<br><input type=radio value="1" name="vopros[]"> asdasdasdasd
<br><input type=radio value="2" name="vopros[]"> asdasdasdasd<br>&nbsp;



<input type=submit value=Отправить>



</form>



</div>

<br><p align=center><a href="http://articlesua.net/poll-all.html">Статистика</a></p>



<script type="text/javascript">

$(document).ready(function(){



  var options = { 



  	target: "#output",

    beforeSubmit: showRequest,

    success: showResponse, 

    timeout: 3000

  };

  



  $('#myForm').submit(function() { 

    $(this).ajaxSubmit(options); 



    return false;

  }); 



});



// вызов перед передачей данных

function showRequest(formData, jqForm, options) { 



    var queryString = $.param(formData); 





    return true; 

} 

 

// вызов после получения ответа 

function showResponse(responseText, statusText)  { 



$('#output').show();



}

</script>
Вот как в отладчике.


После нажатия отправить появляется новая форма. Её код не знаю как показать, но в отладчике вот так оно выгялидит


И когда на второй форме нажимаю на кнопку АЯКС не срабатывает, а срабатывает именно выполнение. Вот это и есть загвозка. Не могу понять почему не срабатывает аякс.
 
Войдите или зарегистрируйтесь для ответа.
Сверху