Как сделать POST при изменении значения слайдера / нажатии кнопки на мобильном телефоне jQuery? - PullRequest
Новая
       0

Как сделать POST при изменении значения слайдера / нажатии кнопки на мобильном телефоне jQuery?

1 голос
/ 24 сентября 2011

У меня есть 1 слайдер и 1 кнопка: 

  <div data-role="fieldcontain">
    <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
  </div><br><br>
  <div data-role="fieldcontain">
    <select name="slider" id="slider" data-role="slider">
      <option value="off">Off</option>
      <option value="on">On</option>
    </select> 
  </div>

Как я могу POST (например, form action="http://somesite" method="post"), когда значение слайдера изменяется?кнопка нажата?

Ответы [ 2 ]

2 голосов
/ 24 сентября 2011

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

Формат такого атрибута может быть: 

<select name="slider" id="slider" data-role="slider" data-autosubmit="true">
  <option value="off">Off</option>
  <option value="on">On</option>
</select>

Код jQuery для включения автоматической отправки так же прост, как показано ниже, но нам нужно сделать его более сложным для слайдера, см. Пример скрипта в конце. 

$('[data-autosubmit="true"]').change(function(){
    $(this).parents('form:first').submit();
});

Я не знаю, используете ли вы собственную мобильную форму обработки jQuery или пользовательскую, но если вы хотите использовать настраиваемый хук для отправки, это может выглядеть примерно так: 

$("form").submit(function() {
    //Handle the submit with a jQuery.post or whatever
});

Вот скрипка с работающим примером кода: http://jsfiddle.net/4VFgS/1/

Код скрипта получил некоторую обработку, чтобы предотвратить отправку формы 100 раз в секунду.

1 голос
/ 24 сентября 2011 
$('#slider').change(function(){
    ...
    $.post(yoururl, yourdata, function(callbackdata){
        ...
    });
});

См. jQuery.post () и jQuery.change ()

Редактировать: Кстати: наличие 2 элементов с одинаковым идентификатором скорее всего приведет к серьезным проблемам раньше, чем позже.

Редактировать 2: Если вы пытаетесь получить ответ от другого домена таким образом, вам, вероятно, не повезет, если они не предложат вам JSONP или подобное. Вы не сможете получать контент со стороннего сайта через XMLHttpRequest из-за одинаковых ограничений политики происхождения.

Однако вы можете прокси-запрос через ваш сервер, поэтому вызов AJAX будет направлен в тот же домен.

...