JQuery not hiding the buttons upon ready - javascript

When I try to use the below code with jfiddle, I comment out the jinja and the buttons hide as expected, but in the browser, the input buttons don't hide
{% extends "layout.html" %}
{% block body %}
<div>
{% if session.logged_in %}
<form action="{{ url_for('add_entry') }}" method=post class=add-entry>
<dl>
<dt>Stock Ticker:
<dd><input type=text size=30 name=stockname>
<dt>Date:
<dd><input id="datePicker" type="date" name='start_date'>
<dd><input type=submit value=Add>
</dl>
</form>
{% endif %}
</div>
<div>
<form action="{{ url_for('edit_entry') }}" method=post class=edit-entry>
<table class="entries">
<tr>
<th>stock ticker</th>
<th>date bought</th>
<th> Edit</th>
</tr>
{% for entry in entries %}
<tr>
<td><h2>{{ entry.stockname }}</h2></td>
<td>{{ entry.start_date|safe }}</td>
<td>
<input type="hidden" name="name" value="Edit"/>
<input class="show" type="button" id="edit-button" value="Edit"/>
<input class="hide" type="button" id="cancel-button" value="Cancel Changes"/>
<input class="hide" type="submit" id="save-button" value="Save Changes"/>
</td>
</tr>
{% else %}
<em>Unbelievable. No entries here so far</em>
{% endfor %}
</table>
</form>
</div>
{% endblock %}
<script>
$(document).ready( function() {
var now = new Date();
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var today = now.getFullYear()+"-"+(month)+"-"+(day) ;
$('#datePicker').val(today);
$(".hide").hide();
});
</script>
and layout.html consists of...
<!doctype html>
<title>Flaskr</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
<div class=page>
<h1>Flaskr</h1>
<div class=metanav>
{% if not session.logged_in %}
log in
{% else %}
log out
{% endif %}
</div>
{% for message in get_flashed_messages() %}
<div class=flash>{{ message }}</div>
{% endfor %}
{% block body %}{% endblock %}
</div>
Fiddle: http://jsfiddle.net/5ZNTf/

You are defining lots of
<input type="submit" id="save-button" value="Save Changes"/>
in your for loop, so you have multiple input tags with the same id on the page, thus it does not work. Try giving the inputs a class instead.

Use class instead of id for your input elements.
<input type="hidden" class="name" value="Edit"/>
<input type="button" class="edit-button" value="Edit"/>
<input type="button" class="hide" value="Cancel Changes"/>
<input type="submit" class="hide" value="Save Changes"/>
Change the selector to use class.
$("input[class=hide]").hide();
Try this: http://jsfiddle.net/5ZNTf/1/

Id's need t be unique. If you would like to hide multiple elements with the same name use a class.
<button class="hide">Cancel</button>
<button class="hide">Save</button>
Then add a css class to hide them. It's more reliable IMO.
.hide {
display: none;
}

The issue had to do with localhost not property reading in jquery -_-
"//url" instead of "http://" or "https://" only works remotely

Related

Shopify adding two products to cart with one checkout button

So I have a bundle I created to add two products to cart once those products are selected. I want them to be added to cart at the same time. I'm currently only getting one product being added, with the name="id". How can I create the values in input for both to checkout?
Here's my form:
<form method="post" action="/cart/add" class="col-button ">
<input id="idPrice" type="hidden" name="id" value="" />
<input id="designPrice" type="hidden" name="id" value="" />
<input min="1" max="2" type="hidden" id="quantity" name="quantity" />
<button name="checkout" {%unless product.available %}style='margin-bottom:20px;'{% endunless %}type="{% if settings.cart_action == 'ajax' %}button{% else %}submit{% endif %}" name="add" class="collection-add-to-cart {% if settings.cart_action == 'ajax' %} ajax-submit {% endif %}action_button add_to_cart {% if show_payment_button %} action_button--secondary {% endif %} {% if product.available == false %}disabled{% endif %}" data-label={{ add_to_cart_label | json }}>
{{ 'layout.general.checkout' | t }}
</button>
</form>
Thanks in advance!

uncheck and check all checkboxes with a button in flask

I have a flask app that has a bunch of checkboxes, some of the pre-checked. I would like to have a button that checks/unchecks all the checkboxes.
I realized that I should do it with a javascript function, so I created a file script.js in the static folder and put these functions in it:
$("#check-all").click(function(){
$("input[type='checkbox']").prop('checked',false);
});
$("#uncheck-all").click(function(){
$("input[type='checkbox']").prop('checked',true);
})
This is the html page:
<script type="text/javascript" src="{{ url_for('static', filename = 'script.js') }}"></script>
<div class="row" style="border:solid ; background-color:lightgray">
<form method="POST" , action="{{ url_for('submitting') }}">
<div class="col-md-6">
<br>Please select detached object(s):<br>
{% for o in data.objects %}
<h4><input type="checkbox" name="word_objs" value="{{ o }}"> {{ o }} <br></h4>
{% endfor %}
<input type="button" id="uncheck-all" value="UncheckAll"/>
<input type="button" id="check-all" value="CheckAll"/><br>
</div>
</form>
{% endblock %}
</div>
But unfortunately, none of them work. I would appreciate it if anyone helps me with it.

Filter Datalist input

I have two drop down list inputs ,both of them comes from datalist , i want that base on the input that the user choose, to filter the other input to show only relevant results .
I am rendering the data from python back to HTML page
The data contains company name and bank account number,
So i want base on the company that user choose to show only the relevant account to the selected company
<form id="the_form" method="POST">
{% csrf_token %}
From:
<input name="start_date" class="datepicker" type="date" value={{start_date}}/>
To:
<input name="end_date" class="datepicker" type="date" value={{end_date}}/>
<input type="text" list='List_of_Companies' data-search-in="Company" id="Input1" name="Companyname" placeholder="Choose a Company" value="{{ Company}}"/>
<input type="text" list='List_of_Accounts' data-search-in="Account" id="Input2" name="Accountname" placeholder="Choose an Account ID" value="{{ Account_Id}}"/>
<br> <br>
<button name="action" type="submit" id="showccounts" value="show">Show</button>
<button name="action" type="submit" value="download">Download</button>
<datalist id="List_of_Companies">
<select id="filenamelist" size="5" class="select">
{% for Company in info_list %}
<option value="{{ Company.3 }}">{{ Company.3 }}</option>
{% endfor %}
</select>
</datalist>
<datalist id="List_of_Accounts">
<select id="filenamelist" size="5" class="select">
{% for Company in info_list %}
<option value="{{ Company.0 }}">{{ Company.3 }}</option>
{% endfor %}
</select>
</datalist>
</form>
{% load staticfiles %}
<div id="loading" style="width:300px;height:300px;display:table-cell; vertical-align:middle; text-align:center">
<img src="{% static "app/images/Loading_icon.gif" %}" style="margin:auto">
</div>
<table id="theTable" hidden>
<thead>
<tr>
{% for c in columns %}
<th>{{ c }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for r in rows %}
<tr>
{% for c in r %}
<td>{{ c }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
{% block scripts %}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

how to disable input type = text on check box click if i have many inputs of the same name

I'm getting many data and i'm looping into them in html so there are many inputs with the same name
My html code :
{% for Permission in Permissions %}
<tr>
<td style="text-align:center;"> {{Permission.perm_label}} </td>
<td style="text-align:center;"> <input type="checkbox" class="permUsersClass" id="permUsers" name="permUsers" value="permUsers" {% if Permission.perm_users != 0 %} checked {% endif %}> <input type="text" id="permUsersText" name="Users" value="{{Permission.perm_users }}" > </td>
<td style="text-align:center;"> <input type="checkbox" id="permProfile" name="permProfile" value="permProfile" {% if Permission.perm_profile != 0 %} checked {% endif %} > <input type="text" id="permProfileText" name="Profile" value="{{Permission.perm_profile }}"></td>
<td style="text-align:center;"> <input type="checkbox" id="permSchedule" name="permSchedule" value="permSchedule" {% if Permission.perm_schedule != 0 %} checked {% endif %}> <input type="text" id="permScheduleText" name="Schedule" value="{{Permission.perm_schedule }}"> </td>
<td style="text-align:center;"> <input type="checkbox" id="permAccount" name="permAccount" value="permAccount" {% if Permission.perm_accounting != 0 %} checked {% endif %}> <input type="text" name="Accounting" value="{{Permission.perm_accounting}}"> </td>
</tr>
{% endfor %}
My javascript functiom
$('.permUsersClass').change(function () {
$('input[name=Users')[0].disabled = !this.checked;
}).change();
In javascript how to disable specific text box and not just the first one

Remove form from DOM using JavaScript

I have three radio buttons.. each radio buttons on click have an independent form that appears. I need to remove form from DOM when i click on a radio button. and there are a third one not ready yet. When i click on the first radio button only its form appears, the other two are removed from DOM. Same for other.
I don't have a good idea about JavaScript.
Html:
<div class="page-header">
<h1>Backtesting{% if form.instance.pk %}: {{form.instance.title}} {% endif %}</h1>
</div>
<div class="row">
<div class='col-md-9'>
<form action="{% url "backtest" %}" method='POST' role='form' id='form'>
{% csrf_token %}
<div id="tabs">
<input type="radio" name="tabs" value="first" id="toggle-tab1" checked="checked" />
<label for="toggle-tab1">Long</label>
<input type="radio" name="tabs" value="second" id="toggle-tab2" />
<label for="toggle-tab2">Short</label>
<input type="radio" name="tabs" value="third" id="toggle-tab3" />
<label for="toggle-tab3">Long and Short</label>
<div id="tab1" class="tab" >
{% include 'tags/parameters_form.html' %}
<br />
{% if user.is_authenticated %}
<input type='submit' id='run' value='Run' class='btn btn-default'>
{% if user.profile.is_active %}
Name: {{ form.title }} <input type='submit' name='save' value='Save' class='btn btn-default'>
{% else %}
<p>
Expired account! you need to reactivate in order to save parameters.
</p>
{% endif %}
{% else %}
Please login in order to Run backtesting!
</br>
Our system needs your email in order to notify you once one or more of your simulations are done. This is a safer way for you to keep track of your previous simulations (/jobs).
{% endif %}
</div>
<div id="tab2" class="tab" >
{% include 'tags/parameters_backtest_form.html' %}
<br />
{% if user.is_authenticated %}
<input type='submit' id='run' value='Run' class='btn btn-default'>
{% if user.profile.is_active %}
Name: {{ form.title }} <input type='submit' name='save' value='Save' class='btn btn-default'>
{% else %}
<p>
Expired account! you need to reactivate in order to save parameters.
</p>
{% endif %}
{% else %}
Please login in order to Run backtesting!
</br>
Our system needs your email in order to notify you once one or more of your simulations are done. This is a safer way for you to keep track of your previous simulations (/jobs).
{% endif %}
</div>
</div>
</form>
</div>
</div>
{% endblock %}
<form action="{% url "backtest" %}" method='POST' role='form' id='form'>
{% csrf_token %}
<div id="tabs">
<input type="radio" name="tabs" value="first" id="toggle-tab1" checked="checked" />
<label for="toggle-tab1">Long</label>
<input type="radio" name="tabs" value="second" id="toggle-tab2" />
<label for="toggle-tab2">Short</label>
<input type="radio" name="tabs" value="third" id="toggle-tab3" />
<label for="toggle-tab3">Long and Short</label>
<div id="tab1" class="tab" >
<!-- first form will show when page load -->
<fieldset id="first" class="toggle">
{% include 'tags/parameters_form.html' %}
</fieldset>
<fieldset disabled id="second" class="toggle">
{% include 'tags/parameters_form.html' %}
</fieldset>
<fieldset disabled id="third" class="toggle">
{% include 'tags/parameters_form.html' %}
</fieldset>
.....
Js
$('[name="tabs"]').click(function(){
$('.toggle').prop("disabled", true);
var val = $(this).val()
$('#'+val).prop('disabled', false);
});
When you add disabled attr in fieldset then fieldset inner input field data will not post in form that means field will not work in fieldset tag if it have disabled attribute. So you can show specific form in each condition and add attribute disable in fieldset tag that inner field data will not post.
Read about https://www.w3schools.com/tags/att_fieldset_disabled.asp
If you cannot change DOM elements and add a class there my answer would be to attach a event listener to each of the buttons:
'use strict';
var button1 = document.getElementById('toggle-tab1'),
button2 = document.getElementById('toggle-tab2'),
button3 = document.getElementById('toggle-tab3');
button1.addEventListener('click', function () {
// Code that takes it away (hide DOM elements or whatever you need)
});
On a side note a better approach would be to add a function to all of the radio inputs and then based on the ID or value of the input radio you can alter the behavior:
<input type="radio" name="tabs" onclick="handleClick(this)" value="first" id="toggle-tab1" checked="checked" />
Then you can have a function:
function handleClick (e) {
if (e.id == 'toggle-tab1') {
// Code that takes it away (hide DOM elements or whatever you need)
}
};
function onclick(e){
var tab = document.getElementById('toggle-tab1');
tab.style.visibility = "hidden";
}
button1.addEventListener('click', onclick(e))
This should do the trick!
Problem is resolved with :
<input type="radio" name="tabs" value="first" id="toggle-tab1" {% if strategy == 'l' %} checked="checked"{% endif %} />
<label for="toggle-tab1">Long</label>
<input type="radio" name="tabs" value="second" id="toggle-tab2" {% if strategy == 's' %} checked="checked" {% endif %} />
<label for="toggle-tab2">Short</label>
<div id="tab1" class="tab" >
<form action="{% url "backtest" %}" method='POST' role='form' id='form'>
{% csrf_token %}
<input type="hidden" name="tabs" value="first" id="toggle-tab1" checked="checked" />

Categories