2014-01-29 5 views
10

Я должен создать ajax-вызов, когда пользователь нажимает кнопку отправки, поэтому я включил jquery, и я написал следующий код (взятый из документации jquery):Jquery ajax call click event submit button

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("Shareitem").click(function(e){ 
     e.preventDefault(); 
    $.ajax({type: "POST", 
      url: "/imball-reagens/public/shareitem", 
      data: { id: $("Shareitem").val(), access_token: $("access_token").val() }, 
      success:function(result){ 
     $("sharelink").html(result); 
    }}); 
    }); 
}); 
</script> 

Html:

<div id="sharelink"></div> 
[...] 
<input type="hidden" name="id" value="" id="id"></dd> 
<dd id="access_token-element"> 
<input type="hidden" name="access_token" value="xxxxxxxx" id="access_token"></dd> 
<dt id="Shareitem-label">&#160;</dt><dd id="Shareitem-element"> 
<input type="submit" name="Shareitem" id="Shareitem" value="UpdatedByPreviousAjaxCall"></dd></dl></form> 

проблема заключается в следующем, то представить действие выполняется, но вызов Ajax не является, поэтому форма выполнения запрошенной представить действие вместо того, чтобы остаться на той же странице и обновления содержимое требуемого «div».

Что мне не хватает? Где я ошибаюсь? Заранее благодарим за любой отзыв.

+1

'$ ('Shareitem')' и '$ ('sharelink')' не хороший селектор .... –

ответ

14

Вы не добавили # перед идентификатором кнопки. У вас нет правильного селектора в вашем jquery-коде. Поэтому jquery никогда не выполняется при нажатии кнопки. он отправил вашу форму напрямую, не передавая какой-либо запрос ajax.

См. Документацию: http://api.jquery.com/category/selectors/
ее твой друг.

Попробуйте это:

Кажется, что id: $("#Shareitem").val() неправильно, если вы хотите, чтобы передать значение

<input type="hidden" name="id" value="" id="id"> 

вам нужно изменить эту строку:

id: $("#Shareitem").val() 

по

id: $("#id").val() 

Все вместе:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
     $("#Shareitem").click(function(e){ 
      e.preventDefault(); 
     $.ajax({type: "POST", 
       url: "/imball-reagens/public/shareitem", 
       data: { id: $("#Shareitem").val(), access_token: $("#access_token").val() }, 
       success:function(result){ 
      $("#sharelink").html(result); 
     }}); 
     }); 
    }); 
    </script> 
+0

Ваш ответ работает и точный (и я не потому что это было слишком поздно вечером, так что мой разум был немного запутан, но, в любом случае, мне пришлось изменить даже способ включения jquery, поскольку я работаю с SSL, после чего [этот учебник] (http://stackoverflow.com/questions/18251128/почему-ам-я-вдруг пробивной-а-блок- погрузки-смешанный активный контент проблема-в-огнь) – softwareplay