I would like to add forms to a page in real time, but I'm not sure how to approach this.
Let's say that this is the class of my form:
class MyForm(FlaskForm):
my_field = StringField()
This is the html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button type="button" id="addNewForm">Add new form</button>
</body>
</html>
Which also includes this script:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">/script>
<script type="text/javascript">
var form = '{{ form }}'
$("document").ready(function () {
$("#addNewForm").click(function () {
$("body").append(form)
});
});
</script>
Once I press the button I get back something like:
<forms.MyForm object at 0x000001C198CE5040>
I tried to extract the form HTML in order to pass it as an a string of html, but I can't find a way to do it (and suspect that there must be a better way).
What is the correct way of doing this?
Related
I need help on the following: I cannot get the JQuery to load the JSON data even though the JSON file is firing in the console.
Here is the HTML code;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.3.1.js"></script><!-- places Javascript reference file in html-->
<link rel="stylesheet" type="text/css" href="css/stylesheet.css"> <!--places css in sub folder-->
<title>H</title>
</head>
<body>
<div id="vanilla_ajax">
</div>
<button type="button" id="button1" onclick="loadAJAX()">Change to AJAX</button>
<div id="jq_ajax">
</div>
<button type="button" id="button2" onclick="loadJQUERY()">Change to JQUERY</button>
<script src="js/ajax.js"></script>
</body>
</html>
The first button loads and is fine so I have excluded that portion. It is the second one "loadJQuery()" that does not render on the screen. Here is the Javascript for it:
function loadJQUERY(){
/*place holder for ajax loading using JQuery*/
$('#jq_ajax').append('<p id = "test">'); //jq test
$.ajax({
url: "data/Holder.json",
type: 'GET',
dataType: "json",
success: function (result) {
$("#jq_ajax").html("<p>" + result.data + "</p>");
}
});
}
The pathway for the folder is correct as it works with the XML/Ajax version.
the JSON file was using single quotes instead of double quotes. That was the issue
I would like to get information when I put buttons, for this I use DOM, but I have errors, how can I solve this problems?
I tried to confirm if name is correct, and search about DOM, but I couldn't figure out it.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="uft-8">
<title>Pomodoro Timer</title>
</head>
<body>
<p class="menu">menu</p>
<p class="timer">0.00</p>
<button data-option='start' class="timer_button" >start</button>
<button data-option='stop' class="timer_button">stop</button>
<button data-option='reset' class="timer_button">reset</button>
<script>
const buttons = document.querySelectorAll('[data-option]');
function test(e){
console.log(e);
}
buttons.forEach(()=>buttons.addEventListener('click',test));
</script>
</body>
I would like to see the results in the console when I put the buttons.
buttons.forEach((button)=>button.addEventListener('click',test))
The buttons is a list. When you iterate over it with forEach you can get each button as the first argument of the method. And that is where you must attach the event handler.
I am trying to get the value of the date which the user selects using datepicker. Once they select the date I want to be able to use the string for later. I have followed the extremely helpful answer found here: Returning a value using Date picker in HTMLService / Google Apps Script
I know I need to get it to the back end but am struggling to do so and I am sure there is a dumb mistake which I am missing because I am still learning. Here is the code, any help is welcoming.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/cupertino/jquery-ui.css">
<form id='findDate'>
Date:<input type="button" id = "date" onclick = "submitDates()" />
</form>
<script>
$("#date").datepicker({
showWeek: true,
firstDay: 0,
});
</script>
<script>
function submitDates() {
var dateDes = $("#date").val();
google.script.run.submitDates(dataDes);
}
</script>
The part I am most confused about is setting the value of the button and what to do with the onclick as I am sure I am not getting the value assigned. This is where it is supposed to get sent in the end.
function submitDates(dateDes) {
Logger.log(JSON.stringify(dateDes));
//goal is to set the datedes string to setDescription using the File Class
}
Thanks in advance.
I am writing a web app using AngularJS. It is not a single page application but all my codes are in one file- index.ejs.
So my set up for index.ejs roughly looks like this:
<head>
<title> Main page </title>
</head>
<body>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<ui-view></ui-view>
</div>
</div>
<script type = "text/ng-template" id = "/main.html">
.....
</script>
<script type = "text/ng-template" id = "/addStuff.html">
.....
</script>
<script type = "text/ng-template" id = "/searchStuff.html">
.....
</script>
<script type = "text/ng-template" id = "/about.html">
.....
</script>
</body>
I have a title for the main page on top of index.ejs. I would also like to have seperate titles for each page so when they are opened in a new tab, I know which one is which. I have tried doing:
<script type = "text/ng-template" id = "/addStuff.html">
<head>
<title> Add Stuff </title>
</head>
.....
But this doesn't work. Any ideas? Thanks.
You should use ui-router. In which case you can add a top level controller on the body or html element, for example <html ng-app="my-app" ng-controller="AppCtrl">
And add a '$stateChangeSuccess' listener whenever a new route is loaded...
.controller('AppCtrl', function AppCtrl($scope) {
$scope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
if (angular.isDefined(toState.data.pageTitle)) {
$scope.pageTitle = toState.data.pageTitle;
}
});
})
Then in the route definition you can add a property called data.pageTitle
$stateProvider.state( 'profile', {
url: '/profile',
views: {
"main": {
controller: 'ProfileCtrl',
templateUrl: 'profile/profile.tpl.html'
}
},
data:{
pageTitle: 'Profile'
}
})
Then in your main index.html file, you can bind the pageTitle attribute:
<title ng-bind="pageTitle"></title>
The most important part is the you move the directive ng-app on the <html> tag if it's not already in there.
Thus all the html page is covered by angular.
Eg:
<html ng-app="app">
...
</html>
Then it's really your choice.
You can use a custom directive to wrap the title, generate a service or just use the {{ }} syntax.
Source.HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red">Hello World</h1>
<p id="demo" style="color:red">Click the button below to remove the style attribute from the header above.</p>
</body>
</html>
Parser.html
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Parse</button>
<script>
function myFunction()
{
document.getElementsByTagName("H1")[0].removeAttribute("style");
document.getElementsByTagName("P")[0].removeAttribute("style");
};
</script>
</body>
</html>
Now what i need guidance for was , i need the Parse button from parser.html to apply the functions for source.html and save as output.html in same path of source.html...
Kindly help me out ...
What Willshaw said is correct. Javascript don't have that much power to solve your problem. You need to go for some serverside scripting.
I agree with the previous answer, it is a pretty strange way to do.
But, the DOM parsing being really easy with javascript, you could do the parsing on the client side, I guess, and then send the processed html to your backend, and save it in result.html.
I will use Jquery for the example, way easier.
Parser.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="btnLoad">Load Source</button>
<button id="btnParse">Parse</button>
<button id="btnSave">Save</button>
<div style="display:none" id="sourceContainer"></div>
<script>
$(document).ready( function() {
$(".btnLoad").click(function(){$("#sourceContainer").load("/source.html");})
$(".btnParse").click(function(){
$(".sourceContainer h1").removeAttr("style");
$(".sourceContainer p").removeAttr("style");
})
$(".btnSave").click(function(){
var data = {
html: $("#sourceContainer").html()
};
//replace first param by the backend url, add callback function
$.post("http://...", data, ...);
})
});
</script>
</body>
</html>