I would like to use Javascript to auto-refresh my webpage while users can choose to turn on/turn off the auto-refresh function with two different buttons (Please be aware that the buttons are using <label> and <input> tag). I have tried my best to write the code but I still do not know how to link up these two codes so that it can function correctly.
Also, if user choose the buttons of auto-refresh ON, I want to keep auto refresh continuously after its first load instead of just auto refreshing only once.
Would you please help me to correct my codes, please? Thank you.
The code for ON and OFF buttons (two individual buttons):
<div class="page-header-actions" data-toggle="buttons" role="group">
<label class="btn btn-outline btn-primary active">
<input type="radio" name="options" autocomplete="off" value="autorefreshoff" checked />
<i class="icon wb-check text-active" aria-hidden="true"></i> Auto Refresh OFF
</label>
<label onClick="startrefreshon" class="btn btn-outline btn-primary">
<input type="radio" autocomplete="off" value="autorefreshon" />
<i class="icon wb-check text-active" aria-hidden="true"></i> Auto Refresh ON
</label>
</div>
The code for auto-refresh function:
<script type='text/javascript'>
setTimeout(function(){
window.location.reload(1);
}, 5000);
</script>
Here are a few things you need to do:
Both the input type="radio" should have same name.
Give the 'auto refresh on' button an ID, so that you can reference it easily in JavaScript code (say auto-refresh-checkbox).
Write a reload function that checks if the checkbox is checked
code:
function reloadPage(){
var refreshEnabled = document.getElementById('auto-refresh-checkbox');
if(refreshEnabled.checked) {
window.location.reload(1);
}
}
Then call this function via setInterval
setInterval(reloadPage, 5000);
PS: The checked "auto refresh" radio will lose it's value on page reload, so you might have to save the value using localStorage or something else.
Related
What i'm after doing is
a) show the regular submit button
b) when you hit submit, the spinner version appears
c) the form submits and my Flask code goes to the database call.
d) then when the database call is finished it shows the result on a new page.
I'm okay with A, C and D..... they work right now, but I can't fathom out the spinner switch bit.
I've been trying and failing miserably to get all sorts of javascript copied and pasted from a whole host of stackoverflow searches.
Most have some JS function like on('click', function..... but I don't know where to place that in the HTML....
Could I do some CSS container swap trick?
Apologies for being a newb!!
Here's my little form and buttons.
<form class = "js-battery-form" action="/home" method="POST">
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text form-control-sm" for="battery_size">Battery size</label>
</div>
<select class="custom-select custom-select-sm" id="battery_size", name="battery_size">
<option value="1.2">1.2kWh</option>
<option value="2.4">2.4kWh</option>
<option value="3.6" selected>3.6kWh</option>
<option value="4.8">4.8kWh</option>
<option value="7.2">7.2kWh</option>
</select>
</div>
<button type="submit" id="btn" class="btn btn-primary btn-sm btn-block" >Submit Query</button>
<button class="btn btn-primary btn-sm btn-block">Submit Query
<span class="spinner-border spinner-border-sm"></span>
</button>
</form>```
this worked for me. Altered slightly though as for some reason i couldn't get the spinner to spin:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
$(document).ready(function() {
$("#btnFetch").click(function() {
// disable button
$(this).prop("disabled", true);
// add spinner to button
$(this).html(
`<i class="fa fa-spinner fa-spin"></i> Loading`
);
$("#batteryform").submit();
});
});
</script>
Think i've solved this one for anyone interested.
https://jsfiddle.net/zarch/2w6Lnp4m/3/
So I sorted a working spinner in JS Fiddle (see above) using $(document).ready(function(), but it wouldn't fire on my webpage.
I've got my JS at the end of my HTML at the bottom of the page, so it turns out you need to load the JS before the $(document).ready(function() .
So I moved the src="https://code.jquery.com/jquery-3.4.1.slim.min.js" etc to BEFORE the $(document).ready(function()
Then I hit another problem, the spinner worked but the form never submitted. It just sat there spinning forever.
So I added an id tag to the form "battery-form" and then made a submit call at the end of the $(document).ready(function()
$("#battery-form").submit();
Hope this helps someone out.
Currently I am constructing a webpage with an auto-refresh function in every 1 minute. Also, my webpage include a auto-refresh ON and OFF button for the users to choose whether to turn on/off auto-refresh. By default, the webpage will auto refresh now once its load.
However, I would like to let's user to turn off the auto-refresh function if users do not want to turn on the function. I tried to search for the answer and some people said that it can use clearTimeout(timeout) function. Hence, I would like to know how to stop auto-refresh function by clicking an OFF button? Is it by adding clearTimeout(timeout) code into Javascript? Thank you.
The code for auto refresh function:
<body onload="setInterval(reloadPage, 5000);">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function reloadPage(){
var refreshEnabled = document.getElementById('auto-refresh-checkbox');
if(refreshEnabled.checked) {
window.location.reload(60000);
}
}
</script>
The code for turn ON/OFF button:
<div class="page-header-actions" data-toggle="buttons" role="group">
<label class="btn btn-outline btn-primary active">
<input id="auto-refresh-checkbox" type="radio" name="options" autocomplete="off" value="autorefreshon" checked />
<i class="icon wb-check text-active" aria-hidden="true"></i> Auto Refresh ON
</label>
<label class="btn btn-outline btn-primary">
<input type="radio" name="options" autocomplete="off" value="autorefreshoff" />
<i class="icon wb-check text-active" aria-hidden="true"></i> Auto Refresh OFF
</label>
</div>
Remove onload and put setinterval in document ready function
var refreshIntervalId = setInterval(fname, 10000);
/* later on click of button or */
clearInterval(refreshIntervalId);
See the docs for setInterval() and clearInterval().
I've run into something interesting and I'm a bit stumped with this.
Basically I have a form:
<form>
<div class="formWrapper">
<span>Refine your search</span>
<input type="text">
<select>
<option>English</option>
<option>French</option>
<option>Dutch</option>
</select>
<button class="submitButton" type="submit" data-ajaxurl="http://localhost/_myFile.html" data-ajaxtarget="#myFile_search" >Search</button>
</div>
</form>
and some bootstrap pagination links:
<div class="bootstrap_pagination">
<ul>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
<li class="plain">
›
</li>
<li class="plain">
»
</li>
</ul>
</div>
Somewhere on the page I have a hidden field as well, storing the data-number of the pagination link I clicked on, the default value is 1: <input type="hidden" name="number" value="1">
And this is the function that takes care of the clicked pagination link:
function clicked_bootstrap_pagination(clickedLink, event){
event.preventDefault();
$this = $(clickedLink);
var pageNumberValue = $this.data("number");//get number
var $hiddenField = $("#drivers_initial form input[name='number']");//hidden field
$hiddenField.val(pageNumberValue);//update value of hidden field
$('form .formWrapper button.submitButton').click();//resubmits the form
}
When I click on a pagination link, the function runs it updates the data-number in the hidden input field and resubmit the form, pretty simple.
OK, so here is the problem: when the submit button is clicked on - my search button in the form - I also want to run another function, resetHiddenFieldNumber(),
but the problem is, as you've probably already gathered, that that function will also run when the pagination link is clicked on because of this line$('form .formWrapper button.submitButton').click();//resubmits the form, and I don't want that, I just want to be able to run resetHiddenFieldNumber() only when I click the submit button
I tried a couple of things, among those, an onclick attribute in the submit button:
<button class="submitButton" type="submit" data-ajaxurl="http://localhost/_myFile.html" data-ajaxtarget="#myFile_search" onclick="resetHiddenFieldNumber()">Search</button>
but, with this approach, as said and expected the function runs also when the the pagination link is clicked on because in clicked_bootstrap_pagination() I'm resubmitting the form.
I've hoped that I could somehow distinguish between the pagination link and the button after this line executed $('form .formWrapper button.submitButton').click();//resubmits the form but of course I can't.
The problem is the fact that, from what I understand, the line that resubmits the form effectively forces a click on the submit button even if you don't actually click on it.
I tried to use submit() but the whole page reloads and that's not desirable.
Does anybody have an idea how I could run a function only when I click on the submit button?
I hope it's all clear.
If you want just to pass some data to http://localhost/_myFile.html you don't always need to use from-submit way. You can just have on-click event for submitting the data to the server without any page reload.
<div class="formWrapper">
<span>Refine your search</span>
<input type="text">
<select id="language-selection">
<option>English</option>
<option>French</option>
<option>Dutch</option>
</select>
<button class="not-submit-button" id="send-request-button" type="button" data-ajaxtarget="#myFile_search" >Search</button>
</div>
and then do following event handler
//js code
$('#send-request-button').click(function(){
//on button click
var data = $('#language-selection').val();
//collect value of the select
//send request
$.get('http://localhost/_myFile.html', data, function(response){
//refresh you UI
})
})
I am completely new to Meteor and I'm trying to build a simple app. I currently have a form with 4 radio options and a submit button. When users click the submit button and I want to know which radio option they selected. I have no idea how to get started though. Can anyone help me? Below is my html and javascript code, respectively:
<form class="form-horizontal well mystery-form">
<fieldset class="col-md-offset-1">
<h2>{{question}}</h2>
<br>
<div class="form-group">
<div class="col-md-10 mystery-form">
{{#each answers}}
<div class="radio">
<label>
<input type="radio" name="mysteryForm" checked=""
style="margin-bottom: 0; margin-top: 0;">
{{answer}}
</label>
</div>
{{/each}}
<br>
<button type="reset" class="btn btn-default">Back</button>
<!-- Hide this when the answer is correct -->
<button type="submit" class="btn btn-primary">Check Answer</button>
<!-- Show only if the answer is correct -->
<button class="btn btn-primary">Next</button>
</div>
</div>
</fieldset>
</form>
JS:
Template.mystery.events({
"submit .mystery-form": function(event) {
// no idea what to do here
}
});
Semantics
You'll probably want to remove the whole wrapping .radio element. It's unnecessary. Try using as few elements as possible. It performs better and makes debugging easier.
Retrieving the checked input
The event object passed to an event-map callback has a property target. In your case that is .mystery-form. So you can use a simple jQuery selector to find the checked element:
$('input[name="mysteryForm"]:checked', event.target)
This will get you the checked value with the name mysteryForm. This was quiet straight forward. The problem is retrieving the value. Doing that would get sort of messy. So I'd just pass it to the element as a data- attribute:
<input type="radio" name="mysteryForm" checked="" style="margin-bottom: 0; margin-top: 0;" data-answer="{{ answer }}" >
Now you can simply do this:
$('input[name="mysteryForm"]:checked', event.target).data('answer')
First, you may want to prevent the normal form submission and avoid a page reload. As you are building a single page application you will want to do the form submission logic by yourself. Also, reloading the page by form submission does not make any sense in such application.
Secondly, you have to actually gather the data, and then do what you want with these data.
Put it all together and you get something like this:
Template.mystery.events({
"submit .mystery-form": function(event, template) {
//1. prevent default behavior (form submission)
event.preventDefault();
//2. get your data
//either by name (HTML name attribute)
var inputValue = template.mysteryForm.value;
//or by id (HTML id attribute)
var inputValue = template.find('#myId').value;
//3. Do whatever you want (method call for example?)
Meteor.call('myMethod', inputValue, function(error, result) {
//wait for the call result...
});
}
});
So I have been in the process of migrating my current project from Bootstrap 2.3 to Bootstrap 3 which has had some major structural changes particularly to due with radio buttons. Currently I have
HTML:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input id="emViewMacsButton" name="options" type="radio">MAC
</label>
<label class="btn btn-primary">
<input id="emViewTagsButton" name="options" type="radio">Tags
</label>
<label class="btn btn-primary">
<input id="emViewSettingsButton" name="options" type="radio">Settings
</label>
</div>
Script Code:
$('#emViewMacsButton').on('click',emViewMacs());
$('#emViewTagsButton').on('click',emViewTags());
$('#emViewSettingsButton').on('click',emViewSettings());
My problem lies in that I have setup my program that each of the different radio buttons must access a different function to display table data. The .on('click') function returns nothing. I've also tried $('input[name=options]') but the active attribute isn't set for any of the radio buttons on the returned piece of HTML .
What would be the correct structure for this ?
http://jsbin.com/uwezip/1/edit
when passing a function ( myFunction() ) into another function callback, just remove the ()
$(function(){ // DOM is now ready to be manipulated
$('#emViewMacsButton').on('change',emViewMacs);
$('#emViewTagsButton').on('change',emViewTags);
$('#emViewSettingsButton').on('change',emViewSettings);
});