Accessing to the data of an URL present in a JSON File - javascript

I would like to access to a data present in a JSON File, which it URL is present in a JSON file, it is complicated to explain, so I will tell you what I want to do:
I would like to access to get all the contributors and the last hunded commits of a given repository on github.
for that I begin by accessing the : https://api.github.com/search/repositories?q= link, by adding a repository name through a searchbar.
Let's take an example of :bootstrap4-zhcn-documentation and so I have the following link : https://api.github.com/search/repositories?q=bootstrap4-zhcn-documentation
I would like to list all the contributors, presented under the contributors_url ID :
enter image description here
after that, I would like to access the URL which is a JSON file, and get the Login ID, in this example : enter image description here
I should get "zoomla"
of course, here I have only one contributor, I would like to list them all.
THE PROBLEM IS : that I don't know how can I, via jQuery/Javascript access this URL, open it, list all the login ID and display them.
This is my code, I do have "undefined" at the Contributors section,
Thank you in advance.
$(document).ready(function() {
console.log("Ready!");
$("#SearchRep").on("keyup", function(e) {
let repository = e.target.value;
console.log(repository);
$.ajax({
// type: "method",
url: "https://api.github.com/search/repositories?q=" + repository,
data: {
"client-id": "522a9db59ec192e4cf6a",
"client-secret": "4bc5227ec0d26b14193923a1ee80afad19fe2ff6"
}
// dataType: "dataType",
// success: function (response) {
// }
}).done(function(repo) {
$("#repositoryResult").html(`
<h3 class="panel-title">Repository name: ${
repo.items[0].name
} </h3>
<h3> Contributors: ${ repo.items[1].contributors_url.login} </h3>
`);
});
});
});
body {
padding-top: 65px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.8.5">
<title>Github Repositories Finder</title>
<!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" >
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.8.5">
<title>Github Repositories Finder</title>
<!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Github Repositories Finder</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</ul>
<div class="searchContainer">
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder= "Search" id="SearchRep" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>
<!-- Begin page content -->
<main role="main" class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Github Public Repositories</h1>
</div>
<div id="repositoryResult"></div>
</main>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
<script src="js/main.js"></script>
</body>
</html>

You will need to make another Ajax call to the Contributors URL that is returned from the first API call. Because you will only have the correct URL after the first API call is returned, your second API call needs to go in the .done() method of your first one.
$(document).ready(function() {
console.log("Ready!");
$("#SearchRep").on("keyup", function(e) {
let repository = e.target.value;
console.log(repository);
$.ajax({
// type: "method",
url: "https://api.github.com/search/repositories?q=" + repository,
data: {
"client-id": "522a9db59ec192e4cf6a",
"client-secret": "4bc5227ec0d26b14193923a1ee80afad19fe2ff6"
}
// dataType: "dataType",
// success: function (response) {
// }
}).done(function(repo) {
// HERE IS WHERE YOU MAKE A SECOND CALL TO THE CONTRIBUTORS URL
$.ajax({
url: repo.items[0].contributors_url
}).done(function(contributors) {
$("#repositoryResult").html(`
<h3 class="panel-title">Repository name: ${
repo.items[0].name
} </h3>
<h3> Contributors: ${ contributors[0].login} </h3>
`);
});
});
});
});
Be aware that this code will only display the first contributor of the first repository that is returned. You will need more complicated code to loop over repo.items[] and contributors[] (including making a separate Ajax call to each contributors_url for each repo returned) if you are wanting to display the full list, but this should give you the basic idea of what you need to do.

Thank you,
I have updated my code, not I can get the contributors, I did not use a new ajax call but instead I used a GET method inside the ajax, and I looped with a FOR loop to get all the logins, this works in the console with console.log but I don't know how to display it with HTML.
this is the new code :
$(document).ready(function() {
console.log("Ready!");
$("#SearchRep").on("keyup", function(e) {
let repository = e.target.value;
console.log(repository);
$.ajax({
// type: "method",
url: "https://api.github.com/search/repositories?q=" + repository,
data: {
"client-id": "522a9db59ec192e4cf6a",
"client-secret": "4bc5227ec0d26b14193923a1ee80afad19fe2ff6"
}
// dataType: "dataType",
// success: function (response) {
// }
}).done(function(repo) {
$("#repositoryResult").html(`
<h3 class="panel-title">Repository name: ${
repo.items[0].name
} </h3>
<p> Contributors: ${
$.get('https://api.github.com/repos/'+repo.items[0].owner.login+'/'+repo.items[0].name+'/contributors').done(function (e) {
for (let i = 0; i < e.length; i++){
console.log(e[i].login) ;
}
// console.log (e[0].login);
// console.log(e.login) ;
//});
})} </p>
`);
});
});
});
body {
padding-top: 65px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.8.5">
<title>Github Repositories Finder</title>
<!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" >
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.8.5">
<title>Github Repositories Finder</title>
<!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Github Repositories Finder</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</ul>
<div class="searchContainer">
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder= "Search" id="SearchRep" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>
<!-- Begin page content -->
<main role="main" class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Github Public Repositories</h1>
</div>
<div id="repositoryResult"></div>
</main>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
<script src="js/main.js"></script>
</body>
</html>

jQuery doodoo
change auth / token
search for mootools-core
document.addEventListener('DOMContentLoaded', function(e) {
console.log('DOM fully loaded and parsed');
document.getElementById('SearchRep').addEventListener('keyup', function(e) {
let repository = e.target.value;
console.log(repository);
fetch(`https://api.github.com/repos/mootools/${repository}/contributors`, {
token: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
})
.then(r => {
if (!r.ok) throw new Error('Something went wrong!');
return r.json();
})
.then(r => {
console.log(r);
document.getElementById(
'repositoryResult'
).innerHTML = `<h3 class="panel-titile">Repository name: ${repository}</h3><h4>Contributors:</h4><p>${r
.map(c => `${c.login}`)
.join(', ')}</p>`;
})
.catch(console.log);
});
});

Related

Converse embedded css issues

and greetings. I'm trying to get converse to work in embedded mode, so there is a 'full screen' version that doesn't take up the entire page. I'm having issues, where the converse control box grows outside of the area I've assigned, but there is no scroll bar to view it.
I've tried a lot of things, setting dimensions, width and height, changing dimensions, and it doesn't fix the issue. I was wondering if someone could tell me what I'm doing wrong. The webpage code is listed below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<!-- Custom fonts for this template-->
<link href="/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles for this template-->
<link href="/css/sb-admin-2.min.css" rel="stylesheet">
<link href="/css/PEC_global.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.conversejs.org/9.0.0/dist/converse.css">
<script src="https://cdn.conversejs.org/9.0.0/dist/converse.js" charset="utf-8"></script>
<!--script src="/vendor/converse/dist/converse.js"></script-->
<script src="/vendor/jquery/jquery.min.js"></script>
<script src="https://cdn.conversejs.org/3rdparty/libsignal-protocol.min.js"></script>
<style>
.converse-container {
height: 80vh;
}
</style>
</head>
<body id="page-top">
<!-- Page Wrapper -->
<div id="wrapper" style="height:100vh;">
<!-- Sidebar -->
<?php require($_SERVER["DOCUMENT_ROOT"] . '/navBar.php'); ?>
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<div class="row">
<div class="col-9">
<div class="converse-container">
<converse-root></converse-root>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
<!-- Footer -->
<!-- End of Footer -->
</div>
<!-- End of Content Wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Logout Modal-->
<!-- Bootstrap core JavaScript-->
<script src="/vendor/jquery/jquery.min.js"></script>
<script src="/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="/vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="/js/sb-admin-2.min.js"></script>
<!-- custom JS for PEC -->
<script src="/js/PEC.js"></script>
</body>
<script>
var tabulatorTable = null;
$(document).ready(function() {
converse.initialize({
default_domain: "XXXXXXX",
bosh_service_url: 'XXXXXXXXX',
view_mode: 'embedded',
message_archiving: 'always',
auto_login: true,
auto_reconnect: true,
credentials_url: 'XXXXXX',
clear_cache_on_logout: true,
notify_all_room_messages: true,
play_sounds: true,
allow_contact_removal: false,
//allow_logout: false,
allow_muc_invitations: false,
allow_registration: false,
allow_contact_requests: false,
send_chat_state_notifications: false,
//blacklisted_plugins: ['converse-fullscreen'],
});
});
</script>

Local Storage on a to do list

This is a typical todo list. Items can be added or removed,it works like this but unfortunately when I refresh it disappears. I wanted to use the localStorage functionality to solve the issue. I managed to create an array where to store the items. Now I want to show in the browser the items stored in tasks. I've got stuck when I load document.addEventListener('DOMContentLoaded', getTasks) and in particular getTasks(). I have set console.log('bonjour'), to test it and it does not go through.
Thank you, as always
function getTasks() {
console.log('bonjour')
let tasks;
if(localStorage.getItem('tasks') === null) {
tasks = [];
} else {
tasks = JSON.parse(localStorage.getItem('tasks'));
}
tasks.forEach(task => {
const html = `
<li>
<span>${task}</span>
<i class="far fa-trash-alt delete"></i>
</li>`
list.innerHTML += html;
console.log('hi')
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<title>Todolist</title>
</head>
<body>
<form action="" class="add">
<h1>To do list</h1>
<input type="text" id="name" name="add" placeholder="Enter name here">
</form>
<ul class="todos">
<li>
<span>marco</span>
<i class="far fa-trash-alt delete"></i>
</li>
</ul>
<script src="app.js"></script>
</body>
</html>
function getTasks() {
console.log('bonjour')
let tasks
if (localStorage.getItem('tasks') === null) {
tasks = []
} else {
tasks = JSON.parse(localStorage.getItem('tasks'))
}
let list = document.getElementById('theList')
tasks ? .forEach((task) => {
const html = `
<li>
<span>${task}</span>
<i class="far fa-trash-alt delete"></i>
</li>`
list.innerHTML += html
console.log('hiiiii')
})
}
function storeValue(val) {
if (!val) return
if (!localStorage.getItem('tasks')) {
let tasks = []
tasks.push(val)
localStorage.setItem('tasks', JSON.stringify(tasks))
getTasks()
} else {
let tasks = JSON.parse(localStorage.getItem('tasks'))
tasks.push(val)
localStorage.setItem('tasks', JSON.stringify(tasks))
getTasks()
}
}
getTasks()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<title>Todolist</title>
</head>
<body>
<!-- <form action="" class="add"> -->
<h1>To do list</h1>
<input type="text" id="name" name="add" placeholder="Enter name here" onchange="storeValue(this.value)">
<!-- </form> -->
<ul class="todos" id="theList">
<li>
<span>marco</span>
<i class="far fa-trash-alt delete"></i>
</li>
</ul>
<script src="app.js"></script>
</body>
</html>
here is the solution try it on your local system here you will get an error so it is better to test on your own system. Also clean up the code I just resolved the issue

JavaScript is not Running/Working/Loading on my website

If I use the script tag or link the file the js does not Run if it is a problem with the js here is my code.
$("img").on("contextmenu", function (e) {
return false;
});
$("img").mousedown(function (e) {
e.preventDefault()
});
const toggle = document.querySelector(".toggle");
const menu = document.querySelector(".menu");
/* Toggle mobile menu */
function toggleMenu() {
if (menu.classList.contains("active")) {
menu.classList.remove("active");
toggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
} else {
menu.classList.add("active");
toggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
}
}
/* Event Listeners */
toggle.addEventListener("click", toggleMenu, false);
for (let item of items) {
if (item.querySelector(".submenu")) {
item.addEventListener("click", toggleItem, false);
}
item.addEventListener("keypress", toggleItem, false);
}
document.addEventListener("click", closeSubmenu, false);
I have the disabled cache to and I have reloaded and Copied the exact file name to my script tag that links the javascript.
And my HTML. Because it might be a problem here.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- basic -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- mobile metas -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<!-- site metas -->
<title>Upright Code - Hire Me Coder</title>
<meta name="description" content="Hire Me, I am a Coder, Web and coding tutorials" />
<meta name="keywords"
content="HTML,CSS,JavaScript, Hire Coder, Hire, Code, Coder, Coding Lessons, Lessons on HTML, Lessons on CSS" />
<meta name="author" content="--------" />
<!-- Awsome Font -->
<script src="https://kit.fontawesome.com/82298f2f89.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Javascript js -->
<script src="js\Main_Javascript.js" defer></script>
<!-- style css -->
<link rel="stylesheet" href="css/style.css">
<!-- fevicon -->
<link rel="icon" href="images/logo.png" type="image/png" />
<!-- Tweaks for older IEs-->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css"
media="screen">
</head>
<body>
<!--
<script>
window.location.replace("https://uprightcode.com/comming-soon");
</script>
-->
<nav>
<ul class="menu">
<li class="logo">Upright Code</li>
<li class="item">Home</li>
<li class="item">About</li>
<li class="item">Plans</li>
<li class="item">Lessons
</li>
<li class="toggle"><i class="fas fa-bars"></i></li>
</ul>
</nav>
<section class="hero">
<div class="hero-content">
<h1 class="hero-title">
Discover the World
</h1>
<h2 class="hero-subtitle">
We offer the best adventure holidays and tailor-made trips!
</h2>
<button type="button" class="hero-button" onclick="location.href='tours.html'">
Search for tours »
</button>
</div>
</section>
<img src="images/garfield-movie.webp">
</body>
</html>
<script>
setTimeout(function () { console.clear(); }, 10000);
</script>
I put where the js is my full path to that is
/uprightcode/js/Main_Javascript.js
You need to load jquery. Add this in HTML
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

Calling API without a page reload

HTML
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rokkitt" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="styles1.css" />
<script src="api.js"></script>
</head>
<body background="texture.jpg" class="bg">
<div class="container">
<h1> Awesome Quotes</h1>
<p>Your daily dose of wisdom.</p>
<div class="dynamic">
<button class="btn btn-primary" id="button" type="submit">Get a New Quote</button>
</div>
<div class="quote"></div>
<a href="https://twitter.com/intent/tweet?hashtags=quotes" target="_blank">
<i class="fa fa-twitter"></i></a>
</div>
</body>
</html>
JS
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
$(".quote").append(a[0].content + "<p>— " + a[0].title + "</p>")
});
these are my HTML and JS.what I'm trying to do is generate a random quote inside a div.I called an API for that.Every time I reload the page a random quote comes up.What I need to do is click the "Get a New Quote" button and get a quote without reloading the page using jquery.Plus I need to click the twitter icon to take me to twitter where i see the relevant quote already in the editor just to post.
HTML
Give your button a class so you can easily access it
<button class="btn btn-primary getnewquote" id="button" type="submit">Get a New Quote</button>
Script
var Res;
$('.getnewquote').click(function(){
//your ajax call
$.ajax({
type: "POST",
url: "Your web service url",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (json) {
Res = JSON.parse(json.d);
$(".quote").append(Res[0].content + "<p>— " + Res[0].title + "</p>")
},
failure: function (msg) {
console.log(msg);
}
});
});

How to use Bootstrap Icon Picker in Jquery

Basically, I am creating a list item that generated by jQuery script. I would like to have each list item with an icon chosen from font awesome.
My JS script to create a list and my HTML markup are as below:
<script type="text/javascript">
jQuery(document).ready(function() {
var menuID = 0;
var itemCount = 1;
$('.add-new-id').click(function() {
menuID = $('.menu-id').val();
$('.menu-id, .add-new-id').attr('disabled', 'disabled');
return false;
});
$('#new-parent').submit(function() {
var newParent = $('input.new-parent').val();
$('ol.example:last').append('<li>' + newParent + '<button class="btn btn-default" role="iconpicker"></button></li>');
itemCount++;
$('input.new-parent').val('');
return false;
});
$('body').on('click', 'button[role="iconpicker"]', function() {
$(this).iconpicker();
});
});
</script>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/elusive-icons-2.0.0/css/elusive-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/font-awesome-4.2.0/css/font-awesome.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/ionicons-1.5.2/css/ionicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/map-icons-2.1.0/css/map-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/material-design-1.1.1/css/material-design-iconic-font.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/octicons-2.1.2/css/octicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/typicons-2.0.6/css/typicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/weather-icons-1.2.0/css/weather-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css"/>
<title>Menu</title>
</head>
<body>
<div class="row">
<div class="container">
<div class="col-sm-12">
<form action="" id="new-parent">
<div class="input-group col-sm-4">
<input type="text" class="form-control new-parent" placeholder="Add parent menu">
<div class="input-group-btn">
<button class="btn btn-default add-new-parent" type="submit">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
</form>
<h4>Available Forms:</h4>
<ol class="example">
</ol>
<button class="btn btn-success" type="submit">Save</button>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/jquery-sortable-min.js"></script>
<!-- Icon picker script-->
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/js/iconset/iconset-all.min.js"></script>
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/js/bootstrap-iconpicker.js"></script>
<!-- end script-->
</body>
</html>
For each list item icon, I would like to use Bootstrap-Iconpicker from this site. However, it does not work fine for each generated list item as you can see from screen shot and on my site.
Popup Icon Picker
By clicking on left and right arrow, or typing in text box, it does not work at all.
Please kindly test it on my demo site:
I could not find to any way to figure it out.
Please kindly help, your suggestion and solution are very much appreciate, thanks.

Categories