I have this code for add dynamic select box and load select2 search for each like this:
<script type="text/javascript">
var attribute_row = <?= $attribute_row; ?>;
function addAttribute() {
html = '<tr id="attribute-row' + attribute_row + '">';
html += ' <td class="text-left"><input type="text" name="product_attribute[' + attribute_row + '][name]" class="attribute-name' + attribute_row + '" value=""><select id="' + attribute_row + '" name="product_attribute[' + attribute_row + '][attribute_id]" class="form-control attributeSelect">';
html += ' </select></td>';
html += ' <td><div class="icheck-primary"><input type="checkbox" id="checkboxAttribute' + attribute_row + '" name="product_attribute[' + attribute_row + '][visible_on_product]" value="1"><label for="checkboxAttribute' + attribute_row + '"></label></div></td>';
html += ' <td><input type="text" name="product_attribute[' + attribute_row + '][text]" value="" placeholder="<?= lang('Product.price'); ?>" class="form-control" /></td>';
html += ' ';
html += ' <td><button type="button" onclick="$(\'#attribute-row' + attribute_row + '\').remove();" data-toggle="tooltip" title="<?= lang('Product.removeAttribute'); ?>" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
html += '</tr>';
$('#attribute tbody').append(html);
$(".attributeSelect").select2({
minimumInputLength: 3,
theme: 'bootstrap4',
width: 'auto',
ajax: {
url: "url",
type: "post",
dataType: 'json',
delay: 250,
data: function (params) {
return {
searchTerm: params.term,
csrf_token: csfr_token // search term
};
},
processResults: function (response) {
return {
results: response
};
},
cache: true
}
}).on("select2:select", function () {
data = $(".attributeSelect").select2('data')[0];
id = $('.attributeSelect').attr('id');
$(".attribute-name" + id).val(data.text);
});
attribute_row++;
}
</script>
in Action after search and select(on select) result i need to add select2 data.text into this input box:
<input type="text" name="product_attribute[' + attribute_row + '][name]" class="attribute-name' + attribute_row + '" value="">
my code work for first select box and add value to first input box But for second and more also add data to first input.
how do can i fix this problem?
You're always getting the first id when doing this for all the items with that class:
id = $('.attributeSelect').attr('id');
That's why it's setting always the result the first element. You should get the current id of the element receiving the event. You can probably receive that from the event object:
$('#mySelect2').on('select2:select', function (e) {
console.log(e);
});
Related
I would like to sort my files with the uploadfile on js when files show on the page.
Does anyone know how it does that，please tell me !!
Here is part of my code
$('#fileupload').fileupload(
{
autoUpload: false,
url: 'test.php',
sequentialUploads: true,
dataType: 'json',
add: function (e, data)
{
console.log('add start');
filesList.push(data.files[0]);
var reader = new FileReader();
reader.onload = function (e)
{
$('#presentation > .files').append(
$(
'<tr class="template-upload fade in">' +
'<td><span class="preview"><img src="' + e.target.result + '" class="previewImg" /></span></td>' +
'<td><input type="text" id="title' + num + '" class="name" value=' + data.files[0].name + ' data-name="'+ data.files[0].name +'" maxlength="30" title="max 30 words"><strong class="error text-danger"></strong></td>' +
'<td><p class="size">' + (data.files[0].size / 1000) + 'k</p></td>' +
'<td><button class="btn btn-warning cancel imgCancel" data-name="' + data.files[0].name + '"><span>cancel</span></button></td>' +
'</tr>'
)
);
num++;
}
reader.readAsDataURL(data.files[0]);};//end fileupload
You probably need to hook over the add method:
$('#fileupload').fileupload({
add: function (e, data) {
//manipulate input
data.formData = [...data.files].sort(/*whatever*/);
//start original handler
$.blueimp.fileupload.prototype
.options.add.call(this, e, data);
}
});
I would like to select the content of this element
<div class="entry-content">
comment.body +
</div>
I want to get that comment.body in the function I call below, more precisely in
var body = parent.find('entry-content');
How can I select the content of a certain div? I tried val() and contents() and none of them worked.
Any suggestion?
$("body").on("click", ".show-textarea", function(){
var answerid = $(this).data('answer');
var type = $(this).data('type');
var questionid = $(this).data('question');
var $commentForm = $(this).parent().find('.comment-form').first();
console.log(answerid);
$.getJSON("/controller/api/comments/comment.php", {
answerid : answerid,
questionid : questionid,
type : type
}, function (data) {
$commentForm.find('article').remove();
console.log("AID " + answerid);
console.log("Data" + data.length);
$.each(data, function(i, comment) {
console.log("Comment:" + comment);
$commentForm.append('<article class="tweet-data">' +
'<div class="comment-items">' +
'<div class="qa-c-list-item hentry comment" id="c3574">' +
'<div class="asker-avatar">' +
'<a>' +
'<img width="40" height="40" src="' +
comment.user_photo +
'"></a>' +
'</div>' +
'<div class="qa-c-wrap">' +
'<div class="post-button">' +
'<button name="" onclick="" class="btn icon-flag" title="Flag this comment as spam or inappropriate" type="submit">flag</button>' +
'<button name="" class="btn icon-answers" title="Reply to this comment" type="submit">reply</button>' +
'</div>' +
'<span class="qa-c-item-meta">' +
'commented' +
' 1 day' +
' ago' +
' by ' +
'<a style="display: inline" href="" class="qa-user-link url nickname">' +
comment.username +
'</a> ' +
'<span class="qa-c-item-who-points"> ' +
'<span class="qa-c-item-who-points-pad">(</span><span class="qa-c-item-who-points-data">140</span><span class="qa-c-item-who-points-pad"> points)</span> ' +
'</span> ' +
'</span> ' +
'</span> ' +
'<div class="qa-c-item-content" style="color: #2d2727; font-size: 13px"> ' +
'<a name="3574"></a>' +
'<div class="entry-content">' +
comment.body +
'</div> ' +
'</div> ' +
'<div class="comment-edit-form">' +
'<form method="post" action="/controller/actions/comments/edit_comment.php">' +
'<button class = "edit-comment btn {if !$isMine}hidden{/if}" type="button">Edit</button>' +
'</form>' +
'</div> ' +
'</div> <!-- END qa-c-item --> ' +
'</div>' +
'</div></article>');
});
});
$commentForm.show();
});
$("body").on("click", ".textarea-ok, .textarea-cancel", function(){
commentsFetched = false;
$('.comment-form').hide();
});
$("body").on("click", ".edit-comment", function(){
console.log("Hello");
var parent = $("body").find('article').last();
var body = parent.find('entry-content');
console.log(body);
var parent_parent = $("body").find('article').parent().last();
parent.remove();
console.log(parent);
var button = $(this),
commentField = $('<div class="comment-form">' +
'<form method="post" action="/controller/actions/comments/edit_comment.php">' +
'<textarea name="comment" rows="4" cols="40" class="qa-form-tall-text">' +
body +
'</textarea>' +
'<input type="hidden" name="answerid" value="" />' +
'<input type="hidden" name="questionid" value="" />' +
'<button type="submit" class="textarea-ok">Edit Comment</button>' +
'</form>' +
'</div>'); // create a textarea element
commentField
// set the textarea's value to be the saved content, or a default if there is no saved content
.val(button.data('textContent') || 'This is my comment field\'s text')
// set up a keypress handler on the textarea
.keypress(function(e) {
if (e.which === 13) { // if it's the enter button
e.preventDefault(); // ignore the line break
button.data('textContent', this.value); // save the content to the button
$(this).remove(); // remove the textarea
}
}).appendTo(parent_parent); // add the textarea to the document
});
Since the binding is on '.edit-comment' which is a child of the '.tweet-data' encapsulating each individual entry (from the looks of your logic) I would suggest doing
$(this).closest('.tweet-data').find('.entry-content').text();
Your current logic is going to the last article for the 'parent' element. So if you tried to click the edit comment option on a tweet data other than the last one, your logic will most likely not work. Doing the lookup contextually by which element was clicked will fix this potential issue.
after a long search i can't find a way to call an autocomplete function when the document is ready passing a specific variable.
So i got this function that works fine when i select element from autocomplete:
var option_row = <?php echo $option_row; ?>;
$('input[name=\'option\']').autocomplete({
'source': function(request, response) {
$.ajax({
url: 'index.php?route=catalog/option/autocomplete&token=<?php echo $token; ?>&filter_name=' + encodeURIComponent(request),
dataType: 'json',
success: function(json) {
response($.map(json, function(item) {
return {
category: item['category'],
label: item['name'],
value: item['option_id'],
type: item['type'],
option_value: item['option_value']
}
}));
}
});
},
'select': function(item) {
html = '<div class="tab-pane" id="tab-option' + option_row + '">';
html += ' <input type="hidden" name="product_option[' + option_row + '][product_option_id]" value="" />';
html += ' <input type="hidden" name="product_option[' + option_row + '][name]" value="' + item['label'] + '" />';
etc etc......
after many research i'm thinking to switch to another possible solution...
I wish to call this directly without select item but passing a variable to the function...
i'm trying doing this:
$(document).ready(function(e){
var option_row = <?php echo $option_row; ?>;
var req = 'item';
setOptions(req);
});
function setOptions(req){
$.ajax({
url: 'index.php?route=catalog/option/autocomplete&token=<?php echo $token; ?>&filter_name=' + encodeURIComponent(req),
dataType: 'json',
success: function(json) {
response($.map(json, function(item) {
return {
category: item['category'],
label: item['name'],
value: item['option_id'],
type: item['type'],
option_value: item['option_value']
}
}));
}
});
'select': function(item) {
html = '<div class="tab-pane" id="tab-option' + option_row + '">';
html += ' <input type="hidden" name="product_option[' + option_row + '][product_option_id]" value="" />';
html += ' <input type="hidden" name="product_option[' + option_row + '][name]" value="' + item['label'] + '" />';
etc, etc...
}
Now, i don't know what i should use instead of 'select': function(item) { to make it works.
Thanks in advance, any help is appreciated.
Well, i have finally make it... it was more simple than i thought
this is the code:
$(document).ready(function(e) {
var data = 'Adulti';
addOptions(data);
});
var option_row = <?php echo $option_row; ?>;
function addOptions(data){
var base_url = 'index.php?route=catalog/option/autocomplete&token=<?php echo $token; ?>&filter_name=' + encodeURIComponent(data);
var n='';
$.ajax({
url: base_url,
dataType: 'json',
success: function(json) {
$.map(json, function(item) {
category = item['category'];
label = item['name'];
value = item['option_id'];
type = item['type'];
option_value = item['option_value'];
html = '<div class="tab-pane" id="tab-option' + option_row + '">';
html += ' <input type="hidden" name="product_option[' + option_row + '][product_option_id]" value="" />';
html += ' <input type="hidden" name="product_option[' + option_row + '][name]" value="' + item['name'] + '" />';
html += ' <input type="hidden" name="product_option[' + option_row + '][option_id]" value="' + item['value'] + '" />';
html += ' <input type="hidden" name="product_option[' + option_row + '][type]" value="' + item['type'] + '" />';
etc, etc....
How can I get the value from an input field when I click the button using jquery?
Below is my Jquery code :
asset_status_list = '';
$.ajax({
type: "GET",
url: "<?php echo base_url(); ?>operations/asset_status",
dataType: "JSON",
success: function (response) {
for (i = 0; i < response.length; i++) {
asset_status_list = '<tr><td >' + response[i].job_card_no + '</td><td >' + response[i].number + '</td><td>' + response[i].type + '</td><td ><input type="text" name="view_more_id" class="view_more_id' + response[i].asset_id + ' btn btn-default" id="view_more_id" value="' + response[i].asset_id + '"/><button id="view_more_link" class="view_more_link' + response[i].asset_id + '"><i class="glyphicon glyphicon-zoom-in "></i>View More</button></td></tr>';
$('#asset_status_tr').append(asset_status_list);
$("#asset_status_tr").on("click", ".view_more_link" + response[i].asset_id, function () {
console.log(response);
var asset_id = this.value;
alert(asset_id);
});
}
$('#asset_table_status').DataTable({});
},
error: function (response) {
}
});
I want to get the value of the input field name view_more_id .
Is this the answer you are looking for ? var asset_id = $( "#view_more_id" ).val();
I have this function :
function getlst() {
$.ajax({
type: "GET",
url: "/api/Configuration/GetListParameter",
success: function (data) {
EmptyGridStep1();
for (var i = 0; i < data.length; i++) {
$('#tableBody').append('<tr><td><label id="id" name="id" >' + data[i].id + ' </td>'
+ '<td>' + data[i].key + '</td>'
+ '<td><input type="text" onchange="keydown();" value="' + data[i].value + '" /></td></tr>');
}
initGrid();
}
});
}
The Keydown function
function keydown(value )
{
alert(value);
}
I'd like to change :
<td><input type="text" onchange="keydown();" value="' + data[i].value + '" /></td>
To pass the current text as a paramater to keydown function.
How can I modify my code to accomplish this task?
You don't have to do so. All you have to do is pass the input itself as a parameter to your keydown function
<td><input type="text" onchange="keydown(this);" value="' + data[i].value + '" /></td>
and just read its value here
function keydown(input)
{
alert(input.value);
}
Not the most elegant way to do it, I suggest instead of using onchange, you use jquery's change event , so you have one single listener for your change event
$('#tableBody').on("change", "input", function() {
console.log( this.value );
});
You should read this.