Develop Reference

How can I change icon of the custom stock-tool button on click event?

I have this jsfiddle where I have two custom stock-tools annotations added with circle and rectangle icons and the pre-defined highchart button for toggleAnnotations.
stockTools: {
gui: {
enabled: true,
buttons: ['oneAnnotation', 'twoAnnotation', 'toggleAnnotations'],
definitions: {
oneAnnotation: {
className: 'highcharts-one-annotation',
symbol: 'circle.svg'
},
twoAnnotation: {
className: 'highcharts-two-annotation',
symbol: 'rectangle.svg'
},
}
}
},
As we can see, in this pre-defined button that toggles visibility of the annotations, the icon changes on the button click. So I want to have the very same thing in my custom buttons. I actually need one custom button (not two as in the example above) and I want to change its icon when the user will click on it. So I would like to switch between the circle.svg and rectangle.svg icons.
Clicks over the buttons are managed with the part:
navigation: {
bindings: {
oneAnnotation: {
className: 'highcharts-one-annotation',
init: function(e) {
alert("click on the circle annotation");
}
},
twoAnnotation: {
className: 'highcharts-two-annotation',
init: function(e) {
alert("click on the rectangle annotation");
}
}
}
},

You can toggle backgroundImage style of the button element, for example:
navigation: {
bindings: {
oneAnnotation: {
className: 'highcharts-one-annotation',
init: function(button) {
var iconsURL = 'https://code.highcharts.com/8.2.2/gfx/stock-icons/';
var url1 = 'url("' + iconsURL + 'rectangle.svg' + '")';
var url2 = 'url("' + iconsURL + 'circle.svg' + '")';
var btnStyle = button.children[0].style;
btnStyle.backgroundImage = btnStyle.backgroundImage === url1 ? url2 : url1;
}
},
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/ahd74kqn/

jQuery UI Todo List not working, need some guidance

I am woking with jQuery UI and I made an attempt to create a "to do list" app. I have it functioning up to a point, but the task won't display correctly in the sort div I have attempted to create. It's supposed to display as a "bar" with a delete button and a completed option. But it currently displays as text. Am I supposed to incorporate jQuery directly inline in the html as well?
Here is my fiddle of the app in it's current state:
Todo List App FIDDLE
I will display only the jQuery portion of the coding. The complete version is on the Fiddle.
$("document").ready(function() {
$('#due_date').datepicker();
$('#add_task').button({ icons: { primary: "ui-icon-circle-plus" } }).click(function() {
$('#new_task').dialog('open'); }); // end click
$('#new_task').dialog({ width: 350,
height: 300,
modal: true,
autoOpen: false,
close: function() {
$('#new_task input').val(' '); /*clear fields*/
}, buttons: {
"Add Task" : function() {
var task_name = $('#task').val();
var due_date = $('#due_date').val();
var begin_li = '<li><span class="done">%</span><span class="delete">x</span>';
var task_li = '<span class="task">' + task_name + '</span>';
var date_li = '<span class="due_date">' + due_date + '</span>';
var end_li = '</li>';
$('#task_list').prepend(begin_li + task_li + date_li + end_li);
$('#task_list').hide().slideDown(250).find('li:first')
.animate({ 'background-color':'rgb(255,255,204)' },250)
.animate({ 'background-color':'white'},750)
.animate;
// end animate
$(this).dialog('close');
}, "Cancel" : function() {
$(this).dialog('close');
}
}
});
// end dialog
//Marking as complete
$('#task_list').on('click', '.done', function() {
var task_item = $(this).parent('li');
var $this = $(this);
$this.detach();
$('#completed_list').prepend($this);
$this.slideDown();
});
});
//Sortable
$('.sortlist').sortable({
connectWith: '.sortlist',
cursor: 'pointer',
placeholder: 'ui-state-highlight',
cancel: '.delete,.done'
});
//Delete
$('.sortlist').on('click','.delete', function() {
task_item.effect('puff', function() {
$(this).remove();
});
});
Help and guidance is greatly appreciated!

One problem is with your click event. You are only moving the .done span element to the completed list. Try this:
$('#task_list').on('click', '.done', function () {
var $this = $(this);
var task_item = $this.parent('li');
$this.detach();
$('#completed_list').prepend(task_item);
task_item.slideDown();
});
In this case, the span.done is still being removed, but the whole li element is moved to the lower list.
There is also a problem in your CSS, corrected code below:
#task_list li, #completed_list li {
border: 1px solid rgba (0, 0, 0, 0.3);
padding-top: .1em;
line-height: 170%;
margin-top: .2em;
}
The original code had an extra curly brace after rgba, which presumably had a knock on effect on subsequent code.
EDIT
The delete function is also a little faulty. Here's the corrected code:
$('.sortlist').on('click', '.delete', function () {
var task_item = $(this).parent('li');
task_item.effect('puff', function () {
$(this).remove();
});
});
(basically, task_item wasn't defined).
Regarding the title, the problem is that id attributes must be unique, but in your HTML, 2 elements have id="task". If you change your input tag to something like:
<input type="text" name="task_title" id="task_title">
...and your jQuery code to:
var task_name = $('#task_title').val();
...the title should appear.

How to accses The ID of CheckBox in JQuery?

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 to add multiple text onclick in jquery non-modal dialog?

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/

jQuery ajax form submitting multiple times

I am having some issues with multiple form submissions with a jQuery/ajax form. I found this by printing every instance of form submission on my server, and saw that a form would submit correctly once, then again multiple times.
Just to be clear, this code works 100% correctly for the first submission, but when I click on another row in my table, and create a new dialog/submit it, it ends up submitting multiple times.
I think it has to do with event binding, but am having trouble fixing it. Any insight or help would be much appreciated.
The button's id is "save-flag-button"
// When someone clicks on the flag column in my table, a dialog pops up //
// on the condition that a flag does not exist. //
$(function() {
$('.flag').click(function() {
var cellId = "flag" + String(this.getAttribute("data-client-rel"));
if (this.getAttribute("data-flag-exists") == '0') {
// create dialog
var dialog = flagDialog('Create Flag');
// Making the form ajax
$("form", dialog).ajaxForm(function(success, data) {
if (success) {
$("#" + cellId).attr("data-flag-exists", '1');
$("#" + cellId).attr("data-flag-content", data["flag_state"]);
$("#" + cellId).text(data["flag_state"]);
$("#flag-dialog").dialog("close");
} else {
alert("Failed to submit flag. Please retry.");
}
});
} else { }
}).hover(function() {
if (this.getAttribute("data-flag-exists") == '0') {
this.innerHTML = '<span style="color: #4183C4;">Create flag!</span>';
}}, function() {
this.innerHTML = this.getAttribute("data-flag-content");
})
});
// jquery dialog code //
function flagDialog(dialogTitle) {
var dialog = $("#flag-dialog").dialog({
autoOpen: false,
autoResize: true,
modal: true,
minHeight: 300,
minWidth: 450,
position: "center",
title: dialogTitle,
buttons: [{
id: "flag-cancel-button",
text: "Cancel",
click: function() {
$(this).dialog("close");
}
},
{
id:"save-flag-button",
text: "Submit",
click: function() {
$("#flag-dialog").dialog("destroy");
// $("#client-relationship-flag-form").submit();
}
}],
close: function() {
//$("#notes-text").text("");
}
});
// Unbinding buttons here //
$("#save-flag-button, #flag-cancel-button").unbind();
$("#save-flag-button").unbind('click').click(function() {
$("#client-relationship-flag-form").submit();
});
$("#flag-cancel-button").click(function() {
$("#flag-dialog").dialog("close");
});
dialog.dialog("open");
return dialog;
};

ajaxForm binding should be done once only.
Try to put the ajaxForm binding on $(document).ready event and try to restructure your logic. ajaxForm was bind every time you click .flag element and all previously bind ajaxForm would be called on all succeeding click event.