Как использовать события?

Question

Я только что открыл для себя jquery-mobile, но нахожу документацию, не совсем адаптированную для «новичков».

Итак, у меня есть набор полей с некоторой радиокнопкой.Когда пользователь «проверяет» кнопку, как сделать, чтобы сохранить значение в сеансе php с помощью вызова ajax?

<fieldset data-role="controlgroup">
  <legend>Choose a pet:</legend>
  <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
  <label for="radio-choice-1">Cat</label>

  <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
  <label for="radio-choice-2">Dog</label>

  <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
  <label for="radio-choice-3">Hamster</label>

  <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4"  />
  <label for="radio-choice-4">Lizard</label>
</fieldset>

Answer 1

Вам нужно привязать обработчик изменений и запустить ajax-вызов следующим образом

$('input[name="radio-choice-1"]').live('change', function(){
var selectedValue = $(this).val();

 $.post("save.php", {optionSelected: selectedValue});
});

, где содержимое файла save.php будет

<?php
session_start();
$_SESSION['radio-choice-1-option'] = $_POST['optionSelected'];
?>

Answer 2

Давайте начнем с примера jQuery. Насколько вы знакомы с jQuery?

Вам нужно будет привязать обработчик к событию изменения на переключателе, а затем запустить вызов AJAX в PHP, где вы устанавливаете переменную сеанса.

Чтобы связать обработчик, смотрите документацию jQuery для функции on или live, что-то вроде $(document).ready...

$('input[name="radio-choice-1"]').live('change', function(){
    var value = $(this).val();

    $.ajax({
         //see jQuery ajax functions
    });
});

Но на jQuery Mobile:

Вы должны использовать событие pageinit jQM (jQuery Mobile), чтобы запустить этот код, а не document.ready, если вы используете несколько одностраничных шаблонов и переходы ajax еще больше - в этом случае вам следует также использовать функцию on вместо прямой трансляции, чтобы прослушивать всплывающие события только для текущей страницы.

Тогда это будет похоже на

$('#yourPage').on('change', 'input[name="radio-choice-1"]', function(){