Remove non static span class - javascript

I'm generating a span tag in the following way:
var clss = $(this).attr("dclss");
<span id="'+id+'" dtype = "'+type+'" dclss="'+clss+'" dattr="'+attr+'" class=" anyi '+clss+'"></span>
When i click on this span, his class is changing to "active". After that when i click on the other span i want to remove this active class, but not sure how.I've tried this:
$(".selected .content").on('click','.close-icon', function(){
var clss = $(this).attr("dclss");
$(this).closest('.liveicon').fadeOut(500);
$("#anyi " + clss ).removeClass("active");
});
But i got class undefined. Any ideas how to get the span class with jQuery ?
HTML:
str += '<div class="liveicon" id="'+id+'" dtype = "'+type+'" dclss="'+clss+'" dattr="'+attr+'">';
str += '<span class="close-icon" id="close-icon">✖</span>';
str += '<span id="'+id+'" dtype = "'+type+'" dclss="'+clss+'" dattr="'+attr+'" class=" anyi '+clss+'"></span>';
str += '<div class="clearboth"></div>';
str += '<div class="codes">';
str += '<div class="tit">FONT</div><input type="text" class="fontsc" value="[anyicon i=\''+clss+'\' '+stylestr+']">';
str += '<div class="tit">PNG</div><input type="text" class="pngsc" value="[anyicon i=\''+clss+'\' '+stylestr+' type=\'png\']">';
str += '<div class="tit">SVG</div><input type="text" class="svgsc" value="[anyicon i=\''+clss+'\' '+stylestr+' type=\'svg\']">';
str += '</div>';
str += '</div>';

"dclss" isn't a valid html attribute, so that may be causing the issue. In general, for custom attributes, you should use the "data-" prefix, so try it with "data-previous-class".
Another approach is to use the attribute instead of a CSS class, so just do $(this).attr("data-is-active", "false") and $(this).attr("data-is-active", "true"). You can write a css selector like this:
span[data-is-active="false"] {
//inactive CSS
}
span[data-is-active="true"] {
//active CSS
}

Related

Jquery attribute not being added to div element

I have a div as follows
'<div class="ctrl-info-panel col-md-12 col-centered">'+
'<h2>You do not have any projects created at the moment.</h2>'+
'<div id="t1" style="display:inline-flex" data-toggle="tooltip">'+
'<p><span>Create Project</span></p>'+
'</div>'+
'</div>'
I am trying to add an attribute to #t1 in the following function.
function appendCreateprojectDisabled(noOfDatasets) {
var classAppend = '';
if(noOfDatasets == 0) {
$("#t1").attr('title','No datasets available');
classAppend = 'cu-level-btn-disabled';
}
return classAppend;
}
But the attribute is not being added. I am not getting a text in the tooltip. what's the issue here?
Note that noOfDatasets is 0.
To answer your question, the issue in your code is the order is is executed.
When the function appendCreateprojectDisabled(noOfDatasets) is executed, it looks for the element $("#t1"), which does not exists yet since the following string has not been added to the HTML document yet:
'<div class="ctrl-info-panel col-md-12 col-centered">'+
'<h2>You do not have any projects created at the moment.</h2>'+
'<div id="t1" style="display:inline-flex" data-toggle="tooltip">'+
'<p><span>Create Project</span></p>'+
'</div>'+
'</div>'
As you may notice, the above code has the element id="t1", which doesn't exists at the time the function appendCreateprojectDisabled(noOfDatasets) is called.
You created the div here dynamicly in javascript, so you just have a string here.
There is two way for you.
First you should write in on the page.
var htmlString = '<div class="ctrl-info-panel col-md-12 col-centered">'+
'<h2>You do not have any projects created at the moment.</h2>'+
'<div id="t1" style="display:inline-flex" data-toggle="tooltip">'+
'<p><span>Create Project</span></p>'+
'</div>'+
'</div>';
function appendCreateprojectDisabled(noOfDatasets) {
var classAppend = '';
$("#aDivInYourPage").html(htmlString);//after register your div you can find your 't1' div. if not it will be undefuned for you.
if(noOfDatasets == 0) {
$("#t1").attr('title','No datasets available');
classAppend = 'cu-level-btn-disabled';
}
return classAppend;
}
The other way is you can put a spetial character to your div like {TitleAttribute} and replace this with your attribute like title='No datasets available'
you can achieve this by parsed the string to HTML element.
Try this code.
$(document).ready(function () {
function appendCreateprojectDisabled(noOfDatasets, divElement) {
var classAppend = '';
if (noOfDatasets == 0) {
divElement.find("#t1").attr('title', 'No datasets available');
classAppend = 'cu-level-btn-disabled';
}
return classAppend;
}
var divElement = '<div class="ctrl-info-panel col-md-12 col-centered">' +
'<h2>You do not have any projects created at the moment.</h2>' +
'<div id="t1" style="display:inline-flex" data-toggle="tooltip">' +
'</div>' +
'</div>'
divElement = $(divElement);
var paraElement = '<p><span>Create Project</span></p>'
divElement.find("#t1").append($(paraElement));
$(document.body).append(divElement);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Hope this will help you.
Do something like this:
var classAppend = "";
var classAppend = appendCreateprojectDisabled(noOfDatasets);
After making sure classAppend have some value; you can append your html wherever you want.
var html = '<div class="ctrl-info-panel col-md-12 col-centered">' +
'<h2>You do not have any projects created at the moment.</h2>' +
'<div id="t1" style="display:inline-flex" data-toggle="tooltip">' +
'<p><span>Create Project</span></p>' +
'</div>' +
'</div>';
Use this piece of html wherever you want now. The below function is called first.
function appendCreateprojectDisabled(noOfDatasets) {
var classAppend = '';
if(noOfDatasets == 0) {
$("#t1").attr('title','No datasets available');
classAppend = 'cu-level-btn-disabled';
}
return classAppend;
}

append(html) not working with script

With my append(html) code I would like to be able to include <script></script>
Question: How can I use the <script></script> will not allow me to add them.
As you can see at bottom of addContent() i need to include $("#page_code[' + content_row + ']").summernote({height: 300});
Script
<script type="text/javascript">
var content_row = <?php echo $content_row; ?>;
//$(document).ready(function() {
// $('#page_code').summernote({height: 300});
//});
function addContent() {
html = '<div id="content-row">';
html += '<div class="form-group">';
html += '<label class="col-sm-2">Page Content Name</label>';
html += '<div class="col-sm-10">';
html += '<input type="text" class="form-control" name="page_code[' + content_row + '][name]" placeholder="Page Content Name">';
html += '</div>';
html += '</div>';
html += '<div class="form-group">';
html += '<label class="col-sm-2">Page Content</label>';
html += '<div class="col-sm-10">';
html += '<textarea class="form-control" id="page_code[' + content_row + ']" name="page_code[' + content_row + '][code]" style="height: 300px;"></textarea>';
html += '</div>';
html += '</div>';
html += '<script>$("#page_code[' + content_row + ']").summernote({height: 300});</script>';
html += '</div>';
$('#content-row').append(html);
content_row++;
}
</script>
First of all when you are closing your script tag in the string ->
"</script>"
this is an error because "/" in strings is used for escaping, so when closing your tag you should do it
"<//script>"
Second of all - your addContent function is not called?
Jquery provide the html() method that allows you to append, in the given html element, some html. So, you can try with this : http://api.jquery.com/html/
Then, there are some confusions in the part of code that is the reason of your problem:
html += '<script>$("#page_code[' + content_row + ']").summernote({height: 300});</script>';
I think that your selection with "#page_code[..]" for an id is wrong. Because you don't have any element with this id, but with the name attribut "page_code[...]". So, even if your tag will be evaluate, your code seems to be wrong.
To select a tag by his name attribut, you can deal with a specific jquery selector : http://api.jquery.com/attribute-equals-selector/
I hope this will help you.

Search cloned select object for option value and set selected if exists

What I'm trying to do is clone a template select dropdown element, alter it's attributes some, and then look to see if a string exists as an option value and if it does then go ahead and preselect that option value before I append it.
/* Generated HTML inputs for mapping */
function build_map_input( col_name ) {
var select = jQuery("#leads_map").clone();
/* alter dropdown attributes */
select.attr( 'id' , col_name );
select.attr( 'style' , '' );
select.attr( 'name' , col_name );
/* attempt to preselect values if applicable */
/*** This is where I need help. My needle is col_name ****/
var select_html = select.prop('outerHTML');;
/* build html */
var html= '<div class="row">';
html += ' <div class="col-md-3">';
html += col_name;
html += ' </div>';
html += ' <div class="col-md-3">';
html += select_html;
html += ' </div>';
html += '</div>';
/* append html to map container */
jQuery('#map-container').append(html);
}
I tried your code in my pc and it's working very well. However I suggest this codes :
/* build html */
var html= '<div class="row">';
html += ' <div class="col-md-3">';
html += col_name;
html += ' </div>';
html += ' <div class="col-md-3">';
html += select_html;
html += ' </div>';
html += '</div>';
replace to this one :
var html = $('<div/>', { class: "row" });
$('<div/>', { class: "col-md-3", text: col_name }).appendTo(html);
$('<div/>', { class: "col-md-3", html: select_html }).appendTo(html);
In this way, reading of code will be easy and nice.
Also you can use $ mark instead of jQuery.

Adding html elements from variable using jquery?

I am trying to add elements to specific div, but not using clone(), because i need fresh copy of original elements on every add, mainly because elements are draggable and their values are being change by user? So i have my html in variable, i need to take this elements and add them on click to another elem. ?
$(document).ready(function (e) {
var $gElem = $(
'<div class="distributionWrapper" id="element_0">' +
'<div class="cbox cboxQuarterWidth">' +
'<select id="combobox100">'+
'<option>1</option>'+
'<option>2</option>'+
'</select>'+
'</div>'+
'<div class="help"></div>'+
'<div class="cbox cboxEighthWidth"><span>'+
'<select id="combobox200" name="PeriodId">'+
'<option>1</option>'+
'<option>2</option>'+
'</select>'+
'</span></div>'+
'<div class="clear" id="clearDistribution"></div>'+
'<div class="add" id="addDistribution"></div>'+
'</div>'
);
$('.mainSearch').html($gElem); // initial load of element
$("#combobox100").combobox();
$("#combobox200").combobox();
var counter = 1;
$('.add').live('click', function () {
if ($('.distributionWrapper').length === 6) return;
//var el = $('.distributionWrapper:first').clone().attr('id', 'element_' + ++counter).appendTo('.mainSearch');
$('.mainSearch').add($gElem).attr('id', 'element_' + ++counter);
// here on click add gElem to .mainSearch and set atribute to .distributionWrapper
});
$('.clear').live('click', function () {
if ($('.distributionWrapper').length === 1) return;
$(this).parents('.distributionWrapper').remove();
});
});
Any ideas?
try this
$('.mainSearch').append($gElem);
$('.mainSearch').children('.distributionWrapper:last').attr('id', 'element_' + ++counter);
Store the html as a string in a javascript variable and create a jQuery element every time you need one from that string.
var elemHtml =
'<div class="distributionWrapper" id="element_0">' +
'<div class="cbox cboxQuarterWidth">' +
'<select id="combobox100">'+
'<option>1</option>'+
'<option>2</option>'+
'</select>'+
'</div>'+
'<div class="help"></div>'+
'<div class="cbox cboxEighthWidth"><span>'+
'<select id="combobox200" name="PeriodId">'+
'<option>1</option>'+
'<option>2</option>'+
'</select>'+
'</span></div>'+
'<div class="clear" id="clearDistribution"></div>'+
'<div class="add" id="addDistribution"></div>'+
'</div>'
$(function(){
//your initial element
var $elem1 = $(elemHtml);
}
function someHandler(){
//you can create fresh new elements anywhere without cloning
var $elem2 = $(elemHtml);
}
The duplicate IDs need to be removed. But that's outside the scope of your question.

javascript (jquery) added text comments dont linebreak/ ignore their div container

Im working on a JavaScript based comment system:
This is the Javascript that generates the comment html:
$.each(comments.user,function(key,value)
{
comment_string += '<div class = "r_comment_header">';
comment_string+= '<a class = "r_comment_user" href = "profile.php?id=' + comments.user_id[key] + '" title = "Profile of ' + value + '">' + value + ' </a>';
if(comments.pm_button[key])
comment_string+= '<input type = "button" class = "comment_send_pm" value = "Message" name = "' + comments.user_id[key] + '" title = "Send this user a private message"/>';
comment_string+= '<span class = "r_comment_time">' + comments.time[key] + '</span>';
comment_string+= '</div>';
comment_string+= comments.content[key];
comment_string+= '<div class = "comment_abuse_wrapper">';
comment_string+= '<input type = "button" class = "comment_report_abuse" name = "' + comments.id[key] + '" value = "Report abuse" title = "Report this comment as inappropriate content"/>';
comment_string+= '</div>';
});
$('#request_comments').html(comment_string);
Now what happens when I add a new comment via a text input field is that the content of the comment ignores the div containers boundaries and does not linebreak:
http://i.imgur.com/V85Vc.png
This is the div containers css:
#request_comments
{
width:658px;
padding: 10px;
margin: 10px 0 0 10px;
}
any suggestions?
This is the normal HTML behaviour. It happens if you have an unwrappable string (i.e. no symboly/whitespace) and is completely unrelated to JavaScript or jQuery.
The easiest solution is using the overflow: hidden CSS option.
PS: You should consider using templates instead of just creating your markup through strings. There are some nice template engines for JavaScript nowadays. Have a look at http://api.jquery.com/jquery.tmpl/ for example.

Categories