Adding Items to the List Using JQuery Mobile in Javascript - javascript

I am new to JQM as well as JavaScript. I am developing a mobile application that will contain a list that will be dynamically generated. I have picked up an example which generates normal list items as well as dynamically generated items fine. I am using the following example on this page: http://the-jquerymobile-tutorial.org/jquery-mobile-tutorial-CH11.php
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<ol id=list1 data-role=listview data-inset=true>
<li data-role=list-divider>Static list</li>
<li data-icon=delete>
<a href=#>Element 1.1</a>
</li>
<li data-icon=delete>
<a href=#>Element 1.2</a>
</li>
<li data-icon=delete>
<a href=#>Element 1.3</a>
</li>
</ol>
</div>
</div>
</body>
</html>
<script>
var html = "";
html += "<ol id=list2 data-role=listview data-inset=true>";
html += "<li data-role=list-divider>Dynamic list</li>";
html += "<li data-icon=delete>";
html += "<a href=#>Element 2.1</a>";
html += "</li>";
html += "<li data-icon=delete>";
html += "<a href=#>Element 2.2</a>";
html += "</li>";
html += "<li data-icon=delete>";
html += "<a href=#>Element 2.3</a>";
html += "</li>";
html += "</ol>";
$("#home div:jqmData(role=content)").append (html);
</script>
If I move the Script portion into a function, Say AddItem(){} and call that function to append the Dynamic items to the dropdown then the additional items are not properly formatted and appear as simple text.
Just to clarify, if I just modify the following row:
<li data-icon=delete>
Element 1.1
</li>
and shift the script into following functions it will start misbehaving:
function AddItem()
{
var html = "";
html += "<ol id=list2 data-role=listview data-inset=true>";
html += "<li data-role=list-divider>Dynamic list</li>";
html += "<li data-icon=delete>";
html += "<a href=#>Element 2.1</a>";
html += "</li>";
html += "<li data-icon=delete>";
html += "<a href=#>Element 2.2</a>";
html += "</li>";
html += "<li data-icon=delete>";
html += "<a href=#>Element 2.3</a>";
html += "</li>";
html += "</ol>";
$("#home div:jqmData(role=content)").append (html);
}
Can someone please help me out.
Thanks & Regards
AR
======EDIT=========
Thanks Omar! That was really helpful.
As I intend to dynamically create a multi-level list I have changed the function as below so that it recursively calls next level menu:
function CreateMenu(x)
{
x++;
var html = "";
html += "<ol id=list2 data-role=listview data-inset=true>";
html += "<li data-role=list-divider>Dynamic list</li>";
html += "<li data-icon=arrow-r>";
html += '<a onclick="CreateMenu(' + x + ')">Element ' + x + '.1</a>';
html += "</li>";
html += "<li data-icon=arrow-r>";
html += '<a onclick="CreateMenu(' + x + ')">Element ' + x + '.2</a>';
html += "</li>";
html += "<li data-icon=arrow-r>";
html += '<a onclick="CreateMenu(' + x + ')">Element ' + x + '.3</a>';
html += "</li>";
html += "</ol>";
$("[data-role=content]").empty();
$("[data-role=content]").append(html);
$("#list2").listview();
return;
}
Although it's working but is that how I should be doing? Or am I missing any of the normal conventions?
Also if you could please guide me to an easy to understand resource to learn JQuery Selectors and other stuff like this refresh() which a entry level person would require.
Thanks & Regards
Anjum

After appending the items dynamically to active page, you need to enhance (style) elements manually by calling widget's name .listview().
$("[data-role=content]").append(html);
$("#list2").listview();
When you add li elements to an existing listview, you need to refresh the widget.
$("#list2").append("<li>foo</li>").listview("refresh");
Demo

Related

Delete divs jquery

So i've got this :
<script>
{% block js %}
$('#add_file').on('click', function(){
html = '<div class="row">';
html += '<div class="col s6 input-field">';
html += '<input placeholder="Komentaras" name="file_description" type="text" />';
html += '</div>';
html += '<div class="col s2 top_20">';
html += '<a class="btn-floating red tooltipped delete" data-position="top" data-delay="20" data-tooltip="Trinti"><i class="material-icons" id="delete_files">delete</i></a>';
html += '</div>';
html += '</div>';
$('#files').append(html);
});
{% endblock %}
</script>
This block of code generates and adds extra divs depending on the click, the question is, how to delete every generated html one by one, by pressing that generated red btn?
$('a.delete').click(function() {
$(this).closest('.row').remove();
})
Note: do not use the same id id="delete_files" on the icon
Because it's dynamically added, you can't just use normal jQuery to target it. jQuery works with the DOM that's loaded - not anything after.
So you'd write a function that does:
$('#files').on('click', '.delete', function()
{
$(this).parents().eq(1).remove()
})
refs:
https://api.jquery.com/parents/
https://api.jquery.com/eq/
https://api.jquery.com/remove/

Generating id for each collapsible panel group dynamically using jquery

I Created a collapsible panel group dynamically with button click, my question is how can I generate id for each created panel.
Here is my jquery code:
var panel = '<div class="panel panel-default">';
panel += '<div class="panel-heading">';
panel += '<h4 class="panel-title">';
panel += '<span class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#1">' + $('#queuename').val();
panel += '</span>';
panel += '</h4>';
panel += '</div>';
panel += '<div id="1" class="panel-collapse collapse in">';
panel += '<div class="panel-body"></div>';
panel += '</div>';
panel += '</div>';
panel += '</div>';
var hash = 1;
$('#Panelgroup').find(".accordion-toggle").attr("href", "#"+ (++hash));
$('#Panelgroup').find(".panel-collapse").attr("id",hash);
$('#Panelgroup').append(panel);
You're resetting hash to 1 every time. You could make it into a global variable, and have a function that creates a new panel. Each time the function is called, you just increment the global variable by 1. This way hash won't be reset every time.
var hash = 1;
function createPanel() {
// code to create panel
hash++;
}
As I said in PO's comments, you are define your var hash every time the button clicked, in that case you will always get the same id.
there are more bugs in your code:
$('#Panelgroup').find(".accordion-toggle").attr("href", "#"+ (++hash));
$('#Panelgroup').find(".panel-collapse").attr("id",hash);
this above two line of code will find all class with those name and update which is not what you want to do, you want to update the one you just created.
Also this line:
panel += '<div id="1" class="panel-collapse collapse in">';
you don't need to specific the id as it will be handled by something like this:
panel += '<div class="panel-collapse collapse in" id="' + hash + '">';
$(document).ready(function() {
var hash = 1;
$('#btn').on('click', function() {
console.log('hash-->'+hash);
var panel = '<div class="panel panel-default">';
panel += '<div class="panel-heading">';
panel += '<h4 class="panel-title">';
panel += '<span class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#' + hash + '">' + $('#queuename').val();
panel += '</span>';
panel += '</h4>';
panel += '</div>';
panel += '<div class="panel-collapse collapse in" id="' + hash + '">';
panel += '<div class="panel-body"></div>';
panel += '</div>';
panel += '</div>';
panel += '</div>';
$('#Panelgroup').append(panel);
hash++;
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="Panelgroup">yep</div>
<button id="btn">
Create a panel
</button>

Trying to print a div retaining original css content of the div but button is not clicking

I am trying to print a div retaining original css content of the div and here is my attempt
JS :
function printDiv(id) {
var html = "";
$('link').each(function() { // find all <link tags that have
if ($(this).attr('rel').indexOf('stylesheet') !=-1) { // rel="stylesheet"
html += '<link rel="stylesheet" href="'+$(this).attr("href")+'" />';
}
});
html += '<body onload="window.focus(); window.print()">+$("#"+id).html()+'</body>';
var w = window.open("","print");
if (w) { w.document.write(html); w.document.close() }
}
$('#PrintinPopup').click(function(){ printDiv("#print"); });
Assuming that this is the div content.
HTML :
<div id="print">
<!--div content here-->
</div>
<input type="button" id="PrintinPopup" value="Print" />
On clicking the button, nothing happens as no pop up is shown on the window. Please what could be wrong?
You've a missing quote in :
html += '<body onload="window.focus(); window.print()">+$("#"+id).html()+'</body>';
______________________________________________________^^
It should be :
html += '<body onload="window.focus(); window.print()">'+$("#"+id).html()+'</body>';
_______________________________________________________^
Also remove the '#' since you already send it in the call printDiv("#print") :
html += '<body onload="window.focus(); window.print()">'+$("#"+id).html()+'</body>';
___________________________________________________________^^^^
Should be :
html += '<body onload="window.focus(); window.print()">'+$(id).html()+'</body>';
Hope this helps.

Append div tag dynamically inside an existing html structure

I need to append a div tag inside an existing html structure. The problem is I am not able to target the div after which I need to append the new div. I need to append my div inside the "auto-scroll" div. And the div that is appended is getting dynamically generated.
What is happening at present is the divs are getting appended inside the div with id "cases". But I want it to append inside the "auto-scroll" div.
Here is the html structure:
<div class="wrapper" id="cases">
<div class="row">
<div class="col-md-12 case-view-header">Header text</div>
</div>
<div class="auto-scroll">
</div>
</div>
My code:
$.each(caseRecords, function(index, value) {
var tb = $('#cases');
var autoscroll = $('.auto-scroll');
var html = "<div class='row data animate-row'>";
html = html + " <div class='col-xs-12 col-sm-2 col-md-2 col-lg-2 case-view-other height-fix'>" + this.c.CaseNumber + "</div>";
html = html + " <div class='col-xs-12 col-sm-4 col-md-4 col-lg-4 case-view-other height-fix'>" + this.c.Account.Name + "</div>";
html = html + " <div class='col-md-3 case-view-other height-fix'>" + this.cm.MilestoneType.Name + "</div>";
html = html + " <div class='col-xs-12 col-sm-3 col-md-3 col-lg-3 case-view-other height-fix align-center timer-case'> ";
html = html + " <div id='CountDownTimer" + index + "' data-timer='" + this.seconds + "'></div>";
html = html + " <div id='CountDownTimerText" + index + "' style='display: inline-block; position:absolute;'></div>";
html = html + " </div>";
html = html + "</div>";
tb.append(html);
setupCounter('CountDownTimer' + index, 'CountDownTimerText' + index, this.targetSeconds);
});
What is happening at present is the divs are getting appended inside the div with id "cases". But I want it to append inside the "auto-scroll" div.
That is because tb is object of #cases div and you are appending contents to it. you need to target the inner div with class auto-scroll:
var tb = $('#cases .auto-scroll');
var tb = $('.auto-scroll').append(html);
instead of
tb.append(html);
use
autoscroll.append(html);
because tb is #cases whereas autoscroll is the element which you required

Jquery append div after certain table row

I have a table defined:
<div id="display">
<div class="displayRow">
<img src="images/expand-arrow.gif" class="expandArrow" alt="expand">
<div class="displayElement">1</div>
<div class="displayElement">Standard</div>
<div class="displayElement">This is more information</div>
</div>
<div class="displayRow">
<img src="images/expand-arrow.gif" class="expandArrow" alt="expand">
<div class="displayElement">2</div>
<div class="displayElement">Special</div>
<div class="displayElement">This is more information</div>
</div>
</div>
When expandArrow is clicked, I want to display a table of additional data under that particular row. Can anyone help? Thanks!
I have tried this to no success:
$(".expandArrow").on("click", function (event) {
var info = '';
details += '<div><table class="detailTable">';
details += '<tr><td>DisplayElement1</td><td>' + json.Id + '</td></tr>';
details += '<tr><td>Display Element2</td><td>' + json.Info + '</td></tr>';
details += '</table></div>';
$(this).parent().append(details);
});
You have var info = '', where you should have var details = ...
Here's the fix:
var details = '<div><table class="detailTable">';
details += '<tr><td>DisplayElement1</td><td>' + json.Id + '</td></tr>';
details += '<tr><td>Display Element2</td><td>' + json.Info + '</td></tr>';
details += '</table></div>';
Also, make sure you wrap it in a ready function so the DOM loads before the javascript runs. Otherwise it binds the click before the DOM is loaded. http://api.jquery.com/ready/
That code snippit does not look too bad, but what is json.Id and json.Info. Are you sure they exist in that scope?
Have you tried running that script with firefox/firebug or chrome? They might indicate errors.
Changed json.Id and json.Info with 11, 22
<div id="display">
<div class="displayRow">
<img src="images/expand-arrow.gif" class="expandArrow" alt="expand" />
<div class="displayElement">1</div>
<div class="displayElement">Standard</div>
<div class="displayElement">This is more information</div>
</div>
<div class="displayRow">
<img src="images/expand-arrow.gif" class="expandArrow" alt="expand" />
<div class="displayElement">2</div>
<div class="displayElement">Special</div>
<div class="displayElement">This is more information</div>
</div>
</div​​​​​>
$('.expandArrow').on("click", function (event) {
var info = '';
var details = '<div><table class="detailTable">';
details += '<tr><td>DisplayElement1</td><td>' + 11 + '</td></tr>';
details += '<tr><td>Display Element2</td><td>' + 22 + '</td></tr>';
details += '</table></div>';
$(this).parent().append(details);
});​
$(".expandArrow").on("click", function(event) {
var details = '<div><table class="detailTable">';
details += '<tr><td>DisplayElement1</td><td>' + json.Id + '</td></tr>';
details += '<tr><td>Display Element2</td><td>' + json.Info + '</td></tr>';
details += '</table></div>';
$(details).appendTo($(this).parent());
});

Categories

Resources