We Keep Coding

select2 showing 2 options highlighted with grey color i.e. aria-selected='true'. Can anyone help to fix it?

My templateSelection function is
function formatDesAccItem (item) {
if (item.loading) {
return item.text;
}
if(item.number)
{ var $container = $(
`<div class='select2-result-repository clearfix'>
<div class='select2-result-repository__meta'>
<div class='select2-result-repository__name'>${item.name}</div>
<div class='select2-result-repository__account_number'>${item.number}</div>
<div class='select2-result-repository__bank'>${item.bank}</div>
<div class='select2-result-repository__account_type'>({{__('Bank Account')}})</div>
</div>
</div>`
);}
else
{ var $container = $(
`<div class='select2-result-repository clearfix'>
<div class='select2-result-repository__meta'>
<div class='select2-result-repository__name'>${item.name}</div>
<div class='select2-result-repository__account_type'>({{__('Cash on hand Account')}})</div>
</div>
</div>`
);}
return $container;
}
it happens when item.name starts with same name.
I tried to use let instead of var.

how to acess the child element under the $(this) key word using jquery

i want to add the attribute title with a value of h3 to the href with class name (submit)
but i am not able to access the h3 text in each div which is selected with classname. please help out .
$(document).ready(
function ()
{
$(".topic ").each(
function()
{
var title=$(this h3).text();
console.log(title)
$(this ".submit").attr("title",title);
}
);
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="topic">
<h3>Shoulder Arthritis</h3>
</div>
<div class="topic">
<h3>Shoulder Arthritis</h3>
</div>
<div class="topic">
<h3>Shoulder Arthritis</h3>
</div>
<div class="topic">
<h3>Shoulder Arthritis</h3>
</div>

Use find with $(this) like below.
$(".topic ").each(
function() {
var title = $(this).find('h3').text();
console.log(title)
$(this).find(".submit").attr("title", title);
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="topic">
<h3>Shoulder Arthritis</h3>
</div>
<div class="topic">
<h3>Shoulder Arthritis</h3>
</div>
<div class="topic">
<h3>Shoulder Arthritis</h3>
</div>
<div class="topic">
<h3>Shoulder Arthritis</h3>
</div>

You can use the method .find().
The documentation can be found here
For example, your code should look like this:
$(document).ready(
function ()
{
$(".topic ").each(
function()
{
var title=$($(this).find("h3")).text();
console.log(title)
$($(this).find(".submit")).attr("title",title);
}
);
}
);
A little workaround can be done aswell, see here:
$(document).ready(
function ()
{
$(".topic ").each(
function()
{
var id = $(this).attr('id');
var title=$('#' + id + ' > h3').text();
console.log(title)
$('#' + id + ' > .submit').attr("title",title);
}
);
}
);
The > searches for a child of that element.
So $('#' + id + ' > .submit') searches for a child of the element with the given id, that has a class submit.

insert content into div from textarea Javascript

I am building a chat and i need to append content from the textarea to an inner div upon clicking send
<div class="inner" id="inner">
<div class="incoming" id="incoming">
<div class="them" id="them">Lorem
</div>
</div>
<div class="outgoing" id="outgoing">
<div class="me" id="me">Lorem ipsum
</div>
</div>
</div>
the button and textarea code is
<textarea class="input" id="input" placeholder="Message.."></textarea>
<a class="waves-effect waves-light" id="send-btn" >Send</a>
Javascript
var sendButton= document.getElementById('send-btn');
var textArea = document.getElementById('input');
var innerDiv= document.getElementById('inner');
var message=textArea.value;
sendButton.addEventListener('click', function(){
innerDiv.innerHTML=meMessage;
});
var meMessage= '<div class="outgoing" id="outgoing">'+
'<div class="me" id="me"></div></div>';
What i am trying to do is show the text value of the text area to the inner div called 'me' when i click send
and also get the value of the textarea to save it to a database. How can i achieve this

First of all you shouldn't create html elements manually since they would be XSS vulnerable and read about escaping mechanics to prevent malicious code being injected.
Try using document.createElement('div'); method to create div with valid innerText.
later use method:
innerDiv.appendChild(createdElement);
To append element.
You could create builder to build html elements you need and you have to htmlEncode text that will be inside of div element.
const sendButton = document.getElementById('send-btn');
const textArea = document.getElementById('input');
const innerDiv = document.getElementById('inner');
var message = textArea.value;
sendButton.addEventListener('click', function () {
const message = new MessageContainerBuilder().BuildMessage(textArea.value);
innerDiv.appendChild(message);
textArea.value = '';
});
function encodeHtmlEntity(input) {
var output = input.replace(/[\u00A0-\u9999<>\&]/gim, function (i) {
return '&#' + i.charCodeAt(0) + ';';
});
return output;
}
function MessageContainerBuilder() {
var createDivElement = function (classTest) {
var div = document.createElement('div');
var classAttr = document.createAttribute('class');
classAttr.value = classTest;
div.setAttributeNode(classAttr);
return div;
};
var createSpanElement = function (value, classTest) {
var span = document.createElement('span');
if (classTest) {
var classAttr = document.createAttribute('class');
classAttr.value = classTest;
span.setAttributeNode(classAttr);
}
span.innerText = encodeHtmlEntity(value);
return span;
};
this.BuildMessage = function (text) {
var divContainer = createDivElement('outgoing');
var messageSpan = createSpanElement(text, 'me');
divContainer.appendChild(messageSpan);
return divContainer;
};
}
<div id="inner">
<div class="incoming">
<div class="them">Lorem
</div>
</div>
<div class="outgoing">
<div class="me">Lorem ipsum
</div>
</div>
</div>
<textarea class="input" id="input" placeholder="Message..."></textarea>
<button class="waves-effect waves-light" id="send-btn">Send</button>
UPDATE: Extended snippet code. Removed Ids since they shouldn't be used there to create multiple message elements with same Id. Changed anchor to button.

You need to get the value of the textarea on click of the link
var sendButton = document.getElementById('send-btn');
var textArea = document.getElementById('input');
var innerDiv = document.getElementById('inner');
var message = textArea.value;
sendButton.addEventListener('click', function() {
innerDiv.innerHTML = `<div class="outgoing" id="outgoing">${textArea.value}
<div class="me" id="me"></div></div>`;
});
<div class="inner" id="inner">
<div class="incoming" id="incoming">
<div class="them" id="them">Lorem
</div>
</div>
<div class="outgoing" id="outgoing">
<div class="me" id="me">Lorem ipsum
</div>
</div>
</div>
<textarea class="input" id="input" placeholder="Message.."></textarea>
<a class="waves-effect waves-light" id="send-btn">Send</a>

You can use this. Youe message variable is not receiving the textarea value
var sendButton= document.getElementById('send-btn');
var innerDiv= document.getElementById('inner');
sendButton.addEventListener('click', function(){
innerDiv.innerHTML=innerDiv.innerHTML+'<div class="outgoing" id="outgoing">'+document.getElementById('input').value+
'<div class="me" id="me"></div></div>';
});
<div class="inner" id="inner">
<div class="incoming" id="incoming">
<div class="them" id="them">Lorem
</div>
</div>
<div class="outgoing" id="outgoing">
<div class="me" id="me">Lorem ipsum
</div>
</div>
</div>
<textarea class="input" id="input" placeholder="Message.."></textarea>
<a class="waves-effect waves-light" id="send-btn" >Send</a>

Maybe be replacing your js with that :
document.getElementById('send-btn').addEventListener('click',
function(){
var userInput = document.getElementById('input').value;
if(userInput) { document.getElementById('me').innerHTML += '<br>' + userInput; }
}
);
That should let you go a step forward... And good luck for saving to DB.

innerDiv.append(message)
instead of
innerDiv.innerHTML=message

jQuery on click not triggering on first click..works on second click

I am loading jquery.ime editor which supports the multi language editing, using this library https://github.com/wikimedia/jquery.ime/blob/master/examples/ced/script.js, there behavior is on "change" they are loading corresponding language JSON. I need that work on button click. on button click i am opening modal window, there I have text field, where I have write in regional languages. I know the language code based on that corresponding language is coming there, but right now the issue is I am able write in regional language on second click of button.
Here is my code:
open(writecontent: TemplateRef<any>, countvalue,books) {
this.config.keyboard = false;
this.modalRef = this.modalService.show(writecontent, Object.assign({}, this.config,{ class: 'gray modal-lg' }));
$( document ).ready( function () {
'use strict';
var $ced, ime, $imeSelector, $langSelector;
$.ime.setPath( '../../' );
$ced = $( '#ced' );
// Initialise IME on this element
$ced.ime( {
showSelector: false
} );
// Get the IME object
ime = $ced.data( 'ime' );
ime.enable();
$imeSelector = $( '#imeSelector' );
$langSelector = $( '#go' );
$langSelector.click(function() {
ime.setLanguage(books.language[0].language_id);
});
$ced.on( 'imeLanguageChange', function () {
listInputMethods( ime.getLanguage() );
});
function listInputMethods( lang ) {
$imeSelector.empty();
ime.getInputMethods( lang ).forEach( function ( inputMethod ) {
$imeSelector.append(
$( '<option/>' ).attr( 'value', inputMethod.id ).text( inputMethod.name )
);
});
$imeSelector.trigger( 'change' );
}
$imeSelector.on( 'change', function () {
var inputMethodId = $imeSelector.find( 'option:selected' ).val();
ime.load( inputMethodId ).done( function () {
ime.setIM( inputMethodId );
});
});
});
}
HTML CODE
<button id="go" (click)="open(books)" [ngClass]="{'disabled': disbutton}" [disabled]="disbutton" class="cl_add">ADD CONTENT</button>
<ng-template #writecontent>
<div class="modal-header">
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide();destrory()">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title text-center"> write Content</h4>
</div>
<div class="modal-body" role="application">
<form ngNativeValidate (ngSubmit)="onSubmit()" #writeContentForm="ngForm">
<div class='imeSelector' style="display:none">
<select id="imeSelector"></select>
</div>
<div>
<label for="regLang">Title</label>
<input type="text" id="ced" class="txt_book_inf" name="regLang" minlength="10" maxlength="150" required />
</div>
<div>
<label class="new_span_txt">Write Content</label>
<textarea id="mytextareaid" name="mytextareaid" rows="20" cols="80" style="width: 100%; height:200px;"></textarea>
</div>
<div id="message"></div>
<br />
<div class="text-center">
<button type="submit" class="btn-left" class="btn btn-primary">SAVE</button>
</div>
</form>
</div>
</ng-template>
And i am working on Angular project both id and angular click event on the same button is that causing the issue ?

problem with click event after making this change its working fine.
$(document).on("click", "#go", function(){
});

How does one embed components with div's on jQuery .each()?

I am trying to build a photo gallery that pulls photos from flickr and displays each photo with a text box. I would like to have the below code, where div class='col-sm-6 col-md-4 center' and all child relations repeat within div class="row".
<div id="body" style="padding-top: 60px;">
<div class="row">
<!-- Section to repeat -->
<div class='col-sm-6 col-md-4 center'>
<div class='thumbnail'>
<div id="gallery"></div> <!-- Photos go here -->
<div class='input-group'>
<!-- textbox and button -->
<input type='text' class='form-control' placeholder='#tag'>
<span class='input-group-btn'>
<button class='btn btn-default' type='button'>Tag!</button>
</span>
</div>
</div>
</div>
<!-- Above section repeats here 6 times -->
</div><!--./row -->
</div><!--./body -->
The Javascript that I have gotten closet with is:
<script>
(function() {
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
var tagForm = "<span class='input-group-btn'><button class='btn btn-default' type='button'>Tag!</button></span>";
$.getJSON( flickerAPI, {
tags: "porsche",
tagmode: "any",
format: "json"
})
.done(function( data ) {
$.each( data.items, function( i, item ) {
$( "<img>" ).attr( "src", item.media.m ).appendTo( "#gallery" );
$( "#gallery" ).append( tagForm );
if ( i == 5 ) {
return false;
}
});
});
})();
</script>
This will pull the photos, but the textbox and button will to the right of the photo rather then bellow. I know the problem is from first 2 divs not being included, however, I don't know how embed the photo and textbox/button within the thumbnail and col-sm-6 dig's.
Any help would be amazing! Thanks ahead of time.

Provided that you want each image to go into the #gallery with its own tag button it
will be much easier to style if you group the image and span inside an element.
example output:
<div class="gallery">
<div class="img-box">
<img src="something.jpg">
<span class='input-group-btn'><button class='btn btn-default' type='button'>Tag!</button></span>
</div>
</div>
<script>
(function() {
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
var tagForm = "<span class='input-group-btn'><button class='btn btn-default' type='button'>Tag!</button></span>";
// store this so we dont look it up every iteration
var $gallery = $("#gallery");
$.getJSON( flickerAPI, {
tags: "porsche",
tagmode: "any",
format: "json"
})
.success(function( data ) {
$.each( data.items, function( i, item ) {
// create a div to stuff img and tag in
var $img_box = $('<div class="img-box">');
$( "<img>" ).attr( "src", item.media.m ).appendTo( $img_box );
$img_box.append( tagForm ).appendTo($gallery)
if ( i == 5 ) {
return false;
}
});
});
})();
</script>