Develop Reference

JavaScript button function result after page reloading

I have a login and register modal and these modals share one same attribute, so I wanted to create an onclick function for each of the modals' submit buttons to trigger errors in respective modals. I tried this code to see if the button can trigger for the modals to show,
function loginModal(){
$('#modal-register').modal('show');
}
document.getElementById("modal-login-btn").addEventListener("click", loginModal);
and it does, however it only works before the page reload, as when i click the submit button, the page will reload. I want the modal to show after the page reload. I also tried this but it doesn't work.
$(document).ready(function(){
function loginModal(){
if (count($errors) > 0){
$(document).ready(function(){
$('#modal-login').modal('show');
});
}
}
});
document.getElementById("modal-login-btn").addEventListener("click", loginModal);
Does anyone have any idea how to make the function run after page reload?

You can use a GET value at the url of the page when the page reload:
you can set the url in javascript at the moment of reload
for example
window.location.replace(window.location.href+"?reloaded=true");
implement a function who detect if the url contains a reload GET
value.
if the GET value exist, show the modal directly.

How can I pass a parameter using Javascript / Jquery to a page in a modal dialog

I need an advice to know the best way to open a link in a modal dialog.
I would like to pass a parameter from a link to a modal window so I can use it to perform a database query in a PHP file and show some data as a form to perform an insert.
I HAVE looked through this site and others and can't find a straight forward way to do this.
I have tried to use Boostrap Modal but it does not manage to open a link from another page or at least I don’t know how to do it. I have also tried Jquery Modal https://jquerymodal.com/ but this modal cannot be opened from Javascript.
I need to use Javascript because I want to be able to pass the current value of a field to a page in a modal dialog using onclick.
The Jquery code should be something like this:
function getvalue(varid) {
var vproid = $("#plato_"+varid).val();
var vuser = <?php echo $user; ?>
window.location.href = "detail.php?user="+vuser+"&product="+vproid;
//Maybe open modal from here
};
HTML CODE
<a href="# " id="1" onclick=”getvalue(this.id)”> Insert Details </a>
<input type="hidden" name="opcion" id="plato_1" value="25"/>

Firing JS function from another file from button in html file

This might be very basic but I couldnt really find a solution to this. I am creating my own website. I have written a javascript file, simply called "main.js".
I can call my entire script in my HTML file like so:
<script src="main.js">
</script>
And I see in the console that everything works as it should. However, this is not what I want. What I want is the code in the JS script to be fired upon a click on my button. This is what I tried:
<input class="button" onclick="main()" type="submit"
value="Submit" name="">
</div>
So I want the script that I have referenced somewhere else in the HTML file to fire the "main" function when my button is clicked. But what happens currently is that the click onto the button simply reloads the page.
So, to get this all into one question:
I want to click my html button and then fire a single function from another script that is called "main.js".
How can I achieve that?
Thank you

I think this might be because of your type: submit.
Try changing it to type="button".
Hope this helps!

You are trying to call a function called main, but you need to run a script that creates a function. The browser won't go looking in a JS file with the same name as the function automatically.
Edit main.js so the code appears inside a function.
function main () {
// Your code here
}
If you don't want the form to be submitted after the JS function is called, then don't use a submit button to trigger it. Use a type="button".

A submit button triggers a reload as it submits the formto the server, unless your main function returns false.
Adding
return false;
at the end of main should do the trick.

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
});

On Click: Open a Pop-up Div on a Different Page

On page1.php I have a click event that causes the user to be redirected to page2.php. It goes something like this:
$("#someButton").click(function() {
window.location = "page2.php";
});
And that works great. But what I really want is to open a hidden, UI-blocking <div> on page2. The user can already open this <div> manually by clicking another button on page2, that goes something like this:
$('#someOtherButton').click(function() {
$("#pageContainer").block({message: $("#theDivIWant2See")});
});
Can I make a click event from the JavaScript on one page call the JavaScript on another? Or will I need to add in some HTML-parsing to pass information between pages? (I'm not looking for a JavaScript hand-out here, just a strategy to help me move forward.)

When you redirect from the first page, add a querystring value in your url. and in the second page, using your server side page language, set in in a hidden field and in the document ready event check the value of that hidden field. If the value is expected, call a javascript function to show the popup.
Some thing like this
$("#someButton").click(function() {
window.location = "page2.php?showpopup=yes";
});
and in page2.php set it (forgive for errors, i am not a php guy)
<input type='<?php $_GET["showpopup"] ?>' id='hdnShow' />
and in the script
$(function(){
if($("#hdnShow").val()=="yes")
{
//Call here the method to show pop up
}
});

You need to do your stuff when DOM for page2 is ready. You can use jQuery's ready function for that.
$(document).ready(function() {
// put code for showing your div here
});
Hope that helps.

Could you pass a query string argument or assign a cookie that the other page could then check when the document loads? If the value exists then present a modal dialog (e.g. jQuery UI Modal Popup)
http://jqueryui.com/demos/dialog/