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);
},
...
});
Related
I'm new to jquery, and one of my first tasks was to make a dynamic table. I managed to create a button that deletes the table row on click and it worked perfectly, the problem is, when i added a confirmation box for the user, and assigned the function to remove the tr to it, it stopped working.
i've tried several things inside the button function, but it seems like either way the button only closes the alert box and the tr remains untouched.
//This works just fine, it deletes the selected tr without any issue
but it needs a confirmation from the user
$(document).on('click','.delete', function(){
$(this).parents('tr').remove();
}
//This is my code for the confirmation box including the shown function in the action for the button
$(document).on('click','.delete', function(){
$.alert({
useBootstrap:false,
columnClass: 'small',
title: 'Are you sure you want to delete the task?',
content: 'This action is irreversible',
type: 'red',
typeAnimated:true,
icon:'fas fa-exclamation-triangle',
typeAnimated: true,
buttons: {
Delete: {
text: 'Delete',
btnClass: 'btn-red',
action: function(){
$(this).parents('tr').remove();
$.alert({
title:'Task deleted',
icon:'fas fa-exclamation-triangle',
type:'red',
content:'',
useBootstrap:false
});
}
},
close: function () {
}
}
});
});
To sum it up, i understand how to delete the tr with .remove(), but i don't understand why it doesn't work inside the alert function. Thank you for your time.
When you register the click event, you are registering it to an element or elements with the class of .delete. Therefore, inside the click handler function, this refers to the element that was clicked.
When you are inside the .alert function of jquery-confirm, this refers to a different element (probably the button in the dialog, depending on how jquery-confirm is implemented), so the parent of that element is not the tr that you are looking for.
Try assigning $(this) to a variable before you make the call to $.alert, like this:
$(document).on('click','.delete', function(){
var buttonClicked = $(this); //assign to a variable here
$.alert({
useBootstrap:false,
columnClass: 'small',
title: 'Are you sure you want to delete the task?',
content: 'This action is irreversible',
type: 'red',
typeAnimated:true,
icon:'fas fa-exclamation-triangle',
typeAnimated: true,
buttons: {
Delete: {
text: 'Delete',
btnClass: 'btn-red',
action: function(){
buttonClicked.parents('tr').remove(); //reference that variable here
$.alert({
title:'Task deleted',
icon:'fas fa-exclamation-triangle',
type:'red',
content:'',
useBootstrap:false
});
}
},
close: function () {
}
}
});
});
I'm using Bootbox Dialog to load a php page in the following manner:
$('.create_special').on('click', function(event) {
var loadurl = $(this).attr('data-load-url');
var title = $(this).attr('data-title');
$.get(loadurl, function(data) {
bootbox.dialog({
message: data,
title: title,
buttons: {
cancel: {
label: "Cancel",
className: "btn-default",
},
submit: {
label: "Submit",
className: "btn-primary",
callback: function() {
console.log($(this).closest("form"));
$(this).closest("form").submit();
}
}
}
});
});
});
via:
<td><?php echo htmlentities($user['email']); ?></td>
As you can see, I want to be able to have two buttons at the bottom of the modal. One to cancel and close, and one to submit the form in the php file that the dialog loaded. I am having trouble figuring this out, and don't really know where to go from here. As the dialog is getting loaded afer DOM ? I am trying to avoid having to specifically submit the form as I will use this function for other php files with different form names. So it would be nice if I could do something as simple as this closest...etc.
The documentation says:
Show a simple prompt popup, which has an input, OK button, and Cancel
button. Resolves the promise with the value of the input if the user
presses OK, and with undefined if the user presses Cancel.
I was doing:
$ionicPopup.prompt({
//options
}).then(function (userinput) {
//get userinput and send to server
});
I need to add a third button, but can't get the text of the input, how can I resolve the promise on the onTap event of the button to get the input?
$ionicPopup.prompt({
title: '¿Are you sure?',
inputType: 'text',
buttons: [
{ text: 'Cancel'
//close popup and do nothing
},
{
text: 'NO',
type: 'button-assertive',
onTap: function(e) {
//send to server response NO
}
},
{
text: 'YES',
type: 'button-energized',
onTap: function(e) {
//get user input and send to server
}
}]
See this demo i made with your code: http://play.ionic.io/app/ac79490c8914
prompt() is not meant to add more than two buttons,show() is used to make complex pop ups, Please see show() method in same documentation. As written in documentation, i am quoting:
Show a complex popup. This is the master show function
for all popups.
A complex popup has a buttons array, with each button having a text
and type field, in addition to an onTap function.
Your code will be like:
$scope.showPop = function(){
$scope.data = {};
var myPopup = $ionicPopup.show({
template: '<input type="text" ng-model="data.myData">',
title: '¿Are you sure?',
scope: $scope,
buttons: [
{ text: 'Cancel'
//close popup and do nothing
},
{
text: 'NO',
type: 'button-assertive',
onTap: function(e) {
return null;
}
},
{
text: 'YES',
type: 'button-energized',
onTap: function(e) {
return $scope.data.myData;
}
}]
});
myPopup.then(function(userinput) {
if(userinput){
console.log('returned data'+ userinput)
}
});
}
Simple thing about above code is that you have bind input with $scope (<input type="text" ng-model="data.myData">) so you can access it in any manner.
I have a ckeditor instance, to which I added a custom dialog box using:
CKEDITOR.dialog.add('quicklinkDialog', function(editor) {
return {
title: 'Quick Links',
minWidth: 400,
minHeight: 200,
contents: [
{
id: 'tab1',
label: 'Add a quick link',
elements: [
{
type: 'html',
html: '<p>This is some text and then: Click me!</p>'
}]
};
});
I want to add a "click" event listener on the link inside my dialog box. When that link is clicked, content will be inserted into my textrea (the dialog box will also be closed).
Anyone knows how I might do this? Thanks in advance!
Here you go:
{
type: 'html',
html: '<p>This is some text and then: Click me!</p>',
onLoad: function( a ) {
CKEDITOR.document.getById( this.domId ).on( 'click', function() {
var dialog = this.getDialog();
dialog.hide();
dialog._.editor.insertHtml( this.html );
}, this );
}
}
See the API to know more.
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