I have an input field with id="search".
<input id="search" type="text" />
Also there are few <div>'s that contains some text, like this:
<div id="textblock">Some text here</div>
<div id="textblock">Some other text here</div>
<div id="textblock">Few strokes</div>
<div id="textblock">More words</div>
I need to change style of a <div> (display:none) if that <div> had a text that user types in input field on the go.
For example, if value in the input would be "strokes", div (or divs) with word "strokes" disappears:
<div id="textblock">Some text here</div>
<div id="textblock">Some other text here</div>
<div id="textblock">More words</div>
I was looking for a jQuery solution, and I found some parts of code, but I can't put them together into one working piece. I know I should use keyUp() function, :contains() etc.
Firstly, id attributes must be unique - you may not have multiple elements with the same ID. Instead you should use a class attribute:
<div class="textblock">Some text here</div>
<div class="textblock">Some other text here</div>
<div class="textblock">Few strokes</div>
<div class="textblock">More words</div>
To then filter you can use jQuery's :contains() selector to determine which of your .textblock elements contain the text entered into your input element. For this I'm using a blur event handler which will trigger when the input element no longer has focus:
$('#search').on('blur', function() {
$('.textblock:contains(' + this.value + ')').hide();
});
JSFiddle demo.
If you want this to happen as soon as content is entered into the input element, we can use an input event handler instead and combine :contains() with jQuery's :not() selector to show elements which may have previously been hidden:
$('#search').on('input', function() {
$('.textblock:contains(' + this.value + ')').hide();
$('.textblock:not(:contains(' + this.value + '))').show();
});
JSFiddle demo.
As pointed out by Dreamonic in comments here, if you then want to handle the user removing the content from the input element, we need to ensure that we don't match the empty input against the .textblock contents. We can do this by using trim():
$('#search').on('input', function() {
if (this.value.trim().length > 0) {
$('.textblock:contains(' + this.value + ')').hide();
$('.textblock:not(:contains(' + this.value + '))').show();
}
else
$('.textblock').show();
});
JSFiddle demo.
Id's in your DOM should be unique. So changed your id's to classes for demo. Use .blur() and :contains(). Try this:
$("#search").blur(function(){
if($(this).val().length)
$("div.textblock:contains("+$(this).val()+")").hide();
else
$("div.textblock").show();
});
DEMO
$( "div" ).each(function( index ) {
if($( this ).text().contains($("#search").text()))
$(this).hide();
});
try above code on blur event of textbox
Related
I am a beginner in programming and am stuck in a problem. I want to find the last child (element) of parent (form). Then I want to insert an input element after the last child but it should be inside the form not after the form (outside). The form might contain input elements as well as select elements. How to accomplish it? I have tried the following ways but they don't work unfortunately.
var lastRepeatingGroup = $('.form-to-be-submitted:last'); // this one gives me the whole form meaning if I add something it will added at the end of the form
var lastRepeatingGroup = $('.form-to-be-submitted input:last'); //this gives me the last input element
var lastRepeatingGroup = $('.form-to-be-submitted input select').last(); //this does nothing, I think its an error
$newSection = $('<input type="button" value="newbutton" name="mybutton"/>');
newSection.insertAfter(lastRepeatingGroup); // when I use this statement it adds after the form not inside the form
So you just need some guidance on CSS Selectors and Jquery methods.
First lets look at:
The form might contain input elements as well as select elements.
So in CSS to do an or you need to use a comma:
input,select
if you are looking for direct descendants you need to use a >
form > input, form > select
These are then wrapped in jquery:
$('form > input, form > select')
Which yields all items, so we use last() to grab the last element:
var $last = $('form > input, form > select').last();
(if you don't need the > just remove it).
This was pretty close:
var lastRepeatingGroup = $('.form-to-be-submitted input select').last();
but it's looking for a select element in a input element in that class. Just needs a little adjustment:
var lastRepeatingGroup = $('.form-to-be-submitted input, .form-to-be-submitted select')
.last();
If you want to insert the element at the end of a specific element, you don't need to find the last item. Just use jquery's append
Except:
Consider the following HTML:
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
You can create content and insert it into several elements at once:
$( ".inner" ).append( "<p>Test</p>" );
Each inner element gets this new content:
<h2>Greetings</h2>
<div class="container">
<div class="inner">
Hello
<p>Test</p>
</div>
<div class="inner">
Goodbye
<p>Test</p>
</div>
</div>
This should work:
$('.form-to-be-submitted').children().last()
.children() will select all the children in your form and .last() filters that further to only select the last child.
And to insert content after that element, just use .after() like:
$('.form-to-be-submitted').children().last().after('<input>')
Example:
$('.form-to-be-submitted').children().last().after('<input type="radio">')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-to-be-submitted">
<input type="text">
<input type="radio">
<input type="checkbox">
<select>
<option></option>
</select>
</form>
JQuery not needed. To insert a new element just before the end of the form, simply use .appendChild().
var frm = document.getElementById("theForm"); // Get reference to form
// Create a new element and configure it
var newElement = document.createElement("input");
newElement.id = "txtUser";
// Simply append it to the form.
frm.appendChild(newElement);
console.log(frm.elements[frm.elements.length-1]); // Get last element in form
<form id="theForm">
<input type="text">
<select>
<option>one</option>
<option>two</option>
<option>three</option>
</select>
<button type="button">Click Me</button>
</form>
I am trying to create an effect whereby clicking on a title toggles the corresponding content div. Clicking on another title while some content is showing should hide that content div and show the content div corresponding to the title just clicked.
However the code is not doing anything, as you can see on the following jquery: http://jsfiddle.net/dPsrL/
Any ideas?
HTML:
<div class="row title">
<div class="title" industry_id="education">Ed</div>
<div class="title" industry_id="tech">Tech</div>
<div class="title" industry_id="finance">Fin</div>
</div>
<br>
<br>
<div class="row content">
<div class="content" id="education">Education is great</div>
<div class="content" id="tech">Technology is awesome</div>
<div class="content" id="finance">Finance is super</div>
</div>
JAVASCRIPT:
$(document).ready(function () {
$('.content').hide();
});
('.title').on('click', function () {
var clicked = $(this).attr('industry_id');
alert(clicked);
$("#"+clicked).toggle(400);
$("#"+clicked).siblings().hide();
});
Instead of toggling the clicked element first and then hiding the others, why don't you just hide everything first and then show the clicked one? Saves you a check, and all you have to do is switch the order
$('.title').on('click', function () {
var clicked = $(this).attr('industry_id');
alert(clicked);
$('.content').hide();
$('#' + clicked).show(400);
});
Your attribute doesn't have the id selector in it. You need to do a string concatenation :
$('.title').on('click', function () {
var clicked = $(this).attr('industry_id');
alert(clicked);
$('#' + clicked).toggle(400);
$('#' + clicked).siblings().hide();
//The two last lines could be :
//$('#' + clicked).toggle(400).siblings().hide();
});
Also you have to remove the class content and title on the row since it trigger the click event and the hide part.
Here's a working fiddle : http://jsfiddle.net/dPsrL/3/
Typo on ('.title'). Should be $('.title'). Also, you should probably not give the container divs the same class as the child divs and then use that same class in your CSS and jQuery. It just makes selection more difficult.
jsFiddle example
I'm making a page that will generate a table of divs. Each row has a cell with a link. When that link is clicked a hidden div between the current row and the next will toggleSlide out.
The link will have id="clickLink_10" and the hidden div will have id="10" and class="hiddenDiv". The number 10 is a dynamic number generated form the id of the post in the database.
I have the animation working fine, as long as I hard code the numbers. But I want to connect the link to it's hidden div dynamically, since the rows will be fetched from a database.
Here's an example of how the html may look (it's more complicated in reality, but this is the key part):
<div>CLICK HERE</div>
<div class="hiddenDiv" id="11">blabla</div>
<div>CLICK HERE</div>
<div class="hiddenDiv" id="1">blabla</div>
<div>CLICK HERE</div>
<div class="hiddenDiv" id="3">blabla</div>
And here's what I'm trying to do in jQuery:
hiddenDivs = $('.hiddenDiv');
for(var i = 0; i < hiddenDivs.length; i++ ) {
$("#clickLink_" + hiddenDivs[i].id).click( function() {
$(hiddenDivs[i]).slideToggle(1000);
});
}
Which won't work obviously.I know I'm treating the i-variable wrong so view this a s dummy code. Very grateful for any help.
A valid option could be using data- attributes. I'll also change your numeric ids as only numbers is not a valid html id.
HTML
<div>CLICK HERE</div>
<div class="hiddenDiv" id="hidden_11">
<div>CLICK HERE</div>
<div class="hiddenDiv" id="hidden_1">
<div>CLICK HERE</div>
<div class="hiddenDiv" id="hidden_3">
JS
$(".clickLink").click( function() {
var hiddenDivId = "hidden_" + $(this).data("hidden-id");
$("#" + hiddenDivId ).slideToggle(1000);
});
You can use the ^= operator with an attribute selector to select elements. the ^= operator tells it to look for the attribute that "starts with" something, so:
$("a[id^=comment_]").click(function(e){
e.preventDefault();
var hideId = $(this).attr("id").replace("comment_","");
$("#"+hideId).slideToggle(1000);
});
So the selector a[id^=comment_] is basically saying select all anchor tags that have an id that start with comment_
I’m looking for some direction for my problem.
I’ve HTML divs and I want to replicate it when user clicks on span with id plus-1.
This is my html
<div id = “tab”>
<div class="row">
<div>
<select id="ProjectsFolder0FolderId" name="data[ProjectsFolder][0][folder_id]">
<option value="1">Project Presentation</option>
<option selected="selected" value="4">Project Root</option>
</select>
</div>
<div>
<div>
<input type="text" required="required" id="ProjectsFolder0Linux" value="xyz" name="data[ProjectsFolder][0][linux]">
</div>
</div>
<div id="plus-1" >
<span>
Click here
</span>
</div>
</div>
</div>
Jquery
$(document).on('click', '#plus-1' , function() {
var html = "<div class=\"row\" >"
???
+ "</div>";
$('#tab').append(html);
});
It is appending above html defined in jquery , but I don’t know how to append entire HTML efficiently as required above on each click.
Demo FIDDLE
Jquery
$(document).on('click', '#plus-1' , function() {
var html = $(this).parent().clone();
html.find('#plus-1').attr('id','plus-'+($('#tab').find('.row').length+1));
$('#tab').append(html);
});
Made a jsfiddle for you - http://jsfiddle.net/23GCn/. You also have an error in your html, you need to use correct parenthesis on <div id="tab">
jQuery(function($){
var count = 1;
$(document).on("click", "[id^='plus']", function(){
newBlock = $(this).parents(".row").clone();
count += 1;
// change id of Plus button
newBlock.find("[id^='plus']").attr("id", "plus-"+count);
// Change id and name of select box
newBlock.find("select")
.attr("id", "ProjectsFolder"+count+"FolderId")
.attr("name", "data[ProjectsFolder]["+count+"][folder_id]");
// Same for input
newBlock.find("input[type='text']")
.attr("id", "ProjectsFolder"+count+"Linux")
.attr("name", "data[ProjectsFolder]["+count+"][linux]");
// append new element to your tab
$("#tab").append(newBlock);
});
});
Note that [id^='plus'] type selectors are very inefficient, means, slow. Consider using classes instead of ids, this way you avoid all of the code required to change ids, since you can't have elements with same id on your page obviously.
I have the div event_wrapper that can be dynamically added on a page by clicking the link in add-event. The user can delete/add these divs as many times as they want. If the user chooses to delete all of these event_wrapper divs, I want to change the text inside add-event. Here is the HTML:
<div class="event_wrapper">
<div class="event">
<div class="well darkblue-background pull-left">
<a class="close tooltip" data-tooltip="Delete this event"><i class="icon-remove"></i></a>
</div>
</div>
</div>
<div class="add-event pull-left">
And Then...
</div>
(I am using jQuery) I tried using :empty selector, but it does not seem to be working. Any suggestions? Thanks!
Have a look at - https://stackoverflow.com/a/3234646/295852
And then use contentChange() like:
$('.event-wrapper').contentChange(function(){
if($(this).children().length > 0){
// events exist
$(".add-event pull-left").children('a').html('And Then...');
} else {
// no events
$(".add-event pull-left").children('a').html('your text');
}
});
if($(".event-wrapper").html() == null) {//looking inside event-wrapper; if it contains any thing
$(".add-event a").html("whatever");
}
if(!$(".event_wrapper")){
$(".add-event pull-left").html("Whatever text you want here"); //changes the text of the div
//or
$(".add-event pull-left").children('a').html("whatever text you want here"); //changes the text of the anchor child
}