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>
Related
I create a form which allows to view the form information in a
different page for the user to view using "view" button and I want
a "edit" button to edit the same details of the form by redirecting
to the previous page. I tried using window.history.back(); it didn't
work.
html file Index.html - the form
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div class="container">
<form action="result.html" method="GET">
<h1>Send us an Enquiry?</h1>
<h3>Fill in the Details Below</h3>
<input type="text" id="name" name="name" placeholder="Enter Name" />
<input type="text" id="email" name="email" placeholder="Enter Email" />
<select name="subject" id="subject" value="Subject">Subject
<option value="Destinations">Destinations</option>
<option value="Pricing">Pricing</option>
<option value="Accommodation">Accommodation</option>
<option value="Other">Other</option>
</select>
<textarea id="details" name="details" placeholder="Enter Details"></textarea>
<input type="submit" class="btn" value="View" onclick="handleSubmit()" />
</form>
</div>
</body>
</html>
The page view the form details result.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="result.js"></script>
<script src="https://smtpjs.com/v3/smtp.js"></script>
</head>
<body>
<div class="container">
<div class="box">
<h1>
Form Details
</h1>
<h2>
Name: <span id="result-name" />
</h2>
<h2>Email: <span id="result-email" />
</h2>
<h2>
Subject: <span id="result-subject" />
</h2>
<h2>Details: <span id="result-details" />
</h2>
<div class="action-btn">
<div class="inner">
<form action="" method="GET">
<input class="btn" type="submit" value="Edit" onclick="returnBack()" />
</div>
</form>
<div class="inner">
<form onsubmit="sendEmail(); reset(); return false;">
<input class="btn-1" type="submit" value="Submit" />
</form>
</div>
</div>
</div>
</div>
</body>
</html>
The javascript file result.js
//call function using event listener
window.addEventListener('load',() => {
//create a const variable
const params = (new URL(document.location)).searchParams;
const name = params.get('name');
const email = params.get('email');
const subject = params.get('subject');
const details = params.get('details');
document.getElementById("result-name").innerHTML = name;
document.getElementById("result-email").innerHTML = email;
document.getElementById("result-subject").innerHTML = subject;
document.getElementById("result-details").innerHTML = details;
})
function returnBack(){
window.history.back();
}
I think the type="submit" in tag input is the problem. You should remove it and try again.
I have used the Thymeleaf foreach to traverse all posts where each post has a "Comment" button. I would like to display the comment list after click this "Comment" button.
The default is hidden
The following is my codes:
<div th:each="post:${posts}">
<div class="panel panel-default" th:object="${post}">
<div class="panel-body">
<p th:text="*{user.username}">username</p>
<p th:text="*{createTime}">time</p>
<p th:text="*{content}">content</p>
<div>
<form th:action="#{/posts/liked/input}" method="post"
style="display: inline">
<input type="hidden" name="postId" id="postIdId"
class="form-control" th:value="*{id}">
<button type="submit" class="btn btn-primary">like</button>
</form>
<button class="btn btn-primary commentBt"
style="display: inline">Comment</button>
</div>
</div>
<!-- This is the part I want to show after click Comment -->
<div style="display: none">
<form th:action="#{/posts/comment/input}" method="post">
<textarea class="form-control" name="content" id="contentId"
rows="1"></textarea>
<input type="hidden" name="postId" id="postIdId"
class="form-control" th:value="*{id}">
<button type="submit" class="btn btn-primary">Reply</button>
</form>
<div th:each="comment:*{comments}">
<div th:object="${comment}">
<p th:text="*{content}">content</p>
</div>
</div>
</div>
</div>
</div>
How to do this in the foreach loop?
You can do this by using js, below are example codes.
First, you need to add onclick to commit button:
<button class="btn btn-primary commentBt"
style="display: inline" onclick="showDiv()">Comment</button>
Then, get the hidden div and edit function showDiv to dispaly the div.
<!-- set id -->
<div id="test" style="display: none">
<script>
<!-- function to change display to block -->
function showDiv(){
var div = document.getElementById("test");
div.style.display="block";
}
</script>
Hope this will help you!
I have a chatbubble that when clicked, I want it to disappear and a chat window should come up.
The chat window is the wrapper div. I set it display = 'none' in the html code below. Then in the onclick of chatBubble I show the wrapper div using jQuery
So initially I shouldn't see the chat window. But I see it. Also when I click on the chatbubble, I get error Uncaught TypeError: "#wrapper".show is not a function. What am I missing?
<div id = "chatBubble" class="talk-bubble tri-right btm-right round">
<div class="talktext">
<p>Hi, can I help?</p>
</div>
</div>
<div id="wrapper" display = 'none'>
<div id="menu">
<p class="welcome">Welcome<b></b></p>
<p class="logout"><a id="exit" href="#">Exit</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox"></div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>
Relevant portion of javascript
$(document).ready(function() {
$("#chatBubble").click(function(){
//console.log("clicked")
('#wrapper').show();
})
});
Please suggest.
You are setting the style property in the wrong way. You have to set it through style attribute. show() is a jQuery function and you are missing that just before ('#wrapper').show(); which leads to the error.
Try the following:
$(document).ready(function() {
$("#chatBubble").click(function(){
//console.log("clicked")
$('#wrapper').show();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "chatBubble" class="talk-bubble tri-right btm-right round">
<div class="talktext">
<p>Hi, can I help?</p>
</div>
</div>
<div id="wrapper" style='display:none'>
<div id="menu">
<p class="welcome">Welcome<b></b></p>
<p class="logout"><a id="exit" href="#">Exit</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox"></div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>
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>
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>