2012-04-26 3 views
1

Я хотел обновить div, когда пользователь отправляет простую форму. Однако я не могу понять, почему он не работает. (Это мой первый раз с помощью JQuery и Ajax)JQuery обновить div на submit

Мой сценарий:

<script src="static/jquery.js"></script> 
     <script> 
       $('#submit_div').click(function(){ 
        var data: $("#name").val(); 
        var datastr: 'name='+data; 
        $.ajax{ 
         type: "POST", 
         url: $(this), 
         data: datastr, 
         success: function(data){ 
          $("#content").replaceWith($('#content'),$(data)); 
          } 
        } 
       }); 

     </script> 

Мой HTML:

<div id="content"> 
      <div id="form_div"> 
      <form method="POST"> 
       <div id="form"> 
        <div id="name_div"> name <input type="text" id="name" name="name"/></div> 
        <div id="submit_div"> <button type="submit" id="submit" name="submit">submit</button></div> 
       </div> 
      </form> 
<div style="clear:both;"></div></div>    

+1

Я считаю, что вы используете '=' вместо ':' в вашем фактическом коде. как var data = $ ('# name'). val(); – Misam

ответ

4

Ошибки

var data: $("#name").val(); 
var datastr: 'name='+data; 
$.ajax{...} 
$("#content").replaceWith($('#content'),$(data)); 

Fixed

$('#submit_div').click(function(e){ 
    e.preventDefault();     
    var data = $("#name").val(); 
    var datastr='name='+data; 
    $.ajax({ 
     type: "POST", 
     url: $(this), 
     data: datastr, 
     success: function(data){ 
      $("#content").replaceWith(data); 
     } 
    }); 
}); 
1

Вы пробовали метод Load JQuery?

http://api.jquery.com/load/

+0

Я действительно не хочу использовать другую функцию, я хочу знать, почему этот не работает :). Но спасибо за ответ. –

+0

О, хорошо. Похоже, что вы неправильно используете функцию replaceWith. http://api.jquery.com/replaceWith/ Согласно сайту jQuery, вы предоставляете функцию replaceWith только одним аргументом, являющимся новым контентом. Попробуйте удалить $ ('# content') изнутри replaceWith. Надеюсь это поможет. – Paulund

0

Я думаю, что данные, возвращаемые значение, что и хотят ReplaceWith (если я м справа) .. Тогда использовать, как это ..

$("#content").replaceWith(data); 
2

Существует ошибка синтаксиса в коде. Вы должны написать:

var data = $("#name").val(); 
var datastr = 'name='+data; 
0
$("#form_div form").submit(function(e){ 
    e.preventDefault(); 
    var data = $("#name").val(); 
    $.post('/some/url/file.php',{name: data},function(data){ 
    $("#content").html(data); 
    }); 
}); 

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

Смежные вопросы