When I run the function in the browser, "[object Object]" shows up instead of the text stored inside the variable $new_comment. I wish to append user inputs.
HTML :
<li class="list-group-item">"User comments"</li>
<div class="comments">
<ul class="list-group"></ul>
</div>
Js :
var addCommentFromInputBox = function() {
var $new_comment;
if ($(".input-group input").val() !== "") {
$new_comment = $("<p>").text($(".input-group input").val());
$new_comment.hide();
$(".list-group").append('<li class="list-group-item">' + ($new_comment) + '</li>');
$new_comment.fadeIn();
$(".input-group input").val("");
}
};
Everything runs fine when I change the code to:
$(".list-group").append($new_comment);
But I wish to style it with Bootstrap.
You can use it something like this $(".list-group").append($('<li class="list-group-item"></li>').html($new_comment));
Here this the full demo code
addCommentFromInputBox = function() {
var $new_comment;
if ($(".input-group input").val() !== "") {
$new_comment = $("<p>").text($(".input-group input").val());
$new_comment.hide();
$(".list-group").append($('<li class="list-group-item"></li>').html($new_comment));
$new_comment.fadeIn();
$(".input-group input").val("");
}
}
addCommentFromInputBox();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comments">
<ul class="list-group">
</ul>
</div>
var listGroupItem = $('<li class="list-group-item"></li>').html($new_comment)
$(".list-group").append($listGroupItem);
Related
My code is as shown below:
xyz.html
<div class="q-filters" sticky offset="25">
<a style="text-decoration:none;margin-bottom:10px;color:black;" href="" ng-click="gotoDiv(menu.name)" style="margin-bottom:10px;" ng-repeat="menu in menuItems" class='q-filter q-recommended'>{{menu.name}}</a>
</div>
<div class="q-menu" ng-repeat="menu in menuItems" ng-if="menu.isVisible">
<div id="anchor{{menu.name}}" class="q-head anchor"><span>{{menu.name}}</span></div>
<div class="q-list" ng-repeat="item in menu.items" ng-class="{'active':item.addClicked}">
</div>
xyz.js
$scope.gotoDiv = function(x) {
var newHash = 'anchor' + x;
if ($location.hash() !== newHash) {
$location.hash('anchor' + x);
} else {
$anchorScroll();
}
};
I have followed the code given here
But somehow it does not land to the div perfectly. For more details the demo is shown here
Now, how to make it work?
How can I query the entire HTML page for a specific attribute and either remove it or replace the value?
I was thinking something like this (translate being the attribute name):
$('[translate]').remove();
$('[translate]').value('replace the value of the attribute');
Here is an Example:- You can use nativeElement & querySelector` for DOM Manipulation.
app.component.html
<div class="tabs tabsMenu" #tabs>
abc
</div>
<div id="tab-1" class="tab-content rmpm" role="tabpanel">abc</div>
<div id="tab-2" class="tab-content rmpm" role="tabpanel">abc</div>
app.component.ts
#ViewChild('tabs') public tabs;
constructor(private el: ElementRef) {
this.el = el;
}
let tabsEl = this.tabs.nativeElement;
this.removeActive(tabsEl.querySelectorAll('.active'));
this.setActive([
tabsEl.querySelector(`#${id}`)
]);
setActive(elems) {
elems.forEach((el) => {
el.className += ' active';
});
}
removeActive(elems) {
elems.forEach((el) => {
el.className = el.className.replace(' active', '');
});
$(document).ready(function() {
$('a').click(function(v){
var changeVal = "other_val"
$("[translate]").attr("translate",changeVal)
$("[translate]").html(changeVal)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div translate="some_val">some_val
</div>
<div translate="some_val">some_val
</div>
Change attr
Hi! This snippet may be helpful for you.
I have some tabs' info rendered with handlebars and here is my HTML:
<ul class="nav nav-tabs" id="tabsId">
<script id="tabs-template" type="text/x-handlebars-template">
{{#each Tabs}}
<li data-tab-content={{Id}}>{{Name}}</li>
{{/each}}
</script>
</ul>
<div id="tabsContentId">
<script id="tabs-content-template" type="text/x-handlebars-template">
{{#each Tabs}}
<div class="tab-content" data-tab-content="{{Id}}">{{Content}}</div>
{{/each}}
</script>
</div>
And now I'm writing a function that will fill my future form when I double click on any tab. I've only managed how to get id and I don't understand how to get name and content values. I've tried to use jQuery .text() function, but I've failed. Here is my function:
$(function() {
$("#tabsId").on("dblclick", "li", function(evt) {
evt.preventDefault();
var id = $(this).data("tabContent");
//var name = ?
//var content = ?
$('#inputIndex').val(id);
//$('#inputTitle').val(name);
//$('#textareaContent').val(content);
});
});
var id = $(this).data("tab-content");
var name = $(this).text();
// Get the content from the nth element in the other list (using the index of the LI clicked)
var content = $('#tabs-content-template .tab-content').eq($(this).index()).text();
Note: this only works as the same collection is used for both the LIs and the tab DIVs. Otherwise you will need to find it via the data-tab-content attribute.
Use $(this).text() then you can get the name in the dbclicked li.
Use $('#tabsContentId div[data-tab-content="' + id + '"]'); so you can get the target div which has an attribute data-tab-content and value is the id you previously retrieved.
$(function() {
$("#tabsId").on("dblclick", "li", function(evt) {
evt.preventDefault();
var id = $(this).data("tabContent");
var name = $(this).text();
alert("Name is :" + name);
var targetDiv = $('div.tab-content[data-tab-content="' + id + '"]');
var content = targetDiv.text();
alert("Content is :" +content);
$('#inputIndex').val(id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs" id="tabsId">
<li data-tab-content="t1">I'm Name</li>
</ul>
<div id="tabsContentId">
<div class="tab-content" data-tab-content="t1">Here's content</div>
</div>
Not exactly sure what you're after, but this would get the inner HTML of the first <a> element with href="#" inside the clicked element:
var name = $(this).find('a[href="#"]').first().html();
I'm trying to submit multiple forms at once when a single button is clicked. These forms are all generated automatically. They all have different action urls but the same id's. That's how the system (SaaS) works.
The problem is that I'm having issues getting the correct selectbox values and then send the forms. I'm not getting any error but I think it has something to do with identifiers. I'm working on this one for a few days now and I can't figure this one out.
So for every set/product there's some empty html, like so:
HTML
<div id="sets" class="clearfix">
// first set
<div class="set" data-handle="url" >
<div class="right">
<div class="products">
<div class="close"></div>
<div class="product">
/// in here comes the product data from json ///
</div>
<div class="set-bestellen">
<div class="link">
<a title="add" class="trigger"><span>add to cart</span></a>
</div>
</div>
</div><!-- .products -->
</div><!-- .right -->
<div class="image"></div>
</div>
// second set
<div class="set" data-handle="url" >
<div class="right">
<div class="products">
<div class="close"></div>
<div class="product">
/// in here comes the product data from json ///
</div>
<div class="set-bestellen">
<div class="link">
<a title="add" class="trigger"><span>add to cart</span></a>
</div>
</div>
</div><!-- .products -->
</div><!-- .right -->
<div class="image"></div>
</div>
// etc... can be as much as 10 sets
</div><!-- .#sets -->
Inside the above HTML .product there comes an automatically generated form. This form is generated like so:
Jquery
$('#sets .set').each( function(){
$(this).click(function(){
if($(this).hasClass('open')){
$('.close').click(function(){
$('#sets .product').fadeOut();
$('.products',this).animate({
width: 'toggle'},500, function() {
.......
});
});
} else {
.....
}
var url = $(this).data('handle')+'?format=json';
$.getJSON(url, function (data){
var product = data.product;
var $container = $('.products .product');
var productsHtml = [];
var fullurl = 'http://www.shop.com';
var variants = '';
$.each(product.related, function(index, rel){
var url = ''+fullurl+''+rel.url+'?format=json';
...... etc ...
var productHtml = '<div id="'+rel.id+'" class="p"><form method="post" id="product_configure_form" action="http://www.shop.com/cart/add/'+rel.vid+'/" name="formsub"><div class="foto"><img class="rollover" src="'+image+'" hover="'+image2+'" alt="'+rel.fulltitle+'"/></div><div class="prijs" data-price="'+rel.price.price_incl+'">€'+rel.price.price_incl+'</div><div class="varianten_'+rel.id+'">';
$.getJSON(url, function (data){
var rel = data.product;
var wqsSelectVariants = $('<div class="product-configure-variants tui" />');
var select = $('<select id="product_configure_variants"/>');
$.each(rel.variants, function (index, variant){
select.append('<option value=' + variant.id + '>' + variant.title + '</option>');
wqsSelectVariants.append(select);
});
$('.varianten_'+rel.id).html(wqsSelectVariants);
});
var price = rel.price.price_incl;
sum += price;
productHtml = productHtml + '</div></form></div>';
productsHtml.push(productHtml);
});
$('.total').text('€'+sum.toFixed(2));
productsHtml = productsHtml.join('')
$container.html(productsHtml);
});
}
});
});
etc....
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").on("click", function(e){
e.preventDefault();
$('form[name="formsub"]').each(function(){
var variant = $('#product_configure_variants').val();
var $form = $(this);
$.ajax({
type: $form.attr('method'),
url: $form.attr('action')+variant+'/?quantity=1',
data: $form.serialize(),
success: function(data, status){
if(status == 'success'){
}else if(status == 'error'){
}
}
});
});
});
});
</script>
Does anyone know what's going wrong or give me some directions on how to fix that?
Try using $('form[name="formsub"]:visible') as your selector. That should give you just the visible forms instead of all the ones on the page.
If id of li a item matches the class of div item a want to add a class "theme" on each click.
If id of li a item doesn't matches the class of div item a want to remove the class "theme" from non matching divs.
But it only adds the class on each click but doesn't remove class. Any suggestions?
<ul class="funding-theme">
<li data-rel="all"><a class="sub active" id="all" href="javascript:void(0)">All</a></li>
<li><a class="sub" id="education" href="javascript:void(0)">Education</a></li>
<li><a class="sub" id="healthcare" href="javascript:void(0)">Healthcare</a></li>
<li><a class="sub" id="justice" href="javascript:void(0)">Justice</a></li>
</ul>
<div class="list left">
<div class="non_profit all education"></div>
<div class="non_profit all education"></div>
<div class="non_profit all justice"></div>
<div class="non_profit all healthcare"></div>
</div>
<script>
var $sub = $(".sub");
$sub.click(function(e){
if (e.target.id == "all") {
//alert("#" + $(this).attr('id') + "");
$("."+$(this).attr('id')).removeClass('theme');
} else if (e.target.id == $(this).attr('id')) {
alert("#" + $(this).attr('id') + "");
$("."+$(this).attr('id')).removeClass('theme');
$("."+$(this).attr('id')).addClass('theme');
}
});
</script>
Try this
$('.sub').click(function (e) {
var id = ($(this).attr("id"));
$('.list').find('div').each(function(){
if($(this).hasClass(id))
{ $(this).addClass('theme');
}else
{
$(this).removeClass('theme');
}
});
});
Fiddle Demo
Try this:
var $sub = $(".sub");
$sub.click(function(e){
if (e.target.id == "all") {
//alert("#" + $(this).attr('id') + "");
$(".theme").removeClass('theme');
} else if (e.target.id == $(this).attr('id')) {
alert("#" + $(this).attr('id') + "");
$(".theme").removeClass('theme');
$("."+$(this).attr('id')).addClass('theme');
}});
Working Demo
If I got this right, you need to change the following lines:
$("."+$(this).attr('id')).removeClass('theme');
$("."+$(this).attr('id')).addClass('theme');
to
$(".all").removeClass('theme');
$("."+$(this).attr('id')).addClass('theme');