Hello I have the following hml page.
I need to apply the jQuery ui Tabs plugin to the dynamically added elements.
how can I get that.
please note that when I add <li> elements as string that work fine but when i use document.createElement it dont work instead I get the same html structure when I inspect these elements
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http:/resources/demos/style.css">
</head>
<body>
<div id="tabs">
<ul>
<li>Sample0</li>
</ul>
<div id="tabs0">
<p>exemple1</p>
</div>
</div>
<input type="button" onclick="ReloadTabs()" value="rebuild"/>
<script>
$(function() {
$("#tabs").tabs();
});
//add tabs and recreate my tabs
function ReloadTabs() {
var liElement1 = document.createElement('li');
var anchElement1 = document.createElement('a');
$(anchElement1).attr("href", "tab1");
$(liElement1).append(anchElement1);
var liElement2 = document.createElement('li');
var anchElement2 = document.createElement('a');
$(anchElement2).attr("href", "tab2");
$(liElement2).append(anchElement2);
$("#tabs ul").append(liElement1);
$("#tabs ul").append(liElement2);
$("#tabs").append('<div id="tab1"><p>sample1</p></div><div id="tab2"><p>.</p><p>Sample2</p></div>');
$("#tabs").tabs("refresh");
}
</script>
</body>
</html>
you can try like this
change html for your button
<input type="button" id="rebuild" value="rebuild"/>
change your js code
$(function() {
$("#tabs").tabs();
$(document).on('click', '#rebuild', function() {
var ul = $('#tabs').find('ul');
var liElement1 = $('<li />');
$(liElement1).append('<a href="#tab1" >tab1</a>');
var liElement2 = $('<li />');
$(liElement2).append('<a href="#tab2" >tab2</a>');
$(ul).append(liElement1);
$(ul).append(liElement2);
$("#tabs").append('<div id="tab1"><p>sample1</p></div><div id="tab2"><p>.</p><p>Sample2</p></div>');
$("#tabs").tabs("refresh");
});
});
also check in jsfiddle
http://jsfiddle.net/0jp0xpmu/1/
I am not sure but i think it's helpful to you.
Related
I've a landingpage with dynamic html tags.
The Problem is, that i can't select directly the tag. Its a link.
the following code is the construct:
<div id="testid"><div><div>Button 1<div><div><div>
Every time someone clicks on the link (a-tag) I want to fire an event like the following code:
Button 1
the question: what is the Javascript code to add the onclick="dataLayer.push({'event': 'button1-click'}) attribute to the a tag.
I tried the following code:
var d = document.getElementById("testid").firstchild;
d.setAttribute("onclick", "dataLayer.push({'event': 'button1-click'})");
but it seems to the code is incorrect. The a tag is also not the first child; there are 2 divs between :(
Use querySelector and addEventListener:
document.addEventListener('DOMContentLoaded', function () {
var dataLayer = [];
var d = document.querySelector("#testid a[name=button1]");
d.addEventListener("click", function () {
dataLayer.push({ 'event': 'button1-click' });
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="testid">
<div>
<div>
Button 1
<div>
<div>
<div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="script.js">
</script>
</body>
</html>
There's a few things you were missing from your JS.
Using a more specific selector (#testid a[name=button1] vs. the firstchild of #testid, which was not accurate).
Wrapping all the code in a DOMContentLoaded listener. JS that depends on elements on a page needs to wait for the page to build first, that's what DOMContentLoaded is.
Check out my solution. Hope this helps.
var d = document.querySelector("#testid a");
var dataLayer = []
d.onclick = function () {
dataLayer.push({'event': 'button1-click'})
console.log(dataLayer.length)
}
<div id="testid"><div><div>Button 1<div><div><div>
I am attempting to set a className to my nav element and it isn't working as intended. When I manually add the class to my HTML it puts a border around the unordered list items and the buttons. When I use js to add it, it shows that the nav tag has the attribute in the inspector but it does not add the border so I do not believe it is working. What am I doing wrong? I have linked to the bootstrap cdn and jquery cdn in the file.
HTML
<!doctype html>
<html lang="en-us">
<head>
<title>Exercise 5.9</title>
<meta charset="UTF-8">
<meta equiv="X-UA-Compatible" content="IE=Edge">
</head>
<body id="content">
<!-- Latest compiled and minified CSS -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<nav>
<div>
<ul>
<li>Home</li>
<li>Our Policies</li>
<li>How you can help</li>
<li>What we have accomplished</li>
<button type="button">Donate $10.00</button>
<button type="button">Donate $50.00</button>
<button type="button">Donate $100.00</button>
</ul>
</div>
</nav>
<p>If you would to offer financial support, please choose the buttons above</p>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="exercise-5.9.js"></script>
</body>
</html>
JS
var nav = document.getElementsByTagName("nav");
nav.className = "navbar navbar-default";
console.log(nav);
Instead of using .className = try just setting the attribute of class to whatever you want. The main reason why it's not working, however, is because .getElementsByTagName() returns an array (nodeList) so you need to make sure when you set the class, it's properly indexed.
Using .setAttribute("atr", "value")
var button = document.getElementById("btnGo");
button.onclick = function () {
var nav = document.getElementsByTagName("nav");
for (var i = 0; i < nav.length; i++) {
nav[i].setAttribute("class", "myClassName");
}
};
Using .className
var button = document.getElementById("btnGo");
button.onclick = function () {
var nav = document.getElementsByTagName("nav");
for (var i = 0; i < nav.length; i++) {
nav[i].className = "myClass";
}
};
getElementsByTagName() return an array, you should write document.getElementsByTagName('nav')[0];
I am trying to create tooltips with the value of the tooltip pulled from the id attribute of each element. I have the first one firing off but I cannot get how to make the function continue to the next element matching the $("ul li)" in the test case below.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello SO</title>
</head>
<body>
<ul>
<li id="label-1">1</li>
<li id="label-2">2</li>
<li id="label-3">3</li>
<li id="label-4">4</li>
</ul>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function(){
var LabelData = $("ul li").attr("id");
var LabelContainer = $("li");
LabelContainer.html('Label Name:'+LabelData);
});
</script>
</body>
</html>
[And... heres the fiddle]
Try this:
$(function(){
$("ul li").each(function(){
var LabelData = $(this).attr("id");
var LabelContainer = $(this);
LabelContainer.html('Label Name:'+LabelData);
});
});
You can achieve your goal using following code snippet:
$(function(){
$("ul li").each(function(){
$(this).html($(this).attr('id'));
});
Here is DEMO.
I wanted to dynamically append a Table/List to HTML page. My code as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Lead Manager</title>
<link rel="stylesheet" href="themes/Bootstrap.css">
<link rel="stylesheet" href="themes/jquery.mobile.structure-1.2.0.min.css" />
<script src="themes/jquery-1.8.2.min.js"></script>
<script src="themes/jquery.mobile-1.2.0.min.js"></script>
</head>
<body id="body" name="body">
<div data-role="page" data-theme="a">
<div data-role="header" data-position="inline">
<h1>Lead Manager</h1>
</div>
<div data-role="content" data-theme="a">
<h2>List of Leads</h2>
</div>
</div>
</body>
<script>
$(document).ready(function(e) {
//var data = Android.getLeads();
var data = [{"status":"1","name":"1","campaign":"1","date":"1"},{"status":"2","name":"2","campaign":"2","date":"2"}];
var items = [];
var date;
var name;
var status;
//eval(" var x = " + data + " ; ");
//var y = JSON.stringify(x);
$.each(data, function(key,val){
items.push('<tr><td>' + val.date + '</tr></td>');
});
var text = $('<table/>', { html: items.join('')});
$('<table/>', {
html: items.join('')
}).appendTo('body');
});
</script>
</html>
The Items[] variable is getting filled with the tr and td values. However, the appendTo, doesnt work. The JSON as you can see doesnt require eval as its already in the format required.
Please can you help?
The issue was mainly because of the jquery.mobile script as it wasnt allowing dynamic addition of html code.
I have dynamically created textbox in my javascript, the problem is in dynamically created textbox i need to use datepicker as i am new to javascript
kindly help
thanks
row_no4=0;
var index=1;
function addRow_otherschsp(tbl4,row5){
var textbox3a = '<input type=\"text\" size = \"10\" maxlength= \"10\" name=\"othrFA3'+tick+'\" id=\"othrFA3'+tick+'\" placeholder=\"dd/mm/yyyy\" >';
var newRow = tbl4.insertRow(row_no4);
var newCell = newRow.insertCell(0);
newCell.innerHTML = label3;
var newCell = newRow.insertCell(1);
newCell.innerHTML = "From "+textbox3a+ "To &`enter code here`nbsp;"+ textbox3b;
row_no4++;
}
$(function (){
$('body').on('focus',".mydatepickers", function(){
$(this).datepicker();
});
});
Use JQUERY
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
More Details here
You can use this jquery http://jqueryui.com/datepicker/ it will be simple
You must download and include the jquery datepicker plugin in your page.
Then, include a class to the dynamically generated text box like this:
function addRow_otherschsp(tbl4,row5){
var textbox3a = '<input type=\"text\" size = \"10\" maxlength= \"10\" name=\"othrFA3'+tick+'\" id=\"othrFA3'+tick+'\" placeholder=\"dd/mm/yyyy\"
class=\"mydatepickers\">';
.....}
Now in your document.ready() add the following code:
<script>
$(document).ready(function() {
$( ".mydatepickers" ).datepicker();
});
</script>
you need to add necessary jQuery files when working with the datepicker control.
Add all the dependencies of datepicker as mentioned in the jQuery Datepicker documentation.
After that wind up your textbox with datepicker method of jQuery like this:
$(function(){
$('input[name="othrFA3*"]').datepicker();
});
or else you can add id attribute to your dynamically generated input element
say the id as: datepicker
now your javascript becomes
$(function(){
$(#datepicker').datepicker();
});