When I try to add a data-role div-element dynamically in jquery it fails - it shows up but its not formatted any longer. In the html-file you can see where I put the created div-element.
What is wrong and how could I make it work?
htlm-file
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5 /jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script>
<script src="my_js.js"></script>
</head>
<body>
<!-- jquery mobile-pages does not work here-->
<div id="mydiv">
</div>
<!-- this works just fine -->
<div data-role="collapsible">
<h4>B</h4>
<ul data-role="listview">
<li>Billy</li>
<li>Bob</li>
</ul>
</div>
</body>
</html>
jquery
var string = "" +
"<div data-role='collapsible'>" +
"<h4>B</h4>" +
"<ul data-role='listview'>" +
"<li><a href='#'>Billy</a></li>" +
"<li><a href='#'>Bob</a></li>" +
"</ul>" +
"</div>";
console.log(string);
$(string).appendTo("#mydiv");
the upper part of the image is when it's created dynamically, the lower part is what it looks like if I just put the code in the html-file. To the right you can see the string which i append to the div
You have to bind collapsible element when you add it dynamically.
Like :
$(string).appendTo("#mydiv");
/** Add this line and try **/
$("data-role='collapsible'").collapsible();
Ref Link : https://api.jquerymobile.com/collapsible/
Related
I want to create column cards (like buttons).
in that cards, description should appear in its top and when it is clicked, separate link should be opened in new page.
every cards has its own description and link.it should not be hard coded by directly assigning the desc and link to it.and every function and elements should be assigned in javascript file not html.
the desc and link should given in an array like
Table={{"desc":"apple","link":"www.google.com"},{"desc":"banana","link":"www.youtube.com"}}
I tried this code and I'm getting only one card with last description and link
for(i=0;i<10;i++)
{
var temp=my.Table[i].link;
$('.demo').html('<div class="column"><p id="i"></p></div>');
document.getElementById(i).innerHTML ='' + my.Table[i].desc + '';
}
You can iterate the table object, after append what you should use.
HTML code:
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="script.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
</head>
<body>
<div class="demo">
</div>
</body>
</html>
And the jquery code looks like the following:
$(document).ready(function(){
const table=[{"desc":"apple","link":"www.google.com"},{"desc":"banana","link":"www.youtube.com"}];
table.forEach((v, i)=>{
$('.demo').append('<div class="column"><p id="temp_'+i+'">' + v.desc + '</p></div>');
});
});
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.
I have parsed the json data in TableView. The code for table view is given below-
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css">
</head>
<body>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>Cars</h1>
Back
</div>
<div data-role="main" class="ui-content" style="margin-top:-20px;">
<h2></h2>
<ul data-role="listview" id="listid">
</ul>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript">
$(function()
{
$.getJSON("json/details.json",function(data)
{
var html="";
for(var d in data.cars)
{
for(var i in data.cars[d])
{
html+= "<li><a href=''>"+data.cars[d][i].model+" <p>"+data.cars[d][i].doors+"</p></a></li>";
}
}
$("#listid").append(html);
})
.done(function()
{
$("#listid").listview().listview("refresh");
});
});
</script>
</div>
</body>
</html>
Now, When i click on first row, it should separate the Indica and Four Doors in Two test View, Like this-
Please give me suggestion. Thanks in Advance !!
html+= "<li><a href=''><span>"+data.cars[d][i].model+" </span><p>"+data.cars[d][i].doors+"</p></a></li>";
$('li a').on('click', function(event){
$('#model').text($(this).children('span').text());
$('#door').text($(this).children('p').text());
})
You could pass the text in a function on onClick.
Example:
<a onClick="cars(carName, carDoors)"/>
function cars(name, doors){
$('#carView').html(carName); //set the text for the car view
$('#doorView').html(carDoors);
}
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.
When I'm dynamically inserting the following code, I can force the page to refresh so it applies the jQuery mobile formatting.
For some reason its doesn't allow me to set the button formatting. Its really odd, because it allows the list to be dynamically inserted and the button, but i cant seem to format the button except for the name.
It can be manipulated via CSS but I want to use the jQuery API.
$('#cartList').append('<li>'
+ '<h3>' + game.Title+'</h3>'
+ '<p>' + '£' + game.Price + '</p>'
+ 'Remove'
+ '<h3 class="ui-li-aside">' + game.Format + '</h3>'
+ '</li>').trigger("create");
The jQuery Mobile Doc mentions that if new list items are added to the list or removed from it, the dividers are not automatically updated and you should call refresh() on the listview to redraw the autodividers.
Try to add: $('#cartList').listview('refresh'); after you have populated the list.
Example:
<!doctype html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("#add-li-button").click(function(){
$('#listList').append("<li data-role=\"collapsible\"> <h3>New List</h3> <div data-role=\"fieldcontain\"></div> </li>").listview("refresh");
});
});
</script>
</head>
<body>
<div data-role="page" id="page">
<ul id="listList" data-role="listview">
</ul>
<input type="button" id="add-li-button" value="add a checkbox to list1" />
</div>
</body>
</html>