Develop Reference

Prevent loading page when changing select value

I got this select tag in my form, which contains the name of a room
<select class = 'form-control' id = 'room_select' name = 'room'>".$rooms."</select>
I got 4 rooms so this select contains 4 options
$(document).ready(function(){
$("select").msDropDown();
$("#room_select").change(function(e){
e.preventDefault();
$("#room_select_form").submit();
});
$("#room_select option[value='<?php echo $room; ?>']").attr('selected', 'selected');
});
Then I got this doc ready function first one .msDropDown(); is to be able to get images in the options. Then I got the change function which I googled around and put in a preventdDefault to not refresh page, (still refresh) I thought that I could use an ajax funciton to do this but I dont really know how to write it down or even if it works.
So currently the problem is that my function changes the room value as seen last in the code, but it refreshes the select tag and I see room nr 1 again,

Your page is getting refreshed, because you are submitting the form in onchange listener. You need to put e.preventDefault(); in your form submit listener to prevent default form submit and then you can call ajax in you submit listener.
$(document).ready(function(){
$("select").msDropDown();
$("#room_select").change(function(e){
$("#room_select_form").submit();
});
$("#room_select option[value='<?php echo $room; ?>']").attr('selected', 'selected');
$("#room_select_form").submit(function(e){
e.preventDefault(); // to prevent page refresh
// your Ajax call goes here....
});
});

Resetting the success or failure messages on html form

I have an HTML page in which success or failure messages will be printed on form submit.
But when clicking on the reset button, values stored in the fields get reset but it does not disappear the message which is displayed.
I am using a reset button which on clicking invokes a javascript function for resetting all the input fields
Is there anything that can be added in the script to reset the message as well??
Please help...

you should probably show some of the code on how you are doing this, but just in case, if the message you add looks something like this:
const errorSpan = document.getElementById('#errorMsg')
if (error) {
errorSpan.innerText = error
}
Then on the reset function you could just do:
errorSpan.innerText = ''
In the future try and be more descriptive on the example you are doing.

Loader with python & flask

I make a premise: I'm working on a school project and the technologies that I can use are: python, flask, bootstrap, JavaScript and JQuery.
I have a button (that I will call to "Update Product") that "onclick" must enable one of these buttons:
https://www.w3schools.com/howto/howto_css_loading_buttons.asp, the "Update Product" button must be hidden and must call a function in python (example: updateProducts ()).
At the end of this function (the function returns ok or ko), I return the message (using flash), but I do not know how to hide the Loading button and show the "Update Product" button again.
Can you help me?

Here is one way.
When you render the template in python you could pass a variable to control the visibility of the button.
render_template('page.html', visible=True)
Then, on your page perhaps something like this (found at Hiding a button in Javascript and adapted)
<script>
var hidden = {{ visible|safe }};
function action() {
if(hidden) {
document.getElementById('button').style.visibility = 'hidden';
} else {
document.getElementById('button').style.visibility = 'visible';
}
}
You can also change the variable with an onclick function on then page itself.
Your button to call a python function could look something like this.
<input type="button" id="toggler" value="Toggler" onClick="/funcionName" />
Remember to use the #app.route("/functionName") before the python function.
Hope this is close to what you wanted.

Here are the steps to achieve this.
Add loading button with hidden class.
When you click update Product button, following things should happen.
$(".update_button").on("click", function(e){
$(".loading_button").show(); // show loading button
$(".update_button").hide(); // hide update button
$.ajax({}) // send ajax request to update product, on success, hide loader and show update button
});

How can you programmatically click a button on ajax success?

I working on an ajax cart function for an e-commerce store and the functionality I require is that when the add to cart button is clicked, the item is added to cart then the user is directed to the checkout page.
The scenario I'd like to accomplish is as follows: Have a 'Buy It Now' button and once clicked, change to 'Processing'. When in the 'Processing' state, an ID is added and I need the resulting button to be clicked.
The original ajax cart code is here: https://github.com/carolineschnapp/ajaxify-cart/blob/master/ajaxify-cart.liquid
I've attempted to add $('checkout').trigger('click'); as seen in the code below, although it's not working as I've intended.
success: function(itemData) {
// Re-enable add to cart button.
$addToCartBtn.addClass('inverted');
_setText($addToCartBtn, _config.addedToCartBtnLabel);
window.setTimeout(function(){
$addToCartBtn.prop('disabled', false).removeClass('disabled').removeClass('inverted');
_setText($addToCartBtn,_config.addedToCartBtnLabel);
}, _config.howLongTillBtnReturnsToNormal);
$addToCartBtn.attr('id', 'checkout');
$('checkout').trigger('click');

Assuming your using jquery,
$('#buttonid').trigger('click');

How to hide div in html page in app.js

After login I am showing some user modules on html page. I want to hide it when user not have an access for that module by admin. I am use sencha/ ExtJs for front-end.
I want to hide this component after user login if he don't have permission for it.
here is my code(please see below Image)
I want to hide this Live Tracking On user login if user don't have access for this.
Design for this is bellow
I want to Create a function in App.js (In controller).
Can you help me for this...

Whenever you are validating the user or when it logs in, whenever that happens add style display:none
using javascript
document.getElementsByClassName('live-tracking').style.displ‌​ay= "none"

Your controller {
validateAndLogin : function () {
var isValidated = // check validation according your requirement.
if(isValidated) {
//display your html view and do following after adding id attribute to that
//div which you want to hide.
document.getElementById('livetracking').style.display='none';
}
}