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
});
Related
I have a controller in c# and inside the controller there is a save method. The save method saves/updates data that is submitted by submit button click and javascript. The problem is, if you click on the button multiple time, it should only process the very first click and rest of them should be identified as duplicate submit and should be discarded by controller. How to do this in c# mvc web application?
Disable the button after it's clicked. So it can just be clicked once.
Simple way
when button clicked disabled it then actived again after you got response result from ajax! u can also add loader that make ur web look so cool!
<button id="btnSend" onClick="send()">submit</button>
<script>
btnSend=document.getElementById("btnSend");
function send(){
btnSend.disabled=true;
//set disabled button here
$.ajax({ type: "GET",
url: "http://www.google.de",
async: false,
success : function(text)
{
btnSend.disabled=false;
//set active to button
// add your code here
},
fail : function(text)
{
btnSend.disabled=false;
//set active to button
// add your code here
}
});
}
</script>
I would also disable the button on the client side. But you could also check if the submitted data is different from the stored data. If no changes were made you could just return without further saving logic.
Should it be possible to just save the data once? Maybe a redirect to a different view after saving could be a possible solution in special cases.
I am new to codeigniter.
I want to create a button in a view that when clicked will execute a function from a controller.
i am using right now this code in the view:
<button id="checkin" onclick="location.href='
<?php echo base_url();?>index.php/daily_attendance/check_in'">Check in</button>
this code will not only execute the function check_in, but will also get me to that page.
i can easily use redirect() in the controller of the function and get back to wherever i want.
The problem is that i have a jquery which hide this button on click and show another button.
but when i execute the function then redirect, the page refresh and the button is not shown.
my question is that, is there a better way to execute functions without going to another page in codeigniter?
is there a way to pass the function to the button or should i make the button in the controller which is not advisable since it's not for UI components and because i will need to create many views to manage the UI properly since the button will be in the middle of the page?
This is the way you can call function of a controller on button click.
Check in
<a href = "<?= base_url('index.php/daily_attendance/check_in')">
Background: I have a form on a single page with several div's that start out with only the first div showing and all others hidden. As you make a selection, the next form div is dynamically built and displayed based on the choices in the previous div. All previous form divs are still displayed. You progressively end up with more of the form fields showing as you progress through the choices. I have not put the whole code up here for brevity.
I am using JavaScript for this. I am NOT using jQuery intentionally as I am still working on being completely comfortable in JavaScript before I start relying on a library.
My Problem: I want to hide the submit button at the end of the form until the last form div is revealed. Everything I am trying is not working and I've exhausted things I have found on the web. It should be really simple, but apparently their must be something special about a submit button that is not in my JavaScript knowledge yet.
What I've Done: Below is what I think should work, but does not (I have kept the code limited to the issue at hand, however if someone thinks it is deeper then this I will happily edit and add more code). The onclick() function is working properly for otherDiv. i.e. when you click on the 2nd to last Div, OtherDiv is displayed as expected. It should also reveal the submit button, but does not (and the submit button is not hidden in the first place).
The problem is as simple as for whatever reason, the submit button is not given the style of "none" on page load and also is not give the style of "block" when the onclick() event happens.
I see in my console the below error that shows when I use GetElemntsByName to target the submit button as shown below, but am not sure why I am getting it. I understand the error, just not why my targeting of the submit button with GetElementsByName is throwing the error.
I have also tried this targeting the submit button by Id with GetElementById and while the console error below goes away then, I still do not get the submit button hidden.
I have shown the code below with the GetElementsByName error because I want to understand that error as well as solving my hidden submit button problem.
Console
TypeError: pdfButton.style is undefined
if(pdfButton) {pdfButton.style.display = 'none'};
HTML
<form id="buildShopDrawing" name="BuildShopDrawing" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="submit" name="buildPDf" id="buildPDf" class="buildPDFbutton" value="Build the Shop Drawings PDF">
</form>
Javascript
function preparePage() {
// Set common divs to var for ease of use
var pdfButton = document.getElementsByName('buildPDF');
// hide: submit button until last form is revealed
for (var i = 0; i < door.length; i++) {
door[i].onclick = function() {
if(this.checked) {
otherDiv.style.display = 'block';
pdfButton.style.display = 'block';
}
};
};
//hide form divs on initial page load
if(pdfButton) {pdfButton.style.display = 'none'};
} //end preparepage
// Do not execute JavaScript until page is loaded
window.onload = function() {
preparePage();
};
As always, your help is appreciated!
You have a typo. id="buildPDf" != ('buildPDF')
(And as others pointed out, use getElementById)
You need to use document.getElementById instead of getElementsByName that return a collection, it mean you can access element by its index only.
I'm not sure how to do a pop-up that warns when you are clicking on external links, using javascript.
I figured that it would be handy to put a class on my external links as well, but I'm not quite sure it's done correct as it is now either. This is the HTML I'm using at the moment:
<div id="commercial-container">
<img src="picture1.jpg" />
<img src="pciture2.jpg" />
<img src="picture3.jpg" />
<img src="picture4" />
</div>
I'm very new to javascript and very unsure on how to solve my problems. The pretty much only thing I figured out so far is that I will have to use window.onbeforeload but I have no clue on how to figure out how to write the function I need.
I want to keep my javascript in a separated .js document instead of in the HTML as well.
Call the confirm() function from the onClick attribute. This function returns true if the user clicks OK, which will open the link, otherwise it will return false.
<img src="picture1.jpg"/>
Hope this helps.
You can do it by adding a click event handler to each link. This saves having to use a classname.
window.onunload will run even if the user is just trying to close your site, which you may not want.
staying in site
going external
<script>
var a = document.getElementsByTagName('a');
var b = a.length;
while(b--){
a[b].onclick = function(){
if(this.href.indexOf('yourwebsitedomain.com')<0){
//They have clicked an external domain
alert('going external');
}
else{
alert('staying in your site');
}
};
}
</script>
Since you're new to Javascript I advice you to use a javascript framework to do all the "heavy work" for you.
For example with JQuery you can easily bind an onClick event to all external links by doing:
$(".external").click(function(event) {
var confirmation = confirmation("Are you sure you want to leave ?");
if (!confirmation) {
// prevents the default event for the click
// which means that in this case it won't follow the link
event.preventDefault();
}
});
This way every time a user clicks on a link with the external class, a popup message box asking for a confirmation to leave will be prompt to the user and it will only follow the link if the user says "yes".
In case you want only to notify without taking any actions you can replace the confirmation by a simple alert call:
$(".external").click(function(event) {
alert("You are leaving the site");
});
If the user click an image,div,.. you need to look for the parent node. !There could be several elements wrapped with a-tag.
document.addEventListener('click',function(event){
var eT=(event.target||event.srcElement);
if((eT.tagName.toLowerCase()==='a' && eT.href.indexOf('<mydomain>')<0)
|| (eT.parentNode!==null && eT.parentNode.tagName.toLowerCase()==='a'
&& eT.parentNode.href.indexOf('<mydomay>')<0))
{
//do someting
}
else if(eT...){
...
}
},false);
Two side notes:
If you want to keep track a user by cookie or something similar, it's good practice to check external links, set a timeout and make a synchronic get request to renew.
It's better to add the event to the document or a div containing all events and decide on target.
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/