I have a modal that has a element of text with an icon
<span class="edit-comment-icon" title="Edit"></span>
and when the icon is clicked it turns the h3 into a textarea:
$('.edit-comment-icon').click(function(){
var _this = $(this),
h3Tag =_this.prev()[0],
h3Value = productComment;
var input = $('<textarea />', {
val: h3Value,
type: "text",
class:'uk-width-4-10',
style: 'padding: 5px',
rows: '5'
});
h3Tag.replaceWith(input[0]);
$('.edit-comment-icon').hide();
$('.save-comment-button').removeClass('uk-hidden').css('font-size','20px');
})
The issue is I have an external ajax call that is using another set of data for submission, but I need to add into that data the value that is in this text area at the time they hit submit.
So if the header said "TEST" and they edit, and change it to "testing" in the textarea and hit save/submit, I need to pass "testing" to my ajax call along with the current data it's receiving:
$('#saveButton').click(function(){
$ajax({
url: 'url',
data: dataset /*but need to add textarea value to this*/
});
})
How can I add the textarea value from this other function so that it is sent in the external ajax call?
Just use a selector that targets the textarea element inside the modal element, for instance if your modal element had the class my-modal you could use .my-modal textarea
$('#saveButton').click(function(){
var value = $('.my-modal textarea').val();
var dataset = {
myTextarea:value
//and/or other properties
};
//or if dataset is already created
dataset.myTextarea = value;
$ajax({
url: 'url',
data: dataset
});
})
If there are more than one textarea inside the modal you would need to add an id or some unique class to that textarea
var input = $('<textarea />', {
val: h3Value,
type: "text",
class:'for-h3 uk-width-4-10',
style: 'padding: 5px',
rows: '5'
});
and then in the callback
var value = $('.my-modal .for-h3').val();
Related
I have successfully implemented the jQuery Autocomplete function in my HTML input filed, it returns an array of JSON objects, what I would like to achieve is the following:
click on an item of the dropdown list
filter such item's string to get only the objID string.
So, here's my js code:
$.ajax({
url: "<?php echo $pointerClass ?>.json",
type: "POST",
dataType: "JSON"
}).done(function(data){
var jsonData = data;
var arr = new Array();
var keys = Object.keys(jsonData);
for(var i=0; i<keys.length; i++){
var key = keys[i];
var jString = JSON.stringify(jsonData[key]);
arr.push(jString);
}// ./ for
console.log('arr: ' + arr[0]);
// autocomplete jquery function
$( "#ar-type-pointer-objID" ).autocomplete({
source: arr,
minLength: 1
});
});
Here's a screenshot of my drop-down menu:
As you can see by the red frame, I need to click on an item and pass only the "objID" value to my input field, so it'll be "qO19zg8mV4" since I'm clicking on the row in the red square.
Here's how my input should look like after clicking on a drop-down's row:
According to the autocomplete documentation, you have two interesting events: select and close.
select is
Triggered when an item is selected from the menu. The default action is to replace the text field's value with the value of the selected item
close is:
Triggered when the menu is hidden. Not every close event will be accompanied by a change event.
Select has two parameters:
event
ui
ui is an object like this:
item: {
label: string,
value: string
}
Not sure where you will get your JSON, probably value, so I assume that...do a console.log to be sure of it!
You should rewrite with something like
$( "#ar-type-pointer-objID" ).autocomplete({
source: arr,
select: function(event, ui) {
const target = event.target;
const val = JSON.parse(ui.item.value); // Check if decode is needed or is already passed as an object
jQuery(target).val(val.ObjID);
event.preventDefault();
return false;
}
});
We prevent the default, because "The default action is to replace the text field's value with the value of the selected item." and your change in the input field will be lost.
You still have to manage some info by yourself but the idea should be enough!
I wonder if it's possible to do this multistep form on one single page, so not reloading the div with the content received from the php file but append it right below..
This is what I've got so far:
$(document).on('submit', '#reg-form', function(){
var ln = $('#submit').val();
var id = $('#id').val();
var data = 'submit='+ln;
$.ajax({
type: 'GET',
url : 'step.php',
dataType : 'html',
data : data,
success : function(data)
{
$('#reg-form').fadeOut(500).hide(function()
{
$('.result').fadeIn(500).show(function()
{
$('.result'+id).append(data);
});
});
}
});
return false;
});
Also I tried to use different divs, with incremental id's to put every content in it's own div. The Problem is, I'm only getting the "second" step, so it's not going through the whole formular.
I guess it's because the form of the first page is still there and all have the same id.. Can anyone help me out here please?
id of element in document should be unique. Change the duplicate id at html source or using javascript
success : function(data) {
// change duplicate `reg-form` `id` to value
// corresponding to `.length` of elements having `id`
// containing `"reg-form"`
$(data).filter("#reg-form")
.attr("id", "reg-form-" + $("[id*='reg-form']").length);
$("#reg-form").fadeOut(500).hide(function() {
$(".result").fadeIn(500).show(function() {
$(".result" + id).append(data);
});
});
}
I'm using select2 with multiple options and programmatic access to select also with a button. It works fine but when I click on the button all previously selected values are removed and only the value from the clicked button gets selected. Since I'm using multiple select it would make sense to add the clicked value and leave the previously selected without removing them... Is there another event to trigger besides "change" that does not remove values but adds them instead?
<select id="id_entities" class="js-example-programmatic" style="width:100%" multiple="multiple">
</select>
<td><button id="prefix_{{teu.entity_id}}" class="js-programmatic-set-val" value="{{teu.entity_id}}" name="{{teu.entity}}"><i class="fa fa-plus"></i></button></td>
<td>{{teu.entity}}</td>
<td>{{teu.user}}</td>
<script >
$(".js-example-programmatic").select2({
minimumInputLength: 2,
placeholder: "Select entities...",
allowClear: true,
multiple:true,
delay: 250,
tags:false,
ajax: {
url: '/entities/search/autocomplete/',
dataType: 'json',
data: function (parms, page) { return { title: parms.term }; },
},
});
</script>
<script>
var $example = $('#id_entities');
$("button[id^='prefix_']").click(function(){
value = $(this).attr('value');
value_name = $(this).attr('name')
if ($('#id_entities option[value="'+value+'"]').length > 0) {
}
else {
$("#id_entities").append('<option value="'+value+'">'+value_name+'</option>');
}
$example.val(value).trigger("change");
});
</script>
well, without seeing a working demo, I assume what you want is to append tags on to a select2 without erasing what tags/multi-selects are already there? If so, you would need to evaluate the element value, and append new vals rather than just calling $example.val(value), which replaces the value of said element
var data = $(test).select2('data');
data.push({id:5,text:"fixed"});
$(test).select2("data", data, true); // true means that select2 should be refreshed
Seels like a duplicate of SELECT2 -> Add data without replacing content
I am using Liferay 6.2 and want to retrieve the value of removed element from a Textboxlist component. I have stored a list of values in a hiddenInput element, and I display the list in a Textboxlist. As I remove the element, I want to update the values stores in the hidden input element. But I do not know how to retrieve the removed element.
AUI().ready('aui-textboxlist-deprecated', function (A) {
var source = A.one('#hiddenInput').val().split(',');
var tagslist = new A.TextboxList({
contentBox: '#demo',
dataSource: source,
matchKey: 'name',
schema: {
resultFields: ['key', 'name']
},
schemaType: 'json',
typeAhead: true,
width: 500
}).render();
var values = A.one('#hiddenInput').val().split(',');
A.each(values, tagslist.add, tagslist);
var updateHiddenInput = function (event) {
//how to get the removed element?
}
tagslist.entries.after('remove', updateHiddenInput);
});
How to achieve this?
As #jbalsas said in the comments:
If you just need the label, then you can get it using event.attrName. If you need to work with the element, it is passed in event.item.entry.
So you should be able to do it like this:
var updateHiddenInput = function (event) {
var hiddenInput = A.one('#hiddenInput');
hiddenInput.val(hiddenInput.val() + ',' + event.item.entry); // or event.attrName
}
How do I add a label to a text box (programmatically) :
el = new dijit.form.TextBox({label: '...' });
form.containerNode.appendChild(el.domNode);
this does not seem to work (dojo 1.6)
Dojo provides dojox.layout.TableContainer for automatically pairing labels with controls:
var layout = new dojox.layout.TableContainer({
showLabels: true,
orientation: "horiz"
});
var textBox = new dijit.form.TextBox({
name: 'text',
title: 'My Label'
});
layout.addChild(textBox);
layout.placeAt(form.containerNode);
layout.startup();
jsfiddle (thanks for the template, #jumpnett)
I've never seen any example where the dijit.form.TextBox uses the lable property to actually display a label next to the TextBox. The label is always a seperate label element or textnode.
I believe the TextBox only has this property because it inherits it from dijit._Widget (according to the API docs).
To add a label programmaticaly, just append a seperate textnode or label element to the form's domNode:
dojo.require("dijit.form.Form");
dojo.require("dijit.form.TextBox");
function buildForm() {
var form = new dijit.form.Form({
}, dojo.doc.createElement('div'));
var textBox = new dijit.form.TextBox({
name: 'text'
}, dojo.doc.createElement('input'));
document.body.appendChild(form.domNode);
form.domNode.appendChild(dojo.doc.createTextNode("My Label "));
form.domNode.appendChild(textBox.domNode);
}
dojo.addOnLoad(buildForm);
Here is a full example on jsfiddle.
yourPlaceholder.domNode.appendChild(dojo.doc.createTextNode("Label Text"));
yourPlaceholder.addChild(yourTextBox);
I got it using following snippet :
dojo.place('<label for="field" > Label Name </label>',dojo.byId('TextField_Id'),'before');