I have more than 5 tabs in a metabox. In every metabox i have a bootstrap modal for image variations holding some inputs and a button with class of .btn.select_media_ and a data-id attribute which holding unique ID of that tab. I am opening wp uploader on click of this button. please see my JS code.
var mediaUploader;
$(document).on('click','.btn.select_media_',function(e){
e.preventDefault();
var id=$(this).data('id');
// If the uploader object has already been created, reopen the dialog
console.log('clicked:'+id);
if (mediaUploader) {
mediaUploader.open();
return;
}
// Extend the wp.media object
mediaUploader = wp.media.frames.file_frame = wp.media({
///mediaUploader = wp.media.frames.mediaUploader = wp.media({
title: 'Choose Image',
button: {
text: 'Choose Image'
}, multiple: false });
mediaUploader.on('select', function() {
attachment = mediaUploader.state().get('selection').first().toJSON();
$('#img_url_'+ id).val(attachment.url);
$('#img_width_'+ id).val(attachment.width+'px');
$('#img_title_'+ id).val(attachment.title);
$('#show_img_'+ id).attr('src',attachment.url);
console.log('selected'+ id);
});
// Open the uploader dialog
mediaUploader.open();
});
Problem is that when i set/upload an image in any one tab this function run and set value of images in mideaUploader.on('select') event. when i am try to select image in an other tab i noticed in console that console.log('selected'+ id); had old value (on which tab i set first time) and console.log('clicked'+ id); had newer id value.
Please help!, what is wrong with my code? and how can i get same value at top and bottom of this handler?
Its good i solved my problem by declaring a global object and assign data-id value to this object.
Related
Im doing an customizaion and im trying to Display and Hode an Tab on the form based in some form Values and Action.
This is for a new Customization, im using Suitescript 2.0 and FieldChanged entry point.
define([], function(){
function fieldChanged(context){
switch(context.fieldId){
case 'entity':
var fornecedor = context.currentRecord.getValue({
fieldId: 'entity'
});
if (fornecedor != 38387){
context.updateDisplayType({
id: fornecedor,
isDisplyed: false
})
}
}
}
I expect to get the current form to manipulate and can do those propertys, nad actually returns error to update the display type.
To hide a field, use:
var field = currentRecord.getField({
id : 'textfield'
});
field.updateDisplayType({
displayType: 'HIDDEN'
});
To hide a tab, create a custom form and dynamically load the desired form per customer.
I have a requirement to display the image(help icon) in the ionic alert popup. I am using localization in our application. So what I have done right now is displayed the image using CSS class from translate strings as follows,
"PBMNotConnected": "<div>We didn't detect a PBM connected to your device.</div><p class='pbmAlertInfoBox'>Please select the <span class='infoIcon' (click)='goToHelp()'></span> (info icon) for help.</p>",
Now I am able to see the help icon in the alert box but, I want to bind the click event to that help icon. I have added (click) attribute in translate string but it doesn't work.
Following is the common code for presenting alert popup
/**
* show alert message
* #description pass non translated strings of title, subtitle, message and buttons text
*/
presentAlert(title, subtitle, message, cssClass, okText, hideButtons?:boolean) {
let buttons = [];
if(!hideButtons){
buttons = [this.getTranslate(okText, {})];
}
let alert = this.alertController.create({
title: this.getTranslate(title, {}),
subTitle: subtitle ? this.getTranslate(subtitle, {}) : '',
message: this.getTranslate(message, {}),
cssClass: cssClass,
buttons: buttons,
enableBackdropDismiss: false
});
alert.present();
return alert;
}
and then I have tried to bind the event using following code manually,
let alert = this.popUpService.presentAlert('error', undefined, 'PBMNotConnected', 'custom-popup-ok error', 'ok');
let elements: any = document.getElementsByClassName('.pbmAlertInfoBox .infoIcon');
if(elements.length > 0){
elements[0].click = () => {
this.goToHelp();
}
}
but now, the problem is I don't know when exactly the alert popup opens, so I need your help to know any event available after opening the alert popup.
Thanks in advance.
I have a webgrid that gets populated on page load. In this grid I have an element that has a javascript event handled when it is clicked. Here I simply intend to sent the user to an external site. I also have this tied to a controller. Both are working for the first element. However, when it comes to anything after the first element in the list the javascript does not get called.
WebGrid:
#grid.GetHtml(tableStyle: "table table-striped table-bordered",
headerStyle: "thead-default",
columns: grid.Columns(
grid.Column("post_tran_a", Model.year_a, canSort: false, format: (item) =>
new HtmlString(Html.CheckBox("post_tran_a", (bool)item.post_tran_a.is_reviewed, new { disabled = "disabled" })
+ " " +
Html.ActionLink((string)item.post_tran_a.month, "PostTransmission", Model.controller, new { report_id = item.post_tran_a.report_id, link = item.post_tran_a.link }, new { #id = "external-link", data_url=Url.Action() })
))))
Javascript:
$("#external-link").click(function () {
var url = $("#external-link").attr("data-url");
alert(url);
});
If this approach won't work I'm open to alternative solutions.
Simplest way in your particular case might work like
$("table a").click(function () {
// you need here 'this' it is available by default
// and it points to the object on which click is called
var url = $(this).attr("data-url");
alert(url);
});
But above is too general. It will fail if you have tables having other links a where you do not want to fire the even so better approach is following
Id only works for one element. For a set of elements (e.g. multiple links). You need to use the class and access them by class as well.
I replaced your id with class and accessed it with that name as well.
grid.GetHtml(tableStyle: "table table-striped table-bordered",
headerStyle: "thead-default",
columns: grid.Columns(
grid.Column("post_tran_a", Model.year_a, canSort: false, format: (item) =>
new HtmlString(Html.CheckBox("post_tran_a",
(bool)item.post_tran_a.is_reviewed, new { disabled = "disabled" })
+ " " +
Html.ActionLink((string)item.post_tran_a.month, "PostTransmission",
Model.controller, new { report_id = item.post_tran_a.report_id, link = item.post_tran_a.link },
// See following carefully
new { #class="someuniquecalssname" data_url=Url.Action() })))))
Now the javascript will work fine
$(".someuniquecalssname").click(function () {
var url = $(this).attr("data-url");
alert(url);
});
If you are not willing to add class attribute then, Creating Unique Ids like ex-link1, ex-link2 could be possible in many cases. But they are useless for an event like above
You are using id to select the element, an id must be unique on the page. use either a class or unique ids when setting them in your code #id = "external-link--xxx"
You could also use a different selector in your jquery selector
$("#yourtableid a").click(function () {
var url = $("#external-link").attr("data-url");
alert(url);
});
What i am trying to do is dynamically add container to panel on click of button.
1st instance of container gets added and can be seen in the panel.items.length
2nd instance onwards the panel.items.length doesn't change. but the panel can be seen in dom and on screen.
Just wanted to know why the panel.items.length is not increasing. Is it a bug?
Fiddler link https://fiddle.sencha.com/#fiddle/p3u
Check for the line :
console.log(qitems);
below debugger; it is set to questionsblock.items.length that i am talking about.
Remove the itemId from QuestionTemplate and remove renderTo from the new instance.
Your click handler should look like this:
listeners: {
'click': function(button) {
var questionPanel = button.up('form').down('#questionsblock'),
qitems = questionPanel.items.length,
questiontemplate = Ext.create('QuestionTemplate', {
qid: qitems,
questiontype: 'text'
});
console.log(qitems);
questionPanel.add(questiontemplate);
questionPanel.doLayout();
}
}
Check this fiddle: https://fiddle.sencha.com/#fiddle/p47
We are using elFinder for our software, and also using its file picker.
This is the (actually working) code:
var elfinderInstance = modalBody.elfinder({
lang: 'de',
[...],
getFileCallback: function(data) {
$("#" + fileInputId).val(data.url);
fileModal.modal("hide");
},
handlers : {
select : function(event, elfinderInstance) {
console.log(event.data.selected);
var selected = event.data.selected;
if (selected.length) {
selectedElement = elfinderInstance.url(selected[0]);
}
}
}
}).elfinder('instance');
However it is possible to select multiple files in the modal, by simply pressing the CTRL button and clicking on multiple files.
How can I disable this behaviour?
I already checked the select handler, and selected.length already returns the number of selected files but I can't figure out how to unselect the previously selected files so that only one file can be selected. I also found nothing in the Docs (https://github.com/Studio-42/elFinder/wiki).
With elFInder 2.1.17 or higher, the connector main option maxTargets is available. This is an option to suppress the load on the connector side, but it is also effective for this case.
$opts = array(
'maxTargets' => 1,
'roots' => array( .... ),
);
see https://github.com/Studio-42/elFinder/issues/2334