Here is my div :
<div id="myDiv">The
<span class="cordial-err-corr" id="good0-0" data-original-title="" title="">best</span>
way to receive congrats
<span>
<span class="cordial-err-corr" id="good0-1" data-original-title="" title="">are</span>
<div class="btn-group">
<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="prop0-1">is</a></li>
<li><a class="prop0-1">are</a></li>
</ul>
</div>
</span> to give a correct answer.</div>
I would like to get this text : "The best way to receive congrats are to give a correct answer."
So I call $('#myDiv').text(). It does not work since I get the two elements in ul.dropdown-menu.
The next step is to filter or remove the un-wanted children, i.e.:
<div class="btn-group">
<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="prop0-1">is</a></li>
<li><a class="prop0-1">are</a></li>
</ul>
</div>
I tried to play with $.filter or $.not or $.children with jquery selectors, etc. I cannot find the correct way to do this. Need help!
You can find some code in jsfiddle : http://jsfiddle.net/Ku7FY/
[EDIT]
One solution suggests this code :
$('#result').append( $('#myDiv').text().replace($(".btn-group").text(),"") ).append('<br />')
If several div.btn-group exists, just loop as :
var result = $('#myDiv').text();
$(".btn-group").each(function() {
result = result.replace($(this).text(),"");
});
$('#result').append(result).append('<br />')
So, if I get this straight, you want to exclude the list from the .text(). Try something like:
$('#result').append( $('#myDiv').text().replace($(".dropdown-menu").text(),"") ).append('<br />')
If you don't mind placing all the "dumb" text in spans, then you can do it very simply by only grabbing "dumb" text spans and ".cordial-err-corr" spans (and a find()).
<div class="well" id="myDiv"><span class="cordial-content">The </span>
<span class="cordial-err-corr" id="good0-0" data-original-title="" title="">best </span>
<span class="cordial-content">way to receive congrats </span>
<span>
<span class="cordial-err-corr" id="good0-1" data-original-title="" title="">are </span>
<div class="btn-group">
<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="prop0-1">is</a></li>
<li><a class="prop0-1">are</a></li>
</ul>
</div>
</span> <span class="cordial-content">to give a correct answer. </span></div>
and
$('#myDiv').find('.cordial-err-corr,.cordial-content').text()
Demo: Fiddle
I have an ugly, though simple enough (I guess) method:
We can make a copy, then remove the dom elements we don't want to display. Then we can get the desired text.
var clone_div = $('#myDiv').clone();
clone_div.find('.btn-group').remove();
$('#result').append(clone_div.text()).append('<br />');
Here is jsfiddle. http://jsfiddle.net/Ku7FY/4/
Try
function process(el){
var array = [];
$(el).contents().each(function(){
var $this = $(this), text;
if(this.nodeType == 3){
text = $.trim($this.text());
if(text){
array.push(text)
}
} else if($this.is(':not(.btn-group)')){
Array.prototype.push.apply(array, process(this))
}
})
return array;
}
console.log(process($('#myDiv')).join(' '))
Demo: Fiddle
Related
when I click on "press me" span text , I need to get "fold2" text() value. I tried to add lot of jquery traverse methods in my script, but I can't find the perfect one.
Because of my <li> including lot of <span> tag available.
HTMl Code:
<li class="favdelParentFold">
<a href="#parentLevel1" data-toggle="collapse" class="" aria-expanded="true">
<span class="caret-right"></span>
</a>
<span class="folder"></span>
<span style="color:red;">fold2</span>
<span data-toggle="modal" data-target="#AddFavorites_ModalDel" class="trashcan">press me</span>
<ul class="collapse in" id="parentLevel1" aria-expanded="true">
</ul>
</li>
JS Code
// when click on "press me" text I need to get span value of fold2
$(document).ready(function() {
$(".favdelParentFold span").click(function(){
var tr=$(this).closet().find('a').text();
alert(tr);//Expecting output is "fold2"
});
});
Working Code
https://jsfiddle.net/atg5m6ym/383/
Via jQuery, simplest way would be (if for some reason there's really no way to put class on your target):
$('.trashcan').on('click', function(e) {
var prev = $(this).prev();
if (prev.length)
{
alert( prev.text() );
}
});
In this case, the code only works if the target is just before the source element.
Another is, assuming your target has a class of .target:
$('.trashcan').on('click', function(e) {
var parent = $(this).closest('.favdelParentFold');
if (parent.length)
{
alert( parent.find('.target').text() );
}
});
Better to have the class so you can move around your target and the code would still work.
Please use it like this: ( Tested )
$(document).ready(function() {
$(".favdelParentFold span").click(function(){
var tr = $(this).prev().text();
alert(tr);//Expecting output is "fold2"
});
});
I have added a class for text - press me text as pressMe. Please find the working jsfiddle. The code is as below:
HTML
<li class="favdelParentFold">
<a href="#parentLevel1" data-toggle="collapse" class="" aria-expanded="true">
<span class="caret-right"></span>
</a>
<span class="folder"></span>
<span style="color:red;">fold2</span>
<span data-toggle="modal" data-target="#AddFavorites_ModalDel" class="trashcan pressMe">press me</span>
<ul class="collapse in" id="parentLevel1" aria-expanded="true"></ul>
</li>
JS
$(document).ready(function () {
$(".pressMe").click(function () {
alert($(this).prev().text());//Expecting output is "fold2"
});
});
Try this.
If you want to get the "fold2" text, you can set click event for span.trashcan alone. On this click event you can get that value by using prev("span").
// when click on "press me" class i need to get span value of fold2
$(document).ready(function() {
$(".favdelParentFold > .trashcan").click(function() {
var tr = $(this).prev('span').text();
alert(tr);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<li class="favdelParentFold">
<a href="#parentLevel1" data-toggle="collapse" class="" aria-expanded="true">
<span class="caret-right"></span>
</a>
<span class="folder"></span>
<span style="color:red;">fold2</span>
<span data-toggle="modal" data-target="#AddFavorites_ModalDel" class="trashcan">press me</span>
<ul class="collapse in" id="parentLevel1" aria-expanded="true">
</ul>
</li>
Hope you are expecting this...
Bootstrap 3 panel title contains dropdown using code below.
If dropdown is opened, up and down arrows do not move between items.
How to enable dropdown navigation using up and down arrow keys ?
<div class="panel panel-success grid-panel-header">
<div id='contentCaptionDiv' class="panel-heading">
<div class="panel-title form-inline">
<a class="btn" href="Show">
<i class="fa fa-male" aria-hidden="true"></i>
</a>
<a class="btn" href="Delete">
<i class="fa fa-female" aria-hidden="true"></i>
</a>
<div class="dropdown" type="button">
<div class="dropdown-toggle" data-toggle="dropdown" role="button" href="#">
<i class="glyphicon glyphicon-cog"></i>
<span class="caret"></span>
</div>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>
</div>
panel content here
</div>
The reason that you code doesn't work is because you use a <div> for .dropdown-toggle.
Make it a <button> and it will work.
Strange enough, not even this kind of element works: span.btn.btn-default.
Another reason that do not apply to your case:
Make sure your <a> elements inside the <li>s have an attribute of href="#" or href="" (ir that the attribute exists, in general).
href="#" works indeed for arrow keys. Using this causes page 404 redirect on item select. If you are not looking to redirect to another page use this work around: href="javascript:" instead of href="#"
<script type="text/javascript">
$(document).keydown(function(e) {
if(e.which == 40 || e.which == 38) {
openNavbar = $(".dropdown.open");
if(openNavbar[0]) {
menu = openNavbar.children(".dropdown-menu");
menu.find("a").css("outline", "none"); // remove the pesky blue outline
hovered = menu.find("li:hover");
if(hovered[0]) {
if(e.which == 40) hovered.next().children().focus();
else hovered.prev().children().focus();
}
else menu.find("li").first().children().focus();
}
}
});
</script>
I haven't found a built in solution, but I have made a snippet, that seems to do the job.
I asked a question earlier but didn't phrase it correctly.
I am working with jQuery and Bootstrap for pretty much the first time and need some help.
I have an .aspx webpage that has this code:
<form method="POST" action="Search.aspx">
<div>
<input type="text" class="form-control" name="srchterm" id="srchterm" style="width: 300px" />
<button id="Submit" class="btn btn-primary" type="submit">
GO!</button>
</div>
<br />
<div>
<div class="btn-group">
<a id="reportType" class="btn btn-default dropdown-toggle btn-select" data-toggle="dropdown" href="#"
name="rptType">Select report type<span class="caret"></span></a>
<ul class="dropdown-menu">
<li id="1">All</li>
<li id="2">Some</li>
<li id="3">None</li>
</ul>
</div>
<div class="btn-group">
<a id="reportStatus" class="btn btn-default dropdown-toggle btn-select" data-toggle="dropdown" href="#">
Report Status<span class="caret"></span></a>
<ul class="dropdown-menu">
<li id="1">Active</li>
<li id="2">Archived</li>
<li id="3">All</li>
</ul>
</div>
</div>
</div>
</form>
What I would like to know is how I can pass the value of the selected unordered list item to the code behind using JQuery or AJAX. Neither method I know much (or to be totally honest) anything about.
When I hit the submit button it takes the text box value and passes that back to Request.Form("srchTerm") but i cant seem to get anything else to pass.
I have seen this link here at fiddle but cant seem to get it to work for me.
I am wondering if its because how I have declared my listbox, but do need help in order to get this to work.
If I am missing a tag, please let me know. But I would very much appreciate the help with the JavaScript to get this wired up to pass the data so I can call the information from my database.
====================================
edit 1
I've tried various methods, none of which i have kept, but this is that i have right now and cant get anything to pass a value across.
$(".dropdown-menu li a").click(function () {
var selText = $(this).text();
$(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>');
});
$('.reportType li').click(function () {
value1 = $(this).attr('value');
});
$('.reportStatus li').click(function () {
value2 = $(this).attr('value');
});
$('#Submit').click(function () {
alert('value1 = ' + value1 + ' | value2 = ' + value2);
});
If you must have dropdown list and you want to maintain this type of functionality, then i'd simply use hidden input fields something like this:
<div class="btn-group">
<input type="hidden" id="reportStatus" name="reportStatus" />
<a class="btn btn-default dropdown-toggle btn-select"
data-toggle="dropdown" href="#">
Report Status
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li data-val="1">Active</li>
<li data-val="2">Archived</li>
<li data-val="3">All</li>
</ul>
</div>
JS will be something like:
//$(function () {
// $("#reportStatus").parents("div").find("li").click(function () {
// value = $(this).attr("data-val");
// $("#reportStatus").val(value);
// })
//});
//or something more general:
$(function () {
$(".btn-group").each(function (index, item) {
myInput = $(item).children("input");
$(item).find("li").click(function () {
value = $(this).attr("data-val");
myInput.val(value);
});
});
});
fiddle here
I'm having a little issue while trying to show some data (Villains/Villanos) in a drop down with a ng-repeat. I've been looking around and trying but I can't make it work. I have the following HTML:
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js" </script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-animate.js"></script>
<script>
// This function lets the dropdown button save the name of the Villain that it's selected.
$(function(){
$(".dropdown-menu li a").click(function(){
$(".dropdown-toggle:first-child").text($(this).text());
$(".dropdown-toggle:first-child").val($(this).text());
});
});
</script>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle dropdown-suspects-sides" type="button" id="dropdownMenu1" data-toggle="dropdown">
Suspects
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li class="suspect" role="presentation" data-ng-repeat = "villain in villains">
<a role="menuitem" tabindex="-1" href="#">
<span class="glyphicon glyphicon-user"></span> {{villain}}
</a>
</li>
</ul>
</div>
/* Controllers */
...
$scope.getVillains = function() {
$http.get("/getVillains")
.success(function(data) {
$scope.villains = data
}
)
};
...
As you can see, I'm trying to make a dropdown to show all the Villains I have. The items appear correctly if they're showed in a normal list so the items can be "used", but they're not appearing if I try to show them this way. I'm pretty sure I'm doing something wrong here but I can't guess what is it. Thanks in advance!
This is my HTML code :
<div class="span4">
<div class="hero-unit" style="padding:10px 10px 10px 10px">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
North Delhi
</a>
</div>
<div style="height: 0px;" id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<ol>
<li><a id='link' href="#" name="Some name1 ">Some link1</a> </li>
<li><a id='link' href="#" name="Some name2">Some link2</a> </li>
</ol>
</div>
</div>
</div>
</div>
and this is my jQuery code
$(document).ready(function() {
$('#link').click(function() {
var n = $(this).attr(name); //alerts undefined
alert(n);
$('#results').html(' ').load('/donate/?n=' + n);
});
});
My HTML code has several accordion-inner divs with multiple links. I want to get the name attribute of the clicked link. This code alerts me undefined check my jQuery code and please tell me what am i doing wrong?
I am new to jquery so please help.
The problem is that you are not putting name in quotes, so Javascript looks for a variable named name and doesn't find one. You should change that to:
var n = $(this).attr("name");
Apart from that, your ids are not unique. This is illegal and practically guaranteed to give you problems in the future. Follow the suggestion of #nbrooks and change the overused id to a class.
Use quotes for the attribute name
$(document).ready(function() {
$('#link').click(function() {
var n = $(this).attr("name"); //alerts undefined <- quotes here
alert(n);
$('#results').html(' ').load('/donate/?n=' + n);
});
});
Later edit: Do not use duplicate IDs ... use class instead !
Both your links have the same id attribute, which are required by the HTML spec to be unique. jQuery is only giving you one element back. Use a class attribute/selector combination instead:
<li><a class='link' href="#" name="Some name1 ">Some link1</a> </li>
<li><a class='link' href="#" name="Some name2">Some link2</a> </li>
$(".link").click(function() {
var n1 = $(this).attr("name"); //Name should be a string here
var n2 = this.name //name should be a variable here
});
$('#link').click(function() {
var n = $(this).attr("name");
});
first up change your li to these
<li><a class='link' href="#" name="Some name1 ">Some link1</a> </li>
<li><a class='link' href="#" name="Some name2">Some link2</a> </li>
use class instead of id, as that is a violation on CSS..
and then change your jquery to this
$(document).ready(function() {
$('.link').click(function() {
var n = $(this).attr('name'); //alerts undefined
alert(n);
$('#results').html(' ').load('/donate/?n=' + n);
});
});
use . instead of # and your set