Develop Reference

Add an element (input) in div where the js function has been fired

I'd like to insert an input in an adjacent div where the JS function has been fired.
JavaScript: to add an element (input in this case)
jQuery: to detect where the javascript function has been fired.
The issues I'm facing :
The input is created after the second click.
All the inputs move from one div to another on each click ...
I don't understand why this happens! Do you guys have an idea why everything messes up? Thanks a lot.
var ct = 0; // numeric identifier for training section
var lec = 0; // numeric identifier for lectures
function addLecture() {
lec++;
var div = document.createElement('div');
div.setAttribute('id', 'lecture'.concat(lec))
var input = document.createElement('input');
lecture.setAttribute('type', 'text')
div.appendChild(input)
var id;
jQuery('.info_container').click(function(id) {
var id = jQuery(this).attr("id");
document.getElementById(id).querySelector('[id ^= "lectures_container"]').insertAdjacentElement('beforeend', div);
});
}
[id^="row"] {
padding: 10px;
margin: 10px;
background-color: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="row-4" class="info_container">
<div id="lectures_container4">
</div>
<a class="btn btn-add" href="javascript:addLecture()"><span class="fa fa-plus"></span> Add an input</a>
</div>
<div id="row-5" class="info_container">
<div id="lectures_container5">
</div>
<a class="btn btn-add" href="javascript:addLecture()"><span class="fa fa-plus"></span> Add an input</a>
</div>
Full code and live example in the JS fiddle right here: https://jsfiddle.net/t7x350d9/

Your code is much more complicated than it needs to be.
Firstly when dealing with repeated HTML structures do not use id attributes. Use the same class on them all to group them. If you need to identify each one, listen for the event and use the target to determine which element was interacted with. In the example below this can be done through the target property of the event which is raised.
Secondly, to achieve your goal simply use an unobtrusive event handler in your JS (not an onclick attribute in the HTML) and append() the new HTML. Try this:
jQuery($ => {
$('.info_container .btn').on('click', e => {
e.preventDefault();
$(e.target).closest('.info_container').find('.lectures_container').append('<div class="lecture"><input type="text" /></div>');
});
});
.info_container {
padding: 10px;
margin: 10px;
background-color: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="info_container">
<div class="lectures_container"></div>
<a href="#" class="btn btn-add">
<span class="fa fa-plus"></span> Add an input
</a>
</div>
<div class="info_container">
<div class="lectures_container"></div>
<a href="#" class="btn btn-add">
<span class="fa fa-plus"></span> Add an input
</a>
</div>

onChange Button label doesn't hold its style

I have an interesting problem. I have a button that is used for selecting (like a select item). That code is here:
<button class="btn btn-primary dropdown-toggle" style="width: 166%;"
type="button" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<span id="dropdown_button" style="width: 166%;">
<img src="wp-content/themes/directory2/images/closest.png" />
10 Closest Amenities</span>
<span class="caret" style="margin-top: 9px;float: right;"></span>
</button>
Then it uses some jquery to change the text in the button/select like this:
$(document).on('click', '.dropdown_anchor', function(event) {
var index = $(this).data('index');
var title = $(this).data('title');
populate_list(index);
dropdownButtonText(title);
});
Then the dropdownButtonText function is implemented as below:
function dropdownButtonText(text) {
$("#dropdown_button").text(text);
}
The problem is, that the button spans the width it needs to on page load (aka style="width: 166%;") but when the selection happens and its changed, the button then doesn't hold its set width. Meaning for example it goes from 166% to say 87% width.
How can I make it so that the button holds its width when changed?
Thank you for your input and time, it's appreciated.
An example can be seen here:
https://www.trustedlivingcare.com/item/cedarhurst-of-sparta-il/
The Neighborhood & Nearby Amenities area
Starting Position
https://www.screencast.com/t/TiuWZdhYcWc
After Change
https://www.screencast.com/t/goYgVtvrErW5

It is because the width of the button changes when the text has less characters than previous one. you can give the button a specific width in css so it doesn't change when the text change.
#dropdown_button {
width: 100px; // this is an example
}
You can also do min-width to make sure that is the least width the button goes.
#dropdown_button {
min-width: 100px; // this is an example
}

You can try grabbing the elements width before the text change:
$(document).on('click', '.dropdown_anchor', function(event) {
var index = $(this).data('index');
var title = $(this).data('title');
var width = $(this).outerWidth();
populate_list(index);
dropdownButtonText(title, width);
});
and then apply that width in the new function.
function dropdownButtonText(text, width) {
$("#dropdown_button").css("width", width).text(text);
}
The button will need to be display inline-block, though.

try this in your css file
.btn-primary {
min-width: 500px;
}

Below what I have tried.
<div class="dropdown">
<button id="btnTest" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" style="width: 80%;">Dropdown Example
<span class="caret"></span></button>
<ul id="demolist" class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
<script type="text/javascript">
$('#btnTest').click(function() {
console.log("Test");
});
$('#demolist li').on('click', function(){
var selectedText = $(this).text();
console.log(selectedText);
$("#btnTest").html(selectedText+' <span class="caret"></span></button>');
});
</script>
Also, consult the demonstration at using Bootstrap 3 Dropdown toggle button

how to get UL LI value in jquery?

I am trying to get ul li listbox value in function but i cant find way.
My code is like that.
<ul class="dropdown-menu" id="newloc">
<?php
$res_add = DB::table('res_br')->where('email',$user_email->email)->get();
if(count($res_add) != "") {
foreach($res_add as $rr1) {
?>
<li value="<?= $rr1->street;?>"><?= $rr1->street;?></li>
<?php
}
}
?>
</ul>
<button type="button" class="btn btn-block btn-primary" data-dismiss="modal" onClick="buildorder()" >Build Your Order</button>
My jquery function is like that
function buildorder() {
var radio = $("input[name='newradio']:checked").val();
var location = $(this).find('li');
console.log(li.text());
alert(radio);
alert(location);
}
can some help me.to get location variable.

Let's fix this code first:
<ul class="dropdown-menu" id="newloc">
<?php
$res_add = DB::table('res_br')->where('email',$user_email->email)->get();
if(count($res_add) != "")
{
foreach($res_add as $rr1)
{
echo '<li value="'.$rr1->street.'">'.$rr1->street.'</li>';
}
}
?>
</ul>
<button type="button" class="btn btn-block btn-primary" data-dismiss="modal" onClick="buildorder()" >Build Your Order</button>
Now your code outputs li-elements based upon the foreach.
Next the button code:
function buildorder()
{
var radio = $("input[name='newradio']:checked").val(); //this refers to an input that is not in this post, but I assume this refers to a location in the list.
var location = $('#newloc').find('li'); //no this, let's use the id
console.log(location.text()); //this will list all the li elements and there textContent
alert(radio);
alert(location);
}
This only fixes the code and will give you information from the lis. However since we don't know more about your code I can't help you further with selecting the correct li.
You can even assign the click handler to the button with jQuery.
$('button.btn.btn-primary').click(buildorder);

Use this code ,hope this will help
$("#newloc li").click(function() {
alert(this.id);
alert($(this).html());
alert($(this).text());
});

anchor tag onclick is not working

HTML code:
<a href="javascript:void(0);" id="btnSaveComments" runat="server"
onclick="EnterComments();" class="btn btn-sm btn-info no-radius"> Send</a>
JavaScript code:
$(document).ready(function() {
$("#btnSaveComments").click(function(e) {
EnterComments();
e.preventDefault();
});
});
function EnterComments() {
alert("test");
}
When I checked with debugger, it got inside document.ready but it didn't get inside the function EnterComments

please see the code below :
HTML :
<span class="input-group-btn"><a href="javascript:void(0);" id="btnSaveComments" runat="server"
onclick="EnterComments();" class="btn btn-sm btn-info no-radius"><i class="icon-share"></i> Send</a>
</span>
JS :
function EnterComments() {
console.log("test");
alert("hi");
}
Hope you find it useful.
Demo : http://plnkr.co/edit/Vq0Yi5mu9y0RRK5tIhYt?p=preview

EnterComments() is called twice here.
Remove onclick="EnterComments();" and try once.
It should work then

Try this out:
TEST TEXT
SCRIPT CODE:
<script type="text/javascript">
$(document).ready(function(){
$('#anchor_tag').click(function() {
alert('You have clicked test text');
});
enter code here
});
</script>

Addthis share buttons inside bootstrap popover

I am having trouble getting the addThis buttons to show inside of a bootstrap popover. The code is in the html data attribute and the addThis script is firing correctly, but the buttons just don't show even though the code can be seen in it via inspector.
I've done a jsfiddle here:
http://jsfiddle.net/XW9bk/1/
<li id="share" class="text-primary" data-html="true" data-content="<div class='addthis_toolbox addthis_default_style addthis_32x32_style'><a class='addthis_button_preferred_1'></a><a class='addthis_button_preferred_2'></a><a class='addthis_button_preferred_3'></a><a class='addthis_button_preferred_4'></a><a class='addthis_button_compact'></a><a class='addthis_counter addthis_bubble_style'></a></div>" data-original-title="" data-trigger="manual" data-placement="right"><a class="text-success">Share</a></li>
$('#share').click(function() {
$('.vote, .favorite, #share').popover('hide');
$('#share').popover('toggle');
})
$(document).ready(function() {
var addthis_config = {"data_track_addressbar": true};
$.getScript("//s7.addthis.com/js/300/addthis_widget.js#pubid=imperium2335")
})
I've got it working in a way with:
$('#share').click(function() {
$('.vote, .favorite').popover('hide');
$('#share').popover('toggle');
addthis.toolbox('.addthis_toolbox');
})
The problem now is there is a delay of several seconds before the buttons are displayed in the popover. When the popover is hidden and then reopened, the buttons aren't there and again take a while to appear.
Anyone know what could be causing this?

It seems to be a timing issue with the script loading, combined with the fact that it is essentially dynamic content. This will work for your situation:
HTML
<div class="hidden">
<div class="the-content"></div>
</div>
<br />
<br />
JAVASCRIPT
$(document).ready(function () {
var addthis_config = {
"data_track_addressbar": true
};
var theCode = '<div class="addthis_toolbox addthis_default_style addthis_32x32_style"><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style"></a></div>';
var theButton = '<button type="button" class="btn btn-default" data-container="body" data-placement="right" rel="popover">Popover on right</button>';
$('.the-content').append(theCode).promise().done(function () {
$.getScript("//s7.addthis.com/js/300/addthis_widget.js#pubid=imperium2335", function () {
setTimeout(function() { $('body').append(theButton); }, 1000);
$('body').popover({
selector: '[rel=popover]',
html: true,
content: function () {
return $('.the-content').html();
}
});
});
});
});
FIDDLE

I achieved what you were trying to do successfully, except that the problem was that share buttons were not clickable. Someone contacted AddThis support, this is the response they got;
Unfortunately without seeing it in action I can't diagnose the problem. If the buttons are visible but not clickable then there's either something hijacking the click action or another transparent element z-indexed over it.
I solved this problem by loading the AddThis buttons after the popover has been shown. See the code below;
<button type="button" class="btn btn-artist-add-share has-popover" rel="popover" data-placement="bottom" data-html="true" data-content="<div id='pcontent'></div>">Share <i class="fa fa-share padding-left-20"></i>
</button>
<script language="JavaScript">
$("[rel=popover]").popover({
html: true
});
$("[rel=popover]").on('shown.bs.popover', function() {
$('#pcontent').html("<div class='addthis_sharing_toolbox'></div>")
$.getScript("//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4fa624772af11b1b")
});
</script>