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>
Related
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/
As per below, I am calling an endpoint when the page is loaded to get some data and append it to a div. On localhost it works perfectly, but on the server it only works intermittently... When I look in dev tools, the network tab suggests the $.post works and returns the data... but the append doesn't.
I wondered if it was to do with the $.post completing before the html was rendered, so there was no div to append to... but not sure how to verify or fix this. I've tried moving the script in the html page to just before the close-body tag to ensure the html is rendered first. I've also made sure i define the functions in the JS before the $(Document).ready is called.
To see it not working LIVE... www.everythingproduct.com - If you try clicking on the blogs page multiple times, you'll see sometimes it hangs...
$(document).ready(function() {
var page = 'blog-articles';
$('#main-body-content').load('site/pages/' + page + '.php');
loadArticlesData();
$.post('endpoint/sendEvent.php', {
userID: '<?php echo $uid; ?>',
eventType: "pageView",
currentURL: window.location.href,
referer: '<?php echo $referer; ?>'
});
});
function loadArticlesData() {
$('#cover').show();
$.post('endpoint/getArticles.php', {
type: "All"
}, function(result) {
var data = result;
$.each(data, function(i, l) {
$('#articles').append(
'<a target="_blank" href="' + l.link + '">' +
'<div value="' + l.id + '" class="article">' +
'<div class="img">' +
'<img src="img/' + l.img + '" height="50px">' +
'</div>' +
'<div class="article-content">' +
'<h2>' + l.title + '</h2>' +
'<span class="description-text">' + l.description + '... <span style="font-style: italic; color: #888;">See more</span></span>' +
'</div>' +
'</div>' +
'</a>'
);
});
$('#cover').fadeOut("slow");
});
$.post('endpoint/getTags.php', {}, function(result) {
var data = result;
$.each(data, function(i, l) {
$('#tags').append(
'<span value="' + l + '" class="tag-word">' + l + '</span> '
);
});
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cover"></div>
<div class="body">
<div class="body-container">
<div class="body-left">
<div style="text-align: left; padding-left: 20px;">
<h1 style="font-weight: normal;">Blog Article Database</h1>
</div>
<div id="articles" class="articles"></div>
</div>
<div class="body-right">
<div class="filter-panel">
<h3>Browse (A-Z)</h3>
<div id="tags" class="tags">
<span style="background: #fff; color: #0c7bce;" value="ALL" class="tag-word">ALL</span>
</div>
</div>
</div>
</div>
</div>
You are interfering with the asynchronous requests. Only do one at a time and continue in the success
Try this:
$('#main-body-content').load('site/pages/' + page + '.php', loadArticlesData);
to wait until the first request is done - then move
$.post('endpoint/getTags.php', {}...
into the end of the success of the second request
I have a question about the dynamic add text area with auto expand. I have research on text area auto expand and I success. It can be using in the text area that is on load but how do I also make it on dynamic add text area also can be auto expand. I have used keyup event but it didnt success
Here is used for test Testing Here
//here is my javascript
$(document).ready(function () {
//dynamic create mutiple inputbox
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 0; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
//$(wrapper).append('<div><input type="text" name="mytext[]"/>Remove</div>'); //add input box
$(wrapper).append(
'<div class="panel panel-default product_wrapper">'+
'<div class="panel-heading">'+
'<h4 class="panel-title">'+
'<a data-toggle="collapse" href="#product'+x+'">Product'+x+'</a>'+
'</h4>'+
'</div>' +
'<div id="product'+x+'" class="panel-collapse collapse in">'+
'<div class="panel-group">'+
'<div class="panel panel-default">'+
'<div class="col-lg-12">' +
'<div class="col-lg-3" >' +
'<label>Product</label>' +
'<textarea type="text" class="product_textarea" name="Product[]"></textarea>' +
'</div>' +
'<div class="col-lg-6">' +
'<label>Description</label>' +
'<textarea rows="5" name="ProductDescription[]"></textarea>' +
'</div>' +
'<div class="col-lg-2 form-group">' +
'<label>Price</label>' +
'<input type="text" class="price_tag form-control" name="Price[]"/>' +
'</div>' +
'</div>'+
'</div>'+
'</div>'+
'</div>'+
'cancel' +
'</div>'
);
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('.product_wrapper').remove();
calculateTotal();
x--;
})
$('textarea').each(function () {
this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
}).on('input', function () {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
});
});
//here is my view
<h2>Product List</h2>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Product List</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in input_fields_wrap">
<div class="panel-group">
<div class="panel panel-default">
</div>
</div>
</div>
</div>
</div>
<!--<div class="input_fields_wrap">
</div>-->
<button class="add_field_button btn btn-primary pull-right">Add More Fields</button>
<h1>
Testing here
</h1>
<textarea></textarea>
When you call $('textarea'), it creates a JQuery object that represents all <textarea> elements that are on the page at that time. Since you are dynamically adding the <textarea> elements at a later time, they do not get included when you call:
$('textarea').each(function () {
this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
}).on('input', function () {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
});
You would have to call that code on them after they are added to the page. But you don't want to call it again for <textarea> elements that have already been added. You could do this by limiting it to the last div appended to the wrapper:
$(wrapper).children(':last').find('textarea').each(function () {
this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
}).on('input', function () {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
});
Of course, you could use event delegation for the input-event handler, just like you did for the click-event handler for the .remove_field links.
You can add this after append new textarea to wrapper:
$(wrapper).find("textarea").each(function () {
this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
}).on('input', function () {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
});
You can optimize your code to be shorter in the future.
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
I'm having problems with my popup after ajax is success, it's not sizing to the center, but on the second time it resizes(because it's already loaded). I tried to follow this example, but have errors(not popping up). From my code, is it better to do dynamic popup or there is any method that can do like beforepageshow, or load to show it in the center? For exemple below:
//popup
<div data-role="popup" id="popupFood" data-theme="a" class="ui-corner-all">
<div style="padding:10px 20px;">
<h3>Preferences</h3>
<div class="ui-block-a" id="foood" style="width:50%"></div>
<button type="button" onclick="someaction()" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Search</button>
</div>
</div>
//ajax success
function food(data, textStatus){
$('#foood').empty();
$.each(data, function (i, x) {
var foodTest = '<label for="grid-checkbox-' + x.id + '">' + x.description+ '</label>' +
'<input type="checkbox" name="grid-checkbox-' + x.id + '" id="grid-checkbox-' + x.id + '" value="' + x.id + '" data-mini="true" >';
$('#foood').append(foodTest);
});
$('#foood').enhanceWithin();
}
You can center popup by either
Opening it programmatically after successful Ajax. Note that you need to remove data-rel="popup" and set href to href="#" on Anchor tag.
$("#popupFood").popup("open");
Reposition it once it's open by listening to popupafteropen event and then override position using reposition option.
$("#popupFood").on("popupafteropen", function () {
$(this).popup("reposition", {
positionTo: "window"
});
});
Demo