show html table inside tabs

show html table inside tabs - javascript

FULL Code here: https://jsfiddle.net/zw9sy5ew/2/
this code will generate two tables based on JSON keys,.
How do i create Jquery tabs and put the first table in one tab and the other table in another tab
$.each(data.user, function(key, value) {
var row = $("<tr/>");
if ($('table#main_table_' + value.id).length)
table = $("#main_table_" + value.id);
else
table = $('<table></table>');
table.attr('id', 'main_table_' + value.id);
row.append($("<td/>").text(value.name));
row.append($("<td/>").text(value.id));
table.append(row);
$("#list_table_json").append(table);
$("#list_table_json").append("<br>");
});

Tables grouped by value.id:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test jQuery Tabs</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="tabs">
<ul id="ul-tabs">
</ul>
</div>
<script type="text/javascript">
var data = $.parseJSON("{\"version\":\"5.2\",\"user_type\":\"online\",\"user\":[{\"name\":\"John\",\"id\":50},{\"name\":\"Mark\",\"id\":50},{\"name\":\"Johnny\",\"id\":57}]}");
const setTables = new Set();
$.each(data.user, function(key, value) {
let table;
var row = $("<tr/>");
if ($('table#main_table_' + value.id).length)
table = $("#main_table_" + value.id);
else
table = $('<table></table>');
table.attr('id', 'main_table_' + value.id);
row.append($("<td/>").text(value.name));
row.append($("<td/>").text(value.id));
table.append(row);
if(!setTables.has(value.id)) {
setTables.add(value.id);
$( "#ul-tabs" ).append("<li>"+value.id+"</li>");
$( "#tabs" ).append("<div id=\"tabs-"+value.id+"\">"+table.prop('outerHTML')+"</div>");
}
});
$( "#tabs" ).tabs();
</script>
</body>
</html>

I took an example from JQuery ui tabs and I modified it for your needs:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test jQuery Tabs</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="tabs">
<ul id="ul-tabs">
</ul>
</div>
<script type="text/javascript">
var data = $.parseJSON("{\"version\":\"5.2\",\"user_type\":\"online\",\"user\":[{\"name\":\"John\",\"id\":50},{\"name\":\"Mark\",\"id\":50},{\"name\":\"Johnny\",\"id\":57}]}");
$.each(data.user, function(key, value) {
let table;
var row = $("<tr/>");
if ($('table#main_table_' + value.id).length)
table = $("#main_table_" + value.id);
else
table = $('<table></table>');
table.attr('id', 'main_table_' + value.id);
row.append($("<td/>").text(value.name));
row.append($("<td/>").text(value.id));
table.append(row);
console.log(table);
$( "#ul-tabs" ).append("<li>"+value.name+"</li>");
$( "#tabs" ).append("<div id=\"tabs-"+value.name+"\">"+table.prop('outerHTML')+"</div>");
});
$( "#tabs" ).tabs();
</script>
</body>
</html>

Related

How to set a index to button ID in Jquery

Here I'm trying to set index to my button id, for example if I have button id like unique , second button should have unique0, and third button should have unique1 like this. actually button in each loop so that i am same id with all buttons anyone pls let me know how to achieve it
note: i need button id's like unique0, unique1, unique2
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<button id="unique" type="button" class="btn btn-primary">Primary</button>
</div>
<script>
$(function() {
var index = $("#unique").index(this);
$("#unique").append(index);
)};
</script>
</body>
</html>

Use a loop to change all the IDs.
$(".btn").each(function(i) {
this.id = 'unique' + i;
this.innerText += i;
});

How To Disable certain days in the date picker

I was trying to disable certain days in the date picker like Friday is off so I need to disble friday from the date picker
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>

Try this code to disable friday from the date picker
function DisableFriday(date) {
var day = date.getDay();
if (day == 5) {
return [false,"","Unavailable"] ;
} else {
return [true] ;
}
}
jQuery(function($){
$('input[name="chk_date"]').datepicker('option', 'beforeShowDay', DisableFriday).datepicker('refresh');
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" name="chk_date" id="datepicker"></p>
</body>

How to get specific json value to append to progressbar boostrap

I have a problem getting a specific value to append on my progressbar.
My code is like this:
HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JQueryUI Progressbar with JSON</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
and my js is like this:
$(function() {
$.ajax({ dataType:"json",
url: "https://api.myjson.com/bins/l3gwv",
success: function(data){
$( "#progressbar" ).progressbar({
value: data.ID
});
console.log(data.ID);
}
});
});
I just want to get my selected id to be my progressbar, and my json its look like this :
[{"ID":71,"Harga":"2.000.000","Bird_Name":"Eurasian Collared-Dove"},
{"ID":82,"Harga":"8.000.000","Bird_Name":"Bald Eagle"},
{"ID":93,"Harga":"19.000.000","Bird_Name":"Cooper's Hawk"}]

Try this:
$(function() {
$.ajax({ dataType:"json",
url: "https://api.myjson.com/bins/l3gwv",
success: function(data){
var len = data.length;
var i;
for (i = 0; i < len; i++) {
$( "#progressbar" ).progressbar({
value: data[i].ID
});
console.log(data[i].ID);
}
}
});
});
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JQueryUI Progressbar with JSON</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
data is an array so manage it in the loop.

Replace select tag with a check box to toggle between dark and light theme

I'm using select tag with jquery to toggle between dark and light themes for website appearance.
This is my code which is working fine.
$(function() {
$('.style-change').change(function() {
var style = $(this).val();
$('body').fadeOut("slow", function() {
$('link[rel="stylesheet"]').attr("href", style + ".css");
$('body').fadeIn("slow");
$.cookie("css", style, {
expires: 365,
path: '/'
});
});
});
});
$(document).ready(function() {
$("#style").val('<?php echo $style; ?>');
});
<?php
if (isset($_COOKIE['css'])) {
$style = $_COOKIE['css'];
} else {
$style = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min';
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?php echo $style; ?>.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
</head>
<body>
<select name="" class="style-change form-control" id="style">
<option value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min">Default Style</option>
<option value="https://bootswatch.com/3/darkly/bootstrap.min">Night Mode</option>
</select>
</body>
</html>
I want to use a checkbox to toggle between themes/stylesheets instead of select tag.
Update
I update this snippet which is working as per my requirements
$(document).ready(function() {
var theme = '<?php echo $style; ?>';
if (theme == 'https://bootswatch.com/3/darkly/bootstrap.min') {
$("#style").prop('checked', true);
} else {
$("#style").prop('checked', false);
}
$('#style').click(function() {
var style = this.checked ? 'https://bootswatch.com/3/darkly/bootstrap.min' : 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min';
$('body').fadeOut("slow", function() {
$('link[rel="stylesheet"]').attr("href", style + ".css");
$('body').fadeIn("slow");
$.cookie("css", style, {
expires: 365,
path: '/'
});
});
});
});
<?php
if (isset($_COOKIE['css'])) {
$style = $_COOKIE['css'];
} else {
$style = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min';
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?php echo $style; ?>.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
</head>
<body>
<div class="style">
<label>Dark Theme</label>
<input type="checkbox" name="" id="style">
<button type="submit" id="btnSubmit" class="btn btn-success">Change</button>
</div>
</body>
</html>

You can try adding a value to the checkbox
<input id="#input" type="checkbox" value="true">
and then do something like this
if($("#input").value == "true"){
applyDarkTheme();
}else{
applyLightTheme();
}

Just one mistake $('#btnSumbit') should be $('#btnSubmit').
$(document).ready(function() {
$('#style').click(function() {
var style = this.checked ? 'https://bootswatch.com/3/darkly/bootstrap.min' : 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min';
$('body').fadeOut("slow", function() {
$('link[rel="stylesheet"]').attr("href", style + ".css");
$('body').fadeIn("slow");
});
});
var defaulttheme = 'https://bootswatch.com/3/darkly/bootstrap.min';
if(defaulttheme == 'https://bootswatch.com/3/darkly/bootstrap.min'){
$('#style').attr("checked",true); //do when you just want to update checked status
$('#style').click();
//do when you want to set initial theme to dark
}
});
<?php
if (isset($_COOKIE['css'])) {
$style = $_COOKIE['css'];
} else {
$style = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min';
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?php echo $style; ?>.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
</head>
<body>
<div class="style">
<label>Dark Theme</label>
<input type="checkbox" name="" id="style">
<button type="submit" id="btnSubmit" class="btn btn-success">Change</button>
</div>
</body>
</html>

I want to use a checkbox to toggle between themes/stylesheets
Yes its possible:
$(function() {
$('#dark').on('change', function() {
var href = 'https://www.w3schools.com/lib/w3-theme-indigo.css';
if (this.checked) {
href = 'https://www.w3schools.com/lib/w3-theme-black.css';
}
$('<link>', {
'href': href,
'rel': 'stylesheet'
}).appendTo('body');
}).trigger('change');
});
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label id='lbl'><input id='dark' type="checkbox"/>Use Dark Theme</label>
<div class="w3-card-4">
<div class="w3-container w3-theme w3-card">
<h1>Indigo</h1>
</div>
<div class="w3-container w3-text-theme">
<h2>w3-text-theme</h2>
</div>
</div>
Reference site

Display Json Data From URL to HTML table using javascript

i want to display json data from online URL to HTML table?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JSON Sample</title>
</head>
<body>
<div id="placeholder"></div>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$.getJSON('test.json', function(data) {
var output="<ul>";
for (var i in data.items) {
output+="<li>" + data.items[i].Id + " " + data.items[i].name + "--" + data.items[i].old+"</li>";
}
output+="</ul>";
document.getElementById("placeholder").innerHTML=output;
});
</script>
</body>
</html>
how i can change test.json with online URL ?
its doesn't show any result can you please help me

Develop Reference

JavaScript is the programming language of the Web.

show html table inside tabs - javascript

Related

How to set a index to button ID in Jquery

How To Disable certain days in the date picker

How to get specific json value to append to progressbar boostrap

Replace select tag with a check box to toggle between dark and light theme

Display Json Data From URL to HTML table using javascript

Categories

Resources