Develop Reference

Adding a button for the end of the ul list

In my asp.net MVC application, I'm using signalR for push notifications.
There I load the notifications to the ul list like this.
<ul class="nav navbar-nav navbar-right">
<li role="presentation" class="dropdown open">
<a class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false" onclick="LoadData();">
<i class="fa fa-envelope-o"></i>
<span class="badge bg-green" id="notiCount">0</span>
</a>
<ul id="menu1" class="dropdown-menu list-unstyled msg_list" role="menu"></ul>
</li>
</ul>
So I check the notifications and shows in the dropdown from javascript
function LoadData() {
$('#menu1').empty();
$('#menu1').append($('<li> Loading.. </li>'));
$.ajax({
type: 'GET',
url: $("#Get").val(),
dataType: 'json',
data: {},
success: function (data) {
if (data.Success == true) {
$('#menu1').empty();
if (data.listNoti.length == 0) {
$('')
$('#menu1').append($('<li>There is nothing to show </li>'));
console.log("No Data");
}
$("#notiCount").empty();
$("#notiCount").append(data.listNoti.length);
$.each(data.listNoti, function (index, value) {
$("#menu1").append('<li> <a> <span class=image><img src ="/Theme/production/images/Annon.png"/> </span> <span>' + value.Ndetails + '</li><hr/>');
});
}
}
});
}
I want to add a section that end of the <li> as a button to clear all notifications. How to add this?
I tried adding it inside the menu1 but when the javascript load the notifications it got removed.

Seems you just need to invoke append() out of each() to add the button
$.each(data.listNoti, function (index, value) {
$("#menu1").append('<li> <a> <span class=image><img src ="/Theme/production/images/Annon.png"/> </span> <span>' + value.Ndetails + '</li><hr/>');
});
$("#menu1").append('<li><button onclick="removeEle()">Remove</button></li>')

how set default active tab in laravel javascript?

How i can i get my first tab active and selected, because because when i load my page none of my tabs selected and active.
this is the Tabs when the page loaded
and this is after clicking the tab
html
<div class="tabbable-line ">
<!-- Nav Nav-tabs Start -->
<ul class="nav nav-tabs tabs_content">
#foreach ($routes as $route)
<li >
<a href="#{{ $route->id }}" id="ad" data-toggle="tab">
{!! $route->name !!}
</a>
</li>
#endforeach
</ul>
<div class="tab-content blog_tabs">
<!-- tab-content is coming from javascript -->
</div>
</div>
nav-content are in javascript because there's data coming from controller when ever tab is selected, so here is...
Nav content Javascript
$("ul.nav-tabs > li > a").click(function() {
var id = $(this).attr("href").replace("#", "");
console.log(id);
if(id) {
$.ajax({
url: "{{ route('user.schedule.getId') }}",
type: "GET",
data:{'id':id},
dataType: "json",
success:function(data) {
$(".tab-content").empty();
$(".tab-content").html('<div class="tab-pane" name="schedule" id="'+ id +'">')
$.each( data, function( index, object ) {
$(".tab-content").append('<ul class="list-group"><li class="list-group-item">'+ object['schedule_number'] +'</li></ul></div>');
});
}
});
}
});

Inside your foreach loop, add a class active for the first item in your array:
<ul class="nav nav-tabs tabs_content">
#foreach ($routes as $index => $route)
<li {{ $index== 0 ? 'class="active"' : '' }}>
<a href="#{{ $route->id }}" id="ad{{ $route->id }}" data-toggle="tab">
{!! $route->name !!}
</a>
</li>
#endforeach
</ul>
Add please notice that id have to be unique in your document.

Pass custom <li> attribute to Javascript function

So I have a basic dropdown and each dropdown option has specific attributes. I'd like to pass those attributes (data name, description, and value) to a javascript function. code is below the console says "undefined " for everything I'm trying to pass. I've already tried changing .data() to .attr(). I really need something clean and simple. thanks!
HTML
<label class="dropdown" style="float: left" >
<div class="dd-button">Select a Plan</div>
<input type="checkbox" class="dd-input" id="test">
<ul id="dropdown" class="dd-menu">
<li data-description="description." data-name="Web" data-value="mmk">2</li>
<li data-description="description." data-name="Basic" data-value="basic">3</li>
<li data-description="description." data-name="Plus" data-value="plus">4</li>
</ul>
</label>
JS
var PLAN_CONFIG = {
id: '',
billing: '',
name: '',
description: '',
payment: true,
panelLabel: 'Confirm',
};
$('#dropdown').click(function () {
PLAN_CONFIG.id = $(this).data('value');
PLAN_CONFIG.name = $(this).data('name');
PLAN_CONFIG.description = $(this).data('description');
console.log(PLAN_CONFIG);
});

If you assign the click event handler to #dropdown, this in the callback function will be #dropdown too. You should assign the event handler to li elements instead:
$('#dropdown li').click(function () {
Demo:
var PLAN_CONFIG = {
id: '',
billing: '',
name: '',
description: '',
payment: true,
panelLabel: 'Confirm',
};
$('#dropdown li').click(function () {
PLAN_CONFIG.id = $(this).data('value');
PLAN_CONFIG.name = $(this).data('name');
PLAN_CONFIG.description = $(this).data('description');
console.log(PLAN_CONFIG);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="dropdown" style = "float: left" >
<div class="dd-button"> Select a Plan </div>
<input type="checkbox" class="dd-input" id="test">
<ul id = "dropdown" class="dd-menu">
<li data-description = "description." data-name = "Web" data-value="mmk" >2 </li>
<li data-description = "description." data-name = "Basic" data-value="basic" >3 </li>
<li data-description = "description." data-name = "Plus" data-value="plus" >4</li>
</ul>
</label>

Use this selector '#dropdown li'.
Your current code is binding the click event to your element dropdown rather than your li elements.
var PLAN_CONFIG = {
id: '',
billing: '',
name: '',
description: '',
payment: true,
panelLabel: 'Confirm',
};
$('#dropdown li').click(function() {
PLAN_CONFIG.id = $(this).data('value');
PLAN_CONFIG.name = $(this).data('name');
PLAN_CONFIG.description = $(this).data('description');
console.log(PLAN_CONFIG);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="dropdown" style="float: left">
<div class="dd-button"> Select a Plan </div>
<input type="checkbox" class="dd-input" id="test">
<ul id = "dropdown" class="dd-menu">
<li data-description = "description." data-name = "Web" data-value="mmk" >2 </li>
<li data-description = "description." data-name = "Basic" data-value="basic" >3 </li>
<li data-description = "description." data-name = "Plus" data-value="plus" >4</li>
</ul>
</label>

How to display JSON data using jquery DOM selector?

I want to display json.articles[i].title of each news on my website here is my screenshot of website and my code:
In main.js:
(function() {
$.getJSON('https://newsapi.org/v1/articles?source=techcrunch&sortBy=top&apiKey=my-api-key', function(json) {
$("#sidebar-wrapper li").each(function() {
$('li').html(json.articles[0].titles)
});
});
})();
My HTML file :
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<strong>Latest Headines</strong>
<li>
Your news title
</li>
<li>
Your news title
</li>
<li>
Your news title
</li>
<li>
Your news title
</li>
<li>
Your news title
</li>
</ul>
</div>
Here is my screenshot of website I want to display each news title from json.articles[].title instead of "Your news title".(For clarification see screenshot and HTML code).

Try Below Code
(function () {
$.getJSON('https://newsapi.org/v1/articles?source=techcrunch&sortBy=top&apiKey=045089075bc74354be01b34f6335d32b', function (json) {
var html = "";
$(json.articles).each(function (index, value) {
$(".sidebar-nav").append("<li><a href='"+value.url+"'>" + value.title + "</a></li>");
});
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
</ul>
</div>

If all you want is to iterate through the articles you can use an iterator index and keep incrementing it. Something like this.
(function(){
var i = 0;
$.getJSON('https://newsapi.org/v1/articles?source=techcrunch&sortBy=top&apiKey=045089075bc74354be01b34f6335d32b',function(json) {
$("#sidebar-wrapper li").each(function(){
$('li').html(json.articles[i++].titles)
});
});
})();
But you it would be better to iterate over the articles object and create lists dynamically.

You should dynamically create the LI elements, as the no of article from JSON response may vary.
To create element use jQuery(html)
//Cache the ul element
var ul = $("#sidebar-wrapper ul.sidebar-nav");
//iterate the articles
$.each(json.articles, function(index, article) {
//Create anchor
var anchor = $('<a>', {
href: article.url,
text: article.title
});
//Create LI and append anchor after append the LI to UL
$('<li>').append(anchor).appendTo(ul);
});
(function() {
$.getJSON('https://newsapi.org/v1/articles?source=techcrunch&sortBy=top&apiKey=045089075bc74354be01b34f6335d32b', function(json) {
var ul = $("#sidebar-wrapper ul.sidebar-nav");
$.each(json.articles, function(index, article) {
var anchor = $('<a>', {
href: article.url,
text: article.title
});
$('<li>').append(anchor).appendTo(ul);
});
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar-wrapper">
<strong>Latest Headines</strong>
<ul class="sidebar-nav">
</ul>
</div>

You can also update li data by using class
Try This
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){
$.getJSON('https://newsapi.org/v1/articles?source=techcrunch&sortBy=top&apiKey=045089075bc74354be01b34f6335d32b',function(json) {
var x=document.getElementsByClassName("title");
for(var i=0;i<x.length;i++)
x[i].innerHTML = json.articles[0].titles;
}); }); </script>
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<strong>Latest Headines</strong>
<li>
Your news title
</li>
<li>
Your news title
</li>
<li>
Your news title
</li>
<li>
Your news title
</li>
<li>
Your news title
</li>
</ul> </div>

jQuery get Text of parent in list

I have the following list
$(document).ready(function() {
$('li').click(function(e) {
alert($(e.target).children().remove().end().text());
alert($(e.target).siblings('span:first').text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<span>foo1</span>
<span style="visibility: hidden">bar1</span>
</li>
<li>
<span>foo2</span>
<span style="visibility: hidden">bar2</span>
</li>
<li>
<span>foo3</span>
<span style="visibility: hidden">bar3</span>
</li>
</ul>
I would like to extract "foo1" and "bar1" at the same time in different values. The function above looks really weird. Could someone find a better approach?
Could you adjust my jQuery function please?

You should try this code:
$(document).ready(function() {
$('li').click(function() {
console.log('span #1', this.children[0].innerHTML);
console.log('span #2', this.children[1].innerHTML);
});
});

You can use find('span:first').text() to get the texts with foo:
$(document).ready(function() {
$('li').click(function(e) {
console.log($(this).find('span:first').text());
});
});
I have the following list $(document).ready(function() { $('li').click(function(e) { alert($(e.currentTarget).text()); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<span>foo1</span>
<span style="visibility: hidden">bar1</span>
</li>
<li>
<span>foo2</span>
<span style="visibility: hidden">bar2</span>
</li>
<li>
<span>foo3</span>
<span style="visibility: hidden">bar3</span>
</li>
</ul>
Expand snippet I would like to get only the "foo".text() of each list element clicked. With my actual approach I also receice the "bar".text() unfortunately. Could you adjust my jQuery function please? javascript jquery target shareeditcloseflag asked
6 mins ago AppRoyale 1281217
You can read more about find() here and about text() here.

You need to find() the span, and then do the text() or html()
$(document).ready(function() {
$('li').click(function(e) {
alert($(e.currentTarget).find('span:last-child').text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<span>foo1</span>
<span style="visibility: hidden">bar1</span>
</li>
<li>
<span>foo2</span>
<span style="visibility: hidden">bar2</span>
</li>
<li>
<span>foo3</span>
<span style="visibility: hidden">bar3</span>
</li>
</ul>