When I add a card to the inbox list, it is possible to double click on the card to open a modal dialog. In the dialog it is possible to add some checkboxes dynamically. When the checkboxes are checked the progress bar changes value.
The issue is, lets say, I create 2 checkboxes and then check one of them, the progress bar will show 50% done. After that, I save the data and press the save button. The dialog closes.
Then, when I add a new one card to the inbox list and double click on it to open dialog, the progress bar still shows the value of 50%. You can see the problem in the image below:
I have tried to fix it by my self using the code below: But it doesn't seem to work.
$('#modalDialog,#progressbar').val($currentTarget.children('#progressbar').val());
Live Demo
How can I reset the progress bar after adding a new card?
HTML:
<!--Modal Dialog-->
<div id="modalDialog">
<form>
<input type="button" id="Save" value="Save Data" />
<hr/>
<br/>
<label>Add checkBox</label>
<br />
<div id="progressbar"></div>
<br />
<input type="text" id="checkBoxName" />
<input type="button" id="btnSaveCheckBox" value="_Ok" />
</form>
</div>
Jquery:
$(function () {
// Click function to add a card
var $div = $('<div />').addClass('sortable-div');
var cnt = 0,
$currentTarget;
$('#AddCardBtn').click(function () {
var $newDiv = $div.clone(true);
cnt++;
$newDiv.prop("id", "div" + cnt);
$newDiv.data('checkboxes', []);
$('#userAddedCard').append($newDiv);
// alert($('#userAddedCard').find("div.sortable-div").length);
});
// Double click to open Modal Dialog Window
$('#userAddedCard').dblclick(function (e) {
$currentTarget = $(e.target);
$('#modalDialog,#progressbar').val($currentTarget.children('#progressbar').val());
$('.allcheckbox').remove(); // Remove checkboxes
$('#modalDialog').data('checkboxes', []); /* Reset dialog checkbox data */
/* Add checkboxes from card data */
$.each($currentTarget.data('checkboxes'), function (i, checkbox) {
addCheckbox(checkbox.name, checkbox.status);
});
$('#modalDialog').dialog({
modal: true,
height: 600,
width: 500,
position: 'center'
});
return false;
});
$("#datepicker").datepicker({
showWeek: true,
firstDay: 1
});
$("#Save").on("click", function () {
/* Copy checkbox data to card */
$currentTarget.data('checkboxes', $('#modalDialog').data('checkboxes'));
$('#modalDialog').dialog("close");
});
// Add a new checkBox
$('#btnSaveCheckBox').click(function () {
addCheckbox($('#checkBoxName').val());
$('#checkBoxName').val("");
});
function addCheckbox(name, status) {
status = status || false;
var container = $('#modalDialog');
var inputs = container.find('input');
var id = inputs.length + 1;
var data = {
status: status,
name: name
};
var div = $('<div />', { class: 'allcheckbox' });
$('<input />', {
type: 'checkbox',
id: 'cb' + id,
value: name
}).prop('checked', status).on('change', function () {
data.status = $(this).prop('checked');
}).appendTo(div); /* set checkbox status and monitor changes */
$('<label />', {
'for': 'cb' + id,
text: name
}).appendTo(div);
div.appendTo(container);
container.data('checkboxes').push(data);
updateProgress();
}
$(document).on('change', 'input[type="checkbox"]', updateProgress);
$("#progressbar").progressbar({
value: 0,
max: 100
});
function updateProgress() {
var numAll = $('input[type="checkbox"]').length;
var numChecked = $('input[type="checkbox"]:checked').length;
if (numAll > 0) {
var perc = (numChecked / numAll) * 100;
$("#progressbar").progressbar("value", perc)
.children('.ui-progressbar-value')
.html(perc.toPrecision(3) + '%')
.css("display", "block");
}
}
});
When you click Save button just reset #progressbar value like this:
$('#progressbar').progressbar('option', 'value', 0);
You can see documentation at http://api.jqueryui.com/progressbar/#option-value
Related
I created a small jQuery plugin that shows and hides a div when the user clicks on the button .show and the button .hide, respectively. I want to pass a function as a plugin option to do some specific processing for onhide. But the onhide function executes as many times as the show and hide buttons are clicked.
Here is the jsfiddle.
When you click show/hide buttons more then once then the alert will show the same number of times.
I think it should alert only once for the hide button.
$.fn.showhide = function(options){
var popup = this;
defaultOptions = {
onHide : function() { },
onShow : function() { }
};
var Options = $.extend({},defaultOptions, options);
this.each(function() {
$(this).on('click',function(e){
var id = $(this).data('id');
$('#'+id).show();
$('.hide').on('click',function(){
var id = $(this).data('id');
$('#'+id).hide();
if (Options.onHide.call() === false) {
return;
}
});
});
});
}
$('.show').showhide({
onHide :function() {
alert('hide');
}
}
);
It's because you're implementing your onHide method inside a loop.
Move this bit:
$('.hide').on('click',function(){
var id = $(this).data('id');
$('#'+id).hide();
if (Options.onHide.call() === false) {
return;
}
});
to right before your closing bracket of your method and everything works fine!
Edit: Fiddle here: https://jsfiddle.net/ka9gw09t/10/
Just replace
$('.hide').on('click',function(){
To
$('.hide').one('click',function(){
Explanation:
With your code, each time the user clicks on .show you attach one more delegation .click to the button. one will do it just once.
$.fn.showhide = function(options){
var popup = this;
defaultOptions = {
onHide : function() { },
onShow : function() { }
};
var Options = $.extend({},defaultOptions, options);
this.each(function() {
$(this).on('click',function(e){
var id = $(this).data('id');
$('#'+id).show();
$('.hide').unbind('click').one('click',function(){
var id = $(this).data('id');
$('#'+id).hide();
if (Options.onHide.call() === false) {
return;
}
});
});
});
};
$('.show').showhide({
onHide :function() {
alert('hide');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="show" data-id="123">
Show
</button>
<button class="hide" data-id="123">
Hide
</button>
<div class="showhide" id="123" style="display:none;">
This is div with id 123
</div>
Update
I was added unbind('click') before the one to unbind the older listeners.
I have two radio buttons as following in a form
<input name="exservman" id="yes" value="1" <?php echo $exserY;?> type="radio" data-title="Ex-servicemen" class="btn btn-primary my-popover">Yes
<input type="radio" name="physical" id="phyno" value="0">No
The problem I am having is although on selecting the radio button popup appears but i want to close it by on click NO radio button.
Here is the JS
var $elements = $('.my-popoverr');
$elements.each(function () {
var $element = $(this);
$element.popover({
html: true,
placement: 'top',
container: $('body'),
content: $('#content').html()
});
$element.on('shown.bs.popover', function () {
var popover = $element.data('bs.popover');
if (typeof popover !== "undefined") {
var $tip = popover.tip();
zindex = $tip.css('z-index');
$tip.find('.close').bind('click', function () {
popover.hide();
});
$tip.mouseover(function () {
$tip.css('z-index', function () {
return zindex + 1;
});
})
.mouseout(function () {
$tip.css('z-index', function () {
return zindex;
});
});
}
});
});
You want to use the onchange event for radio buttons instead of the onclick one.
So I would suggest something like this in your code:
$tip.find('.close').bind('change', function () {
popover.hide();
});
I want to, when I double click the card the dialog pop up. Then it is possible to create dynamic checkBoxes. When creating the checkBoxes it is possible to edit the text, of each CheckBoxes. The problem comes if I have eg. created 3 checkboxes and want to edit one of them, all the others checkboxes get the same name as the one I want to edit. You can see the problem in the image below:
Jquery:
function addCheckbox(name, status) {
status = status || false;
var container = $('#divboxs');
var inputs = container.find('input');
var id = inputs.length + 1;
var data = {
status: status,
name: name
};
var div = $('<div />', { class: 'allcheckbox' });
$('<input />', {
type: 'checkbox',
id: 'cb' + id,
value: name
}).prop('checked', status).on('change', function () {
data.status = $(this).prop('checked');
}).appendTo(div); /* set checkbox status and monitor changes */
$('<label />', {
'for': 'cb' + id,
text: name
}).appendTo(div);
var $editCheckBox = $('<p />', {
class: 'editCheckBox',
text: 'Edit'
}).appendTo(div);
div.appendTo(container);
container.data('checkboxes').push(data);
}
$('#divboxs').on('click', '.editCheckBox', function () {
var text = $(this).parents(".allcheckbox").find("label").text();
var input = $('<input id="attribute" value="' + text + '" />')
$('.allcheckbox').text('').append(input);
input.select();
input.blur(function () {
var text = $('#attribute').val();
$('#attribute').parent().text(text);
$('#attribute').remove();
});
});
});
I think this is the part of the code that gives me problems:
var input = $('<input id="attribute" value="' + text + '" />')
I think I should use the ID of CheckBox: id: 'cb' + id, instead of id="attribute". How to insert the id of checkBox at this place ?
Live Demo
Ok. So there are a few issues with your code.
The first being. You append the newly created input to all "allcheckbox" class elements
$('.allcheckbox').text('').append(input);
The second issue, is in that same line you are emptying that entire DIV. Which will create issues once you want to update the input and label with the new value.
So rather hide any elements you would not want to display, once the blur event is called, remove the new input, update the values then show the elements you previously hide.
Find an updated fiddle below:
http://jsfiddle.net/62QY8/122/
Also, on a bit of a side note. "class" is a JavaScript reserved word. So rather use "classname". ie.
var $editCheckBox = $('<p />', {
classname: 'editCheckBox',
text: 'Edit'
}).appendTo(div);
I am not so sure what exactly is being done here.
But if the idea is to edit on checkbox at a time then please chek the following fiddle
http://jsfiddle.net/62QY8/121/
$(function () {
// Click function to add a card
var $div = $('<div />').addClass('sortable-div');
var cnt = 0,
$currentTarget;
$('#AddCardBtn').click(function () {
var $newDiv = $div.clone(true);
cnt++;
$newDiv.prop("id", "div" + cnt);
$newDiv.data('checkboxes', []);
$('#userAddedCard').append($newDiv);
// alert($('#userAddedCard').find("div.sortable-div").length);
});
// Double click to open Modal Dialog Window
$('#userAddedCard').dblclick(function (e) {
$currentTarget = $(e.target);
$('.allcheckbox').remove(); // Remove checkboxes
$('#modalDialog').data('checkboxes', []); /* Reset dialog checkbox data */
/* Add checkboxes from card data */
$.each($currentTarget.data('checkboxes'), function (i, checkbox) {
addCheckbox(checkbox.name, checkbox.status);
});
$('#modalDialog').dialog({
modal: true,
height: 600,
width: 500,
position: 'center'
});
return false;
});
$("#Getbtn").on("click", function () {
$currentTarget.data('checkboxes', $('#modalDialog').data('checkboxes'));
/* Copy checkbox data to card */
$('#modalDialog').dialog("close");
});
// Add a new checkBox
$('#btnSaveCheckBox').click(function () {
addCheckbox($('#checkBoxName').val());
$('#checkBoxName').val("");
});
function addCheckbox(name, status) {
status = status || false;
var container = $('#divboxs');
var inputs = container.find('input');
var id = inputs.length + 1;
var data = {
status: status,
name: name
};
var div = $('<div />', { class: 'allcheckbox' ,id: 'div_'+ id });
$('<input />', {
type: 'checkbox',
id: 'cb' + id,
value: name
}).prop('checked', status).on('change', function () {
data.status = $(this).prop('checked');
}).appendTo(div); /* set checkbox status and monitor changes */
$('<label />', {
'for': 'cb' + id,
'div': 'div_' + id,
text: name
}).appendTo(div);
var $editCheckBox = $('<p />', {
class: 'editCheckBox',
text: 'Edit'
}).appendTo(div);
div.appendTo(container);
container.data('checkboxes').push(data);
}
$('#divboxs').on('click', '.editCheckBox', function () {
var text = $(this).parents(".allcheckbox").find("label").text();
var id=$(this).parents(".allcheckbox").find("label").attr('div');
var input = $('<input id="attribute" value="' + text + '" />');
$('#'+id).html('').append(input);
input.select();
input.blur(function () {
var text = $('#attribute').val();
$('#attribute').parent().text(text);
$('#attribute').remove();
});
});
});
How can I change the tablecell value dynamically through using of jquery modal-dialog. I created the table using javascript. Here I added the code which will display the table cell value through dialog. In this code it will show the table cell value in text box, that I can change it but I can't save it.
$(function () {
$(function(){
$("#inttbl td").click(function(){
var selectValue;
selectValue = $(this).html();
$("#select_cell_display_div").html("Edit The Value<br><br><input type='text' id='namefield' value='"+selectValue+"'>");
$( "#dialog-modal" ).dialog
({
height: 240,
modal: true,
buttons: {
"Save": function(){
console.log('save clicked');
var select= document.getElementById('namefield').value
alert(select);
}
}
});
});
});
Html code is:
<div id="dialog-modal" title="Selected Value">
<span id="select_cell_display_div"></span>
</div>`
One way is to cache your initial DOM lookup of the cell that was clicked so you can set the cell value:
$(function () {
$("#inttbl td").click(function (e) {
var cell = $(this), // cache lookup
selectValue = cell.html();
$("#select_cell_display_div").html("Edit The Value<br><br><input type='text' id='namefield' value='" + selectValue + "'>");
$("#dialog-modal").dialog({
height: 240,
modal: true,
buttons: {
"Save": function () {
console.log('save clicked');
var select = document.getElementById('namefield').value
alert(select);
cell.html(select); // use cached lookup to set the cell value
}
}
});
});
});
I need to log multiple messages in a jquery non-modal dialog and a textarea,
I have an jqueryui autocomplete field from which i am selecting an option, on selecting the option it gets logged into the textarea.
what I also want to do is get it to be logged in the non-modal dialog as well. How do i do that?.
Here is the html.
<div id="codes">
<label for="selectcodes"></label>
<input id="selectcodes" size="25">
<textarea id="selectcodes-log"></textarea>
</div>
<div id="dialog">
<div>
Here is the javascript,
/*JSON data, JavaScript object */
var tag = [
"abc",
"efg",
"hij",
"klm",
"nop",
"qrst"];
/* this function logs the selected autocomplete option into the textarea */
function selectcodes_log(message) {
/*this is for logging the code into the textarea */
$("#selectcodes-log").val(function () {
return this.value + "codes= " + message + ', '}).prependTo("#selectcodes-log");
/*this is what have tried to log into the non-modal dialog*/
$("#dialog").val(function(){return this.value + message +', '}).prependTo( "#dialog");
}
/*selects multiple autocomplete values */
$("#selectcodes")
.bind("keydown", function (event) {
if (event.keyCode === $.ui.keyCode.TAB && $(this).data("ui-autocomplete").menu.active) {
event.preventDefault();
}
})
`/* jquery ui autocomplete */`
.autocomplete({
minLength: 0,
source: function (request, response) {
// delegate back to autocomplete, but extract the last term
response($.ui.autocomplete.filter(
tag, extractLast(request.term)));
},
focus: function () {
// prevent value inserted on focus
return false;
},
select: function (event, ui) {
selectcodes_log(ui.item ? +ui.item.value :
"Nothing selected, input was " + this.value);
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
$(this).val("");
return false;
}
});
/* function for a non modal dialog */
$(function () {
$('#dialog').dialog({
autoOpen: true,
open: function () {
closedialog = 1;
$(document).bind('click', overlayclickclose);
},
focus: function () {
closedialog = 0;
},
close: function () {
$(document).unbind('click');
},
buttons: {
Ok: function () {
$(this).dialog('close');
}
}
});
});
http://jsfiddle.net/pratik24/9VBNd/1/