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.
Related
I have the same problem as in this question here, which is the conflict between jQuery UI and Bootstrap. The given answer from Darkseal
$.widget.bridge('uibutton', $.ui.button);
completely solved my problem for the "button"-widget. But it seems to me, that also the "buttonset"-widget reveals a conflict between the two libraries but
$.widget.bridge('uibuttonset', $.ui.buttonset);
does not do the trick for me. Am I doing something wrong?
This is an older question but I thought I'd share my fix for this.
You don't need the..
$.widget.bridge('uibuttonset', $.ui.buttonset);
There isn't any conflict there with Bootstrap (v3.3.6). The issue is $.ui.buttonset makes calls to .button() which isn't the the new name you declared so the conflict lives on. To fix this, I updated the calls to .button() inside .buttonset() to match the new name, "uibutton" or whatever you declare it as.
Below is my code for version jQuery UI 1.11.4. Perhaps there is an easier fix, but I've not come across it.
$.widget( "ui.buttonset", {
version: "1.11.4",
options: {
items: "button, input[type=button], input[type=submit], input[type=reset], input[type=checkbox], input[type=radio], a, :data(ui-button)"
},
_create: function() {
this.element.addClass( "ui-buttonset" );
},
_init: function() {
this.refresh();
},
_setOption: function( key, value ) {
if ( key === "disabled" ) {
this.buttons.uibutton( "option", key, value );
}
this._super( key, value );
},
refresh: function() {
var rtl = this.element.css( "direction" ) === "rtl",
allButtons = this.element.find( this.options.items ),
existingButtons = allButtons.filter( ":ui-button" );
// Initialize new buttons
allButtons.not( ":ui-button" ).uibutton();
// Refresh existing buttons
existingButtons.uibutton( "refresh" );
this.buttons = allButtons
.map(function() {
return $( this ).uibutton( "widget" )[ 0 ];
})
.removeClass( "ui-corner-all ui-corner-left ui-corner-right" )
.filter( ":first" )
.addClass( rtl ? "ui-corner-right" : "ui-corner-left" )
.end()
.filter( ":last" )
.addClass( rtl ? "ui-corner-left" : "ui-corner-right" )
.end()
.end();
},
_destroy: function() {
this.element.removeClass( "ui-buttonset" );
this.buttons
.map(function() {
return $( this ).uibutton( "widget" )[ 0 ];
})
.removeClass( "ui-corner-left ui-corner-right" )
.end()
.uibutton( "destroy" );
}
});
I hope that helps you and everyone else.
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();
});
$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#revocation" ).dialog({
autoOpen: false,
height: 200,
width: 460,
modal: true,
buttons:{
"Yes": function() {
revocation();
},
"Close" : function() {
$( this ).dialog( "close" );
}
}
});
I want to put add processing time in this function, when I click the button "Yes", add processing time of 3-5 seconds, thank you in advance
Javascript is asynchronyous language. You can put
setTimeout(function() {revocation();},3000);
instead of
revocation();
for delay in 3000 msec
you see my picture for more ,can add function , when i click button " yes " appear 2 files "revocation" in chrome with latency time: 410ms & 309ms , there a way to add jquery make one click button 2 file to run equal not, eg: 410ms & 410ms.
Images
Say I have the following link:
<a onclick="confirmDelete()" href="delete.do&xyz">Delete user</a>
and the following is the confirmDelete function:
function confirmDelete()
{
if(!confirm("delete user?"))
{
return false;
} else
{
return true;
}
}
Basically when click on link, it checks whether the user select ok or cancel and then perform based on it.
Problem: I have got hundreds of similar links on my platform and we decide to turn all the javascript alerts to jquery dialog.
I used the following to somehow override the alert:
$(function(){
window.confirm = function(message) {
$('#overrideAlert').text(message).dialog({
resizable: false,
modal: true,
buttons: {
"Ok": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
};
});
It works fine and the alert comes up as a jquery dialog but the issue is because of the fact that it is not possible to return something from a handler like dialog, I am not sure how to tell my button in the filed, that the user selected ok or cancel.
Basically I m not sure how to link them all together.
Please help
The issue is because of javascript asynchronous nature . As you are using jQuery . could try following method .
$('a[onclick="confirmDelete()"]')
.attr('onclick','')
.click( function(){
var anch = this,
message = "delete user?";
$('#overrideAlert').text(message).dialog({
resizable: false,
modal: true,
buttons: {
"Ok": function() {
$( this ).dialog( "close" );
alert( "window.location=" + anch.href );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
return false ;
});
I made jsfiddle http://jsfiddle.net/wB389/
Maybe like so:
"Ok": function() {
window.location=deleteURL;
$( this ).dialog( "close" );
},
It's probably a little more complicated that that since you use relative url's but you can get the current url using window.location.protocol + window.location.port + window.location. window.location.host + window.location.pathname
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