Develop Reference

Python 3+ | Flask / SocketIO | How to update page (no refresh) with new HTML?

Recently I have been trying to create a web app.
Unfortunately I don't have much experience with JS, jQuery and similar functioning languages.
I mainly write in Python 3.5+ and the application I have written is a mixture of the following:
Python 3.6
Anaconda 3
jQuery (examples only, not self-written)
HTML
The setup is as follows.
Client request -> Nginx reverse proxy -> Gunicorn -> Flask
I have currently got an example application running, which is really helpful for me to understand the inner workings, however, it's not quite so purpose driven and I feel I've been lead astray with SocketsIO.
What is my objective you ask?
I want users to be able to submit a form, upon form submission, place the data from the forms into a second "section" or "content section" within the same page.
Now, whilst this would be very simple if I would be happy with plaintext being updated on the page (without refresh), unfortunately, I would like to go one step further and render new HTML content, instead of a plaintext "<p>" looking message.
For example, we emit a message that submitted by a form.
The original outcome would be;
<p>This is a message</p>
However, I would like something more along the lines of;
<form><input type="text" value="This is a message"><input type="submit"></form>
The ultimate goal, would be to "queue" submissions to be reviewed after all form submits are done.
Where am I stuck?
I am able to show the content I want after submission, but I cannot make it render the message as html instead.
Currently the output of the message looks like this;
<input type="text" value="Recently added: test test">
Where "test test" was added to the message with two separate form inputs.
Providing snippets:
app.py;
#app.route('/')
def index():
return render_template('index.html', async_mode=socketio.async_mode)
#socketio.on('my_event', namespace='/test')
def test_message(message):
emit('my_response',
{'data': 'Recently added: '+message['data']+' '+message['password']})
Within the main template we have some JS to catch the submits.
socket.on('my_response', function(msg) {
$('#log').append('<br>' + $('<div/>').text('<input type="text" value="' + msg.data + '">').html());
});
And also inside the main template we have the form that we submit the data via;
<form id="emit" method="POST" action='#'>
<input type="text" name="emit_data" id="emit_data" placeholder="Message">
<input type="text" name="password" id="password" placeholder="Other Message">
<input type="submit" value="Echo">
</form>
And finally inside of the main template again, we have the "" that will hold the data;
<h2>Receive:</h2>
<div id="log"></div>
Disclaimer:
I have attempted to provide as much information as possible, however, should you feel there is more information you require in order to provide an accurate answer, please feel free to comment and I will reply as best I can.
Kind regards,

Answered myself:
Slightly overcomplicated it.
This:
socket.on('my_response', function(msg) {
$('#log').append('<br>' + $('<div/>').text('<input type="text" value="' + msg.data + '">').html());
});
Needs to be more like:
socket.on('my_response', function(msg) {
$('#log').append('<br><input type="text">' + $('<div/>').text(msg.data).html());
});

Yahoo Merchant Store Catalog Tags Insert Dynamically with Javascript, Jquery, or Ajax

I opened up a yahoo store through their Merchant Service. They have a pretty good store catalog that I have used on a business site that I own. I like it so I decided to use the service again on another business I own. I got the site built but have ran into a few issues with calling the Yahoo Catalog Tags. The tags are basically comments. EX: (<!--#ystore_order id=item_id -->). When the site is loaded it is parsed and the page loads the product details in place of this tag/comment.
I can get everything to work except for the action attribute of my form.
I have tried a bunch of things but I cannot seem to get the action set for my form. If I hard code the tag then it works fine but obviously if I did that then I would have to create a page for every single product.
My form:
<div id="list">
<form method="post">
<input id="btnSubmit" type="submit" value="Add To Cart">
</form>
</div>
Trying to add the comment/tag to form action attribute. I've done it this way(below) and also by getting rid of the variable and just paring the url in the jquery attr function.
<script language="javascript">
$.ajaxSetup({cache: false});
$(document).ready(function(){
//Get URL from URL Query String.
var obj = getUrlVars()["Object"];
//Set form action attribute
$('form').attr('action', '<!--#ystore_order id='+ obj +' -->');
});
</script>
I've also tried creating the form dynamically.
<script language="javascript">
$.ajaxSetup({cache: false});
$(document).ready(function(){
//Get URL from URL Query String.
var obj = getUrlVars()["Object"];
var new_form = '<form method="post" action="<!--#ystore_order id='+obj + ' -->">' +
'<input type="submit" value="Add To Cart" id="btnSubmit">' +
'</form>';
$('#list').append(new_form);
});
</script>
I have tried to escape some characters but have had no success there either.
"\<\!--#ystore_order id='+obj + ' --\>"
I know the issue has something to do with the comment syntax but if I can add it manually then I should be able to do it dynamically. I know this is a hard one to test but if anyone thinks they may have a solution I would be happy to set up an ftp account on my site so you can test and I will provide the product ID's for testing. I've fought with this for about 30+ hours.

Yahoo store tags are populated server-side. Adding a store tag on the client side using Javascript won't do anything, because the code that recognizes the store tag and appends the appropriate html will never see the tag you drop in on the client side. There's no client-side solution possible
The best solution here would be to write a server side program to populate a template with the appropriate tag in response to http requests. I'm not super-familiar with the Yahoo store, so I don't know what the best language for this would be, but it would be a very simple program given how straightforward it sounds like your template is. Since this is already embedded in a site you own, I'd just use whatever backend language you are already working in.
Once you have a server side script that executes and returns the html you need, you could use AJAX to populated it with the appropriate product details as needed.

Recaptcha invalid-request-cookie

I'm trying to do Recaptcha in my page. I'm checking a demo with the localhost. But, I'm keep getting error as invalid-request-cookie always when checking. I'm following Displaying recaptcha without plugin and Verifying recaptcha without plugin.
Here is my code
<html>
<body>
<form method="post" action="http://www.google.com/recaptcha/api/verify">
<script type="text/javascript"
src="http://www.google.com/recaptcha/api/challenge?k=my_public_key">
<!-- I used my public key -->
</script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=my_public_key"
height="300" width="500" frameborder="0"></iframe><br>
<textarea name="recaptcha_challenge_field" rows="3" cols="40">
</textarea>
<input type="hidden" name="recaptcha_response_field"
value="manual_challenge">
</noscript>
<input type="hidden" name="privatekey" value="my_private_key">
<!-- I used my private key -->
<input type="submit" value="Ok"/>
</form>
</body>
</html>
In google, I saw that, invalid-request-cookie means The challenge parameter of the verify script was incorrect. But It seems to be correct. Is it right or is there any other mistakes? Someone help please

After reading this, I realized that the author of one of our forms was using a public key for a different domain we also have. So make sure you're using the correct public key.

I am using Google recaptcha in an ASP.Net environment. Here is my code snippet:
in head tag:
<script src='https://www.google.com/recaptcha/api.js'></script>
HTML:
<div class="g-recaptcha" data-sitekey="My***PUBLIC***SiteKeyBlahBlah"></div>
That's it! Google handles the rest of the magic. You can check the length of the grecaptcha.getResponse() function's return variable to see if the user clicked it. For example:
if (grecaptcha.getResponse().length == 0)
//They didn't do it
else
//They either did it or spoofed your page with some bogus HTML to make it look like they did - they can do this by editing the source of the page and inserting text in a certain spot. View your page source after loading in a browser to see what I mean.
To verify that they didn't just enter random text - and that the value of grecaptcha.getResponse() is a valid response from Google, just call their web service with your site key - and the response, itself. I'm doing it from the code-behind with C# like so:
WebRequest CheckCaptcha;
CheckCaptcha = WebRequest.Create(String.Format([Google's Web Service URL],
[Your ***Private*** Site Key],
[The value of grecaptcha.getResponse()],
[IP address]));
Stream strm = CheckCaptcha.GetResponse().GetResponseStream();
StreamReader sr = new StreamReader(strm);
string everything = sr.ReadToEnd();
JavaScriptSerializer JS = new JavaScriptSerializer();
CaptchaResponse GoogleResponse = JS.Deserialize<CaptchaResponse>(everything);
Next, to evaluate Google's response:
if (GoogleResponse.success.ToUpper() != "TRUE")
//Invalid - they are up to no good!
else
//Valid - you're good to go!
Calling their web service is probably slightly different if you're doing it from the client side, but it's the same principle. I hope this helps.

Dynamically and Permanently Adding an Element to Your Page - Javascript/jQuery

I'm working on a website project from scratch. The content section of the main page has a form and a div of class "blog". When the user is logged in on the admin account, the form shows up. This allows you to pick a title and content to post in the blog. The current code works well, except for the fact that the posts are removed when the page is refreshed. How I can permanently add this to the page?
Here's my code:
<script type="text/javascript">
function addtext() {
var title = document.blogform.title.value;
var content = document.blogform.content.value;
var $blogTitle = $('<div class="blogtitle">' + title + '</div>');
var $blogContent = $('<div class="blogbody">' + content + '</div>');
$('#blog').prepend($blogContent);
$('#blog').prepend($blogTitle);
}
</script>
<h2>Submit New Blog Post</h2>
<div class="blogtitle">Submit a new blog post:</div>
<div class="blogbody">
<form name="blogform">
<fieldset class="fieldsetoffset"><legend>Post</legend>
<div>Title of Post:</div>
<input type="text" name="title">
<div>Content of Post:</div>
<textarea name="content" class="comment" rows="6" cols="88"></textarea>
<hr>
<input type="button" value="Add New Text" onClick="addtext();">
</fieldset>
</form>
</div>
<div id="blog"></div>

You should use a database (or flat-files, but not recommended..) to store those extra parts. On your page, create a database connection (php.net/PDO), fetch any existing records from the database and when the admin stores it you should insert it into your database.
HTML is flat, you can add and delete elements dynamically by altering the DOM but that's only on your screen and nobody elses :)

I assume that this is a static HTML page. Otherwise you would be refreshing from a server-based data source. If you are going to be doing this, then the only other way would be to store the data as client-side cookies.

You can't do this by Javascript or jQuery because they are client side languages.
for this which you want to achieve you have to use a Server Side Language and database

Javascript is client side, meaning when you add content to the page with jQuery it's local to your browser only, not on the server-side (it's not actually changing the website, it's just changing what your browser is rendering).
You will need to either use cookies (there is a great jQuery cookies plugin that's incredibly simple to use) or, preferably, have some kind of server-side script store it in the database and retrieve the values later, i.e. with PHP/mySQL, since cookies are still going to be specific to you rather than anyone who might visit the website. If nothing else you could use PHP to write it to a text/html file on the server that is then displayed later but that's a really ugly solution and a database is really where you should be going here.
I would probably use jQuery's AJAX functions to call a PHP function when addtext() is triggered that passes it the content and title values to write to the database. Then add a bit of php code on the page to check the database for existing posts and display them.

Submit HTML form to display entered info in new page

I have a HTML form (called form.html)and a JavaScript function such that when form is submitted, information in that form will be displayed.
Now I want all those info will be shown in new HTML page (called confirm.html), where should I go from?
NOTE: No php or sever-side or anything that really seriously related, it's just simple OFFLINE HTML-form problem, I just have 2 html place in same folder, I will test it on my browser, that's it. Only thing that I worry is how to use information from form.html file in confirm.html file since they are obviously separated.
Thank you very much, here is my form.html ( I dont have confirm.html yet)
<HTML>
<HEAD>
<TITLE>Contact</TITLE>
<script type="text/javascript">
function addtext()
{
var fname = document.myform.first_name.value;
var lname = document.myform.last_name.value;
var email = document.myform.email.value;
document.writeln("Thank you! You have just entered the following:");
document.writeln("<pre>");
document.writeln("First Name : " + fname);
document.writeln("Last Name : " + lname);
document.writeln("Email Address : " + email);
}
</script>
</HEAD>
<BODY>
<center>
<b>CONTACT US</b> <br></br>
<form name="myform">
<label for="first_name">First Name </label>
<input type="text" name="first_name" maxlength="50" size="30">
<br>
<label for="last_name">Last Name </label>
<input type="text" name="last_name" maxlength="50" size="30">
<br>
<label for="email">Email Address</label>
<input type="text" name="email" maxlength="80" size="30">
<br>
<input type="submit" value="Submit" onClick="addtext()">
</form>
</BODY>
</HTML>

Check out the window object of JavaScript: http://www.devguru.com/technologies/javascript/10855.asp
It has a property location, if you write into it, your browser will redirect:
window.location = "http://www.google.com";
Note though, that this will not post your data to confirm.html. what you are trying to do without server-side scripting is not very useful. An HTML form will use CGI (common gateway interface) to send data to a server, that can then process the information. If you use the file:// protocol (as you seem to be doing; all local, static files), there is no server-side to process the data, only JavaScript.
If using the GET method of sending the data through CGI, you could extract the data from the URL using javaScript (as mentioned in another question). To do this, just update your form like this:
<form action="confirm.html" method="get">
And do not put a onClick handler on the submit button, just let it submit.
Many other tools exist though that way more are suitable for the job: server-side scripting languages, examples include PHP, ASP, JSP. For local setups, your best best is using XAMPP.

If you don't want to rely on server-side technology, this becomes more complicated (and hacky, I might add). Probably the easiest would be to generate a url like this on submit -
http://localhost/confirm.html?first_name=val1&last_name=val2&email=val3
then add some code to confirm.html to unpack this. Here's a related question you may find helpful.
If you'd allow me a moment of editorializing, what exactly are you trying to do? If this is just a personal project to see how html works, then I'd strongly recommend starting to learn about server-side technology - once you start wanting to handle user data and persist state, you're pretty much forced to use the server. The web is by design pretty stateless; you can't pass variable in-between pages without either using the server, or through some very complicated AJAX & DOM updating techniques which tend to rely on specialized server files anyway. You can run a PHP & MySQL server locally using existing technology, and if you're interested in expanding your knowledge of web technology this is an inevitable step.