Delete divs jquery - javascript

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/

Related

jquery ajax and after is duplicating the results

I've got a load more button, which when clicked it displays the next 4 items, by doing an ajax call.
However, sometimes (for no apparent reason), the content is duplicated and returned twice, even though when I alert the results, there's only 1. This also happens when you double click the button.
Any help would be appreciated!
Here's my code:
/* load more */
$('.load-more').on('click',function(e){
e.preventDefault();
e.stopPropagation();
$('.pagination-holder').fadeOut(250,function(){
$(this).remove();
});
var start = $(this).data('start'),
limit = $(this).data('limit'),
page = $(this).data('page'),
type = $(this).attr('href');
$.ajax({
url:'/index.php?route=news/news/getnext&start=4&limit=4&page=2',
method:'GET',
data:{start:start,limit:limit,page:page},
dataType:'json'
}).done(function(data){
var html = '';
html +='<div class="row next" style="display:none">';
$.each(data.newss,function(i,news){
html +='<div class="col-md-3 pt30">';
html +=' <div class="image mb30"><img src="'+news.image+'" alt="'+news.title+'" class="responsive" /></div>';
html +=' <div class="text">';
html +=' <h3>'+news.title+'</h3>';
html +=' <p class="date mb5">'+news.date+'</p>';
html +=' <p class="mb30">'+news.description+'</p>';
html +=' Read';
html +=' </div>';
html +='</div>';
if ((i+1) % 4 === 0) {
html +='<div class="clear"></div>';
}
});
html +='</div>';
//alert(html); /* when I alert this, it displays one row, as it should do, but when i don't alert this, it can append duplicates */
$('#'+type+'-list').find('.row').after(html).ready(function(){
$('.row.next').fadeIn(500).removeClass('next');
});
});
});
I've seen similar questions throughout stackoverflow and I've tried to solve the issue, but I can't figure it out.
Hey you can use my same answer on it:
https://stackoverflow.com/questions/45788916/jquery-isnt-getting-dynamically-updated-data-from-button

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>

How to put a button active by default?

thanks in advance.
The question is:
I have 2 buttons that shows the content of the div when the user click on it.
The content of the div are in a function that shows the content when the users click on the button (onclick).
But when the page loads just appear the two buttons without any content, is there any way to 'put' one of these buttons as active by default?
I tried with this:
Html:
<div class="diferencias col-md-12 col-lg-12">
<div class="diferencias col-md-6 col-lg-6"><input type="button" value="Web" onClick="fashioncatweb();">
</div>
<div class="diferencias col-md-6 col-lg-6"> <input type="button" value="Logo" onClick="fashioncatlogo();">
</div>
</div>
<div class="row">
<div id="container">
<div id="content"></div>
</div>
</div>
JS:
function fashioncatweb()
{
var text = "<p>text";
var img = "images/.....";
var content = "<div class=\"col-md-7\"><div class=img><img class=img-responsive src=\"" + img + "\" alt=\"\" /></div></div>"
+ "<div class=\"col-md-5\"><div class=pre-scrollable id=\"fashion\">" + text + "</div></div>";
appendToContainer(content);
}
function fashioncatlogo()
{
var text = "<p>text";
var img = "images/....png";
var content = "<div class=\"col-md-7\"><div class=img><img class=img-responsive src=\"" + img + "\" alt=\"logo\" /></div></div>"
+ "<div class=\"col-md-5\"><div class=pre-scrollable id=\"logo\">" + text + "</div></div>";
appendToContainer(content);
}
$(document).ready(function () {
piramidalweb();
});
But it just works for one section and I have like 15 different sections.
Thanks again!!
You should have a function that is called on the click of the buttons:
Using pure Javascript:
<input type="button" value="Button1" id="btn1" onclick="showContent(this.id)" />
function showContent(id) {
if(id === "btn1") {
// show the content
}
}
Then call immediately at the base of the page within script tags:
showContent("btn1");
That will load the content immediately.
To improve this you would execute this function onload, or in a ready function within jQuery, but hopefully you'll be able to take it from there.

Execution order inside for loop - jQuery

I am generating a dynamic div using a for loop and I was surprised by the output. The code looks as follows:
for(continent in CityList)
{
$('<div id="'+continent+'Display"><div class="row top-buffer">').appendTo('#Display');
currentcontinent = CityList[continent];
for(city in currentcontinent) {
$('<div class="col-md-4"><div class="thumbnail"><div class="caption"><h3>'+CityList[continent][city]['EngName']+'</h3><a data-name="'+city+'" href="#'+city+'"> <img src="'+CityList[continent][city]['src']+'" style="min-height:250px;height:250px;"/></a></div></div></div>').appendTo('#Display');
}
$('</div></div>').appendTo('#Display');
}
The output html using
alert($("div#Display").clone().html());
is:
<div id="AmericaDisplay"><div class="row top-buffer"></div></div><div class="col-md-4"><div class="thumbnail"><div class="caption"><h3>Boston</h3><a data-name="Boston" href="#Boston"> <img src="undefined" style="min-height:250px;height:250px;"></a></div></div></div>...
As you can see there are two </div></div> after the first append, but I expect those to be at the end of the html since I call them last in the for loop. Is there any reason for the loop to behave like this?
when you parse a tag with jQuery it creates a DOM object, which includes closing tags as well. If you want $('<div class="col-md-4"><div class="thumbnail">... to go inside $('<div id="'+continent+'Display"><div class="row top-buffer">') you need to append it to '#' + continent + 'Display' like so:
$('<div class="col-md-4"><div class="thumbnail"><div class="caption"><h3>'+CityList[continent][city]['EngName']+'</h3><a data-name="'+city+'" href="#'+city+'"> <img src="'+CityList[continent][city]['src']+'" style="min-height:250px;height:250px;"/></a></div></div></div>').appendTo('#' + continent + 'Display');
also, get rid of $('</div></div>').appendTo('#Display');, it serves no purpose when parsing elements with jQuery.
The code $('<div id="Display"><div class="row top-buffer">') will create jquery object so if you append it, the html will look like this
<div id="Display">
<div class="row top-buffer">
</div>
</div>
if you want to append the </div></div> in the end then save all the html in a variable and append it in the end
for(continent in CityList){
var data = '<div id="'+continent+'Display"><div class="row top-buffer">';
currentcontinent = CityList[continent];
for(city in currentcontinent) {
data += '<div class="col-md-4"><div class="thumbnail"><div class="caption"><h3>'+CityList[continent][city]['EngName']+'</h3><a data-name="'+city+'" href="#'+city+'"> <img src="'+CityList[continent][city]['src']+'" style="min-height:250px;height:250px;"/></a></div></div></div>'
}
data += '</div></div>';
$(data).appendTo('#Display'); // or ('#Display').append(data);
}

Adding Items to the List Using JQuery Mobile in 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

Categories

Resources