I need the best way to parse the html from the string, I have tried .html(); and it does not work. I need it on cdata variable.
$(document).ready(function () {
var anOpen = [];
var oTable = $('#table_id').dataTable();
$('#table_id tbody').on('click', 'tr', function (e) {
var nTr = this;
var i = $.inArray(nTr, anOpen);
var cdata = this.cells[1];
console.log(cdata);
if (i == -1) {
$(this).addClass('row_selected');
var nDetailsRow = oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr, 1), 'details');
$('div.innerDetails', nDetailsRow).slideDown();
anOpen.push(nTr);
}
else {
$(this).removeClass('row_selected');
$('div.innerDetails', $(nTr).next()[0]).slideUp(function () {
oTable.fnClose(nTr);
anOpen.splice(i, 1);
});
}
});
First, you should use $(this) instead of the javascript this. Just for coherence, try using jQuery at most when you can achieve it with jQuery.
Using jQuery you could do
$myTd = $(this).find("td").get(1) ;
$myTd.text() gives your text here. See http://api.jquery.com/text/
Using javascript, you want to get the inner content of your td tag... so this.cells[1].innerHTML returns the innerHTML of your tag, which in your case is your text.
html() is the way to go if you're trying to fetch the data from an element.
$(document).ready(function(){
var html_str = $("#foo").html();
alert("Your HTML is: " + html_str);
});
See: http://jsfiddle.net/4q6AZ/
If you're looking to strip out all HTML tags, you may consider:
var html_string = '<h1>Test</h1><p>A paragraph with a link</p>';
var regex = /<(\/?)[a-zA-Z0-9][^>]*>/g;
var stripped = html_string.replace(regex, '');
$("#result").html(stripped);
See: http://jsfiddle.net/Y6q2j/5/
Jquery .text() will send you back the text and not the HTML elements. http://api.jquery.com/text/
Related
I want to remove the headers befor i expor the data into excel, hide doesnt work because the data is still there, so i was using remove. but once removed, after the exporting to excel is completed i wanted to undo the removed headers for display.
<script type="text/javascript">
$("#btnExport").click(function(e) {
alert("");
$head=$('tr.header');
$div=$('#dvData')
$div.remove('tr.header');
alert();
window.open('data:application/vnd.ms-excel,' +encodeURIComponent($div.html()));
e.preventDefault();
});
</script>
i was trying to save the div object in a variable process on that variable div and send it, bt the div sent shows no changes!!
Just make a clone, remove whatever you want, and get the HTML
$("#btnExport").click(function(e) {
e.preventDefault();
var div = $('#dvData'),
clone = div.clone();
clone.find('tr.header').remove();
window.open('data:application/vnd.ms-excel,' + encodeURIComponent( clone.html() ));
});
append saved variable to parent of the deleted div.
Add it before the target element...remove it post that...
$(function() {
$('#add').click(function(){
var div = $('div.toRemove');
var newDiv = $('<div/>').addClass('added').html('hello world');
//newDiv.prependTo(div);
div.before(newDiv);
this.disabled = true;
div.remove();
});
$('#reset').click(function(){
$('div').remove();
$(document.body).append($('<div/>').addClass('toRemove').html('toremove'));
$('#add').removeAttr('disabled');
});
});
Fiddle: http://jsfiddle.net/deostroll/wnu9pv9y/
First of all, You must use var for each variable such as $head and $div
You can use clone to achieve the desired result.
$("#btnExport").click(function(e) {
var $clonedDiv = $('#dvData').clone(true);
$clonedDiv.find("tr.header");
window.open('data:application/vnd.ms-excel,' +encodeURIComponent($clonedDiv.html()));
e.preventDefault();
});
</script>
use clone(true) to retain the events
As per understanding you first want to remove the header before export and then want to add to the table as it is. if i am properly understanding your requirement try the following
$("#btnExport").click(function (e) {
alert("");
$div = $('#dvData')
$divToRemain = $div.find('#TableId thead')
$div.find('#TableId thead').remove();
window.open('data:application/vnd.ms-excel,' + encodeURIComponent($div.html()));
$divToRemain.appendTo('#tblHoliday');
e.preventDefault();
});
Here i save the removed header in the variable and after export i appended it to the table.
Hope this will help.
When I click on #upvote the #vote increases by 1 and when #downvote is clicked it decreases by 1. But when the vote value is "-1" and if the upvote is clicked the vote value becomes "1" and not "0".
<script type="application/javascript">
$(document).ready(function (){
$('#upvote').click(function() {
var VoteValue = $('#vote').val();
$('#vote').text(VoteValue+1);
});
$('#downvote').click(function() {
var VoteValue1 = $('#vote').val();
$('#vote').text(VoteValue1-1);
});
});
</script>
<div id="upvote" style="font-size:22px;">+</div>
<div id="vote" style="font-size:22px;">0</div>
<div id="downvote" style="font-size:22px;">-</div>
Any idea to what might be wrong.
Try parseInt()
$(document).ready(function (){
$('#upvote').click(function() {
var VoteValue = $('#vote').text();
$('#vote').text(parseInt(VoteValue)+1);
});
$('#downvote').click(function() {
var VoteValue1 = $('#vote').text();
$('#vote').text(parseInt(VoteValue1)-1);
});
});
Working DEMO
Note: .text() should use for getting value of DIV instead of val()
First, you should use html() or text() instead of val(), val() is for inputs or textarea.
Then, you should use parseInt, to make sure you manipulate the right types : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt
If that doesn't solve it, then create a jsfiddle so that we can reproduce the problem.
Last, beware of duplicate ids if you have multiple voting systems on the same page.
Use .text() instead of .val(), and use + to parse the string into a numeric.
$(document).ready(function (){
$('#upvote').click(function() {
var VoteValue = +$('#vote').text();
$('#vote').text(VoteValue+1);
});
$('#downvote').click(function() {
var VoteValue1 = +$('#vote').text();
$('#vote').text(VoteValue1-1);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="upvote" style="font-size:22px;">+</div>
<div id="vote" style="font-size:22px;">0</div>
<div id="downvote" style="font-size:22px;">-</div>
Solution:
Firstly, $('#vote').val() should be $('#vote').text() . Now these values will be of string type. Parse them to int first to work them correct . Because then it would only append the digits rather incrementing or decrementing .
$(document).ready(function () {
$('#upvote').click(function () {
var VoteValue = parseInt($('#vote').text());
$('#vote').text(VoteValue + 1);
});
$('#downvote').click(function () {
var VoteValue1 = parseInt($('#vote').text());
$('#vote').text(VoteValue1 - 1);
});
});
In an HTML document, .html() can be used to get the contents of any element. .val() used for input box. http://api.jquery.com/html/
var VoteValue1 = $('#vote').html();
OR
var VoteValue1 = $('#vote').text();
.directive('mydirective', [function($scope, $document,windowService) {
return{
link : function(scope,element,attars){
--- Some more code —--
var containers = $('.container’);
containers.bind('click', function(event) {
var elem = event.currentTarget;
elem.append('<div>test</div>’); //Appending is failing
});
}
}]);
TypeError: 'undefined' is not a function (evaluating 'elem.append('<div>test</div>')')
I am just starting off with AngularJS and stuck with the above issue, I am trying to append a div to the container.
Try with this
containers.bind('click', function (event) {
var elem = event.currentTarget;
$(elem).append('<div>test</div>’); //Appending should work
}
as elem can be the HTML input object you have to convert it into jQuery object to use .append() method of jQuery! so wrap your elem variable arround $(). It should work
Better to use this. Removes dependency to JQuery as Angular core only use JQLite. It is basically the same thing that happens.
https://docs.angularjs.org/api/ng/function/angular.element
containers.bind('click', function (event) {
var elem = event.currentTarget;
angular.element(elem).append('<div>test</div>’); //Appending should work
}
I'm trying to make a filter on screen, by just hiding what doesn't meet the requirements.
This what I've come up with so far. I'm not sure what I am doing wrong.
jQuery :
jQuery('#searchBox').on('keyup change', function() {
var search = $('#searchBox').val();
//for each h4
$('h4').each(function(){
var h4id = $(this).attr('id');
if ($(h4id).contains(search))
$(this).show();
else
$(this).hide
});
HTML :
<input type="search" name="search" id="searchBox"/>
<h4 id="Adminstrator">Administrator</h4>
<h4 id="John,Smith">John Smith</h4>
<h4 id="Jane,Smith">Jane Smith</h4>
(I'm using jQuery 1.9.1)
(So, if I start typing Smith, "Administrator" h4 should disappear.
.contains will not give you the text content of the selector. It will only search for elements inside the selector.
Try this approach .. This can be lot more optimized
jQuery('#searchBox').on('keyup change', function () {
var search = $('#searchBox').val().toLowerCase();
$('h4').hide();
$('h4').each(function () {
var h4id = $(this).attr('id'),
$text = $('#'+ h4id).text().toLowerCase();
if($text.indexOf(search) > -1)
$(this).show();
});
});
Make sure your id's are unique.
Next is your id's should not contain , in them
JSFIDDLE
Try this:-
Simple one, but case sensitive though
Demo
jQuery('#searchBox').on('keyup change', function() {
var search = $('#searchBox').val();
$('h4').hide();
$('h4[id*='+ search + ']').show();
});
See if this helps. I won't use id for storing the string comparison since name can be same for multiple people and you might end up having multiple h4s with same id. SO i am using data-attribute and jquery data here.
Demo
jQuery('#searchBox').on('keyup change', function() {
var search = $('#searchBox').val();
$('h4').hide().filter(function(_,oj){
return $(oj).data('key').toLowerCase().indexOf(search.toLowerCase()) > -1;
//if your are trying to match the text() then do
//return $(oj).text().toLowerCase().indexOf(search.toLowerCase()) > -1;
}).show();
});
Fixing your code would mean this. There is no contains function and couple of other typos.
Demo
jQuery('#searchBox').on('keyup change', function() {
var search = $('#searchBox').val();
//for each h4
$('h4').each(function(){
var h4id = this.id;
if (h4id.indexOf(search) > -1)
//if your are trying to match the text() then do
//if ($('#'+h4id).text().indexOf(search) > -1)
$(this).show();
else
$(this).hide();
});
});
Try a regex based solution
jQuery('#searchBox').on('keyup change', function() {
var search = $(this).val();
var regex = new RegExp(search, 'i');
//for each h4
$('h4').hide().filter(function(){
return regex.test(this.id)
}).show();
});
Demo: Fiddle
Just using jQuery attribute selector,see here,just two line code will be enough.
Demo:
//for each h4
var h4id = $(this).attr('id');
$("h4").hide().filter("[id*=" + h4id + "]").show();
$("ul.tabs li").click(function() {
var tab = $(this).attr("id");
var tabState = $(this).is(".selected");
var showThis = ".selector-" + tab;
if (tabState == true) {
$(NeedToConvertshowThisIntoObject).fadeIn(100);
}
else {
alert(Something);
}
});
Thanks!
You don't need to convert anything. The below line will work perfectly if the selector is matched.
$(showThis).fadeIn(100);
$(showThis) should do it:
$(showThis).fadeIn(100);
You can use $(showthis) instead $(NeedToConvertshowThisIntoObject)
for example:
$(showThis).fadeIn(100);
Best Regards
Li Satisfy