{%extends "layout.html"%}
{%block content%}
<form action="{{ url_for("plot")}}" method="post">
<label for="CompanyCode">Stock Symbol:</label>
<input type="text" id="CompanyCode" name="ccode" placeholder="Stock Symbol">
<label for="start_date">Start Date: </label>
<input type="date" id="start_date" name="start_date">
<label for="end_date">End Date:</label>
<input type="date" id="end_date" name="end_date">
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<script type="text/javascript" src="{{cdn_js | safe}}" integrity="sha384-T2yuo9Oe71Cz/I4X9Ac5+gpEa5a8PpJCDlqKYO0CfAuEszu1JrXLl8YugMqYe3sM" crossorigin="anonymous"></script>
<div class = "plot">
<h1> This is the plot page </h1>
</div>
</script>
{{script1 | safe}}
{{div1 | safe}}
1) <div data-include="C:/Users/saiyyam/Stocks_site/Demo/template/plotdata.html"></div>
2) <div class="xyz">
</div>
{%endblock%}
<script type="text/javascript">
$(function(){
$(class="xyz").load("plotdata.html");
});
</script>
I have tried using 2 methods but none of them worked would appreciate if you can help me out. The code above the two methods is plotting some graphs so that is no way related to importing files in HTML. And yes i hav used both the methods separately but they didn't work
If you want to just move to a new html page, then using javascript, you can add an onclick attribute to your button <button onclick="window.location.href='./layout.html'" type="submit">Submit</button> it might work im not sure just proposing another way :)
It works but not with this setup.. thank you CORS >:{
Check out my repl for an example since it only loads pages with same origin as it
function htmlLoader(path,element){
var xhr=new XMLHttpRequest()
xhr.open('GET',path,true)
xhr.send()
xhr.onload=function(){
element.innerHTML=xhr.response
console.log("Page Successfully Loaded from",path)
}
xhr.onerror=function(err){console.error("Either due to this being a sandbox(meaning CORS blocked) or the path itself is invalid/rejects returning the call, the request has FAILED")}
}
<input id="addPath" />
<button onclick="htmlLoader(document.getElementById('addPath').value,document.getElementById('placeHTML'))">Add HTML from Path</button>
<div id="placeHTML"></div>
Related
I want to pull data using JavaScript and show it in console. I don't know what I did wrong.
main.js
// ADD TO CART
$("#addToCartBtn").on('click',function(){
var _qty=$("#productQty").val();
var _productId=$(".product-id").val();
var _productName=$(".product-name").val();
console.log(_productId,_productName,_qty);
});
I am using django framework to write backend
detail.html
<div class="product-btns">
<div class="qty-input">
<span class="text-uppercase">Ədəd: </span>
<input class="input" type="number" value="1" id="productQty">
</div>
<input type="hidden" class="product-id" value="{{product.id}}">
<input type="hidden" class="product-name" value="{{product.name}}">
<button class="primary-btn add-to-cart"><i class="fa fa-shopping-cart" id="addToCartBtn"></i> Səbətə at</button>
</div>
The problem is probably that the element that has id="addToCartBtn" is not really the button but the <i> element - which has no content and therefore no width. So it is never clickable.
I have a little problem. After some tests and searching work I thought, I ask my questions.
I have a <form> in a for each loop. and for every Button (its a basket button that puts a product in the basket) I reload the page, but before the refresh, I want to get a little popover that shows that something is done. I thought the best thing should be a Popover.
<form action="[{$oViewConf->getSelfActionLink()}]" method="post" class="form-inline">
<input type="hidden" name="fnc" value="tobasket_alsobought">
<input type="hidden" name="aproducts[[{$nKey}]][am]" value="1">
<input type="hidden" name="aproducts[[{$nKey}]][aid]" value="[{$_product->oxarticles__oxid->value}]">
<input type="hidden" name="aproducts[[{$nKey}]][anid]" value="[{$_product->oxarticles__oxid->value}]">
<button style="margin:3px auto;border:1px solid #080;border-radius:.25rem;background-color:white;" data-toggle="popover" data-trigger="focus" data-content="[{oxmultilang ident="WIDGET_NEWBASKETITEMMSG"}]" data-placement="right" type="submit" class="btn btn-info basket" title="[{oxmultilang ident="DETAILS_ADDTOCART"}]"><i class="simg simg-shopping-cart" style="margin-right:0;display:inline;"></i></button>
</form>
This is my form and my JS looks like this :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('[data-toggle="popover"]').popover("max-width", "80%");
});
</script>
I get the Popover but only for the 1st value/button in my for each loop
How can I fix this and get the Popover be working for all buttons?
Below is a screenshot of how it looks like.
my foreach loop:
[{foreach from=$myArray item=_product name=_sProduktliste}]
...some template code to show article, price, img ....
<div class="col-12" style="z-index:10;">
[{oxhasrights ident="TOBASKET"}]
<form action="[{$oViewConf->getSelfActionLink()}]" method="post" class="form-inline">
<input type="hidden" name="fnc" value="tobasket_alsobought">
<input type="hidden" name="aproducts[[{$nKey}]][am]" value="1">
<input type="hidden" name="aproducts[[{$nKey}]][aid]" value="[{$_product->oxarticles__oxid->value}]">
<input type="hidden" name="aproducts[[{$nKey}]][anid]" value="[{$_product->oxarticles__oxid->value}]">
<button style="margin:3px auto;border:1px solid #080;border-radius:.25rem;background-color:white;" data-toggle="crossSell_popover" data-trigger="focus" data-content="[{oxmultilang ident="WIDGET_NEWBASKETITEMMSG"}]" data-placement="bottom" type="submit" class="btn btn-info basket" title="[{oxmultilang ident="DETAILS_ADDTOCART"}]"><i class="simg simg-shopping-cart" style="margin-right:0;display:inline;"></i></button>
</form>
[{assign var="nKey" value=$nKey+1}]
[{/oxhasrights}]
</div>
</div>
[{if $nKey >= 12}]
[{php}]break;[{/php}]
[{/if}]
[{/if}]
[{/foreach}]
You need to adapt your jquery script to apply it on multiple element.
Check the answer from here:
Jquery matching multiple elements with same id/class
i solved it.
Marat his answer helped me.
i changed :
<script>
$(document).ready(function() {
$('[data-toggle="popover"]').popover("max-width", "80%");
});
</script>
to
<script>
window.onload = function(){ $('[data-toggle="crossSell_popover"]').popover() };
</script>
i also changed the name to "crossSell_popover" to avoid issues with other functions in the shop.
and # the bottom i use
[{oxscript add="$('[data-toggle=\"crossSell_popover\"]').popover();"}]
to add the js to the base template.
Thanks a lot have a nice day
I'm using a super basic google form on my website. I'm using this website to extract the HTML to display it on my website - http://stefano.brilli.me/google-forms-html-exporter/
Once I hit submit, nothing happens. The page is just locked. I'm trying to resubmit it to another page. Here is my code
<div class="row">
<form action="https://docs.google.com/forms/d/e/1FAIpQLSfJQ9EkDN8aggSL9AEB2PK4BGiZgBzLDbS1IPppfSkU1zy-oA/formResponse"target="_self" id="bootstrapForm" method="POST">
<div class="col-sm-6 col-md-3">
<input id="679075295" type="text" name="entry.679075295" class="form-control" >
</div>
<div class="col-sm-6 col-md-3">
<input id="897968244" type="text" name="entry.897968244" class="form-control" >
</div>
<div class="col-sm-6 col-md-3">
<input id="685661947" type="text" name="entry.685661947" class="form-control" >
</div>
<input id="503500083" type="hidden" name="entry.503500083" value="<%= #investment.id %>" >
<div class="col-sm-6 col-md-3">
<button type="submit" value"submit" class="btn btn--primary type--uppercase" >Get Started</button>
</div>
</form>
Here is the ajax script
<script>
$('#bootstrapForm').submit(function (event) {
event.preventDefault()
var extraData = {}
$('#bootstrapForm').ajaxSubmit({
data: extraData,
dataType: 'jsonp', // This won't really work. It's just to use a GET instead of a POST to allow cookies from different domain.
error: function () {
// Submit of form should be successful but JSONP callback will fail because Google Forms
// does not support it, so this is handled as a failure.
alert('Form Submitted. Thanks.')
// You can also redirect the user to a custom thank-you page:
window.location = 'http://reif.com.au/thankyou'
}
})
})
</script>
</div>
Feeling a little silly on this one. Essentially i didn't copy over all of the scripts. I was rushing through.. ALWAYS number 1 error!
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js" integrity="sha256-2Pjr1OlpZMY6qesJM68t2v39t+lMLvxwpa8QlRjJroA=" crossorigin="anonymous"></script>
This is what i needed to add, it now successfully submits and redirects!
This is my Index.cshtml file (I'm learning MVC .NET), and when I click on the Add button to add a new user, this user is not added when I go and check my Api.
I know that both the route (api/users) and the Json object are correct, and the script is being rendered.
I'am using Visual Studio 2017 for Mac and my Api service is Service Stack.
#model dynamic
#{
ViewBag.Title = "Protein Tracker";
Layout = "../Shared/_Layout.cshtml";
}
#section scripts
{
<script type="text/javascript">
function AddNewUser(){
var goal = $('#goal').val();
var name = $('#name ').val();
$.post("api/users", { 'Name' : name, 'Goal' : goal });
}
</script>
}
<h2>Protein Tracker</h2>
<div>
<label for="select-user">Select a user</label>
<select id="select-uder"></select>
</div>
<hr /> <!-- horizontal rule -->
<div>
<h2>Add new user</h2>
<label for="name">Name</label>
<input id="name" type="text" /><br />
<label for="goal">Goal</label>
<input id="goal" type="text" /><br />
<input id="add-new-user-button" type="button" value="Add" onclick="AddNewUser()" />
</div>
Thank you for the help guys, I tried everything everyone suggested, but when I used the Chrome WebInspector (like #mythz suggested) I discovered that "$" was not defined, so I understood that my code was not being recognized as JQuery or something like that. And when I added the following line of code it worked as expected:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
Javascript templates
<script type="text/x-jsrender" id="questionTmpl">
<li class="question">
<input type="text" name="survey[question]" />
<button class="add_answer">Add Answer</button>
<ul></ul>
</li>
</script>
<script type="text/x-jsrender" id="answerTmpl">
<li class="answer">
<input type="text" name="survey[answer]" />
</li>
</script>
Jquery
$(document).ready(function () {
$("#add_question").click(function(e) {
e.preventDefault();
$("#questionForm ol").append($.templates("#questionTmpl").render())
});
$("#questionForm").on('click', '.add_answer', function(e) {
e.preventDefault();
console.log()
$(this).parent().find("ul").append($.templates("#answerTmpl").render())
});
});
erb
<div class="container">
<br>
<form action="/surveys" method="post" id="questionForm">
<input type="text" name="title" placeholder="survey name">
<button id="add_question"> Add a question </button>
<ol></ol>
<input type="submit" value="create" id="submit_form">
</form>
</div>
I am making a survey application in sinatra. The way I currently have it set up is to using jsrender, render templates for adding questions and adding answers. My question is regarding the names of the input text fields in the javascript templates. Basically I was wondering if there is a way to set up the parameter names so that sinatra will collect them all as a hash, using the survey[question] as a key, and an array of the survey[answer] parameters as an array of values for said key.
If you POST a form, then Sinatra automatically gets all of the values from the post in a variable params.
Try this and you should see what is going on:
get '/surveys' do
puts params.inspect
end