I would like to change case (all caps or capitalize first letter of sentence) when editing field in place with jEditable plugin. My code looks similar to this:
$(".edit").editable("some/url/", {
type : 'text',
submitdata: { _method: "put" },
select : true,
event : "dblclick",
submit : 'OK',
cancel : 'cancel',
id : 'edititem',
name : 'newvalue'
});
I would like to add onkeyup function to my input fields, something like onkeyup="javascript:this.value=this.value.toUpperCase()" but I'm really not sure how to do that...
Maybe there is some other way to achieve this??
Thanks for any help!
rsplak has it basically right. you just need one more bit of magic to make it work.
$(".edit").editable("some/url/", {
type : 'text',
submitdata: { _method: "put" },
select : true,
event : "dblclick",
submit : 'OK',
cancel : 'cancel',
id : 'edititem',
name : 'newvalue'
});
$(".edit").dblclick(function() {
$('input').bind('keyup', function() {
$(this).val($(this).val().toUpperCase());
});
});
That will get you there.
As you're already using jQuery, try this:
$('input').bind('keyup', function() {
$(this).val($(this).val().toUpperCase());
});
Works like a charm JSFiddle
Related
I have function for creating/rendering input fields but i don't know how to add tool tip on it in EXTjs6
this is my function:
createInputField: function(value, fieldsMarginBottom, readonly) {
var fieldStyle = this.getFieldStyle(readonly);
var nameField = Ext.create('Ext.form.field.Text', {
name: 'name',
readOnly: true,
hideLabel: true,
value: value,
width: this.fieldWidth,
style: {
marginBottom: fieldsMarginBottom + 'px'
},
//My try which is not working
tooltip: {
trackMouse: true,
width: 140,
renderer: function(tip, item){
tip.setTitle('name');
tip.update('Count: ');
}
},
fieldStyle: fieldStyle
});
return nameField;
}
I hope you guys can help me. If you need any additional informations, please let me know and I'll provide. Thank you
As can be seen in the textfield docs, fields do not have a way to add a tooltip to their configuration, so you would have to create the tooltip manually.
If you look at the docs for Ext.tip.ToolTip how to do that, you may find a small example, where you just have to change the target as per the target configuration description:
var tip = Ext.create('Ext.tip.ToolTip', {
target: nameField.getEl(),
html: 'Press this button to clear the form'
});
Above answer is correct. Here is example of generic function which you write once and use wherever you required in project by using using attributes.
addToolTip : function (id, msg) {
new Ext.ToolTip({
target : id,
dismissDelay : 0,
anchor : 'right',
html : msg
});
};
I have a DataTable displaying data for Branches with two custom buttons defined: Add and Update. They are initialized at the top of the Javascript section
var buttons;
var tblBranch;
$.fn.dataTable.ext.buttons.add = {
className: 'button-add',
text: "Add Branch",
action: function (dt) {
onBtnAddClicked()
}
};
$.fn.dataTable.ext.buttons.update = {
className: 'button-update',
text: "Update",
action: function (dt) {
onBtnUpdateClicked()
}
};
I'd like to disable the Edit button on page load and only enable it to be clickable when a row has been selected. Problem is, I'm using custom buttons and I can't find anything on datatables.net about how to enable/disable them depending on conditions. So far what I've tried is this:
tblBranch = $("#tblBranches").DataTable({
dom: 'Blfrtip',
buttons: {
buttons :[
'add', 'update'
]
}
select: true;
})
$("#tblBranches tbody").on('click', 'tr', function () {
if (tblBranch.row(this).hasClass('selected')) {
$('button-update').removeClass("DTTT_disabled");
}
else {
table.$('tr.selected').removeClass('selected');
$('button-update').addClass("DTTT_disabled");
}
});
But I don't know what the code to disable the Edit button when the page loads should be like, and I've looked here, here, here and here.
Thanks for any guidance.
The last link you are referring to hold the solution you are looking for. But the documentation is a little bit vague, guess it need a solid example. It is not clear how you create the buttons (you show both methods) but below is an inline example, it would work with constructor as well. Simply give the button a class, like .edit and set it to disabled from start :
var table = $('#example').DataTable( {
dom: 'Bfrtip',
select: true,
buttons: [
{
text: 'Edit',
className: 'edit',
enabled: false,
action: function (e, dt, node, config) {
//do something
}
},
{
text: 'Add',
action: function (e, dt, node, config) {
//do something
}
}
]
})
Then use the Select plugins select and deselect events to update the enabled status of the .edit button :
$('#example').on('select.dt deselect.dt', function() {
table.buttons( ['.edit'] ).enable(
table.rows( { selected: true } ).indexes().length === 0 ? false : true
)
})
demo -> https://jsfiddle.net/pmee6w2L/
I try to trigger a button so when user loads a page, the button is automatically clicked.
My code is following:
$(document).ready(function() {
console.log("it's here");
$("#btnPeriod").trigger('click');
});
$("#btnPeriod").on('click', function(){
var ahhhhh = "<security:authentication property="securityUser.fullName"/>";
ahhhhh = ahhhhh.replace(/ /g, " ");
console.log(ahhhhh);
$.extend($("#noticeList").jqGrid("getGridParam", "postData"),{
filters : JSON.stringify({
groupOp : "OR",
rules : [{
field : "notiWriter",
op : "eq",
data : ahhhhh
}],
groups : []
})
});
$("#noticeList").jqGrid("setGridParam", {search : true}).trigger('reloadGrid', [{current : true, page : 1}]);
});
and when the page is loaded, I can see log of "it's here" and value of ahhhhh. However, even though I can see log, the action suppose to be happened does not get applied. Funny thing is when I click the button, then it works, with another log message of variable ahhhhh.
FYI, I am using jqGrid and when I click btnPeriod button, it filters rows that its cellvalue of notiWriter does not match with variable ahhhhh.
For now, when I load this page, it displays like following:
And then, when I click a button, it only shows certain rows like following:
And I hope it always look like second picture when a user loads the page.
I once used setTimeout, but it turned out it did not work well, so I hope you give me some help.
Thank you in advance.
You need to bind the click handler to the button inside the document.ready handler, and before you call trigger(). Try this:
$(document).ready(function() {
$("#btnPeriod").on('click', function(){
var ahhhhh = "<security:authentication property="securityUser.fullName"/>";
ahhhhh = ahhhhh.replace(/ /g, " ");
console.log(ahhhhh);
$.extend($("#noticeList").jqGrid("getGridParam", "postData"),{
filters : JSON.stringify({
groupOp : "OR",
rules : [{
field : "notiWriter",
op : "eq",
data : ahhhhh
}],
groups : []
})
});
$("#noticeList").jqGrid("setGridParam", {
search: true
}).trigger('reloadGrid', [{
current: true,
page: 1
}]);
});
$("#btnPeriod").trigger('click');
});
Try including the event binding inside the jquery ready function and bind the event before trigger the click:
$(document).ready(function() {
console.log("it's here");
$("#btnPeriod").on('click', function(){
var ahhhhh = "<security:authentication property="securityUser.fullName"/>";
ahhhhh = ahhhhh.replace(/ /g, " ");
console.log(ahhhhh);
$.extend($("#noticeList").jqGrid("getGridParam", "postData"),{
filters : JSON.stringify({
groupOp : "OR",
rules : [{
field : "notiWriter",
op : "eq",
data : ahhhhh
}],
groups : []
})
});
$("#noticeList").jqGrid("setGridParam", {search : true}).trigger('reloadGrid', [{current : true, page : 1}]);
});
$("#btnPeriod").trigger('click');
});
Why not including the click event binding inside your ready function ?
$(document).ready(function() {
console.log("it's here");
$("#btnPeriod").on('click', function() {
var ahhhhh = "<security:authentication property="securityUser.fullName"/>";
ahhhhh = ahhhhh.replace(/ /g, " ");
console.log(ahhhhh);
$.extend($("#noticeList").jqGrid("getGridParam", "postData"), {
filters : JSON.stringify({
groupOp : "OR",
rules : [{
field : "notiWriter",
op : "eq",
data : ahhhhh
}],
groups : []
})
});
$("#noticeList").jqGrid("setGridParam", {search : true}).trigger('reloadGrid', [{current : true, page : 1}]);
});
$("#btnPeriod").trigger('click');
});
I have a field that I'm outputting text into after doing an nl2br(). I've made the field editable by users. However, I don't want users to see the <br>s when they click edit.
This is my function:
$(this).editable({
type: 'textarea',
submit: 'Save',
cancel: 'Cancel',
editClass: 'editable',
onEdit: function(content) {
$(this).html($(this).text());
},
...
});
$(this).html($(this).text()) doesn't work. By the time the onEdit fires, the text inside the tag is gone. Any ideas? I can paste more code if needed, but I didn't think it was necessary.
If I do a $(this).val('whatever'); instead, nothing gets replaced.
Got it! jQuery.editable adds a textarea inside the parent tag and removes the previously existent text.
This works:
text = $(this).text();
$(this).editable({
type: 'textarea',
submit: 'Save',
cancel: 'Cancel',
editClass: 'editable',
onEdit: function(content) {
$(this).find('textarea.editable').val(text);
},
...
});
I'm trying to add a listener to a Ext.form.Formpanel subelement Ext.form.BasicForm for the submit event and then reset the form via its .reset() method. In the doc at http://dev.sencha.com/deploy/touch/docs/?class=Ext.form.FormPanel it clearly states that:
submit : ( Ext.FormPanel this, Object result )
Fires upon successful (Ajax-based) form submission
But it somehow it won't really work for me.
This is my code:
var messInput = new Ext.form.FormPanel
({
fullscreen : true,
url : '/mess/',
standardSubmit : false,
listeners : {
el: {
submit: function(form, result) {
form.reset();
}
}
},
items: [
new Ext.form.Text ({
name : 'mess',
placeHolder: 'Text and #Tags',
listeners : {
keyup :function(field, event) {
var keyCode = event.browserEvent.keyCode;
if(keyCode == 51) {
console.log(event.browserEvent.keyCode);
}
}
}
})]
});
if i try it this way i get a
Uncaught TypeError: Object [object Object] has no method 'reset'
Can somebody explain what the problem is excatly here? do i need to call the parent Formpanel because i add the listener to the underlying el?
You are listening to basic js-event "submit" for the dom-element. You can't get (easily) sencha objects inside it. That's why Ext.form.FormPanel has beforeSubmit-event. The data is already collected so you can reset the form and process to ajax submit with return true;
form = new Ext.form.FormPanel({
fullscreen : true,
url : '/mess/',
listeners: {
beforesubmit: function(e, a) {
this.reset();
return true;
}
},
standardSubmit : false,
items: [
new Ext.form.Text ({
name : 'mess',
placeHolder: 'Text and #Tags',
listeners : {
keyup :function(field, event) {
var keyCode = event.browserEvent.keyCode;
if(keyCode == 51) {
console.log(event.browserEvent.keyCode);
}
}
}
})]
});
EDIT: This is the correct way, sorry about the last answer.