We Keep Coding

Onclick event of button placed in each row jqgrid not firing?

Situation : My app carries out an AJAX request and the data received is displayed in the following JQgrid . listData(data) is a function that is called in success call back of this ajax request ,
data is the JSON data received from request .
buildJqGrid is a custom function that calls the .jqgrid() on a table and div html element .
buttonFormatter is my custom formatter for the column named Action
function listData(data) {
var containerName = 'datatablea3',
columnNames = ["Name",
"Email",
"Language",
"Office",
"alter email",
"Action"
],
columnModels = [{
name: 'Name',
index: 'Name',
width: '200px'
},{
name: 'Email',
index: 'Email',
width: '200px'
}, {
name: 'Language',
index: 'Language',
width: '200px'
}, {
name: 'Office',
index: 'Office',
width: '200px'
}, {
name: 'AlterEmail',
index: 'AlterEmail',
width: '200px'
}, {
name: 'action',
width: '200px',
formatter: buttonFormatter
}],
sortColumnName = 'Name',
caption = "Employees",
rowNum = 25,
pager = '#pager2a3',
grouping = false,
groupingView = {},
rowList = [25, 50, 100];
buildJqGrid(containerName, data, columnNames, columnModels,
sortColumnName, caption, rowNum, pager, grouping,
groupingView, rowList, true, 'asc');
}
Problem : When this jsp is run data is successfully displayed in the jqgrid with view button in each record , but when i click on the view button nothing happens !.
I checked in console it shows "control in formatter" but on clicking view button it doesn't show "control in click function".
i also tried using editLink formatter but still same error there ,
Can anyone please tell me why my button's onclick event is not firing ?

"click" is already a function, and therefore you override it, and nothing fires.
Try this
function buttonFormatter(cellvalue, options, rowObject)
{
console.log("control in button formatter");
return '<button onclick=\"clickFunction();\">View</button>';
}
function clickFunction()
{
console.log("control in click function");
alert("hello");
}
Simple fiddle : https://jsfiddle.net/virginieLGB/5e5LL5po/1/

try like this, I also use same functionality(JQ Grid) in my project, try HTML input type rather than the button,
When using your code, click event was firing but the whole web page is reloading.
function buttonFormatter(cellvalue, options, rowObject) {
if (rowObject.Status != "Not Started") {
console.log("Zumbaa");
var edit = "<input class='Viewbtn' type='button' value='View' onclick=\"ShowMigrationProcess(" + cellvalue + ");\" />";
return edit;
}
return '';
}

Is there a possibility to add a HTML element dynamically inside a dialog of a plugin in CK-EDITOR?

I am creating a widget in ck-editor where when user clicks a toolbar button,a dialog is opened.In a dialog there is text field and one search button,rest area in a dialog is for search results to be shown.
Is it possible that user enters some text in a text field , hit search button and by using some API I display some 50 search results(scrollable) in a dialog of a plugin below the text field and search button?
Right now I am using this code (just a dummy to check if I can add elements dynamically)-
CKEDITOR.dialog.add('simplebox', function(editor){
return {
title: 'Reference',
minWidth: 600,
minHeight: 400,
onShow: function() {
alert(CKEDITOR.dialog.getCurrent().definition.getContents("new_reference").elements);
},
contents: [
{
id: 'new_reference',
label:'New Reference',
elements: [
{
id: 'type',
type: 'select',
label: 'Type',
items: [
[ editor.lang.common.notSet, '' ],
[ 'Book' ],
[ 'Journal' ],
[ 'URL' ],
[ 'PHD Thesis']
]
},
{
type: 'text',
id: 'reference',
label: 'Reference',
validate: CKEDITOR.dialog.validate.notEmpty( "Search field cannot be empty." )
},
{
type: 'button',
align:'horizontal',
id: 'referencebutton',
label:'Search',
title: 'My title',
onClick: function() {
var linkContent = { type : 'html', id : 'test', html : '<div>just a test</div>' };
// this = CKEDITOR.ui.dialog.button
var dialog = CKEDITOR.dialog.getCurrent();
//alert(dialog.getContentElement('new_reference','reference').getValue());
var definition = dialog.definition;
//alert(definition.title);
definition.getContents("new_reference").add(linkContent);
// CKEDITOR.dialog.addUIElement('list',function(){
// definition.getContents("new_reference").add(linkContent);
// });
alert(CKEDITOR.dialog.getCurrent().definition.getContents("new_reference").elements);
}
}
]
},
{
id: 'old_reference',
label:'Old Reference',
elements: [
{
id:'author',
type:'text',
label:'Author'
}
]
}
]
};
});
Inside onShow method I am printing the no. of UI elements inside a content of a dialog.It shows 3 objects. After click of a button,it shows 4 objects since one has been added via code but it does show in the UI?
Any clues on this?
Thanks

Your approach is OK but by calling
definition.getContents("new_reference").add(linkContent);
you're modifying CKEDITOR.dialog.definition, which is used only the first time the dialog is opened – to build it. Then, once built, if you close the dialog and open it again, the editor uses the same DOM to display it. What I mean is that CKEDITOR.dialog.definition is a blueprint, which is used once and has no further impact on the dialog.
To interact with live dialog, use the following
CKEDITOR.ui.dialog.uiElement-method-getDialog,
CKEDITOR.dialog-method-getContentElement (returns CKEDITOR.ui.dialog.uiElement),
CKEDITOR.dialog-method-getValueOf,
CKEDITOR.dialog-method-setValueOf
like
onClick: function() {
var dialog = this.getDialog();
// get the element
console.log( dialog.getContentElement( 'tabName', 'fieldId' ) );
// get the value
dialog.getValueOf( 'tabName', 'fieldId' ) );
// set the value
dialog.setValueOf( 'tabName', 'fieldId', 'value' ) );
}

One way to get around this problem is to use the onShow function and insert an html object in the dialog tab.
onShow : function() {
var element = document.createElement("div");
element.setAttribute('id', "someId");
document.getElementsByName("new_reference")[0].appendChild(element);
}
Then in the onClick function, just access the element and set the content you want, like this:
onClick : function() {
document.getElementById("someId").innerHTML='<div id="example-'+count+'">Hello World</div>';
}
By doing this, you should be able to get data to show in your dialog. Hope it helps.

How to get values of form in sencha touch outside the form handler?

I have form inside panel . How to get values of form using getValues() now??
var myForm = new Ext.form.Panel({
id:'form1',
items:[
{ fields ...}
]
});
var panel = new Ext.Panel({
id:'myPanel',
layout:'vbox',
items:[
myForm,
{
other fields
},
{
xtype : 'button',
text : 'save',
handler : function() {
}
}
]
});
Now
myForm.getValues();//not working
Ext.getCmp('form1').getValues();//not working
How to get values of form outside the form . Any help??

you need to put new before Ext.form.Panel..
double check the code before posting question in SO
var myForm = new Ext.form.Panel({
id:'form1',
items:[
{ fields ...}
]
});

Performing action a button click event, button being placed inside dojox.grid.DataGrid.

I have a dojox.grid.DataGrid. In this a set of values are being displayed along with last 2 columns being filled up with buttons which are created dynamically according to data being retrieved from database using formatter property in gridStruture. Now i am getting the my grid fine. Buttons are also coming up fine. What i need to do now is when i click on a particular button on that button click event i redirect it to a new URL with a particular value(A) being passes as a query string parameter in that URL. And i don't want my page to be refreshed. Its like when a button is clicked it performs action on some other JSP page and displays message alert("Action is being performed").
My java script code where i have coded for my data grid ::
<script type="text/javascript">
function getInfoFromServer(){
$.get("http://localhost:8080/2_8_2012/jsp/GetJson.jsp?random=" + new Date().getTime(), function (result) {
success:postToPage(result),
alert('Load was performed.');
},"json");
}
function postToPage(data){
alert(data);
var storedata = {
identifier:"ActID",
items: data
};
alert(storedata);
var store1 = new dojo.data.ItemFileWriteStore({data: storedata}) ;
var gridStructure =[[
{ field: "ActID",
name: "Activity ID",
classes:"firstName"
},
{
field: "Assigned To",
name: "Assigned To",
classes: "firstName"
},
{ field: "Activity Type",
name: "Activity Type",
classes:"firstName"
},
{
field: "Status",
name: "Status",
classes: "firstName"
},
{
field: "Assigned Date",
name: "Assigned Date",
classes: "firstName"
},
{
field: "Assigned Time",
name: "Assigned Time",
classes: "firstName"
},
{
field: "Email",
name: "Send Mail",
formatter: sendmail,
classes: "firstName"
},
{
field: "ActID",
name: "Delete",
formatter: deleteact,
classes: "firstName"
}
]
];
//var grid = dijit.byId("gridDiv");
//grid.setStore(store1);
var grid = new dojox.grid.DataGrid({
store: store1,
structure: gridStructure,
rowSelector: '30px',
selectionMode: "single",
autoHeight:true,
columnReordering:true
},'gridDiv');
grid.startup();
dojo.connect(grid, "onRowClick", grid, function(){
var items = grid.selection.getSelected();
dojo.forEach(items, function(item){
var v = grid.store.getValue(item, "ActID");
getdetailsfordialog(v);
function showDialog() {
dojo.require('dijit.Tooltip');
dijit.byId("terms").show();
}
showDialog();
}, grid);
});
}
function sendmail(item) {
alert(item);
return "<button onclick=http://localhost:8080/2_8_2012/jsp/SendMailReminder.jsp?Send Mail="+item+"'\">Send Mail</button>";
}
function deleteact(item) {
alert(item);
return "<button onclick=http://localhost:8080/2_8_2012/jsp/DeleteActivity.jsp?Activity ID="+item+"'\">Delete</button>";
}
</script>
I am getting grid data using $.get call. In the above code field Email and ActID are actually buttons being created when each time function sendmail and deleteact are being called up in formatter. Grid is displayed. Also the value of alert(item) in both functions are coming up right that is there respective values. Like for alert(item) in Delete i am getting ActID and alert(item) in sendmail getting "shan#gmail.com" Now i want that on a particular button click(button in Sendmail column) my page
http://localhost:8080/2_8_2012/jsp/SendMailReminder.jsp?Send Mail="+item+"'
and button click in Delete column this page
http://localhost:8080/2_8_2012/jsp/DeleteActivity.jsp?Activity ID="+item+"'\"
opens up with value of items being retrieved from database. I have applied a rowClick event also which is also causing problem as when i click u button my Rowclick event fires instead of button click event. How to do this. I thought of applying click event to each button on grid. But there ID i don't know. Please help me on this one. Thanks..

I think, what you need is adjusting your server-side code to handle ajax post requests for sending mail and use dojo.xhrPost method when user clicks button. Your JS code may look like this:
function sendMailHandler(evt, item) {
dojo.xhrPost({
url: "/2_8_2012/jsp/SendMailReminder.jsp",
content: {
'SendMail': item
},
error: function() {
alert("Sent failure");
},
load: function(result) {
alert("Email sent with result: " + result);
}
});
dojo.stopEvent(evt);
}
function sendmail(item) {
return "<button onclick='sendMailHandler(arguments[0], \"" + item + "\")'>Send Mail</button>";
}
Note that dojo.stopEvent(evt); in sendMailHandler is used to stop event bubbling and prevents RowClick raising.
There is also dojo.xhrGet with similar syntax to perform ajax GET requests, which you can use instead of jQuery's $.get. You can also use dojo.xhrGet instead of dojo.xhrPost in my example, because there is chance that it will work with your back-end without tweaking, but POST (or ajax form submission) would be more semantically correct.
And about "Tried to register an id="something", you should adjust your code to avoid IDs duplication. Or show your code causing errors.

JQUERY modal box confirm form submit

I have a form that when the submit is hit i want a modal box to pop up with a YES and NO button i want the both the yes and no button to submit the form but i need to know which button they clicked.
Here is my code
<input onclick="$.msgbox('confirm text',{
buttons : [
{type: 'submit', value:'YES'},
{type: 'submit', value:'NO'}
]
}, function(buttonPressed) {
});" name="btnApply" id="btnApply" tabindex="41" src="images/btnsubmit.jpg" style="border-width: 0px;" type="image" />
My problem is the form is submitting when the user clicks submit.
Any help or ideas would be great
thanks

While I'm not familiar with the $.msgbox plugin but you should be opening the modal dialog on <form> submit and not on a button press, as the form can also be submitted by an enter/return on certain input fields (like text boxes <input type="text|password">)
var confirmed = false;
$('#myform').bind('submit', function() {
if (confirmed) {
return true; // confirmation received, continue form submission process
} else {
$.msgbox(
'my modal message',
{
buttons : [
{ type: 'button', value: 'YES' },
{ type: 'button', value: 'NO' }
]
},
function(buttonPressed) {
confirmed = buttonPressed.value; // Update the confirmed variable
$('#myform').submit(); // re-submit the form
}
);
return false; // cancel form submission
}
});

Add return false:
<input onclick="$.msgbox('Would you like a cash advance of up to £1000 whilst we process your loan?',{
buttons : [
{type: 'submit', value:'YES'},
{type: 'submit', value:'NO'}
]
}, function(buttonPressed) {
}); return false;" name="btnApply" id="btnApply" tabindex="41" src="images/btnsubmit.jpg" style="border-width: 0px;" type="image" />

Not sure about the msgbox either but some remarks about your code:
Don't attach your JS logic directly to your code, but use jQuery to attach click event to your markup (see unobtrusive javascript):
Instead of
<input onclick="$.msgbox('confirm text',{
Use
$('#btnApply').click(function(e) {
You can stop the click handling by setting as false one property of the event parameter:
$('#btnApply').click(function(e) {
e.preventDefault(); // stop click handling and so form submitting
Finally, handle the form submitting or not in the msgbox callback function:
$.msgbox("Are you sure that you want to permanently delete the selected element?", {
type: "confirm",
buttons: [
{
type: "submit",
value: "Yes"},
{
type: "submit",
value: "No"},
{
type: "cancel",
value: "Cancel"}
]
}, function(result) {
if(result == "Yes") // display the form on submit
$('form').submit();
});
jsFiddle available.