Hi I try to show a div element in jQuery mobile when the user touch the button. I already created own classes for the button and for the div element, but nothing happens. What classes should I take?
JS:
$(document).ready(function(){
$(".commentbtn").on("click", function(e) {
e.preventDefault(); // in some browsers a button submits if no type=
$(this).siblings("div.comment").toggle();
});
});
CSS:
.comment {
display:none;
}
HTML:
<?php foreach ($result as $key => $row): ?>
<div class="ui-btn-text">
<button class="commentbtn" data-rel="button">comment</button>
<div id="createcomment" class="comment" data-theme="a">
<form data-ajax="false" name="login-form" class="login-form" action="./comments.php" method="post" style="padding:20px 40px;">
<div class="content">
<textarea rows="1" name="text" id="text" class="foo"></textarea>
</div>
</form>
</div>
</div>
<?php endforeach; ?>
You haven't got any element with the class .btn-info so you wouldn't be able to call the event from:
$(".btn-info").on("click", function(e) {
e.preventDefault(); // in some browsers a button submits if no type=
$(this).closest(".comment").children(".comment").show();
});
You have an element with the class .commentbtn which you would then do the same as you did with the .btn-info
$(".commentbtn").on("click", function(e) {
e.preventDefault(); // in some browsers a button submits if no type=
// Console log the element
console.log($(this).closest(".comment").children(".comment"));
// Console log not showing the right element. So you need to get the
// sibling of the clicked button
// Instead of doing - $(this).closest(".comment").children(".comment").show();
// You can do the following
$(this).siblings("div.comment").show();
});
.closest() - looks at the element itself and its parents for a match.
.siblings - Get the siblings of each element in the set of matched elements, optionally filtered by a selector.
Example With .show();
Here an example with .toggle(); If you wanted to show/hide the comment with same button. (Just little extra for you to look at)
Example With .toggle();
UPDATE:
Example with .comment shown on load
Your button has class commentbtn, so you should use that instead of btn-info. Also, you should be looking for the sibling div, not the closest.
$(".commentbtn").on("click", function(e) {
e.preventDefault(); // in some browsers a button submits if no type=
$(this).siblings("div.comment").show();
});
JSFiddle demo
Related
I am building a "edit profile" page.
Here is what I want to do:
In each section, the employer will be shown and the edit form will be hidden.
When I click the "edit employer" button, the edit form will be shown and the employer will be hidden.
Here is what I did using jQuery. It does not work when I click on the "edit employer" button. I do not know why this does not work.
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="edit">
<form class="editForm">
employer: <input type="text" value="Citigroup" />
</form>
<div class="contents">Employer: Citigroup</div>
<button class="editButton">Edit Employer</button>
</div>
<script>
$('div.edit').each(function(i) {
$(this).children('.editForm').hide();
})
$('div.edit').each(function() {
$(this).children('.editButton').click(function() {
$(this).children('.editForm').show();
$(this).children('.contents').hide();
});
})
</script>
</body>
</html>
The $(this) inside the click function contains the local instance of the $(this).children('.editButton'). For that reason your code is not finding any .editForm elements.
For this to work you could do something like this:
<script>
$('div.edit').each(function(i) {
$(this).children('.editForm').hide();
})
$('div.edit').each(function() {
var $this = $(this);
$(this).children('.editButton').click(function() {
$this.children('.editForm').show();
$this.children('.contents').hide();
});
})
</script>
If I may I would improve the code with some more changes:
<script>
$('.edit .editForm').hide(); // this will hide all instances of .editForm
$('.edit .editButton').click(function() { //assign 1 handler for all cases
$(this).siblings('.editForm').show(); // show the sibling edit form
$(this).siblings('.contents').hide(); // hide the sibling contents element
});
</script>
Reference:
Sibling Selector: https://api.jquery.com/siblings/#siblings-selector
The problem is the this inside the click handler referring to the button, not the div.edit. Here's one way to fix this:
$('div.edit').each(function(i) {
$(this).children('.editForm').hide();
});
$('div.edit').each(function() {
var $self = $(this);
$(this).children('.editButton').click(function() {
$self.children('.editForm').show();
$self.children('.contents').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edit">
<form class="editForm">
employer:
<input type="text" value="Citigroup" />
</form>
<div class="contents">Employer: Citigroup</div>
<button class="editButton">Edit Employer</button>
</div>
You don't need to use .each() at all. Just do an .click() event on the class of .editButton and use this to find its parent. If you want to make a toggle, you're going to have to make use of a new class or something of that nature to make a conditional statement off of.
//This will hide *ANY* .editForm elements
$('.editForm').hide();
//This will fire off of *ANY* editButton clicks.
$('.editButton').click(function() {
var form = $(this).closest('.edit'); //Get the wrapper
if(form.hasClass('open')) { //Check to see if it is open or not
form.removeClass('open').addClass('close'); //Toggle Classes
form.find('.editForm').show();
form.find('.contents').hide();
} else {
form.removeClass('close').addClass('open');
form.find('.editForm').hide();
form.find('.contents').show();
}
});
I like to use closest and find more than parent and children (respectively). They can go 1-many layers up or down and search the hierarchy for whatever you're looking for, rather than parent and children going up or down a single layer.
If you are inserting your .edit form after the DOM loads, you're going to need to bind your click event to the document
$(document).on('click', '.editButton', function() {
var form = $(this).closest('.edit');
form.find('.editForm').hide();
form.find('.contents').show();
});
I'm trying to show hide immediate next imput within the div, but it opens all the inputs
I also tried
`$(this).next("input").show();` ( traversing )
nothing seems to work.
Any help?
Here is my http://jsfiddle.net/526stLtg/1/
You need to use siblings() and for toggling visibility use toggle()
$(document).ready(function() {
$(".add-guest > button").click(function() {
$(this).siblings('input').toggle();
});
});
.add-guest input[type="text"] {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="add-guest">
<b>Bride:</b>
<button id="bride">Add</button>
<br>
<input type="text" name="Bride">
</div>
<br/>
<br/>
<div class="add-guest">
<b>Groom:</b>
<button id="bride">Add</button>
<br>
<input type="text" name="Bride">
</div>
You can use this to refer to html element and using .parent() and .find():
$(document).ready(function() {
$(".add-guest > button").click(function() {
$(this).text() === "Add" ? $(this).text("Remove") : $(this).text("Add");
$(this).parent().find("input").toggle();
});
});
.add-guest input[type="text"] {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add-guest">
<b>Bride:</b>
<button id="bride">Add</button>
<br>
<input type="text" name="Bride">
</div>
<br/>
<br/>
<div class="add-guest">
<b>Groom:</b>
<button id="bride">Add</button>
<br>
<input type="text" name="Bride">
</div>
Additionally you can use .toggle() instead of .show.
You can use $(this) to select the clicked button (the event trigger).
Then, if you look at your code, you'll see that the next element is a <br/>, and the next the <input> that you want to show. So, if you change:
$(".add-guest > input").show();
to
$(this).next().next().show();
It will work. You can think tha you can also use a selector to find the first sibling filtered by the selector, i.e.
$(this).next('input').show();
But this doesn't work. This checks if the sibling can be selected with the paseed selector. But you can use the .nextAll('input'), only because in this case there are only one sibling which can be seelcted like this. If not you could use this selector, and .first()
Your original code was selecting all inputs precede by elements with the .add-guest class, whic is not what you wanted to do.
If there are multiple input elemnts within div and you want to select first input element only then use :first pseudo-class
$(this).parent().find("input:first").toggle();
I have a dynamic div's which needed to hide when relevant delete button clicked. This divs also have dynamic id's. i want to hide relevant div where button is clicked. im only getting the first div id all the time. Im new to jQuery can someone please help.
$(document).ready(function(){
$(".reBox").click(function() {
alert($('.reBox').attr('id'));
// $(this).hide();
});
});
<div class="boxx" id="<?php echo $tot_meal; ?>">
<div class="reBox" id="<?php echo $tot_meal; ?>">
<img src="../images/error.png" width="16px" height="16px" />
</div>
</div>
As you have dynamic html elements use .on(). Try this:
$(document).ready(function(){
$(".boxx").on('click','.reBox',(function() {
$(this).hide(); //to hide reBox
$(this).parent("div.boxx").hide(); //to hide boxx element
});
});
Since you have dynamic elements, try event delegation
$(document).on('click', ".reBox", function () {
console.log(this.id);
$(this).hide();
//if you want to close boxx
// $(this).closest('.boxx').hide();
});
html:
<div style="width: 260px;margin:25px 0 0 30px">
<input type="checkbox" name="send_email" class="delete_followup" />Send email alerts
<input type="checkbox" value="delete" type="checkbox" />Send SMS alerts <button type="submit" name="delete" value="{{follower.id}}" class="delete_follower">Delete</button>
</div>
js:
$(".delete_followup").click(function(){
var $this = $(this);
$(this).find(".delete_follower").show();
});
I want to show the hidden button on clicking the delete_followup class.i TRIED WITH ABOVE jQuery but not working.
Or try .nextAll:
$(this).nextAll(".delete_follower").show();
Working here: http://jsfiddle.net/tw5XK/
The delete_follower element is not a decedent of delete_followup element, it is a sibling element so instead of find() you need to use siblings()
$(".delete_followup").click(function(){
var $this = $(this);
$this.siblings(".delete_follower").show();
});
You are trying to search downward into the div, when you already have a reference to the element you want. Making it way more complicated than it needs to be lol
$(".delete_followup").click(function(){
$(this).show();
});
Whenever you trigger off a click event, the actual element clicked on is passed through as the scope of the function. Since you are triggering off the click of ".delete_followup", that div is your element scope
Try this:
$(".delete_followup").click(function () {
if (this.checked) {
$(this).siblings(".delete_follower").show();
} else {
$(this).siblings(".delete_follower").hide();
}
});
Demo here
I am having the div like below..
<div id="div1">Edit your content
<a id="link1" href="#">click to Edit</a>
<textarea id="text1" cols="3"/>
<input type="button" id="button1" value="Save" />
</div>
What i want is..
I want to show and hide the textarea and save button every time the link is clicked.
And when an save button clicked the textarea content has to be added before the textarea as listitem, every time the save button clicked the edited text has been updated into that list.
Please anyone guide me to do this..
The simples approach would be if the Edit your content part could be wrapped in a container of its own, so that the content of that container could be replaced entirely upon save:
<div id="div1">
<span class="content">Edit your content</span>
<a id="link1" href="#">click to Edit</a>
<textarea id="text1" cols="3"></textarea>
<input type="button" id="button1" value="Save" />
</div>
$('#div1 > a').click(function() {
var parent = $(this).closest('div');
parent.find('textarea').val(parent.find('.content').html());
parent.find(':input, .content, a').toggle();
});
$('#div1 > input[type=button]').click(function() {
var parent = $(this).closest('div');
parent.find('.content').html(parent.find('textarea').val());
parent.find(':input, .content, a').toggle();
});
Demo
You'll note that the declaration of parent could easily be replaced with #div1 in this particular example, but with this code, you could easily change the #div1 > a selector to one that matches several elements (i.e. .editable > a; demo)
Edit
It appears I misread your question the first time around, but the changes aren't all that big.
Rather than setting the textbox to the value of your .content, you would clear it each time you're showing it. Also, you might not want to hide the .content each time the edit link is clicked. At the click of the save button, you create a new element, and append that after the last .content, rather than updating the existing one.
$('#div1 > a').click(function() {
var parent = $(this).closest('div');
parent.find('textarea').val('');
parent.find(':input, a').toggle();
});
$('#div1 > input[type=button]').click(function() {
var parent = $(this).closest('div');
$('<div/>', { 'class': 'content' })
.html(parent.find('textarea').val())
.insertAfter(parent.find('.content:last'));
parent.find(':input, a').toggle();
});
Note that I've changed .content to a div, because of its block-level behavior. This should of course be reflected in the initial markup as well.
Demo
Edit (2)
To account for your question in comments, about adding the textarea and save button upon link click, you'd have to make a few changes. First of all, the link click listener would have to be updated with code to add the elements, and presumably with a first check to see whether or not they exist already (i.e. second click of link button):
$('#div1 > a').click(function() {
var parent = $(this).closest('div');
var txt = parent.find('textarea');
if(txt.length == 0) {
txt = $('<textarea/>', { id: 'text1', cols: 3 });
txt.appendTo('#div1');
$('<input />', { type: 'button', id: 'button1' }).val('Save').appendTo('#div1');
}
txt.val('');
parent.find(':input, a').toggle();
});
Second, your listener $('#div1 > input[type=button]') will no longer work exactly as written, because there is no such button in the document at the time when the selector is evaluated. To fix this, you could either use a live delegate, such as:
$('#div1').on('click', 'input[type=button]', function() { ... });
Demo. (for earlier jQuery versions, use .delegate(selector, event, handler) rather than .on(event, selector, handler).)
... Or, you could add the listener immediately to the button as you're creating it:
$('<input />', { type: 'button', id: 'button1' })
.val('Save')
.appendTo('#div1')
.click(saveEdit);
Demo
As a bonus, I'm adding focus to the textbox after showing it in these demos. You may want that as well.
you can do it like this
HTML
<div id="div1">Edit your content
<a id="link1" href="#">click to Edit</a>
<ul id="NewElement"></ul>
<textarea id="text1" cols="3" style="display:none;"></textarea>
<input type="button" id="button1" value="Save" />
</div>
Jscript
$('#link1').click(function(){
$('#text1').toggle();
});
$('#button1').click(function(){
$('#NewElement').append('<li>' + $('#text1').val() +'</li>');
});
Live Demo
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#link1').click(function(){
$('#some').toggle();
});
$('#button1').click(function(){
$('ul').append('<li>'+$('#text1').val()+'</li>');
})
})
</script>
</head>
<div id="div1">Edit your content
<a id="link1" href="#">click to Edit</a>
<ul></ul>
<div id="some">
<textarea id="text1" cols="3"/></textarea>
<input type="button" id="button1" value="Save" />
</div>
</div>