We Keep Coding

Onclick event in html tempelate ExtJs

Below is the code sample i'm trying to add a onclick function, but it seems not working as expected. The aim is to take the div tag text value and put it in a variable or return it through a func like myFunction I also tried adding listeners but don't know how it works . As its a template its hard to debug. and onclick event or call hierarchy is not easy to find. How to tackle it with simple javascript?
var resultTmpl = '<div id="group_header_{locationName}" class="current_list_audit_location expcol_{locationName:removeSpaces}" style="display:none;">'+
'<tpl for="pickslipid">' +
'<div class="audit_stage_list" style="margin-top: 6px !important;">' +
'<div class="orderpickingpicklistimageurlStage margin-top"></div>' +
'<div style="float:left;">' +
'<div class="orderpickingpicklistStagedesc orderpickingpicklistStagedesc2" id={pickupSlipId} onclick="myfunction()" > {pickupSlipId}</div></div>' +
'<div class="order_pick_right_stage_count_main_group_list audit_stage_pickup_date_list">' +
'<div>Pickup Date: {pickupDate}</div>' +
'</div>' +
'</div>' +
'</tpl>';
// pass the root node of the data object
Ext.define('sif.view.mapping.templates.EX04AuditStagingTpl', {
extend: "Ext.XTemplate",
html: resultTmpl,
myfunction : function(){
return document.getElementByClass("orderpickingpicklistStagedesc orderpickingpicklistStagedesc2").value;
},
constructor: function() {
console.log(resultTmpl);
return this.callParent([this.html]);
}
});
Ext.util.Format.removeSpaces = function(value) {
return !value ? value : String(value).replaceAll(" ", "_");
};
String.prototype.replaceAll = function(search, replacement) {
var target = this;
return target.split(search).join(replacement);
};
The above code is called from another class EX04AuditStagingLocation as given below:
var ex04AuditStagingList = Ext.create('sif.view.mapping.templates.EX04AuditStagingTpl');
var ex04AuditStageItems = {
xtype: 'panel',
width: '100%',
height: '100%',
cls: 'my-panel',
ui: 'plain',
itemId: 'ex04showdetailspanel',
layout: {
align: 'stretch',
type: 'vbox'
},
items: [{
xtype: 'list',
cls: 'current_page_cycle_count',
store: 'AuditStagingStore',
itemTpl: ex04AuditStagingList,
itemHeight: '100%',
height: '100%',
emptyText: '<p id="empty-text" style="text-align:center; left: 25px;">' + PhoneTopUtil.getLocaleString(1280040) + '</p>',
grouped: true,
zIndex: 10,
pinHeaders: true,
style: 'font-family: RobotoRegular;',
loadingText: "",
itemId: 'ex04AuditStageList',
id: 'ex04AuditStageList',
listeners: {
painted: function(element, ths) {
SifUtils.customImageLoad(element.select('img').elements, 0, IMAGELOADING.CONFIRMPICKUP);
},
refresh: function(element, options) {
SifUtils.customImageLoad(element.element.select('img').elements, 0, IMAGELOADING.CONFIRMPICKUP);
},
itemtap: function(list, index, target, record) {
AuditOrMoveUtil.controller.onAmMoveAction(list, null, null, record);
},
}
}

Open dialog with jquery

I have a dialog referenced by $imageDialog and I'm trying to open it with $imageDialog.dialog("open"), but it doesn't work.
The problem is that, by debugging, I've seen the $imageDialog.dialog("open") line executing, but then the open function inside $imageDialog does not execute. It doesn't show any errors and I checked that $imageDialog has the reference well set when executing the $imageDialog.dialog("open").
Here is the html dialog:
<div class="dialog" id="image-dialog"></div>
And here is the javascript code:
var selectedImage;
var $imageDialog = $("#image-dialog");
$imageDialog.dialog({
autoOpen: false,
buttons: [
{
text: "Cerrar",
icons: {
primary: "ui-icon-close"
},
click: function() {
$(this).dialog("close");
}
}
],
maxHeight: 580,
modal: true,
position: { my: "top", at: "top+160" },
resizable: false,
title: "Vista de imagen",
width: 1000,
close: function() {
$imageDialog.empty();
},
open: function() {
content += " <img alt='previsualizacion'" + "src='" + imageSrc + "'>";
$imageDialog.append(content);
}
});
function showImage(img) {
selectedImage = img.src;
console.log($imageDialog);
$imageDialog.dialog("open");
}

To open JQuery UI dialog just use:
Jquery:
$(document).ready(function(){
$('#dialog').dialog();
});
HTML:
<div id="dialog">
</div>
Working Fiddle

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog();
} );
</script>
<script type="text/javascript">
$("#dialog").dialog({
autoOpen: false,
buttons: [
{
text: "Cerrar",
icons: {
primary: "ui-icon-close"
},
click: function() {
$(this).dialog("close");
}
}
],
maxHeight: 580,
modal: true,
position: { my: "top", at: "top+160" },
resizable: false,
title: "Vista de imagen",
width: 1000,
close: function() {
$imageDialog.empty();
},
open: function() {
content += " <img alt='previsualizacion" + "src='" + imageSrc + "'>";
$imageDialog.append(content);
}
});
function showImage(img) {
selectedImage = img.src;
console.log($imageDialog);
$imageDialog.dialog("open");
}
</script>
</head>
<body>
<div class="dialog" id="dialog">Dialog</div>
</body>
</html>

There are three thing you need to fix in your code
You have added modal html with id calibration-image-dialog but you are using #image-dialog in your script.
imageSrc is not defined
In modal Open event callback you have a single quote missing.
content += "<img alt='previsualizacion" + "src='" + imageSrc + "'>";
it should be
content += "<img alt='previsualizacion'" + "src='" + imageSrc + "'>";
Here is working demo .
var $imageDialog, imageSrc;
$(function() {
$imageDialog = $("#image-dialog");
$imageDialog.dialog({
autoOpen: false,
buttons: [{
text: "Cerrar",
icons: {
primary: "ui-icon-close"
},
click: function() {
$(this).dialog("close");
}
}],
maxHeight: 580,
modal: true,
position: {
my: "top",
at: "top+160"
},
resizable: false,
title: "Vista de imagen",
width: 500,
close: function() {
$imageDialog.empty();
},
open: function() {
var content = " <img alt='previsualizacion'" + "src='" + imageSrc + "'>";
$imageDialog.html(content);
}
});
});
function showImage(img) {
imageSrc = img.src;
$imageDialog.dialog("open");
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="dialog" id="image-dialog"></div>
<img onclick="showImage(this)" alt ="image" src="http://www.publicdomainpictures.net/pictures/100000/velka/autumn-by-the-lake.jpg#.WLnFxbbRDek.link" width="100" height="100">
<img onclick="showImage(this)" alt ="image" src="http://www.publicdomainpictures.net/pictures/40000/nahled/lion-head-portrait.jpg" width="100" height="100">

Kendo Grid edit inline with dropdown list isn't show

i have problem with my kendo grid edit inline using dropdownlist inside the grid, this is my ScreenShoot
screenShoot1->please look field "icon"
when i click the icon's field, the field is change to dropdown list
like this
screenshoot2 after i clicked the field icon
, so what must i do ,if i want the field icon is a dropdown list before clicked ??
this is my code:
$("#customers").kendoDropDownList({
dataTextField: "pis_icon_url",
dataValueField: "pis_icon_id",
valueTemplate: '<span class="selected-value" style="background-image: url(\'#:pis_icon_url#\')"></span>',
template: '<span class="k-state-default" style="background-image: url(\'#:pis_icon_url#\')"\></span>',
dataSource: {
transport: {
read: {
dataType: "json",
url: "/api/icon-priority"
}
},
schema:{
data:'list'
}
},
height: 400
});
var dropdownlist = $("#customers").data("kendoDropDownList");
//in field: "pis_icon_id", please check "template", i already add property "id='customers'" in tag input but it doesn't work
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
columns: [
{ field:"pis_priority_name",title:"Priority Name", width: "180px" },
{ field: "description", title: "Description", width: "380px" },
{ field: "pis_icon_id", title: "Icon", width: "300px",template:"<input id='customers' data-bind='value:pis_icon_id' style='width:100%;'>",
editor:categoryDropDownEditor
// "<div style='width: 100%;'><img src='#:pis_icon_url#' style='width: 22px;height: 22px;'> </div>"
},
{ field: "pis_priority_color", title: "Color",
width: "100px",
editor: function (container, options) {
$("<input type='color' name='"+options.field+"' data-bind='value:" + options.field + "' />")
.appendTo(container)
.attr("pis_priority_color", options.field)
.kendoColorPicker({
buttons: true
});
},
template: "<span style='display: inline-block; width: 50%; height: 50%; background-color: #= pis_priority_color #'></span>"
},
{ field: "is_default",
title: "Default",
width: "100px",
template:"<input name='is_default' class='ob-paid' type='checkbox' data-bind='checked: is_default' #= is_default? checked='checked' : '' #/> "
},
{ field: "active",
title:"Active",
template:"<input name='active' class='ob-paid' type='checkbox' data-bind='checked: active' #= active ? checked='checked' : '' #/> "
,width: "130px"
},
{ command: "destroy", title: " ", width: "150px" }],
editable: {
update:true
}

I was able to get it working using a MVC wrapper and by following this post:
http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#configuration
The key was adding the save event due to a known Kendo grid bug - seems to me the Kendo docs should have some mention of this issue.
I tried implementing the same logic using the javascript implementation but could not get it working.

Using jQuery.html set form with submit button

I'm trying to set form for modifying bootstrap table and I'm using JQuery .html() method for that. I did step by step from Jquery API Documentation but can't get why my save button doesn't fire. Where is my mistake?
this is my plunk
JS:
$(function () {
$("#button").click(function () {
$('#table').bootstrapTable('refreshOptions', {
data: data,
detailView: false,
filterControl: true,
columns: [
{
field: 'name',
title: 'Name',
sortable: true,
editable: true,
filterControl: 'input'
}, {
field: 'stargazers_count',
title: 'Structure',
sortable: true,
editable: true,
filterControl: 'input'
}, {
field: 'forks_count',
title: 'Class',
sortable: true,
editable: true,
filterControl: 'input'
}, {
field: 'description',
title: 'Description',
sortable: true,
editable: true,
filterControl: 'input'
}
]
});
});
$('#table').bootstrapTable({
detailView: true,
formatNoMatches: function () {
return "This table is empty...";
},
onClickCell: function(field, value, row, $element) {
if (field == 'name') {
$element.parent('tr').find('>td>.detail-icon').click();
// NOTE: needs index to call to expandRow
var $tr = $element.parent('tr');
// NOTE: literally first google result: http://stackoverflow.com/questions/469883/how-to-find-the-index-of-a-row-in-a-table-using-jquery
var index = $("> tr", $('#table').find('> tbody')).index($tr);
$('#table').bootstrapTable('expandRow',index);
}
},
onExpandRow: function(index, row, $detail) {
// console.log(row)
$detail.html('<table></table>').find('table').bootstrapTable({
columns: [{
field: 'id',
title: 'id'
}, {
field: 'status',
title: 'stat'
}, {
field: 'date',
title: 'date'
}],
data: row.children,
// Simple contextual, assumes all entries have further nesting
// Just shows example of how you might differentiate some rows, though also remember row class and similar possible flags
});
}
});
});
$(function () {
var $result = $('#form');
$( "#newTable" ).submit(function( event ) {
alert("your changes has been saved");
});
$("form").on("submit", function(){
alert("form has been submitted.");
return false;
});
$('#table').on('click-row.bs.table', function (e, row, $element) {
$('.success').removeClass('success');
$($element).addClass('success');
function getSelectedRow() {
var index = $('#table').find('tr.success').data('index');
return $('#table').bootstrapTable('getData')[index];
}
$result.html(
'<form action="">' +
'<table id="newTable" border="0" align="left" style="padding: 10px; margin: 10px; font-size: 14px; color: #0f0f0f">' + '<h3>'+
'<tr align="left" style="padding: 10px; margin: 10px;">' + '<td style="font-weight: bold;">Name</td>' + '<td> </td>' + '<td><input type="text" id="frm-name" name="frm-name" value="' + getSelectedRow().name + '"/></td>' + '</tr>' +
'<tr align="left" style="padding: 10px; margin: 10px;">' + '<td style="font-weight: bold;">Structure</td>' + '<td> </td>' + '<td><input type="text" id="frm-structure" name="frm-structure" value="' + getSelectedRow().stargazers_count + '"/></td>'+ '</tr>'+
'<tr align="left" style="padding: 10px; margin: 10px;"> '+ '<td style="font-weight: bold;">Class</td>' + '<td> </td>' + '<td><input type="text" id="frm-class" name="frm-class" value="' + getSelectedRow().forks_count + '"/></td>'+ '</tr>'+
'<tr align="left" style="padding: 10px; margin: 10px;"> '+ '<td style="font-weight: bold;">Description</td>' + '<td> </td>' + '<td><input type="text" id="frm-description" name="frm-description" value="' + getSelectedRow().description + '"/></td>'+ '</tr>'+
'</h3>' + '<input style="float: right; margin-top: 20%; margin-right: 15px;" class="btn btn-default" type="button" id="btn-submit-form" value="Save" type="submit"/>'
+ '</table>' + '</form> '
)
});
});
working plunk

Your submit event with #newTable is table, not form.
It should be:
$(document).on('submit', "#form form", function( event ) {
alert("Your change has been saved");
});

Your current input type for your save button is 'button' and not 'submit', which is why it is not getting submitted.
On line 104 of your table.js replace your ' And now just add the JS/jQuery for this submit event.

Dojo dgrid launch a LightBoxNano popup when clicking a cell

I would like to launch a LightBoxNano image popup when clicking a cell in a dgrid.
How can I achieve this?
Thanks!
Here is some code:
var columns = [
{
label: 'Picture',
field: 'filename',
formatter: function(filename){
return '<div class="icon" style="background-image:url(/images/client/thumbnails/' + filename + ');"><a data-dojo-type="dojox.image.LightboxNano" class="iconlink" href="/images/client/' + filename + '"> </a></div>';
}
},
Editor({label: 'Type', field: 'filetype', widgetArgs: {store: filetypeStore, maxHeight: 150, style: "height: 20px;"}}, FilteringSelect),
Editor({label: 'Subtype', field: 'filesubtype', widgetArgs: {store: filesubtypeStore, maxHeight: 150, style: "height: 20px;"}}, FilteringSelect)
];
Do I miss something??
Thanks!

So, I used a Dialog insted of a Lightboxnano.
imageList.on(".dgrid-content .iconlink:click", function (evt) {
evt.preventDefault();
var data = dojo.getAttr(this, "href");
var picdial = new Dialog({
title: "Pic: " + data.substr(15),
content: '<img src="' + data + '">'
});
picdial.show();
});