The following code snippet written using jQuery and meant for sending data is executed twice on a single click. Both HTTP requests give 200 as response.
$(function() {
$('input[type=submit]').click(function() {
$(this).unbind("click");
$.ajax({
type: "POST",
url: "/publish/",
data: $("#submit-story").serialize(),
beforeSend: function() {
$('#send-draft').html('saving...');
},
success: function(data) {
$('#send-draft').html('Draft');
//window.location.href = "/home/"
}
});
});
});
This is Django template for HTML. This is django template so i skipped the header and footer part as it doesn't contain anything relevant to the my problem.
<link rel="stylesheet" type="text/css" href="{% static 'workout/wysiwyg-advanced/css/font-awesome.min.css' %}" />
<script>
$(function() {
$('#story').editable({});
});
</script>
<div class="header" id="new-story-head">
<div id="logo">W</div><div id="story-writer"> <img src="{% static 'workout/images/business_user.png' %}" align="absmiddle" /> {{ user.username }}
<span id="send-draft"> Draft </span> </div>
<div class="right-top">
<button id="red">Delete</button>
<!-- <button id="grey">History</button>-->
<button id="grey">Send Draft</button>
<input type="submit" id="green" value="Publish">
</div>
</div>
<div class="content" id="new-story">
<div class="center">
<form class="story" name="story" id="submit-story">{% csrf_token %}
<div class="image"><img id="addheader" src="{% static 'workout/images/add-image.png' %}" /></div>
<input type="text" id="title" name="title" placeholder="Title" value='{{blog.title}}' /> <br />
<input type="text" id="sub_title" name="subtitle" placeholder="Subtitle" value='{{blog.subtitle}}'/> <br />
<input type="hidden" name="blog_id" value="{{ blog_id }}" />
<textarea name="content" placeholder="Write your Story" rows="50" cols="60" id="story">{{blog.content|safe}}</textarea>
</form>
</div>
</div>
Try using the onclick event for the submit button
<button id="green" value="Publish" onclick="javascript:return callonclick();"></button>
<script>
function callonclick(){
//Do your ajax call here
return false;
}
</script>
Related
I am trying to load an external javascript from a html input button. However when I click on the button I get no output or response. I do get a message in console that the script has been loaded though.
HTML:
<div class="split left">
<fieldset class="Receiver Commands">
<legend>Receiver Commands</legend>
<input type="button" value="click me" id="clickMe" onclick="serverStart()" />
<script type="text/javascript" src="{%static 'scripts/ServerResponse.js' %}">
</script>
<form method="post">
</form>
<div id="testtaskbox" class="testtaskbox">
{% csrf_token %}
</div>
</fieldset>
<fieldset class="receiverResponse">
<legend>Receiver Response</legend>
<div class="receiverText">
<textarea id ="response" class="textarea">Digdebugv2 1.11
{{responseContext}}
</textarea>
</div>
</fieldset>
</div>
Javascript:
serverStart()
function serverStart () {
document.getElementById('reponse').innerHTML = '123bob'
console.log('ServerResponse started')
}
Your document.getElementById('reponse').innerHTML = '123bob'
'response' was not correct spelled.
Replace your current code with this and it will work.
function serverStart () {
document.getElementById('response').innerHTML = '123bob'
console.log('ServerResponse started')
}
serverStart();
<div class="split left">
<fieldset class="Receiver Commands">
<legend>Receiver Commands</legend>
<input type="button" value="click me" id="clickMe" onclick="serverStart()" />
<script type="text/javascript" src="{%static 'scripts/ServerResponse.js' %}">
</script>
<form method="post">
</form>
<div id="testtaskbox" class="testtaskbox">
{% csrf_token %}
</div>
</fieldset>
<fieldset class="receiverResponse">
<legend>Receiver Response</legend>
<div class="receiverText">
<textarea id ="response" class="textarea">Digdebugv2 1.11
{{responseContext}}
</textarea>
</div>
</fieldset>
</div>
Firefox gives me error
XML Parsing Error: no root element found
Location: http://localhost:1126/5cebf834d54b41f1b944492c2bf2c852/arterySignalR/send?transport=longPolling&connectionToken=AQAAANCMnd8BFdERjHoAwE%2FCl%2BsBAAAASoOM%2FXZ%2B1UWqyQ%2FYXO2FqQAAAAACAAAAAAAQZgAAAAEAACAAAAAUFu%2Fjd8uVno2WCgoC%2BqL%2FTyk4%2F9G0tGOhVKr4EpHnIwAAAAAOgAAAAAIAACAAAACfousertSIl6j8HdDRfemeNPHDjgXABbFasP4BpsaBRjAAAADqZuISuyN4C6Z1BUb4BSojyAs0sj5vyMKuBZrkMzPz6r4vFC13EdNhT0%2BqeNlqyfpAAAAAs2SeXXAfiPKVMcCDkZ%2B3%2Fnii%2BKaLZxyKMLgriAsGDqANLiRjEVgu6ErSX%2F1ZCiiuOW02QGy5aZWT5E4Vm8IMqQ%3D%3D&requestUrl=http%3A%2F%2Flocalhost%3A4055%2FPages%2FSignIn.aspx&browserName=Firefox
Line Number 1, Column 1:
I double checked all tags starts and ends with no help :( any suggestions??
edit: Here is my sample code
<%# Page Title="" Language="C#" MasterPageFile="~/Pages/gateMasterPage.Master" AutoEventWireup="true" CodeBehind="SignIn.aspx.cs" Inherits="Gate.SignIn" %>
<div class="login" id="loginDiv">
<style scoped="scoped" >
#import "../css/custom.min.css";
</style>
<a class="hiddenanchor" id="signup"></a>
<a class="hiddenanchor" id="signin"></a>
<div class="login_wrapper">
<div class="animate form login_form">
<section class="login_content">
<form runat="server" id="signinForm">
<asp:ScriptManager ID="ScriptManager1" runat="server"
EnablePageMethods="True">
</asp:ScriptManager>
<h1>تسجيل الدخول</h1>
<div>
<input type="text" class="form-control" placeholder="إسم المستخدم" name="nameTXTBOX" id="usernameTXT" required="required" dir="rtl" />
</div>
<div>
<input type="password" class="form-control" placeholder="كلمة المرور" name="passTXTBOX" id="passTXT" required="required" dir="rtl" />
</div>
<div>
<%--<asp:Button class="btn btn-default submit" text="دخول" runat="server"></asp:Button>--%>
<a class="btn btn-default submit" id="signIn">دخول</a>
<a class="reset_pass" href="#">فقدت كلمة المرور؟</a>
</div>
<div class="clearfix"></div>
<div class="separator">
<p class="change_link">
جديد بالموقع؟
إنشاء حساب جديد
</p></div>
</form>
</section>
</div>
<div id="register" class="animate form registration_form">
<section class="login_content">
<form id="signupForm" class="col-md-offset-4 form-group ">
<h1>إنشاء حساب</h1>
<div>
<input type="text" class="form-control" placeholder="اسم المستخدم" required="" dir="rtl" />
</div>
<div>
<input type="email" class="form-control" placeholder="البريد الالكتروني" required="" dir="rtl" />
</div>
<div>
<input type="password" class="form-control" placeholder="كلمة المرور" required="" dir="rtl"/>
</div>
<div>
<a class="btn btn-default submit" href="index.html">انشاء الحساب</a>
</div>
<div class="clearfix"></div>
<div class="separator">
<p class="change_link">مسجل بالفعل
تسجيل الدخول
</p>
</div>
</form>
</section>
</div>
</div>
</div>
$(function () {
$("#signIn").click(function () {
var name = $("#usernameTXT").val();
var pass = $("#passTXT").val();
console.log(name + ":" + pass);
PageMethods.login_btn_click(name, pass, onSucceed, onError);
});
function onSucceed(res) {
console.log(res);
//$("#loginDiv").load("Profile.aspx?id=" + res);
console.log('success');
window.location.href = "Profile.aspx?id=" + res;
alert(res);
}
function onError(err) {
alert('fail');
console.log("login_btn_click PageMethod Throw Error" + err);
}
});//End of OnLoad
Is There is any way to regenerate page, if there is any missing tag end that i couldn't notice?
your XMl need to well form, all xml document must have one root element for example
<persons>
<person Id=1>
<name>Smith</name>
</person>
<person Id=2>
<name>Jack</name>
</person>
</persons>
every time the images uploaded, it shows the entire page on the hidden div, like the screenshot shows
the webpage before upload
and
after uploaded
I feel there's something wrong in the script tag below, because if I delete the response variable, it won't show the duplicated page anymore, but also no more response, which is supposed to be shown on the page.
Any help will be appreciated!
here's the code:
<form action="" method="POST" id="uploadimg" enctype="multipart/form-data">
<div class="form-group col-md-6"><br />
<label class="col-md-4">Product thumbnail:</label><input type="file" name="thumb" id="thumb"/><br />
<label class="col-md-4">Profile picture01:</label><input type="file" name="file01"/><br />
<label class="col-md-4">Profile picture02:</label><input type="file" name="file02"/><br />
<label class="col-md-4">Profile picture03:</label><input type="file" name="file03"/><br />
<label class="col-md-4">Profile picture04:</label><input type="file" name="file04"/><br />
<label class="col-md-4">Farmer's photo:</label><input type="file" name="farmer"/><br /><br />
<input class="btn btn-warning btn-sm " type="submit" value="Upload" name="submit"/><br /><br />
</div>
<div class="form-group col-md-6">
<div id="loader">
<center><img src="images/loading.gif" /></center>
</div>
<div id="onsuccessmsg"></div>
</div>
</form>
<script>
$(document).ready(function(){
function onsuccess(response){
$("#loader").hide();
$("#onsuccessmsg").html('</b><div id="msg">'+response+'</div>');
}
$("#uploadimg").on('submit',function(){
$("#loader").show();
var options={
success: onsuccess
};
$(this).ajaxSubmit(options);
return false;
});
});
</script>
I face problem that my div.hide is not working, because it just shows and whenever I click back link "reply" it's does not hide.
JavaScript
<script type="text/javascript">
$('body').on('click','a.btnGG',function(){
var va=$(this).data('comment_id');
$("#parent_id").val(va);
$("#formReply").attr("va",$("#formReply").attr("va") + va);
$(".formms").hide();
$(this).after('<div class="formms">'+$(".gg").html()+'</div>');
$("#hides").onclick(function (){
$(".gg").css("display","block");
});
</script>
tpl
<a href="javascript:;" id="hides" class="btnGG" > reply</a>
<div class="gg" style="display:none;">
<form action="/commenter/web/index.php" id="formReply" method="Post" >
<input type = "hidden" name ="m" value = "{$m}" />
<input type="hidden" name="comment_id" id="comment_id" value="{$data.comment_id}"/>
<input type = "hidden" name="post_id" value="{$req.post_id}" />
<!-- <input type = "hidden" name="user_id" value="{$req.user_id}" /> -->
<input type = "hidden" name ="c" value = "do_add_comment_reply" />
<input type="hidden" name="parent_id" id="parent_id" value=""/>
<textarea class="form-control" name="message" placeholder="Please leave a reply of the comment "></textarea>
<input type="submit" id="btn_reply" name="btn_reply" class="btn btn-primary" value="Reply">
</form>
</div>
I'm beginner programmer.
It's hard to tell what you are doing with your code. If you simply want to display div or hide clicking on reply button, there's a complete code (TPL file):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<a href="javascript:;" id="hides" class="btnGG" > reply</a>
<div class="gg" style="display:none;">
<form action="/commenter/web/index.php" id="formReply" method="Post" >
<input type = "hidden" name ="m" value = "{$m}" />
<input type="hidden" name="comment_id" id="comment_id" value="{$data.comment_id}"/>
<input type = "hidden" name="post_id" value="{$req.post_id}" />
<!-- <input type = "hidden" name="user_id" value="{$req.user_id}" /> -->
<input type = "hidden" name ="c" value = "do_add_comment_reply" />
<input type="hidden" name="parent_id" id="parent_id" value=""/>
<textarea class="form-control" name="message" placeholder="Please leave a reply of the comment "></textarea>
<input type="submit" id="btn_reply" name="btn_reply" class="btn btn-primary" value="Reply">
</form>
</div>
<script type="text/javascript">
$('body').on('click','a.btnGG',function() {
$(".gg").toggle();
});
</script>
</body>
</html>
<a href="javascript;" id="hides" class="btnGG" > reply</a>
<div class="gg" style="display:none;">
// Code
</div>
Change it to something like
<a href="#" id="hides" class="btnGG" > reply</a>
<div class="gg" id="testid" style="display:none;">
// Code
</div>
and use script like
$(document).ready(function(){
$("#hides").onclick(function(){
$("#testid").toggle("show");
});
});
I created site in Django. And have many items in cycle "for", and with opening modal window i'm needed delete needed item.
How i can get id post (in my case "get_post_id") and sent to modal window (div).
but i'm needed to have modal window not in cycle.
Thanks!
My code:
<script>
$(document).ready(function(){
$("#popup4").hide();
PopUpHide4();
});
function PopUpShow4(){
$("#popup4").show();
$(document).keyup(function(ev){
if(ev.keyCode == 27)
$("#popup4").hide();
});
}
function PopUpHide4(){
$("#popup4").hide();
}
</script>
MODAL WINDOW:
<div class="b-popup" id="popup4" >
<div class="b-popup-content">
<form action="" method="post">{% csrf_token %}
<p><center><font color=#000000 size="5"><b>ADD</b></font></center></p>
<input id="id_post_request" value="2" type="hidden" maxlength="1" name="post_request" type="text">
<input id="id_get_post_id" value="{{ item.id }}" type="hidden" maxlength="9999" name="get_post_id" type="text">
<div class="photo" data-title="Remove"><input type="image" src="{{ STATIC_URL }}images/delete.png" border="0" width="17" height="17"></div>
<input type="button" value="Cancel" ONCLICK="window.location.href='/'" style="height:30px; width:80px" ></center>
</form>
</div>
</div>
calling modal window :
<div id="b-container">
<div class="photo" data-title="Remove"><input type="image" src="{{ STATIC_URL }}images/delete.png" border="0" width="17" height="17"></div>
</div>
Use javascript to pass the needed id to your modal window.
Is there some button in your cycled items to choose the item? Render an item id within a cycled item, bind onclick event to the button and pass the item id to the modal window hidden input.
Thanks for help!!!
i'm do this)))
Here is code, in case if needed someone)
script :
<script>
function PopUpShow4(id){
document.getElementById('id_get_post_id').value=id;
$("#popup4").show();
$(document).keyup(function(ev){
if(ev.keyCode == 27)
$("#popup4").hide();
});
}
function PopUpHide4(){
$("#popup4").hide();
}
</script>
MODAL WINDOW:
<div class="b-popupdel" id="popup4" >
<div class="b-popup-contentdel">
<form action="" method="post">{% csrf_token %}
<p><center><font color=#000000 size="5"><b>Confirm Delete</b></font></center></p>
<input id="id_post_request" value="2" type="hidden" maxlength="1" name="post_request" type="text">
<center><p><font size="2">Are you sure you want to delete this post?</font></p></center>
<input id="id_get_post_id" id_get_post_id" type="hidden" maxlength="9999" name="get_post_id" type="text">
<center><input type="submit" value="Remove" style="height:30px; width:80px">
<input type="button" value="Cancel" ONCLICK="PopUpHide4()" style="height:30px; width:80px" ></center>
</form>
</div>
</div>
calling modal window :
<div style="width:5%; float:right;">
<div id="b-container">
<div class="photo" data-title="Remove"><input type="image" src="{{ STATIC_URL }}images/delete.png" border="0" width="17" height="17" ></div>
</div>
</div>