Develop Reference

Redirect if alert button is not pushed in JavaScript

How can I force to redirect the page even if the alert box button is not pushed?
I have code like this:
<script type="text/javascript">
function Redirect()
{
window.location="../index.php";
}
setTimeout('Redirect()', 5000);
alert("You will be redirected to a new page in 5 seconds");
window.location="../index.php";
</script>
Now I have to push the button to be redirected. What I want to do is: if visitor doesn't push OK button in 5 seconds he's forced to ../index.php and if he push OK button system redirects him immediately to ../index.php

Just Remove the single quotes from the function name
function Redirect()
{
window.location="../index.php";
}
setTimeout(Redirect(), 5000);

you cant achieve it with alert or confirm or prompt because all of these freezes the browser so further Javascript will not execute.
use this
setTimeout('Redirect()', 5000);
function Redirect()
{
window.location="../index.php";
}
<div class="alert">
Your text
<button class="closebtn" onclick="Redirect();">OK</button>
</div
><style>
.alert {
padding: 20px;
background-color: #f44336;
color: white;
}
</style>

Trigger file input dialog

How can I auto trigger file input? ie. in the link below I want to trigger upload button on load
DEMO
<form id="test_form">
<input type="file" id="test">
<div id="test1">
<button>Upload</button>
</div>
</form>
$("#test1").trigger('click');
$("#test").trigger('click');

File input can't be automatically triggered in onload due to security purpose. It can't be fired without any user interaction. It is very disgusting when a page activates anything itself when the page loads.
By the way.
You can use label instead of button like following:
<label for="test">Upload</label>

$("document").ready(function() {
setTimeout(function() {
$("#test1").trigger('click');
},10);
$('#test1').click(function(){
alert('hii');
})
});
click event triggerd.
http://jsfiddle.net/j9oL4nyn/1/

You can do it somthing like as :
<button id="upld_btn">Upload</button>
$(document).ready(function () {
$('#upld_btn').trigger('click');
});

you can write something like this
$(document).ready(function(){
$("input#test").click();
});
this should work fine

The problem with your code is that you are applying a click event to the input and also to the div enclosing the button, but not to the actual button.
if you change your fiddle to this
<form id="test_form">
<input type="file" id="test">
<div id="test1"><button onclick="alert('click');">Upload</button></div>
</form>
and
$("#test1 button").trigger('click');
then the click trigger will be applied to the button. Alternatively give your button an ID and fo
$("#buttonid").trigger('click');

<form id="test_form">
<input type="file" id="test">
<div id="test1"><button>Upload</button></div>
</form>
Change your JS code like below.
$("#test1 button").click(function() {
$("#test").trigger('click');
});
Working Demo

It is not possible to programically open "Open File" dialog utilizing javascript without user action ; see Trigger click on input=file on asynchronous ajax done() .
Could, alternatively, create an element to overlay html at document .ready() event to provide user with options to click to open "Open File" dialog by calling click on input type="file" element , or close overlay of html by clicking "Close" .
$(function() {
function openFileDialog() {
button.fadeTo(0,1).find(input)[0].click();
dialog.hide();
}
function closeDialog() {
dialog.hide();
button.fadeTo(0,1);
}
var input = $("input[type=file]")
, button = $("#button").on("click", function(e) {
e.stopPropagation();
this.firstElementChild.click()
})
, options = $("<button>", {
css: {
position: "relative",
top: "36vh",
left: "12vw",
fontSize: "3.6em"
}
})
, dialog = $("<div>", {
id: "dialog",
css: {
position: "absolute",
zIndex: 2,
opacity: 0.25,
background: "dodgerblue",
width: window.innerWidth - 30,
height: window.innerHeight
}
})
.append(
options
.clone(false)
.on("click", openFileDialog)
.html("Open File")
, options
.clone(false)
.on("click", closeDialog)
.html("Close")
)
.prependTo("body");
});
input {
width: 0;
opacity: 0;
}
#button {
position: relative;
font-size: 32px;
width: 150px;
left: 32vw;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<form id="test_form">
<div id="test1">
<button id="button">Upload
<input type="file" id="test">
</button>
</div>
</form>

Show input file dialog on load?
As described here only Internet Explorer allows for programmatic opening of the File Upload dialog. So the short answer is no, there is no way to automatically open the File Upload dialog on page load.
The long answer that you might consider is that you can show it when the user clicks on anything. The fact that you prefer an AngularJS solution tells us that you are writing a Single Page Application. Also, I don't think you need to show the File Upload dialog when the app first loads. You most likely need it to show after some user interaction - after the user clicks on something. That something, using the an AngularJS directive from here, could look like anything but be a file input. On click (the same user interaction) you can also switch to another route in your AngularJS app, effectively simulating a user navigating to another page and automatically presenting him the File Upload dialog.

How to show refresh indicator during an ajax refresh call?

I have some jQuery code working that reloads the div every 10 seconds without reloading the whole page. However, right at the moment, the user doesn't see anything happen on the browser when the refresh is happening.
I know there are thousands of examples on the internet, but I want for the script I already have to display a loading gif image while the data is retrieved when the refresh is happening every 10 seconds for me, user should see some refresh image like this -
.
I'm sure this is probably easy, but I can't find any info on how to do it. Any help or pointers would be greatly appreciated.
Problem Statement:-
Below is my div in my JSP file (dataInfo.jsp) and I am reloading the div container every 10 seconds without reloading the full page.
<body>
<div id='headerDivDash'>
<h1 id='topHeaderDash'>
<!-- some image here -->
</h1>
</div>
<div id="vertical-list" style='display: block; list-style-type: none;'>
<ul class="resp-tabs-list">
<li>Test 1</li>
<br />
<li>Test 2</li>
</ul>
</div>
<!-- just need to reload this div, other div should be intact without getting appended -->
<div class="container">
</div>
<div class="footer">Some Value Here</div>
</body>
Now below is the jquery script I am using to load the div container every 30 seconds and it works fine.
<script type="text/javascript">
$(document).ready(function(){
var auto_refresh = setInterval(
function ()
{
$('.container').html('');
$('.container').load('dataInfo.jsp .container').fadeIn("slow");
}, 10 * 1000);
});
</script>
Now as I mentioned above, as soon as the refresh is going to happen, I would like to grey out the container div and show refresh image as shown above and as soon as the refresh is done, then show the normal result and then the refresh image will also be gone..
Is this possible to do in my current example?

I see you are already using JQuery so this answer will suit you well.
You can use this code to create the gray background and show the loading image.
// Create a refresh function:
function refresh(){
// SHOW overlay
$('#overlay').show();
// Retrieve data:
$.ajax({
url: 'data.html',
type: 'GET',
success: function(data){
// onSuccess take only the container content
var content = $($.parseHTML(data)).filter(".container");
//Replace content inside the div
$('.container').html(content);
// HIDE the overlay:
$('#overlay').hide();
}
});
}
$(document).ready(function(){
// Create overlay and append to body:
$('<div id="overlay"/>').css({
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: $(window).height() + 'px',
opacity:0.4,
background: 'lightgray url(http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif) no-repeat center'
}).hide().appendTo('body');
// Execute refresh with interval:
setInterval(refresh, 1 * 1000);
});
Hope this help you. Note: Replace "img/loading.gif" with the route to the gif you want to use.
Here you go with the code working:
http://jsbin.com/zizudexo/1/edit

When you start the ajax request, place the loading image on the results container.
$('<div id="ajaxLoad"></div>').appendTo('.container');
Add this CSS rule, to display it correctly:
#ajaxLoad {
position: absoulte;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.5;
background: silver url(my_image.png) no-repeat center center;
z-index: 1000;
}
Add a position: relative; to the .container.
Then you can start the ajax call:
$.ajax({
type: "GET",
url: "dataInfo.jsp",
success: function(data) {
$('.container').html(data).fadeIn("slow");
},
complete: function() {
$('#ajaxLoad').remove();
}
});
When the data arrives display it, thats what success does. The complete runs even when the server returns an error code or your query times out.

Can you look at this: jsFiddle
I used <i class="fa fa-refresh fa-spin"></i> fontawesome icon to show refresh symbol...
This is one of the ways to achieve what you want...

MooTools - How to get mouse position when submitting a form?

What I'm trying to do here is to show a loading box that follows cursor after submitting a form using MooTools. However, I've simplified the problem into just 1 div and 1 form.
script:
document.addEvent('domready', function(){
$('test_form').addEvent('submit', function(){
var box = $('box');
document.addEvent('mousemove', function(e){
box.setStyles({
top: e.page.y,
left: e.page.x
});
});
box.setStyle('display', 'block');
return false;
});
});
html:
<div id="box">
</div>
<form id="test_form" action="">
<label>Name: </label><input type="text" name="name" /><br/>
<input type="submit" value="Submit" />
</form>
css:
#box {
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
display: none;
}
#test_form {
margin-left: 150px;
}
When the form is submitted, it will show the hidden blue div and it will follow the cursor. However, I can't make the div appear at mouse position when the form is submitted. The 'mousemove' will not fire until we move the mouse; thus, the blue div appears at position (0,0) immediately after showing. Is there a way to get the mouse position right after the form is submitted? Or is there an alternative way to do it?
Any suggestions is greatly appreciated!
Updated:
I don't want to add mouse event (mousemove) before the form is submitted. The reason is simply because I don't want the javascript to keep on checking the mouse position when it's not necessary. Just try to avoid performance issue!

basically, the submit is an event but its event.type is submit and it won't contain mouse info.
your bet is to re-arrange your javascript so it moves the box quietly all the time and just shows the box by changing display when submitted. something like that:
http://jsfiddle.net/jtLwj/
(function() {
var box = $('box');
document.addEvent('mousemove', function(e) {
box.setStyles({
top: e.page.y,
left: e.page.x
});
});
$('test_form').addEvent('submit', function(ev) {
ev.stop();
box.setStyle('display', 'block');
var sizes = box.getPosition();
box.set("html", [sizes.x, ' x ', sizes.y].join("<br/>"));
});
})();
reading the box position after submit will return your cursor :)
downside: latency of changing css for the invis box before submit.
edit better version w/o the change to dom all the time:
(function() {
var lastEventObject, eventListener = function(e) {
// keep a scoped referene of the last known mouse event object
lastEventObject = e;
};
document.addEvent('mousemove', eventListener);
document.id('test_form').addEvent('submit', function(e) {
e.stop();
// not needed anymore...
document.removeEvent("mousemove", eventListener);
// show the box at last known mouse loc
document.id("box").setStyles({
display: 'block',
left: lastEventObject.page.x,
top: lastEventObject.page.y
});
// attach to mousemove or whatever....
});
})();
this is as good as it will get, I'm afraid. the footprint of the reference to the event object is minimal at best.
fiddle: http://jsfiddle.net/dimitar/jtLwj/1/

JQuery toggle Q&A: individual Q&As don't operate correctly unless you click on Open All/Close All first

I have a Q&A list with "Open All/Close All" at the top with individual open and close image buttons that toggle when clicked. That works fine.
Then follow individual Q&As, and each has its own open and close image.
If you click on "Open All/Close All" first, as soon as the page loads, and then click on the individual Q&A open/close images, all works fine. But if after page load you click on the individual Q&A open/close images, bypassing "Open All/Close All," they display the inappropriate open or close image.
Here is page code:
<div class="answersee"><span>Open All</span><img src="assets/open.gif" border="0" alt="" /></div>
<div class="answerhide"><span>Close All</span><img src="assets/close.gif" border="0" alt="" /></div>
<div class="qa">
<div><img src="open.gif" border="0" alt="" /><span class="question">Question.</span></div>
<div class="answer"><p>Answer.</p></div>
</div>
Here's the script (also uses Jquery):
$(function () {
$(".qa").click(function () {
$(this).find("div").next().slideToggle("fast");
if ($(this).find("div:eq(0)").find("img").attr("src") == "open.gif") {
$(this).find("div:eq(0)").find("img").attr("src", "close.gif");
}
else {
$(this).find("div:eq(0)").find("img").attr("src", "open.gif");
}
});
$(".answersee").click(function () {
$(".answer").show("fast");
$(".qa > div > img").attr("src", "close.gif");
$(".answerhide").show();
$(".answersee").hide();
})
$(".answerhide").click(function () {
$(".answer").hide("fast");
$(".qa > div > img").attr("src", "open.gif");
$(".answersee").show();
$(".answerhide").hide();
})
});
I don't think it's a CSS problem, or I'd include that code here. Do I need to initialize the script in some way? Or did I make a mistake in the above script?

Here's how I would do it.
Working Demo →
EDIT:
Update the code to have simple open/close link.
Code with comments which explains my approach:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style>
body
{
font-family: "Verdana";
font-size: 12px;
}
.question
{
background-color: #ccc;
cursor: pointer;
padding: 5px;
margin-bottom: 10px;
border-bottom: 1px solid #000;
}
.answer {
padding: 5px;
}
</style>
<script>
$(document).ready(
function()
{
//Hide all the answers on page load.
$('.answer').hide();
//For all questions, add 'open'/'close' text.
//You can replace it with an image if you like.
//This way, you don't need to specify img tag in your HTML for each question.
$('.question')
.append(' <span>[ open ]</span>');
//Now there are two ways to toggle the visibility of answer.
//Either click on the question OR click on Open All / Close All link.
//To use the same code for both instances, we will create
//a function which will take the 'question' div and toggle the answer for it.
//Advantage of this approach is that the code to toggle the answer is in
//one place.
//By default, this function will try to toggle the status of the answer
//i.e. if it's visible, hide it otherwise show it.
//This function will take a second argument called 'showAnswer'.
//If this argument is passed, it overrides the toggle behavior.
//If 'showAnswer' is true, answer is shown.
//If it's false, answer is hidden.
//This second parameter will be used by the 'openAll', 'closeAll' links.
var toggleAnswer = function toggleAnswer(question, showAnswer)
{
//The way I have structured the HTML, answer DIV is right after
//question DIV.
var $answer = $(question).next('div');
//Animation callback, after the animation is done, we want to
//switch the 'text' to display what could the user do with the question.
//Once again, you can change this code to show open/close image.
var updateText = function()
{
var text = $answer.is(':visible') ? ' [close] ' : ' [open] ';
$(question).find('span').html(text);
}
var method = null;
if(arguments.length > 1)
{
//If the function was called with two arguments, use the second
//argument to decide whether to show or hide.
method = showAnswer === true ? 'show' : 'hide';
}
else
{
//Second argument was not passed, simply toggle the answer.
method = $answer.is(':visible') ? 'hide' : 'show';
}
$answer[method]('fast', updateText);
};
//On each question click, toggle the answer.
//If you have noticed, I didn't enclose both Q&A inside one DIV.
//The way you have done if user clicks on the answer, answer will collapse.
//This may not be desirable as user may want to copy the answer
//and he won't be able to.
$('.question').click(function(){ toggleAnswer(this);});
//We will reuse the same toggleAnswer method in openAll, closeAll
//handling. This way, if you want to change behavior of how the question/answers
//are toggled, you can do it in one place.
$('#openClose').click(
function()
{
var showAnswer = $(this).html().toLowerCase().indexOf('open') != -1 ? true : false;
$('.question').each(function() { toggleAnswer(this, showAnswer); });
$(this).html(showAnswer ? 'Close All' : 'Open All');
return false;
}
);
}
);
</script>
<html>
<head>
<title>simple document</title>
</head>
<body>
<a id='openClose' href='#'>Open All</a>
<br /><br />
<div class='question'>Question 1</div>
<div class='answer'>Answer 1</div>
<div class='question'>Question 2</div>
<div class='answer'>Answer 2</div>
<div class='question'>Question 3</div>
<div class='answer'>Answer 3</div>
</body>
</html>

You need to use the callbacks because your animation will not have finished by the time to check for which image is being shown.
$(".qa").click(function() {
$(this).find("div").next().slideToggle("fast", toggleImage);
}
function toggleImage(){
var $img = $(this).find("img");
$img.attr('src') == "open.gif" ? $img.attr('src', "close.gif") : $img.attr('src', "open.gif");
}
N.B There are better ways to do this but lets get you working first and then see if you want to refactor it some more.

Thank you for taking the time to provide this. I will try this later today and report back. In my version, I toggle the Open All/Close All feature. It's a cleaner look and easier to use, since you don't have to move your mouse.

Redsquare and Solution Yogi:
Thanks. I will reply again later and also post a working demo so you can see the problem more clearly. Sorry, I should have done that before.
Liz