jquery - ajax in django cannot work when submit the form -
i want submit form , update result div. the question : 1. alert not work 2. page changed to: result so,where problem.
here simple view:
def run_tool(request,tool_id): return httpresponse("hello_boss") the js this:
$('#btn_excute').click(function(){ var frm = document.getelementbyid("tool_form"); var fdata=frm.submit(function(e){ alert("in"); $.ajax({ type:frm.attr('method'), url:frm.attr('action'), date:frm.serialize(), success:function(data){ var rlst= document.getelementbyid("run_result"); rlst.html(data); }, failure:function(data){ alert("unknown error"); } }); alert("done"); }); return false; }); template :
{% block body_block %} <h2>{{ tool.name }}</h2> {% if tool %} <form id= "tool_form" method ="post" onsubmit="return false;" action="{%url 'run_tool' tool.id%}"> {% csrf_token %} <div class="search"> <div style="margin-right: 20px;"> <label style="line-height: 28px;">server：</label> <select id="server_ip" name="server_ip" class="tfl-dkselect"> {%for server in servers%} <option value="{{server.ip}}">{{server.ip}}</option> {%endfor%} </select> </div> </div> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">param</h3> </div> {% if toolparams %} {% toolparam in toolparams %} <div class="input-group"> <span class="input-group-addon" id="sizing-addon1" style="width: 200px;">{{ toolparam.summary }}</span> <span class="input-group-addon" aria-describedby="sizing-addon1" id="{{toolparam.key}}_label"> {{toolparam.key}} = </span> <input type="text" class="form-control" name="{{toolparam.key}}" value="{{toolparam.deftvalue}}"/> </div> {% endfor %} {% else %} <div class="input-group"> <span class="input-group-addon" id="sizing-addon1" style="width: 20%;">no param</span> <span class="input-group-addon" aria-describedby="sizing-addon1"> param = </span> <input type="text" class="form-control" placeholder="no need"/> </div> {% endif %} </div> </form> <!-- <textarea class="form-control" rows="{{result_line}}">{{result}}</textarea> --> <!-- split button --> <div class="btn-group"> <button type="button" class="btn btn-primary" data-form=tool_form id="btn_excute">excute</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">toggle dropdown</span> </button> <ul class="dropdown-menu"> <li><a href="{% url 'index'%}">excute</a></li> <li role="separator" class="divider"></li> <li><a href="{% url 'edit_tool' tool.id%}">edit</a></li> </ul> </div> <!-- 4:3 aspect ratio --> <div> <span id="run_result">sdd</span> </div> {% else %} tool not exist! {% endif %} {% endblock %}
make use of dedicated way in jquery;
// code activated when try submit form has id tool_form $(document).on('submit','#tool_form',function(e){ // prevent redirect page e.preventdefault(); // frm object variable hold current form submitting var frm = $(this); $.ajax({ // $(frm) object submitting method:$(frm).attr('method'), url:$(frm).attr('action'), data:$(frm).serialize(), success:function(data){ var rlst= $("#run_result"); $(rlst).html(data); }, error:function(data){ alert("unknown error"); } }); alert("done"); }); 
Comments
Post a Comment