I'm having some difficulty getting my progress bar to reset and continue counting. In my code I have a button that opens a JQuery ui dialog box with a progress bar which counts up to 100% then closes. When I click the button again to reset the progress bar, it just stays at 0% without updating. This there anything I'm missing in my code?
Here's my dialog box
$( "#dialog" ).dialog({
autoOpen: false,
dialogClass: "no-close",
draggable: false,
resizable: false,
height: 200,
width: 200
});
The button I have opening the dialog box
$("#button").click(function() {
$('#progressbar').progressbar('option','value', 0);
$( "#dialog" ).dialog( "open" );
});
My code for the progress bar
$(function() {
var progressbar = $( "#progressbar" ),
progressLabel = $( ".progress-label" );
progressbar.progressbar({
value: true,
change: function() {
progressLabel.text( progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "Complete!" );
setTimeout("$('#dialog').dialog('close')",3000);
}
});
function progress() {
var val = progressbar.progressbar( "value" );
progressbar.progressbar( "value", val + 2 );
if ( val < 99 ) {
setTimeout( progress, 80 );
}
}
setTimeout( progress, 2000 );
});
Edit: Here's the html
<div id="dialog" title="Progress Bar">
<div align="right">
<small id="name">Name</small>
</div>
<small id="temp">Temp</small><br />
<small id="temp2">Temp2</small><br /><br />
<div id="progressbar"><div class="progress-label">Loading...</div></div>
</div>
See fiddle (someone else started)
You need to start the function progress() again once you click the button. You also should make sure the progress() function is in the scope of the button click event.
$("#button").click(function() {
$('#progressbar').progressbar('value', 0);
$( "#dialog" ).dialog( "open" );
//restart
progress();
});
Related
I've got a little problem with the progressbar from jquery-ui.
here is the original: http://jqueryui.com/progressbar/#download
and here my script:https://jsfiddle.net/soyyo/j3xq65s3/6/ .
I would like that after the script is finishing it runs again when close, but how I'm new in javascript I've got a little chaos in my script.
thank you very much indeed for taking action on this matter
hi Rguarascia,
thank you for your attention.
what you see in jsfiddle is 2xtimes the same script, but a little bit changed by my self. i don't want it running 4 times. all i did was giving the function at the 2nd place the name function inst, and insted for click: closeDownload in the 1st. function I wrote click: inst. then I pasted an other progressTimer function with 5000millisec. under click: inst.
i hope you understain my english.
thank you
here is the original:
$(function() {
var progressTimer,
progressbar = $( "#progressbar" ),
progressLabel = $( ".progress-label" ),
dialogButtons = [{
text: "Cancel Download",
click: closeDownload
}],
dialog = $( "#dialog" ).dialog({
autoOpen: false,
closeOnEscape: false,
resizable: false,
buttons: dialogButtons,
open: function() {
progressTimer = setTimeout( progress, 2000 );
},
beforeClose: function() {
downloadButton.button( "option", {
disabled: false,
label: "Start Download"
});
}
}),
downloadButton = $( "#downloadButton" )
.button()
.on( "click", function() {
$( this ).button( "option", {
disabled: true,
label: "Downloading..."
});
dialog.dialog( "open" );
});
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( "Current Progress: " + progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "Complete!" );
dialog.dialog( "option", "buttons", [{
text: "Close",
click: closeDownload
}]);
$(".ui-dialog button").last().focus();
}
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + Math.floor( Math.random() * 3 ) );
if ( val <= 99 ) {
progressTimer = setTimeout( progress, 50 );
}
}
function closeDownload() {
clearTimeout( progressTimer );
dialog
.dialog( "option", "buttons", dialogButtons )
.dialog( "close" );
progressbar.progressbar( "value", false );
progressLabel
.text( "Starting download..." );
downloadButton.focus();
}
});
but I have seen now that jquery-ui changed the script since today.
what i was trying to do with that script is that on the end it repeats again, only with changes on the label text. 1. run as download, 2nd run as installation.
thank you
hi...its me again with the same problem.
someone was helping me with the result that the code is much shorter, which is also a little succes, but the main problem is not resolved. when the 2. progresstimer is running it appears false% in the labeltext, appbutton is not anymore focus on the end and i cant size the new opening window. see here: #jsfiddle. thank your for your attention. have a got one.
The link you gave does run twice the progress bar twice? Would you like it to run the whole thing again? (so a total of 4 times?)
Some more information could be helpful.
I would comment this but you need 50> rep to do that and I do not.
I have a html button
<input class="showOptions" type="button" style="width:100%" value="<%= (PRCDMU) %>" onclick="programSelector(this.value)" />
That calls some JavaScript
function programSelector(value){
var origin = document.getElementById('origin').value();
if(origin === ""){
$( "#popup" ).dialog( "open" );
}
if(origin === "Product Specification"){
url = 'http://brmappsvr:7018/Enquiries/CMENPROC.rpgle?ProductCode=' + value;
window.location.href = url;
}elseif(origin === "Future Requirements Forecast")
url = 'http://brmappsvr:7018/Enquiries/CMENPRF.rpgle?ProductCode=' + value;
window.location.href = url;
}
However a part of this process is a pop up in Jquery.
$(".showOptions").click(function(){
var $self = this.value;
$( "#popup" ).dialog({
modal: true,
width: 465,
draggable: true,
buttons: {
"Product Specification": function() {
window.location.href = 'http://brmappsvr:7018/Enquiries/CMENPROC.rpgle?ProductCode=' + $self;
$( this ).dialog( "close" );
},
"Future Requirements Forecast": function() { //cancel
window.location.href = 'http://brmappsvr:7018/Enquiries/CMENPRF.rpgle?ProductCode=' + $self;
$( this ).dialog( "close" );
}
}
});
});
The issue I have is that the popup is appearing regarless, whereas It is only meant to appear depending on the contents of the origin variable, if it's empty the pop up should work
EDIT:
origin is displayed on a html page.
<div align="left">Please click on the<strong> Product Code</strong>, to use it within the <div class="style1" id="origin"><%= (origin) %> program. </div></div>
Syntax Error in .value()
It should be
var origin = document.getElementById('origin').value;
Instead Of
var origin = document.getElementById('origin').value();
You have attached both onclick and click events on the same button:
take out this code from click event and add autoOpen to false;
$( "#popup" ).dialog({
autoOpen: false,
modal: true,
width: 465,
draggable: true,
buttons: {
"Product Specification": function() {
window.location.href = 'http://brmappsvr:7018/Enquiries/CMENPROC.rpgle?ProductCode=' + $self;
$( this ).dialog( "close" );
},
"Future Requirements Forecast": function() { //cancel
window.location.href = 'http://brmappsvr:7018/Enquiries/CMENPRF.rpgle?ProductCode=' + $self;
$( this ).dialog( "close" );
}
}
});
$(".showOptions").click(function(){
//based on the value open the dialog.
}
and remove this onclick="programSelector(this.value)"
I am trying to change the value of an input text box that is inside a dialog based on a value selected by user in a select option in the previous form submitted by the user. I am able to get the value and I able to set the value to the text box inside the dialog at first. But when I re-submit the form with a different option selected and open the dialog again, the value doesn't get changed at first. It changes only when I open the dialog a second time.
Below is the code where the dialog is called and function that sets the value to the text box is called:
$("#displayOrderDetailsDiv").on('click','.shippedOrder',function() {
var dc = $("#DC").val();
var shipmentKey = $(this).closest('tr').find('td:first').text().trim();
$("#printLabelDialog").html("<form><fieldset><label for=\"ip\">Printer IP</label> <input type=\"text\" name=\"ip\" id=\"ipAddr\" class=\"text ui-widget-content ui-corner-all\" placeholder=\"IP address of printer(eg: 10.56.89.175)\"> <labelfor=\"stnid\">Station ID:</label> <input type=\"text\" name=\"stnid\" id=\"stnid\" class=\"text ui-widget-content ui-corner-all\" placeholder=\"station id in 3 digits(Eg: 002)\"></fieldset></form>");
setIPandStn(dc);
$( "#printLabelDialog" ).dialog( {
autoOpen: false,
height : 200,
width : 900,
modal: true,
buttons: [ {
text: "Print",
click: function() {
var ip = $("#ipAddr").val().trim();
if (!validateIp(ip)){
alert("Please enter a valid IP");
return false;
}
var stnid = $("#stnid").val().trim();
if ((stnid.length != 3) || (isNaN(stnid))){
alert("Please enter a valid station Id");
return false;
}
var ajax_load = "<img class='loading' src='loading.gif' alt='loading...' style='width: 35px; height: 35px; top: 50%; left: 50%; position:absolute;' />";
$( this ).html(ajax_load);
var options = {
buttons: {}
};
$("#printLabelDialog").dialog('option', options);
$( "#printLabelDialog" ).dialog( "option", "width", 150 );
$( "#printLabelDialog" ).dialog( "option", "height", 120 );
$.ajax({
url : 'printLabelTrackingNumber.jsp',
type : 'POST',
data : {
ipAddr : ip,
stationId : stnid,
sKey : shipmentKey
},
success : function(data) {
$( "#printLabelDialog" ).dialog( "option", "width", 400 );
$("#printLabelDialog").dialog('option', options);
$("#printLabelDialog").html(data);
},
error : function(err) {
alert(err.responseText);
},
close : function(e,ui){
$(this).dialog('destroy').remove();
}
});
}
} ]
});
$( "#printLabelDialog" ).dialog( "open" );
});
Below is the function to set the value to the dialog
function setIPandStn(dcVal){
if (dcVal == "02"){
$("#ipAddr").val("10.56.89.175");
$("#stnid").val("102");
}
else if (dcVal == "13"){
$("#ipAddr").val("10.56.111.48");
$("#stnid").val("101");
}
else if (dcVal == "12"){
$("#ipAddr").val("10.26.25.166");
$("#stnid").val("004");
}
}
As you see, I am trying to set the value of $("#ipAddr") with the function setIPandStn(). The dc value is changed when I submit the form, but the value inside the text box gets changed only if I open and close the dialog once and open it the second time.
Could someone please help me identify the problem?
At first glance, it looks like you submit the form via Ajax and then open up a new dialog box in the success function. However, you don't run the "setIPandStn(dc);" function again until you click on the dialog trigger again.
I suggest running setIPandStn(dc); again in the success function of your ajax call, after you opened the new dialog box.
[...]
success : function(data) {
$( "#printLabelDialog" ).dialog( "option", "width", 400 );
$("#printLabelDialog").dialog('option', options);
$("#printLabelDialog").html(data);
setIPandStn(dc);
},
[...]
I want to be able to change the title of my modal and the buttons on run time.
currently I have this
I have actions either approval or Deny
var recButton = actions =='approval' ? 'Approve' : 'Deny';
$("#dialog").dialog(
{
modal : true,
buttons : {
'update all' : function() {
// window.location.reload();
// $( this ).dialog( "close" );
//do something here
},
Cancel : function() {
$(this).dialog("close");
}
}
}); //dialog
});
I also tried to do this for button
$("#dialog").dialog(
{
modal : true,
buttons : {
recButton : function() { ...
but in modal it didn't translate well and just said recButton instead of the variable value. Also I need to change title too.
Update: got title working by simply title:
Hey Autolycus: try this man: working demo http://jsfiddle.net/C4A9b/10/
Please use firebug to check the element id / class:
$('.ui-dialog-title').html("HULK is awesome"); should do the trick.
Hope it helps :)
code
$(document).ready(function() {
$('#theLink').click(function(){
$( "#forgot-dialog" ).dialog( "open" );
});
$( "#forgot-dialog" ).dialog({
modal: true,
autoOpen: false,
height: 255,
width: 300,
buttons: {
"ChangeTitle": function() {
alert("Title before cahnge ==> " + $('.ui-dialog-title').html());
$('.ui-dialog-title').html("HULK is awesome");
// document.forms["forgotform"].submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
});
});
OR
var formname = "form_name_here";
$("#ui-dialog-title-"+formname).innerHTML = "Hulk is awesome title";
Below Image show before and After.
Image before clicking changetitle button
After clicking change title
Example: this is the function i use to show a dialog
function pop_up_extra(div, titulo,h,w){
$( "#" + div ).dialog({
autoOpen: false,
show: "explode",
modal: true,
height: 'auto',
width: w,
title: titulo
});
$( "#" + div ).dialog( "open" );
$(".ui-widget-overlay").click (function () { $("#pop").dialog( "close" ); });
return false;
}
something like: http://jsfiddle.net/YcZFj/2/
how should I update the show method??
PS: please edit the title if you consider (i am spanish thinker)
How about slide effect of show options? Try this - http://jqueryui.com/demos/show/