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.
Related
I have a jquery function that on a click event empties a div, gets some json, and then appends to that cleared div. However, the check boxes I am trying to append to said div are not appearing. Here is my code:
$(function() {
$("#nwCol").click(function() {
$('#adDiv').empty();
$.getJSON('/_adv_detect_su', function(data) {
$(data.advanced).each(function(index, value) {
if (value.present === 'yes') {
$('#adDiv').append("<input name='aoCB' type='checkbox' checked='checked'>" + value.name + "</input>");
} else {
$('#adDiv').append("<input name='aoCB' type='checkbox'>" + value.name + "</input>");
}
});
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-7 text-center">
<form id="advDet">
<div id="adDiv"></div>
<div id="saveao"> <button id="svAoBtn" type="button" class="btn btn-primary center-block">Save</button> </div>
</form>
</div>
I have this working when not clearing the div, and using the .after function. However, this is not ideal.
If you are using any AD BLOCK Your div ID, starting with 'ad' will get #header_ads style from user agent browser, that set "display: none", so it appears to not work, even if it is working. As you can see here on this print screen http://storage1.static.itmages.com/i/17/0616/h_1497628218_1896684_0db84ac526.png
So I changed your div id to anotherID now it's working
Run the snippet below.
$(function() {
$("#nwCol").click(function() {
var anotherDiv = $('#anotherID');
anotherDiv.empty();
var data = {
advanced: [{present: 'yes', name: 'test1'}, {present: 'no', name: 'test2'}]
};
$(data.advanced).each(function(index, value) {
console.log(value);
if (value.present === 'yes') {
anotherDiv.append("<input name='aoCB' type='checkbox' checked='checked'>" + value.name + "</input>");
} else {
anotherDiv.append("<input name='aoCB' type='checkbox'>" + value.name + "</input>");
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-7 text-center">
<form id="advDet">
<div id="anotherID"></div>
<div id="saveao">
<button id="svAoBtn" type="button" class="btn btn-primary center-block">Save</button>
</div>
</form>
Test Click
</div>
Please see the snippet (looks like your button id selector was incorrect):
$(function() {
$("#svAoBtn").click(function() {
$('#adDiv').empty();
$.getJSON('https://api.myjson.com/bins/16qosb', function(data) {
$(data.advanced).each(function(index, value) {
var checkedInput = "";
if (value.present === 'yes') {
checkedInput = "checked='checked'";
}
$('#adDiv').append("<input name='aoCB' type='checkbox'" + checkedInput + ">" + value.name + "</input>");
});
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-7 text-center">
<form id="advDet">
<div id="adDiv"></div>
<div id="saveao"> <button id="svAoBtn" type="button" class="btn btn-primary center-block">Save</button> </div>
</form>
</div>
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>
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.
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