I'm using the asmselect plugin to allow users to select & order multiple items from a select box.
I only want to enable the submit button when the user has made a change. The following works, but change does not get called when sorting the selected elements:
<script type="text/javascript">
$(document).ready(function() {
$("select[multiple]").asmSelect({
addItemTarget: 'bottom',
highlight: false,
hideWhenAdded: true,
sortable: true
});
// track changes with our own event
$("#mySelect").change(function(e, data) {
$("#submit").removeAttr("disabled");
// if it's a sort or an add, then give it a little color animation to highlight it
if (data.type != 'drop') data.item.animate({ 'backgroundColor': '#ffffcc' }, 20, linear', function() {
data.item.animate({ 'backgroundColor': '#dddddd' }, 500);
});
});
});
</script>
The select & submit:
<select id="mySelect" multiple="multiple" name="mySelect[]" title="Select Elements">
<% foreach (var item in Model)
{ %>
<option <%= item.Selected ? "selected=selected" : "" %> value="<%= Html.Encode(item.ID) %>">
<%= Html.Encode(item.Text) %></option>
<% } %>
</select>
<input type="submit" value="Save" id="submit" disabled="disabled" />
How can I enable the submit when selected elements are sorted?
You need to change asm function as below:
function makeSortable()
{
// make any items in the selected list sortable
// requires jQuery UI sortables, draggables, droppables
$ol.sortable({
items: 'li.' + options.listItemClass,
handle: '.' + options.listItemLabelClass,
axis: 'y',
update: function(e, data)
{
var updatedOptionId;
$(this).children("li").each(function(n)
{
//$option = $('#' + $(this).attr('rel'));
// i'm not sure what this is here for as the return will break ordering
//if($(this).is(".ui-sortable-helper"))
{
// updatedOptionId = $option.attr('id');
// return;
//
}
//$original.append($option);
$original.append($('#' + $(this).attr('rel')));
});
//we want to trigger change event always, even if it is only the order that has been changed.
//if(updatedOptionId) triggerOriginalChange(updatedOptionId, 'sort');
triggerOriginalChange(updatedOptionId, 'sort');
}
}).addClass(options.listSortableClass);
}
It seems that with older versions of jquery/jquery-ui, an additional event was triggered for an item with ui-sortable-helper attribute. It
Try my updated version of asmselect. See code and example here
Related
i am creating a form for searching a client, using either id or email both are set to be unique. Application made on Codeignitor.
I have created a form with two radio buttons, one for search with ID and another for search with mail+dob.
Depending on the radio button selected, corresponding input fields shown.
In controller, it choose the model function based on the radio button value.
This is I coded, i need to pass the value of radio button to Controller.php file
Form(only included the radio button)
$(document).ready(function() {
$("#usingdob").hide();
$("#usingmail").hide();
$("input:radio").click(function() {
if ($(this).val() == "id") {
$("#usingId").show();
$("#usingdob").hide();
$("#usingmail").hide();
} else {
$("#usingId").hide();
$("#usingdob").show();
$("#usingmail").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4">
<label class="radio-inline">
<input type="radio" name="optradio" value="id" checked>Using ID </label></div>
<div class="col-md-4">
<label class="radio-inline">
<input type="radio" name="optradio" value="mail">Using DOB</label>
</div>
I expected to get the radio button value correctlyenter image description here
JS:
$('input[name="optradio"]').click(function(){
var optradio = $(this).val();
//or
var optradio = $("input[name='optradio']:checked").val();
if(optradio == 'id'){
//do your hide/show stuff
}else{
//do your hide/show stuff
}
});
//on search button press call this function
function passToController(){
var optradio = $("input[name='optradio']:checked").val();
$.ajax({
beforeSend: function () {
},
complete: function () {
},
type: "POST",
url: "<?php echo site_url('controller/cmethod'); ?>",
data: ({optradio : optradio}),
success: function (data) {
}
});
}
Try this
<script type="text/javascript">
$( document ).ready(function() {
$("#usingdob, #usingmail").hide();
$('input[name="radio"]').click(function() {
if($(this).val() == "id") {
$("#usingId").show();
$("#usingdob, #usingmail").hide();
} else {
$("#usingId").hide();
$("#usingdob, #usingmail").show();
}
});
});
</script>
One thing I noticed is that you have 'mail' as a value in the DOB option. Another is that there seems to be 3 options and yet you only have 2 radios?
I adjusted the mail value to dob and created dummy divs to test the code. It seems to work.
$(document).ready(function() {
$("#usingdob").hide();
$("#usingmail").hide();
$("input:radio").click(function() {
console.log($(this).val());
if ($(this).val() == "id") {
$("#usingId").show();
$("#usingdob").hide();
$("#usingmail").hide();
} else {
$("#usingId").hide();
$("#usingdob").show();
$("#usingmail").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4">
<label class="radio-inline">
<input type="radio" name="optradio" value="id" checked>Using ID </label></div>
<div class="col-md-4">
<label class="radio-inline">
<input type="radio" name="optradio" value="dob">Using DOB</label>
</div>
<div id="usingId">
Using Id div
</div>
<div id="usingdob">
Using dob div
</div>
<div id="usingmail">
Using mail div
</div>
As far as passing the value to the controller goes, ideally the inputs should be in a form. When you submit the form, the selected value can be passed to the php.
<?php
if (isset($_POST['submit'])) {
if(isset($_POST['optradio']))
{
Radio selection is :".$_POST['optradio']; // Radio selection
}
?>
If you want to get currently checked radio button value Try below line which will return current radio button value
var radioValue = $("input[name='gender']:checked").val();
if(radioValue)
{
alert("Your are a - " + radioValue);
}
I have jquery UI code for confirm popup.
if (confirm('Are you sure you want to delete the batchjob:' +
dataItem["Name"])) {
$.get("#Url.Content("~/BatchJob/DeleteBatchJob")", { batchJobDetailId: parseInt(dataItem["BatchJobDetailId"]) }, function (data) {
if (data) {
debugger
var batchJobValidateWnd = $("#ValidateBatchJobStatus").data("kendoWindow");
batchJobValidateWnd.content("BatchJob deleted successfully.");
batchJobValidateWnd.center().open();
$.post("#Url.Content("~/BatchJob/SearchBatchJobDetailByParams")", { jobName: $("#Name").val(), startDate: $("#ScheduleStartDate").val() }, function (data) {
});
}
else {
debugger
window.location = '#Url.Content("~/BatchJob/Create")/' + parseInt(dataItem["BatchJobDetailId"]);
}
});
}
And I need Kendo Confirmation popup?How i change jquery confirm popup to kendo confirm popup
You can create a Kendo Confirmation Dialog via a promise, and if confirmed execute the same way as you would with a jQuery dialog.
The dialog itself should be created using an External Template which is rendered on buttonDisplayDialog click event which will wait for a response before continuing.
<script id="confirmationTemplate" type="text/x-kendo-template">
<div class="popupMessage"></div>
</br>
<hr/>
<div class="dialog_buttons">
<input type="button" class="confirm_yes k-button" value="Yes" style="width: 70px" />
<input type="button" class="confirm_no k-button" value="No" style="width: 70px" />
</div>
</script>
Based on whether the user clicks "Yes" or "No" will return result as a true or false value which is where you should put the remainder of your code:
$("#buttonDisplayDialog").kendoButton({
click: function(e) {
$.when(showConfirmationWindow('Are you sure you want to delete the batchjob:')).then(function(confirmed){
if(confirmed){
alert('This is where you will put confirmation code');
}
else{
alert('User clicked no');
}
});
}
});
});
function showConfirmationWindow(message) {
return showWindow('#confirmationTemplate', message)
};
function showWindow(template, message) {
var dfd = new jQuery.Deferred();
var result = false;
$("<div id='popupWindow'></div>")
.appendTo("body")
.kendoWindow({
width: "200px",
modal: true,
title: "",
modal: true,
visible: false,
close: function (e) {
this.destroy();
dfd.resolve(result);
}
}).data('kendoWindow').content($(template).html()).center().open();
$('.popupMessage').html(message);
$('#popupWindow .confirm_yes').val('OK');
$('#popupWindow .confirm_no').val('Cancel');
$('#popupWindow .confirm_no').click(function () {
$('#popupWindow').data('kendoWindow').close();
});
$('#popupWindow .confirm_yes').click(function () {
result = true;
$('#popupWindow').data('kendoWindow').close();
});
return dfd.promise();
};
Here is a Dojo example to demonstrate the above code in action.
I am using FullCalendar 3.1.0 plugin to show events. I was able to implement multiple events with a dropdown. But user is only able to select 1 option from a single dropdown filter. My goal is to give the opportunity to select multiple options in a each dropdown filter. I am using dropdown. But when I hold down CTR and click on options, it only shows events for the first option in the list. Any help would be greatly appreciated.
Here is the HTML:
<!-- Main view: Title and calendar -->
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 id="cal_title">Change Calendar</h1>
<div class="search_bar">
<ul id="menu">
Search By:
<li>
<select id="status_selector" multiple>
<option value="all" selected="selected">Status Types - All</option>
</select>
</li>
<li>
<select id="group_selector" multiple>
<option value="all" selected="selected">Group - All</option>
</select>
</li>
<li>
<select id="changeType_selector" multiple>
<option value="all" selected="selected">Type of Change - All</option>
<option value="6250">Emergency Change</option>
<option value="6882">Expedited Change</option>
<option value="6249">Normal Change</option>
<option value="9999">Standard Change</option>
</select>
</li>
<li>
<select id="downtime_selector" multiple>
<option value="all" selected="selected">Downtime - All</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</li>
</ul>
</div>
<div id="calendar"></div>
<div id="footer">To ensure optimal performance, only changes created in the past 90 days are shown. For changes older than 90 days please reference EasyVista. <br />If an issue has been found and/or you have a recommendation, please open a ticket for Service Request/Applications/EasyVista - Other Request, explaining the issue or recommendation.</div>
<div id="version">SACC v2.0</div>
</div>
</div>
</div>
Here is my Javascript:
$(document).ready(function() {
/* Find all the distinct STATUS_EN and place them into a dropdown list */
// This creates first 2 dropdown dynamically
$.getJSON('json/events.json',function(json){
var usedStatus = []; // Array to keep track of all STATUS_EN that have been seen
var usedGroup = []; // Array to keep track of all group_selector that have been seen
// For each object, store the status/group in predefined variables
$.each(json, function(i,v){
// If STATUS_EN has not been seen
if (usedStatus.indexOf(v.STATUS_EN) == -1){
usedStatus.push(v.STATUS_EN); // Add STATUS_EN to usedStatus
}
// If responsible_group has not been seen
if (usedGroup.indexOf(v.responsible_group) == -1){
usedGroup.push(v.responsible_group); // Add responsible_group to usedStatus
}
});
// Sort both array variables in alphabetical order.
usedStatus.sort();
usedGroup.sort();
// Create the dropdown
usedStatus.forEach(function(value){
if (value != undefined){ // If STATUS_EN is not undefined
$("#status_selector").append('<option value="'+value+'">'+value+'</option>'); // Create an option for the dropdown list
}
});
usedGroup.forEach(function(value){
if (value != undefined){ // If responsible_group is not undefined
$("#group_selector").append('<option value="'+value+'">'+value+'</option>'); // Create an option for the dropdown list
}
});
});
/* If end_date is null, return start_date */
function isNull(end_date,start_date){
if(end_date !== null){
return end_date;
} else {
return start_date;
}
}
/* Calendar structure */
$('#calendar').fullCalendar({
/* Theme enabler */
theme: false,
/* Header description */
header: {
left: 'prev,today,next',
center: 'title',
right: 'month,basicWeek,basicDay'
},
/* Set the default view to Day */
defaultView: 'basicWeek',
/* Arrow stype (Used when theme is enabled) */
themeButtonIcons: {
prev: 'circle-triangle-w',
next: 'circle-triangle-e'
},
/* Text to show in the button */
buttonText: {
today: 'Today',
month: 'Month',
week: 'Week',
day: 'Day',
list: 'Week List'
},
navLinks: true, // Can click day/week names to navigate views
editable: false, // Remove permission to move events
eventLimit: true, // Allow "more" link when too many events
businessHours: true, // grayout afterhours
multiple: true,
/* Function that allows user to click on event. */
eventClick: function (event, jsEvent, view) {
//set the values and open the modal
$('#modalTitle').html(event.title);
$('#modalBody').html(event.text);
$('#eventUrl').attr('href', event.url);
$('#eventStatus').html("Status: " + event.STATUS_EN);
$('#fullCalModal').modal('show');
return false; // prevent from going to EasyVista right away
},
/* Function that shows description when hovering over event */
eventMouseover: function (data, event, view) {
tooltip = '<div class="tooltiptopicevent">'
+ '<strong>Request Number:</strong> ' + data.RFC_NUMBER
+ '<br /><strong>Status:</strong> ' + data.STATUS_EN
+ '<br /><strong>Start Date:</strong> ' + moment(data.start).format("MM/D, h:mm:ss a")
+ '<br /><strong>End Date:</strong> ' + moment(isNull(data.end,data.start)).format("MM/D, h:mm:ss a")
+ '<br /><strong>Description:</strong> ' + data.text + '</div>';
$("body").append(tooltip);
$(this).mousemove(function(event){
$(".tooltiptopicevent").position({
my: "left+3 bottom-3",
of: event,
collision: "flipfit"
});
});
},
/* Hide description when mouse moves out */
eventMouseout: function (data, event, view) {
$(this).css('z-index', 8);
$('.tooltiptopicevent').remove();
},
/* Feed in events from JSON file through PHP */
events: {
url: 'php/get-events.php'
},
/* Render the events */
eventRender: function eventRender(event, element, view){
return['all',event.STATUS_EN].indexOf($('#status_selector option:selected').val()) >= 0
&& ['all',event.responsible_group].indexOf($('#group_selector option:selected').val()) >= 0
&& ['all',event.change_type].indexOf($('#changeType_selector option:selected').val()) >= 0
&& ['all',event.downtime].indexOf($('#downtime_selector option:selected').val()) >= 0
},
/* Show status loading when loading */
loading: function(bool) {
$('#loading').toggle(bool);
}
});
/* Call on fullCalendar after selection of dropdown option
$('#status_selector, #group_selector, #changeType_selector, #downtime_selector').change(function() {
$('#calendar').fullCalendar('rerenderEvents');
//$('#calendar').fullCalendar('refetchEvents'); // this allows the spinner to come up each time filter is changed.
});*/
/**/
$('#status_selector, #group_selector, #changeType_selector, #downtime_selector').on('change',function(){
$('#calendar').fullCalendar('rerenderEvents');
});
});
Sample of how my .json file looks like:
[
{
"start": "2016-12-2T17:0:00",
"end": "2016-12-2T17:0:00",
"title": "12/2/2016 5:00 PM - group1",
"url": "https://sample.com",
"text": "some needed text",
"description": "description of event",
"REQUEST_ID": 462820,
"STATUS_EN": "Open",
"downtime": "No",
"change_type": "9999",
"responsible_group": "group1",
"RFC_NUMBER": "C201612_09454"
},
{
"start": "2017-2-1T21:0:00",
"end": "2017-2-1T21:0:00",
"title": "2/1/2017 9:00 PM - group2",
"url": "https://samplesite.com",
"text": "some text",
"description": "description of event",
"REQUEST_ID": 521157,
"STATUS_EN": "Closed",
"downtime": "No",
"change_type": "6250",
"responsible_group": "group2",
"RFC_NUMBER": "C201702_00976"
}
]
Doing .val() on a group of selected elements (e.g. your $('#status_selector option:selected').val()) will only return the value from the first matched element - as per the very first line of the docs: http://api.jquery.com/val/
So you need to loop through and check the values of all the selected options, and test for them individually. Something like this (untested):
eventRender: function eventRender(event, element, view){
var statusMatch = false;
var statusArr = ['all',event.STATUS_EN];
$('#status_selector option:selected').each(function(index, el)
{
if (statusArr.indexOf($(this).val()) > = 0) statusMatch = true;
});
var groupMatch = false;
var groupArr = ['all',event.responsible_group];
$('#group_selector option:selected').each(function(index, el)
{
if (groupArr.indexOf($(this).val()) > = 0) groupMatch = true;
});
var changeMatch = false;
var changeArr = ['all',event.change_type];
$('#changeType_selector option:selected').each(function(index, el)
{
if (changeArr.indexOf($(this).val()) > = 0) changeMatch = true;
});
var downtimeMatch = false;
var downtimeArr = ['all',event.downtime];
$('#downtime_selector option:selected').each(function(index, el)
{
if (downtimeArr.indexOf($(this).val()) > = 0) downtimeMatch = true;
});
return (statusMatch && groupMatch && changeMatch && downtimeMatch);
}
I have the following html and two functions, used to add a custom editor to a grid with a checkbox. The checkbox is displayed correctly when first bringing up the grid using the checkBoxTemplate function, but when I try to update, the checkBoxEditor function is not called, and thus I don't get a checkbox, but rather the string "checkBoxEditor". What am I doing wrong?
<div id="dependencyGrid" data-role="grid"
data-scrollable="true"
data-editable="inline"
data-sortable="true"
data-toolbar="['create']"
data-bind="source: dependencies"
data-columns="[
{ field: 'ActiveFlag', title: 'Active', width: 30, editor: 'checkBoxEditor', template: '#=checkBoxTemplate(data.ActiveFlag)#' }
]">
</div>
checkBoxEditor = function (container, options) {
if (options.model.ActiveFlag == 1)
$('<input type="checkbox" checked=checked class="chkbx activeflag" ></input> ').appendTo(container);
else
$('<input type="checkbox" class="chkbx activeflag" ></input> ').appendTo(container);
};
checkBoxTemplate = function (input) {
if (input == 1 || input == true) {
return '<input type=checkbox checked=checked class=chkbx disabled=disabled ></input>';
}
return '<input type=checkbox class=chkbx disabled=disabled ></input>';
}
This is the correct, basic way to do this. I just didn't have my checkBoxEditor function defined where it could be accessed by the html... So, it you want to set up a custom editor for a checkbox, this should work for ya.
I want show the title(walk,run,talk) based on select value when mouseOver on particular options.
Here Is my Fiddle
Is this a bug in knockout (or) Am I doing Wrong?
HTML:-
<select data-bind="value: activityId,optionsValue: 'id', optionsText: 'name', options: activityArray,optionsCaption:'Select',attr: {title:'name'}">
Script
// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
var self = this;
self.activityId = ko.observable("");
self.activityArray = ko.observableArray();
self.activityArray.push(new Activity(1,'walk'));
self.activityArray.push(new Activity(2,'run'));
self.activityArray.push(new Activity(3,'talk'));
}
function Activity(id,name){
this.id = id;
this.name = name;
};
// Activates knockout.js
ko.applyBindings(new AppViewModel());
Any help is appreciable
If you want to have additional attributes on the generated options elements you cannot use the options binding you have to do it "manually" with foreach
<select data-bind="value: activityId">
<option>Select</option>
<!-- ko foreach: activityArray -->
<option data-bind="value: id, text: name, attr: {title: name}"></option>
<!-- /ko -->
</select>
If you want to display the a title also for the currently selected element you will need a computed observable which calculates the title from the activityId:
self.selectedActivity = ko.computed(function () {
var selected = ko.utils.arrayFirst(self.activityArray(), function (item) {
return item.id == self.activityId()
});
if (selected)
return selected.name;
});
Then you can use this selectedActivity on your select:
<select data-bind="value: activityId, attr: {title: selectedActivity}">
Demo JSFiddle.
Another solution could be this: http://jsfiddle.net/un2qh/3/
HTML:
<select data-bind="options: activityArray, optionsText: 'name',
value: selectedActivity, attr: {title: activityTitle},
optionsCaption: 'Choose...', optionsAfterRender: setOptionTitle">
</select>
JS (main computed attribute for title):
self.activityTitle = ko.computed(function () {
return self.selectedActivity() ? self.selectedActivity().name : "" ;
});