Ionic: How is it possible to change $ionicPopup subTitle's text programmatically? - javascript

I'm trying to change the value as well as the style of the subText attribute associated with an $ionicPopup somewhere in my app.
I searched everywhere, but didn't find yet any method for doing so.
So how is that possible?
Thanks.

If you want to change popup after it been shown,
you can use selectors and angular jqlite wrapper.
Code is like this
onTap: function(e) {
var result = document.getElementsByClassName("popup-sub-title");
angular.element(result).html('dsaadsds')
e.preventDefault();
}
You have here a working codepen.

You cannot change the subTitle directly using the configuration option, as by defined in the specification it accepts an optional String value
{
title: '', // String. The title of the popup.
cssClass: '', // String, The custom CSS class name
subTitle: '', // String (optional). The sub-title of the popup.
}
UPDATE:
You can assign a value to a $scope property within onTap to assign a success message
{
text: '<b>Save</b>',
type: 'button-positive',
onTap: function(e) {
$scope.success = {
message: 'Hello World!'
};
e.preventDefault();
}
}
And now you can access $scope.success.message to show the success message

Related

How to put initialized selectizejs input field in sweetalert

I have a page containing DataTables with actions buttons on each row. One of the buttons should open up a sweet alert containing my selectizejs input field. So the user can select or remove options from the list and then click "OK" in the sweet alert to save it.
I am stuck with the steps in between initializing the selectize element and placing it inside the sweet alert.
I do not see an option to initialize the selectizejs field inside the swal component, so I have tried numerous things initializing it before and placing it in the content field in sweetalert.
In my approach I have created my input element in my view :
<input type="text" id="adminvollabels" class="adminvollabels-select" value="test1,test2,test3" placeholder="<?=lang("flow_company_skills_placeholder")?>" name="adminvollabels">
The jQuery code is as this:
$('.vol-label-link').on('click', function(e) {
e.preventDefault();
var userId = $(this).data("user-id");
var ele = $('<div class="row"></div>');
ele.append('<div class="col-md-12"><label for="adminvollabels">testlabel</label></div>');
$('.adminvollabels-select').selectize({
delimiter: ',',
persist: false,
create: function(input) {
return {
value: input.toLowerCase(),
text: input.toLowerCase()
}
}
});
ele.append('<div class="col-md-12"><div class="form-group">'+$('.adminvollabels-select')+'</div></div>');
swal({
title: res.VolLabelUpdateTitle,
content: selectizeElement,
icon: "info",
buttons: {
cancel: {
text: res.BtnCancelText,
visible: true,
className: "btn-secondary"
},
confirm: "ok"
}
}).then(function (isConfirm) {
if (isConfirm) {
$.ajax({
//Do AJAX stuff
});
}
})
});
In this approach my attempt was the following steps:
1) Create input element in HTML
2) when clicking on the vol-label-link element
3) (in JS) create a temporary DOM object with all the div's and col-md's
4) (in JS) Make the input field a selectize.js field
5) (in JS) Append this element in my temporary DOM object
6) place this temporary DOM object in the SWAL 'content' option.
Note on 6: Since I think that SWAL content option only allows raw HTML (I think it performs a parseHTML on it). Hence my attempt on building up the full HTML DOM temporary object before inserting it in the content field.
However with this code, my HTML looks like this:
<div class="col-md-12"><label for="adminvollabels">testlabel</label></div><div class="col-md-12"><div class="form-group">[object Object]</div></div>
I've been trying out with .clone() as well but I cannot get it working on the initialized selectizejs field.

Select2 change input name if tag is being submited

So I have the following select2:
productFamilySelect.select2({
tags: true
});
By default the name of the associated select element is product_family_id, so is there a way to change the name of the input to lets say product_family_name, if selected value if one that user entered? This is so, that I could in the backend for sure distinguish between an already existing value, and one that user thought of. Checking by id in the database does not really suit, as this value could actually be numeric in on itself.
After some digging into select2 custom events I found a way:
firstly add createTag callback like so:
productFamilySelect.select2({
tags: true,
createTag: function (params) {
var term = $.trim(params.term);
if (term === '') {
return null;
}
return {
id: term,
text: term,
newTag: true
}
}
});
Then, add the following listener:
productFamilySelect.on('select2:select', function (e) {
if (e.params.data.newTag === true) {
$(this).attr('name', 'product_family_name');
} else {
$(this).attr('name', 'product_family_id');
}
});
Seems a bit hacky, since it is outside the config of the actual select2 config, but well it dos the job :)

How to access caller element inside callback function

I have a jquery-ui button test-button that has a data attribute.
That button calls a custom widget customWidget that has a callback function fnSaveCallback.
$(".test-button").button({
icons: {
primary: 'icon-test icon-mixed icon-custom'
},
text: false
}).customWidget({
id: "custom-widget",
title: "My custom widget",
fnSaveCallback: function() {
// Need to get the data-test attribute from the "test-button"
}
});
I'm having problems trying to access the the test-button in order to get the value of the data-attribute from the callback function.
Any idea how can i do that? Thanks in advance!
I've found an easy way to handle this adding a class on the click event.
$(".test-button").button({
icons: {
primary: 'icon-test icon-mixed icon-custom'
},
text: false
}).click(function() {
// remove opener class from other test-buttons
$(.test-button.opener).removeClass("opener");
// add opener class to the clicked button
$(this).addClass("opener");
}.customWidget({
id: "custom-widget",
title: "My custom widget",
fnSaveCallback: function() {
// Get the data-test attribute from the "test-button"
$(".test-button.opener").data("test");
}
});
You need to have a reference of the element somewhere.
const test_button = document.getElementById('test-button');
and then in fvSaveCallback:
fnSaveCallback: function() {
// Need to get the data-test attribute from the "test-button"
console.log(test_button.dataset.test);
}
EDIT: After your edit, as far as I understand you are trying to apply that method to all .test-button buttons.
You should only need to get a list of nodes, and iterate through it :)
const test_buttons = document.getElementsByClassName('test-button')
;
for (let i = 0; i < test_buttons.length; i++)
{ const button = test_buttons[i]; //This is the button
// Do with 'button' whatever you want here.
console.log(button.dataset.some_data);
}

Running the Textarea Resizer jQuery plugin on a Textarea field generated from the X-Editable jQuery library

Add the jQuery TextareaResizer jquery.textarearesizer.js library that StackOverflow uses to a textarea form field that us used by the jQuery edit in place library X-Editable
I have a simple working demo of the Textarearesizer.js plugin here http://codepen.io/jasondavis/pen/KpWybW which adds a Drag Hanlde to a textarea field and lets you click and drag to resise it.
I then try to add that same JavaScript code to make it work on a Textarea field generated from X-Editable here on this JSFiddle: http://jsfiddle.net/jasondavis/xBB5x/8558/
X-Editable JavaScript:
$('#description').editable({
type: 'textarea',
url: '/post',
pk: 1,
inputclass: 'task_description resizable',
highlight: '#F1FFE7',
mode: 'inline', // inline | popup
placement: 'top',
title: 'Enter Task Description',
validate: function(value) {
if ($.trim(value) === '') {
return 'Task Description is Required';
}
},
params: function(params) {
//Addition params in addition to the default: pk, name, value
params.userId = 1;
params.projectId = projectTaskModal.cache.projectId;
params.taskId = projectTaskModal.cache.taskId;
return params;
},
success: function(response, newValue) {
if (!response.success) return response.msg;
}
});
Textarea Resizer JavaScript:
/* jQuery textarea resizer plugin usage for Textarea */
$(document).ready(function() {
$('textarea.resizable:not(.processed)').TextAreaResizer();
});
I don't get any error messages however the Textarea field does not run the resizer code.
On the JSFiddle demo http://jsfiddle.net/jasondavis/xBB5x/8558/ when you click teh Text, the Textarea is revealed.
I think it may have something to do with the Textarea not being visible when the $('textarea.resizable:not(.processed)').TextAreaResizer(); code is ran since X-Editable does not show the Textarea until after you click on the text.
I also tried to do this:
$('#description').on('init', function(e, editable) {
$('textarea.resizable:not(.processed)').TextAreaResizer();
});
which runs my callback code when the editable field is initialized
I got it figured out. MY Textarea generated by X-Editable was not being generated in the DOM until after my call to the TextareaReizer plugin.
The solution was to use this Event that is ran after the form textarea is shown in the DOM...
$('#description').on('shown', function(e, editable) {
$('textarea.resizable:not(.processed)').TextAreaResizer();
});
Final solution demo working here http://jsfiddle.net/jasondavis/xBB5x/8559/

TinyMCE adding toggle style

I'm working on a TinyMCE plugin and one thing I want it to do is register commands/buttons that toggle custom formatting.
For example if you click the bold button in TinyMCE it will show the bold button highlighted while in bold text. Digging into the source code I see this happens via: tinymce.EditorCommands.addCommands thought I can't seem to figure out how to duplicate it. The documentation of TinyMCE is just horrible as well =(
So given customFormat I want to be able to have a button setup by my plugin that when the customFormat is applied it shows as such like the Bold, Italics, and other such buttons do on the toolbar. And clicking on my customFormat toggles that format on/off. I can easily accomplish the toogle via "addCommand" and "addButton" but then it does not have state tracking like Bold and others do.
Showing my current non-working attempt (this code is inside init of my plugin create method):
tinymce.EditorCommands.call('addCommands', {
'MyFormat' : function(name) {
ed.formatter.toggle("customFormat");
}
},'exec');
tinymce.EditorCommands.call('addCommands', {
'MyFormat' : function(name) {
return ed.formatter.match('customFormat');
}
},'state');
ed.addButton('customformat', {cmd : 'MyFormat'});
And here is the link to the "documentation" of addCommands:
http://www.tinymce.com/wiki.php/API3:method.tinymce.EditorCommands.addCommands
After a lot more looking around I found this which seems to be perfect:
http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.addQueryStateHandler
But when I implement the code it doesn't change the state of the button:
ed.addCommand('MyFormat', function(ui, v) {
ed.formatter.toggle("thoughtFormat");
});
ed.addQueryStateHandler('MyFormat', function() {
return ed.formatter.match('thoughtFormat');
});
ed.addButton('myformat', {cmd : 'MyFormat'});
In case someone doesn't want to do it the 'plug-in' way, here's the guide for TinyMCE 4.x.
First of all, you need to define a custom format:
formats: {
custom_format: {inline: 'span', styles: {color: "red"}, attributes: {class: 'some_css_class'}}
}
Then you'll have to add a button to your toolbar:
toolbar: "mybutton",
Next, you need to setup your button, so that it toggles the format:
setup: function(editor) {
editor.addButton('mybutton', {
text: 'My button',
icon: false,
onclick: function() {
tinymce.activeEditor.formatter.toggle('custom_format')
}
});
}
Furthermore, if you want the editor to set the state of the button to indicate the format of current node, automatically, add this to setup function:
onPostRender: function() {
var ctrl = this;
editor.on('NodeChange', function(e) {
ctrl.active(e.element.className == "some_css_class")
});
}
Your tinymce.init function should look like this:
tinymce.init({
selector: "textarea",
formats: {
// Other formats...
custom_format: {inline: 'span', styles: {color: "red"}, attributes: {class: 'some_css_class'}}
}
// Other default toolbars
toolbar_n: "mybutton",
// Finally, setup your button
setup: function(editor) {
editor.addButton('mybutton', {
text: 'My Button',
icon: false,
onclick: function() {
tinymce.activeEditor.formatter.toggle('custom_format')
},
onPostRender: function() {
var ctrl = this;
editor.on('NodeChange', function(e) {
ctrl.active(e.element.className == "some_css_class")
});
}
});
}
Note that class attribute I added to my custom format. This approach made it possible for me define my custom styles in a separate stylesheet file and keep my markup as dry as possible (No inline styling!). Point content_css option to your stylesheet and you'll be good to go.
However, due to fact that I'm using Rails as back-end and BatmanJS as front-end (and I'm fairly new to the latter), I couldn't figure out how assets routing works, and ended up adding my custom styles to default content stylesheet file of tinyMCE skin itself (located at skins/SKIN_NAME/content.min.css).
Thanks to Thariama for insights that allowed me to dig deeper finally figuring out how to do this. I'm not sure its the "right way" but as I said TinyMCE has the worst documentation imaginable.
The key for me was to make an hook the onNodeChange event, using the setActive trick. Full example plugin with a custom button that activates when that format is present wherever the cursor is:
(function() {
tinymce.create('tinymce.plugins.CoolPlugin', {
init : function(ed, url) {
ed.addCommand('MyFormat', function(ui, v) {
ed.formatter.toggle("myFormat");
});
ed.addButton("coolformat", {
title : 'MyFormat Tooltip',
cmd : 'MyFormat',
image: url + '/coolformat.png',
});
ed.onNodeChange.add(function(ed, cm, n) {
active = ed.formatter.match('myFormat');
control = ed.controlManager.get('coolformat').setActive(active);
});
ed.onInit.add(function(ed, e) {
ed.formatter.register('myFormat',
{inline: 'span', classes : ['cool'] } );
});
}
});
// Register plugin
tinymce.PluginManager.add('cool', tinymce.plugins.CoolPlugin);
})();
Here is an example:
ed.controlManager.get('my_control_element').setActive(true); // could be bold or whatever

Categories