We Keep Coding

Javascript/jQuery Click after Timer

I need to insert a timer and a click to the next page of my form after the timer counts down. Here's my form.
I believe I could implement something using either basic JS, or with jQuery (there's this jQuery plugin that looks promising.
For the prompt pages, I need a 30 second countdown, and for the form page immediately after I need a 5 minute countdown. How to implement JS and/or jQuery into Wordpress and/or Gravity Forms specifically?
I don't really have much code to start from, but this is what I've got so far:
$(document).ready(function () {
seconds = parseInt($("#countdown").attr('data-timelimit'));
var date = new Date();
date.setSeconds(date.getSeconds() + seconds);
$('#countdown').countdown({
date: date,
onEnd: goToNextPage,
render: function(date) {
return $(this.el).html(""+ (this.leadingZeros(date.min)) + " : " + (this.leadingZeros(date.sec)) + " sec");
}
});
$('#next_button').click(function (e) {
e.preventDefault();
e.stopPropagation();
goToNextPage();
});
I didn't make this code myself, so I'm not sure if it works, or if this is the right track either.

setTimeout should work for your usecase. Something like this will navigate to google.com in 30 seconds:
If the timeout amount is variable, you can use javascript to query the data attribute and replace 30000 with that variable.
setTimeout(function() {
window.location.href = 'https://google.com';
}, 30000);

If what you want is to programmatically click on your $('#next_button') button once the timer is up, try this. I haven't used countdown() but I suppose onEnd accepts an anonymous function
seconds = parseInt($("#countdown").attr('data-timelimit'));
var date = new Date();
date.setSeconds(date.getSeconds() + seconds);
$('#countdown').countdown({
date: date,
onEnd: function (){
$('#next_button').click();
},
render: function(date) {
return $(this.el).html(""+ (this.leadingZeros(date.min)) + " : " + (this.leadingZeros(date.sec)) + " sec");
}
});
$('#next_button').click(function (e) {
e.preventDefault();
e.stopPropagation();
goToNextPage();
});

Prevent content to be duplicated when clicking multiple times with Jquery/javascript

This is an extension to this question How to get value from nested HTML tag with Jquery/Javascript
When I execute the following script after the first time, the <h2>-tags get duplicated multiple, though I only want the three values displayed...
so my question is, what is going wrong here?
$(document).ready(function () {
$('.submit').on('click', function () {
$('#newLoanDiv').append('<div id="test"></div>');
$('.results-page').contents().appendTo($('#test'));
setTimeout( function(){
$('.submit').removeAttr('disabled');
$('.sums').find('dl').each(function () {
$('<h2 class="value">' + $(this).find('dd').text() + '</h2>').insertBefore('#test');
});
}, 100 );
});
});
Any help is appreciated...

Try the following. Try $('#test').empty(); to clear data of the #test on every click.
$('.submit').on('click', function () {
$('#newLoanDiv').append('<div id="test"></div>');
$('#test').empty();
$('.results-page').contents().appendTo($('#test'));
setTimeout( function(){
$('.submit').removeAttr('disabled');
$('.sums').find('dl').each(function () {
$('<h2 class="value">' + $(this).find('dd').text() + '</h2>').insertBefore('#test');
});
}, 100 );
});

Deep-Linking php queries to a data base

I have been having problems with deep-linking when I want to make a back or forward recall to some php script that involves a query to my data base.
I think that whats happening is that when a link requires a php script that is on a deeper level it doesn't makes the callback to the server. It just works when it uses the same php script that uses the link that was displayed right back or after it.
This is my JS function:
function loadload(loc) {
$("document").ready(function(){
function loadURL(url) {
console.log("loadURL: " + url);
$(loc).load(url);
}
// Event handlers
$.address.init(function(event) {
console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
}).change(function(event) {
$(loc).load($('[rel=address:' + event.value + ']').attr('href'));
console.log("change");
})
$('a').click(function(){
loadURL($(this).attr('href'));
});
});
};
This is my php echo line:
echo "<li><a onclick='loadload("."&#34"."#txtHint"."&#34".")' href="."'php/getdaimler.php?q=".$row['Program']."'"."rel="."'address:/Daimler/".$row['Program']."'>". $row['Program']. "</a></li><br>";
Also it makes my page become slower when several links have been triggered.
If there are some better functions or methods to use it would be great.
I'll appreciate your answers.

The posted jQuery Code can't work like this. First you use an inline event handler (onclick) inside the html code.
echo "<li><a onclick='loadload("."&#34"."#txtHint"."&#34".")' href="."'php/getdaimler.php?q=".$row['Program']."'"."rel="."'address:/Daimler/".$row['Program']."'>". $row['Program']. "</a></li><br>";
The method you call is loadload, the parameter is &#34#txtHint&#34 which is used as a jQuery selector, but will never match any DOM Element. My best guess is, you want to load the server answer to an element with the id 'txtHint', in that case the selector would be: #txtHint.
Now to the jQuery/ javascript function itself:
function loadload(loc) {
// this is wrong, you can not use the event handler for dom ready here...
$("document").ready(function(){
function loadURL(url) {
console.log("loadURL: " + url);
$(loc).load(url);
}
// Where does $.address come from?....
// Event handlers
$.address.init(function(event) {
console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
}).change(function(event) {
$(loc).load($('[rel=address:' + event.value + ']').attr('href'));
console.log("change");
})
// and here you'll define another click handler - inside the click handler
// will never be executed...
$('a').click(function(){
loadURL($(this).attr('href'));
});
});
};
Either you use the inline event handler, or a general bind logic, do not mix it.
Variant a: inline event handler
function loadload(loc,url) {
console.log("loadURL: " + url);
$(loc).load(url);
}
echo "<li><a onclick='loadload(\"#txtHint\",\"php/getdaimler.php?q=".$row['Program']."\")' href='php/getdaimler.php?q=".$row['Program']."' rel='address:/Daimler/".$row['Program']."'>". $row['Program']. "</a></li><br>";
Variant b: general binding:
$("document").ready(function(){
$('a.loadload',function() {
$('#txtHint').load($(this).attr('href'));
});
});
echo "<li><a class='loadload' href='php/getdaimler.php?q=".$row['Program']."' rel='address:/Daimler/".$row['Program']."'>". $row['Program']. "</a></li><br>";
So far for your javascript / html code. To be honest I have no idea if this fits your 'deep link' question, or the db-query you talked about, but it might be a starting point.

Will this conflict with prototype?

I have a page using prototype (don't have much control over that).
What I'd like to do is have a document ready function that only uses "jQuery" once, and then inside that function I can just use $ and it won't conflict with prototype.
This is what I have so far
jQuery(function() {
var superProperties = $.cookie('mp_' + token + '_mixpanel');
console.log($.cookie());
});

If you want it to run on document load
jQuery(function($) {
var superProperties = $.cookie('mp_' + token + '_mixpanel');
console.log($.cookie());
});
If you want it to run immediately
(function($) {
var superProperties = $.cookie('mp_' + token + '_mixpanel');
console.log($.cookie());
})(jQuery);

JQueryUI calling .accordion twice on one id

I'm trying to use AJAX to dynamically generate a JquerUI Accordion based on what is selected in a box. Currently I have
<div style="display:none" id="testselect">
</div>
With JS
$("#courseselect").change(function () {
$("#testselect").html(""); // Empty any previous data
$("#testselect").css("display", "block"); // Display it if it was hidden
$.getJSON('json.php?show=tests&courseid=' + $(this).val(), function(data) {
for(x in data)
{
$("#testselect").append("<h3 value=\"" + data[x].uno + "\">" + data[x].name + "</h3>");
$("#testselect").append("<div>Foo</div>");
}
$("#testselect").accordion({ change:function(event, ui) { courseid = ui.newHeader.attr("value");
} });
});
});
Now this works the first time I change my selection, but after that it reverts to plain old unformatted HTML. As if the call to .accordion() was never done. I'm guessing this has something to do with JQuery not wanting me to format something twice, but I really have no idea.

Try to destroy the accordion before you empty the div and start again:
$("#courseselect").change(function () {
$("#testselect")
.accordion("destroy")
.empty() // equivalent to .html("");
$.getJSON(...
More info here.
Good luck!