I'm trying to create an element with an element inside of it in JQuery, but I'm not getting anything when I try and output it.
This is the HTML equivalent of what I'm looking for:
HTML:
<div class="btn-icn">
<button class="btn">
<span class="glyphicon glyphicon-comment"></span>
</button>
</div>
Jquery:
a = $(button).attr({
class: "btn";
id:"btn";
}.append($(icon).attr({
class:"glyphicon glyphicon-comment";
id="comment";
}));
alert(a);
$("<button/>", { // here goes the properties:
appendTo : ".btn-icn",
class : "btn",
id : "btn",
on : {
click : function(){ alert(this.tagName); }
},
append : $("<span/>", {
class : "glyphicon glyphicon-comment",
id : "comment"
})
});
#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-icn"></div>
(Be aware that using an ID multiple times on a single page is wrong. Stick with classes instead.)
The jquery code is totally broken to me:
var a = $('<a />').attr({
class: "btn", //comma not semicol
id:"btn"
});
var icon = $('<i></i>').attr({
class: "glyphicon glyphicon-comment",
id: "comment" //no equal sign in an object, property: value
});
a.append(icon)
Related
I have a page which renders dynamic title. When I change the title to h2 using HeaderCfg, it is nesting elements in a span tag as follows
<h2 class=" x-unselectable">
<span class="x-panel-header-text">This is Title</span>
</h2>
Expected:
<h2 class=" x-unselectable x-panel-header-text">This is Title</h2>
Code:
myForm = new Ext.FormPanel({
title : Orginal.orginalTitle.get('get-title'),
headerCfg: {
tag: 'h2',
},
id : 'title-field',
});
VERSION: 3.4.0
You can initially set the title to:
title: '<h2>mytitle</h2>'
In combination with an override for Panel:
setTitle : function(title, iconCls){
title = `<h2>${title}</h2>`;
this.title = title;
if(this.header && this.headerAsText){
this.header.child('span').update(title);
}
if(iconCls){
this.setIconClass(iconCls);
}
this.fireEvent('titlechange', this, title);
return this;
}
I have spent hours trying to resolve this problem and reviewing other similar StackOverflow questions (1) (2), but none seem to have an answer to my problem..
I can't get past this error: ReferenceError: id is not defined. Alert does not show too.
$("button.btn-tag-cat").click(function(e){
e.preventDefault();
var id = $(this).prop('id');
alert(id);
id.find('span').show();
}, function(){
id.find('span').hide();
});
I have tried the following ways to using the id variable but none work.
$(id).find('span').show();
$("#" + id).find('span').show();
However, when i remove the chunk of code below the alert, the alert pops up with the correct id belonging to the button.
$("button.btn-tag-cat").click(function(e){
e.preventDefault();
var id = $(this).prop('id');
alert(id);
});
View partial:
Button id references a ruby local variable id="<%= name %>"
<% q.categories_name_in.each do |name| %>
<button type="button" class="btn btn-outline-primary btn-lg btn-tag-cat" id="<%= name %>"><%= name %><span class='glyphicon glyphicon-remove'></span></button>
<% end %>
As you've noted, the error is chaining functions in the click listener.
In order to get the id attribute, you can use the jQuery attr function, like:
$("button.btn-tag-cat").click(function(e) {
e.preventDefault();
var id = $(this).attr('id');
alert(id);
$('#' + id).find('span').show();
});
$("button.btn-tag-cat").click(function(e) {
e.preventDefault();
var id = $(this).attr('id');
alert(id);
$('#' + id).find('span').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn-tag-cat" id="hallo">Press</button>
Here, in your code I will beautify it to see your mistake:
$("button.btn-tag-cat").click(
function(e) {
e.preventDefault();
var id = $(this).prop('id');
alert(id);
id.find('span').show();
},
function() {
id.find('span').hide();
}
);
notice the second function has
function() {
id.find('span').hide(); // right here
}
but the id is not defined yet
try
function() {
var id = $(this).prop('id'); // this first
id.find('span').hide();
}
I'm gonna append comments into <ul class="chat" id="comments_section"> with retrieved remote json data
return json data like this :
rtndata = [
{
username: Jordan,
message: 123,
},
{
username: Kobe,
message: 456,
},
]
implement ideas :
rtndata.forEach(function (comment, index) {
if index == EvenNumber:
append_comment_div_with_Even_Number_format;
else :
append_comment_div_with_Odd_Number_format;
});
Finnaly the DOM structure should look like the following,
The attributes left and right should be used interleavely in the comment div template.
Could we use any template technique in purely js lib? (Does any one lib of backbone.js, react.js, underscore.js can do this job elegantly ?)
Thank you.
Expected result
<ul class="chat" id="comments_section">
<li class="left.clearfix">
<span class="pull-left chat-img">
<img src="http://graph.facebook.com/Jordan/picture">
</span>
<span class="pull-left msg">
123
</span>
</li>
<li class="right.clearfix">
<span class="pull-right chat-img">
<img src="http://graph.facebook.com/Kobe/picture">
</span>
<span class="pull-right msg">
456
</span>
</li>
</ul>
By the looks of it, you're trying to adjust the style of alternate elements by adding css classes via js.
You can handle this without js, using css :nth-child selector:
li:nth-child(odd) {
}
li:nth-child(odd) span.msg{
}
li:nth-child(even) {
}
li:nth-child(even) span.msg{
}
If you must add classes (maybe you're using bootstrap), you should be able to do something like the following using underscore's template method:
<ul class="chat" id="comments_section">
<% _.each(comments, function(comment, i) { %>
<li class="<%= i%2==0? 'left' : 'right' %> clearfix">
<span class="pull-<%= i%2==0? 'left' : 'right' %> chat-img">
<img src="http://graph.facebook.com/Kobe/picture">
</span>
<span class="pull-<%= i%2==0? 'left' : 'right' %> msg">
456
</span>
</li>
<% }); %>
</ul>
Here's one approach:
var rtndata = [{
username: 'Jordan',
message: 123,
}, {
username: 'Kobe',
message: 456,
}, ];
var ul = document.getElementById('comments_section');
rtndata.forEach(function(comment, index) {
var even = (index % 2 === 0);
var li = document.createElement('li');
li.className = (even ? 'left.clearfix' : 'right.clearfix');
var span1 = document.createElement('span');
span1.className = (even ? 'pull-left' : 'pull-right') + ' chat-img';
var img = document.createElement('img');
img.src = 'http://graph.facebook.com/' + comment.username + '/picture';
var span2 = document.createElement('span');
span2.className = (even ? 'pull-left' : 'pull-right') + ' msg';
span2.innerHTML = comment.message;
span1.appendChild(img);
li.appendChild(span1);
li.appendChild(span2);
ul.appendChild(li);
});
Output:
Since you don't have that many elements, we can create a few elements and set them. If you have a lot, a second approach would be to create an html template and do a find replace.
i have one question about jquery on click.
This is DEMO from jsfiddle.net
When you click the demo you can see there is a green and yellwo div.
The question is when you click the data-id="1" and change this div class:
<div class="icon-kr icon-globe"></div>
change icon-globe to icon-contacs
and when you click data-id="2" then change:
change icon-globe to icon-lock-1
also same think is for data-id="0"
How can i do that anyone can help me in this regard ?
HTML
<div class="container" id="1">
<div class="icon_ar"><div class="icon-kr icon-globe"></div>1</div>
<div class="pr_type">
<div class="type_s change_pri" data-id="0"><div class="icon-pr icon-globe"></div>1</div>
<div class="type_s change_pri" data-id="1"><div class="icon-pr icon-contacs"></div>2</div>
<div class="type_s change_pri" data-id="2"><div class="icon-pr icon-lock-1"></div>3</div>
</div>
</div>
JS
$('.change_pri').click(function(){
var dataid = $(this).attr('data-id');
var id = $(this).closest('.container').attr('id');
$.ajax({
type: "POST",
url: "chage_number.php",
data: { dataid : dataid, id: id }
}).success(function(result){
alert(result);
});
});
One way to do this is below. I have only done the class changing bit based on click. I am not sure about your ajax code. Let me know if you need further help.
$('.change_pri').click(function(){
var class_name = $(this).find(".icon-pr").attr("class");
class_name = class_name.replace(/icon\-pr\s+/gi, "");
$(this).closest(".container").find(".icon-kr")
.removeClass().addClass("icon-kr " + class_name);
});
Updated fiddle
You need to use .data(), you are not accessing the data correctly.
https://api.jquery.com/jquery.data/
var dataid = $(this).data('id');
You are accessing this data-* attribute incorrectly,
Use this,
$('.change_pri').click(function(){
var dataid = $(this).data('id');
$(this).parent().siblings('.icon_ar').find('div').removeClass("icon-globe icon-contacs icon-lock-1");
if(dataid=="0")
{
$(this).parent().siblings('.icon_ar').find('div').addClass("icon-globe");
}
else if(dataid==1)
{
$(this).parent().siblings('.icon_ar').find('div').addClass("icon-contacs");
}
else
{
$(this).parent().siblings('.icon_ar').find('div').addClass("icon-lock-1");
}
//AJAX CODE.
});
I'm writing script which should find onclick attributes on any ancestor.
For example when I click on span.tabIdent I want get anchor onclick (I trigger it later)
HTML:
<a class="t3 lin tab-B" rel="#categoriesLinux" rev="lin" onclick="changeTab()">
<span class="tabLeft" style=""></span>
<span class="tabCenter" style="">
<span class="tabIdent" style=""></span>
</span>
<span class="tabRight"></span>
</a>
JS:
var foo,
foo2,
przodek,
parentsCount = jQuery(that).parents().length,
przodek = jQuery(that); //it's ok here
for(var ii=0; ii<parentsCount; ii++){
przodek = jQuery(przodek).parent();
foo = jQuery(przodek).prop('nodeName'),
foo2 = jQuery(foo).attr('onlick');
console.log(foo+' : '+foo2);
}
It return everywhere 'undefined'.
What is wrong with this ?
You make a spelling error: onlick is not onclick
You could simply do this...
$('.tabIndent').on('click', function() {
var anchor = $(this).closest('a');
console.log(anchor.prop('nodeName') + ' : ' + anchor.prop('onclick'));
});