I am trying to build a website that has a discussion forum using django. I want users to be able to post new comments or reply to other user's comments. I have it so when they click the reply button, a new text area pops up
HTML
<button onclick="myFunction({{forloop.counter}})">Reply</button>
<div id="{{forloop.counter}}"> </div>
Javascript
function myFunction(x)
{
document.getElementById(x).innerHTML="<form action='' method='post'> {% csrf_token %} <textarea id=reply_body name=reply_body value={{reply_body}}> </textarea> <input type=submit> </form> ";
}
....What I want to do is pass the text of the body to my views so that I can know which comment the reply was to. However, I can't pass the textbody into the .innerHTML= ... Whenever I try to it just says that nothing is there. Is there something I'm missing here? Or an easier way to do this? Any help would be appreciated. Let me know if I should post more code or describe anything in greater detail.
Do you not mean
<textarea id=reply_body name=reply_body >{{reply_body}}</textarea>
Related
If this form submits as invalid, I want to override the htmx and do a HttpRedirectResponse that refreshes the full page instead of just changing the div, #superdiv, contents.
<form id="create_form" action="." method="post" hx-post="." hx-target="#superdiv" hx swap="outerHTML">
{{ form }}
<button id="button" type="submit">Create</button>
</form>
I have been attempting to do this in the def post of my views.
if form.is_valid():
return self.form_valid(form)
else:
return HttpResponseRedirect(reverse_lazy("logs:manager_form"))
Would this be achieved better using JavaScript? I am trying my best to sticking to learning only vanilla JavaScript for now.
Thanks for any help.
I don't know if you already use it but the django-htmx extension is really good and handy.
You can trigger an entire client refresh from your Django view.
HttpResponseClientRefresh
I hope it is useful 😊
Apologies in advance if this question has been asked earlier. I did find some similar questions on web but I couldn't figure out the answer still. You can say I have never dealt with anything beyond basic HTML. So any help would be appreciated.
I have a HTML file (Say text.html) only for personal use. In the file, there will be an input box for entering text and a submit button. I want that if I clicks on submit, it opens a particular hyperlink from an external webpage based on the input text. I guess it's like "I am feeling Lucky" of Google.
Example: If the user enters "Test" and clicks on Submit, it should open the second result from the page "https://www.google.com/search?q=test"
Here is my HTML:
<!DOCTYPE html>
<html>
<body style="background-color:beige">
<h1 style="text-align:center"><font size="14">Test</font></h1>
<style type="text/css">
</style>
<form id="form">
<div align="center" style="vertical-align:bottom">
<input type="text"
value="Test"
id="input"
style="height:50px;width:200px;font-size:14pt;">
</div>
</form>
<TABLE BORDER="0">
<TD><button class="button" id="button01">SUBMIT</button></TD>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button01').click(function(e) {
var inputvalue = $("#input").val();
window.open("https://www.google.com/search?q="+inputvalue);
});
</script>
Also, here is the example of the div element from the page on which the hyperlink I want to open is on:
<div id="XYZ" class="contentEditValue" style="float:left;width:180px;">
2nd Result
</div>
I have read that it can be achieved with PHP or Jquery and all but they are not something I have ever worked on. Thank you very much in advance for any help!
Appreciate any other alternatives as well.
You shouldn't be able to do that because of security. If that (reading content from iframes, other browser windows...) would be possible, an attacker could add JS keylogger to your internet banking login or read your messages on Facebook. CORS (https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) is used to block these requests and if the website doesn't say explicitly that you are allowed to do something with its content, most browsers won't allow you that.
You have are missing a }); to close the ready() function
<script type="text/javascript">
$(document).ready(function(){
$('#button01').click(function(e) {
var inputvalue = $("#input").val();
window.open("https://www.google.com/search?q="+inputvalue);
});
});
</script>
Here's a basic example of how to do this in PHP.
Taking JavaScript/JQuery out of the picture, let's just say you have a basic form:
<form>
<input type="text" value="Test" name="input">
<input type="submit">
</form>
Without specifying action or method attributes on the <form> tag, the form will make an HTTP GET request to the URL of the page it is on, so for this example the PHP code will be on the same page as the form. Here's a more detailed description of sending form data if you're interested.
Now that you have a way to pass the input to the PHP script*, there are three basic parts to this problem.
Make a request to the page you want with a query string including your input
http_build_query is an easy way to construct a properly encoded query string to use with your request. For this example we'll use file_get_contents to make the request. There are other ways to do it, including cURL, but let's keep it simple.
$query = http_build_query(['q' => $_GET['input']]);
$page = file_get_contents('http://www.example.com/?' . $query);
I'm not using Google for this example because it's a bit more complicated to find the right links in the response and follow them. (Partially because they don't really want you to do it that way.)
Find the link you want in the response
Don't try to find the link in the response with regex. You'll have problems with it, come back to Stack Overflow to try to solve them, and people will tell you that you shouldn't be using regex, so just skip that part and use a DOM parser.
$doc = new DomDocument;
$doc->loadHTML($page);
$links = $doc->getElementsByTagName('a');
$url = $links[0]->getAttribute('href');
I used getElementsByTagName() to find links, but if the page is more complex an xpath query will work better. Also, I used the first link ($links[0]) because example.com only has one link. $links[1] would get you the second link if it existed.
Follow the link
header("Location: $url");
exit;
If everything goes well, you'll end up where you want to be. But there are a lot of things that can go wrong. If you're requesting a resource that you have no control over, it can change at any time without any advance warning to you, so your code that finds the link may stop working. You may get blocked from making requests. Scraping links from sites like this violates the terms of service on many sites, so check that out beforehand. You may find that the site offers a web API, which should be a much better way to access its content than this.
*You don't really need a form for this; you can just pass the input parameter in the URL to your page.
Hey all. I'm scripting a blogging system for my website. So I have this function:
<script language="javascript" type="text/javascript">
/* <![CDATA[ */
function reply(text) {
document.replyform.comment.value += text;
}
/* ]]> */
</script>
And this link next to each comment:
Reply
And my submit comment form has the name tagged to it:
<a name="reply" id="reply">
<form method="post" action="/path/to/form" name="replyform">
// Etc...
<textarea name="comment" id="comment" rows="5" cols="10" class="f-comment"></textarea>
// Etc...
What I want to achieve is that when a user clicks on "Reply" to a certain comment, not only will it add a "#Name" to the form's textbox, but it'll also jump TO the form (as I have included href="#reply"). However that doesn't seem to work and I'm assuming the javascript onclick overrides it?
When it comes to Javascript, I'm completely clueless! What should I do? Thank you.
I would start by closing the reply anchor, <a name="reply" id="reply"></a> and then removing the return false from the link. Returning false ignores the link (href). Another solution is to figure out the position of the anchor link #reply and scroll there using javascript.
I have Commenting system in my app. For a single video entry anyone can post a comment and someone else can post reply to that comment and replies, cannot have thier further reples, similar to StackOverflow is doing (1 Answer, and thier 1 or more replies).
I want the similar functionality what SO has, Let's I have the following HTML
<div class="comment" id="comment-908">
First comment
</div>
<div class="reply">
<div id="reply-909>
reply 1
</div>
<div id="reply-910>
reply 2
</div>
<div id="reply-911>
reply 3
</div>
</div>
<form id="reply-form">
<textarea id="replycomment" name="replycomment"></textarea>
<input type="submit" name="submit-reply" value="add reply" />
</form>
Now above HTML is a sample which I have created, When someone will click on "add reply" button then I am using jquery to post there reply.
Now I want to know that there will be multiple comment and multiple add reply forms. So who clicks on which button and for which comment someone wants to post a reply, how will i know that?
The above HTML is not in correct way, please suggest me the correct HTML flow which I can use and how to work with jquery?
now I want to know when soe
Change the HTML form to something similar first:
<form class="reply-form" action="url/to/submit/123456" method="post">
...
</form>
The reason behind this is, you cannot have same id for more than one element, so, to simplify the problem, you can just make all reply form to be in class reply-form (which is straightforward). Adding the form action with the id is also a good practice so that even your client don't have javascript/ajax enabled, it can still functional when clicking on the submit button.
And then, the rest of the work would be (suppose your form is ajax submit):
$(".reply-form").each(function(){
var form = $(this);
var submitUrl = form.attr("action");
$("input:submit", form).click(function(){
// implement the submit logic here.
});
});
How do I make one of those hyperlinks where when you click it, it will display a popup asking "are you sure?"
<INPUT TYPE="Button" NAME="confirm" VALUE="???" onClick="message()">
I already have a message() function working. I just need to know what the input type for a hyperlink would be.
<a href="http://somewhere_else" onclick="return confirm()">
When the user clicks the link, the confirm function will be called. If the confirm function returns false, the link traversal is cancelled, if true is returned, the link is traversed.
try to click, I dare you
with the function
function confirmAction(){
var confirmed = confirm("Are you sure? This will remove this entry forever.");
return confirmed;
}
(you can also return the confirm right away, I separated it for the sake of readability)
Tested in FF, Chrome and IE
As Nahom said, except I would put the javascript:message() call directly in the href part (no need for onclik then).
Note: leaving the JavaScript call in the onClick has a benefit: in the href attribute, you can put a URL to go to if the user doesn't have JavaScript enabled. That way, if they do have JS, your code gets run. If they don't, they go somewhere where they are instructed to enable it (perhaps).
Now, your message routine must not only ask the question, but also use the answer: if positive, it must call submit() on the form to post the form. You can pass this in the call to ease the fetching of the form.
Personally, I would go for a button (input tag as you show) instead of a simple link to do the process: it would use a more familiar paradigm for the users.
[EDIT] Since I prefer to verify answers I give, I wrote a simple test:
<script type="text/javascript" language="JavaScript">
function AskAndSubmit(t)
{
var answer = confirm("Are you sure you want to do this?");
if (answer)
{
t.form.submit();
}
}
</script>
<form action="Tests/Test.html" method="GET" name="subscriberAddForm">
<input type="hidden" name="locationId" value="2721"/>
<input type="text" name="text" value="3.1415926535897732384"/>
<input type="button" name="Confirm" value="Submit this form" onclick="AskAndSubmit(this)"/>
</form>
Yes, the submit just reload the page here... Tested only in FF3.
[EDIT] Followed suggestion in the comments... :-)
???
This answer would be OK only when the click need NOT navigate the user to another page.