Hey guys I have the following:
$(".views").click(function() {
$(this).(".views").show();
});
$(".closeviews").click(function () {
$(this).(".closeviews").hide();
});
This will open up a list based on which view list they want to look at, for some reason it's telling me Uncaught SyntaxError: Unexpected token (
Once I remove the (this). it goes away, so I am kinda confused as to why it is telling me that.
EDIT:
I changed to this:
$(".views").click(function() {
$(this).find(".views").show()
});
$(".closeviews").click(function () {
$(this).find(".closeviews").hide()
});
Does nothing, if I go to the view list above it opens this one and that one.
UDATE:
HTML:
The one I am trying to open with the above script -
<input type='button' value='View Your Employees' class='views' name='views' />
<input type='button' value='Close' class='closeviews' name='closeviews' />
The one I click above this one, opens the above plus this one:
Script:
$(".notempl").click(function () {
$(".notempltable").show();
});
$(".closenotempl").click(function () {
$(".notempltable").hide();
});
HTML:
<input type='button' value='View Employees' class='notempl' name='notempl' />
<input type='button' value='Close' class='closenotempl' name='closenotempl' />
UPDATE:
Hey guys thanks for all the help, got it sorted out. I actually was telling the wrong thing to show and hide. Each list is populated by a PDO statement and a table so I needed to show the table, hide the table not the button.
Thanks guys :)
It should be
$(this).hide();
$(this).show();
If you remove the $(this) then it will hide and show all the elements with that class. If you click on any of them then all of them will be hidden. I do not believe you want that.
I think you mean $(this).find(".views").show()
Demo
HTML:
<ul class='viewstable'>
<li>Sample</li>
<li>Sample 2</li>
</ul>
<input type='button' value='View Your Employees' class='views' name='views' />
<input type='button' value='Close' class='closeviews' name='closeviews' />
JS:
$(function () {
$(".views").click(function () {
$('.viewstable').show();
});
$(".closeviews").click(function () {
$('.viewstable').hide();
});
});
Why do you want to find the same class. As you can just do $(this) to access the class and its done:
$(".views").click(function() {
$(".closeviews").show(); //Show close
});
$(".closeviews").click(function () {
$(".views").hide(); // Hide view
});
Related
I am a beginner in javascript, hopefully you can help me with this problem..
I have 2 buttons in html form and 1 checkbox, 1 button should be hidden and the other is visible. My problem is how to show the hidden button and hide the visible button at the same time when the checkbox is checked..
I know how to hide/show the button flip-ch1 but I can't do it to other button.
I have a script here:
$(document).ready(function() {
$('#flip-ch1').hide();
$('#radio').mouseup(function() {
$('#flip-ch1').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" name="radio" id="radio">
<button class="btn_style" id="ch1">Add</button>
<button class="btn_style" id="flip-ch1">Add</button>
</div>
Toggle them both:
<script type="text/javascript">
$(document).ready(function(){
$('#flip-ch1').hide();
$('#radio').mouseup(function () {
$('#ch1').toggle();
$('#flip-ch1').toggle();
});
});
</script>
Just add this line:
$('#ch1').toggle();
So, the complete js code would be:
$(document).ready(function () {
$('#flip-ch1').hide();
$('#radio').mouseup(function () {
$('#flip-ch1').toggle();
$('#ch1').toggle();
});
});
Do not get confused by the .hide(). It is used to hide one of the buttons only in the beginning. No need to use afterwards. The reason that you do not see any changes after toggling the checkbox, is that when first button is hidden the second one gets its place, the place does not remain empty. You can spot all this that I mentioned on inspect element of any major browser.
Try $('#radio').is(':checked') as below
$(document).ready(function() {
$('#flip-ch1').hide();
$('#radio').on('change', function() {
if ($('#radio').is(':checked')) {
$('#flip-ch1').show();
$('#ch1').hide();
} else {
$('#flip-ch1').hide();
$('#ch1').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" name="radio" id="radio">
<button class="btn_style" id="ch1">Add 1</button>
<button class="btn_style" id="flip-ch1">Add 2</button>
</div>
I got school homework for today. I can pass the emoji to a textbox already but it will replace the previous emoji or text on the textbox if clicked. I want to know how to not replace the textbox text if I clicked and able to keep input emoji or text. Sorry for my bad english if you guys don't understand.
$(document).ready(function () {
$("ul").hide();
$("input.btnemoji").click(function () {
$("ul").toggle();
$("ul.emoji li").click(function () {
$("#ToSend").val($(this).text());
});
});
});
<asp:Textbox id="ToSend" runat="server" Width="300px"></asp:Textbox>
<input type="button" class="btnemoji" value="😀" />
<ul class="emoji">
<li>😀</li>
<li>😂</li>
<li>😎</li>
<li>😍</li>
<li>😁</li>
</ul>
To add to the existing value you need to append to the val() in the input instead of replacing it each time. To do this you can pass a function to the val() method which handles the appending for you, like this:
$(document).ready(function() {
$("ul").hide();
$("input.btnemoji").click(function() {
$("ul").toggle();
});
$("ul.emoji li").click(function() {
var $li = $(this);
$("#ToSend").val(function(i, v) {
return v + $li.text();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="ToSend" width="300px">
<input type="button" class="btnemoji" value="😀" />
<ul class="emoji">
<li>😀</li>
<li>😂</li>
<li>😎</li>
<li>😍</li>
<li>😁</li>
</ul>
Also note that I moved the $("ul.emoji li").click() handler outside of the one for .btnemoji as you were repeatedly adding new event handlers each time the ul was toggled.
Here is the shortest method. All you need is to use this:
$("#ToSend").val($("#ToSend").val()+$(this).text());
$(document).ready(function () {
$("ul").hide();
$("input.btnemoji").click(function () {
$("ul").toggle();
});
$("ul.emoji li").click(function () {
$("#ToSend").val($("#ToSend").val()+$(this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="ToSend"/>
<input type="button" class="btnemoji" value="😀" />
<ul class="emoji">
<li>😀</li>
<li>😂</li>
<li>😎</li>
<li>😍</li>
<li>😁</li>
</ul>
$("#ToSend").append($(this).text());
User append function without using
I have a form, and I'm trying to use a dropdown as a message displayer. When I focus out the input, the dropdown displays. The problem is that it closes right after showing.
<form method="post">
<input id="name" type="text" name="name">
<li class="dropdown list-unstyled">
<a class="dropdown-toggle" role="button"data-toggle="dropdown"></a>
<ul class="dropdown-menu">
My message.
</ul>
</li>
</form>
Jquery
$(document).ready(function (){
$('#name').focusout(function () {
$('.dropdown-toggle').dropdown('toggle');
});
});
I couldn't figure out why it closes yet. Strange thing is that if I click outside and drag the mouse just a little before releasing it, the dropdown doesn't close.
Thanks!
fiddle https://jsfiddle.net/syp7ynqm/
edit: the problem seems to be that the dropdown detects the outside click right after it shows, so it closes (as it should) but I would like to disable this function, only for this first click, so that on the focus out the message would be displayed correctly.
You can just go with the show method. Fiddle.
$(document).ready(function (){
$('#name').focusout(function () {
$('.dropdown-menu').show();
});
});
And your html should look like the following because li should be a child of ul so you would want to go with the folling html.
<form method="post">
<input id="name" type="text" name="name">
<div class="dropdown">
<div class="dropdown-menu">
My message.
</div>
</div>
</form>
$(document).ready(function (){
$('#name').focusout(function () {
$('.dropdown-menu').toggle();
});
$(document).mousedown(function(){
$('.dropdown-menu').hide();
})
});
Instead of the dropdown method use toggle to show or hide the dropdown.
$(document).ready(function (){
$('#name').focusin(function(){
$('.dropdown-menu').toggle();
});
$('#name').focusout(function(){
$('.dropdown-menu').toggle();
});
});
This results in the dropdown showing up when the input is focused and disappearing when you click away.
Check this fiddle : https://jsfiddle.net/e59xb38p/40/
$(document).ready(function (){
var $dropDownMenu = $('.dropdown-menu');
// displays as default
$dropDownMenu.css("display", "block");
$('#name')
.focusin(function () {
$dropDownMenu.css("display", "none");
})
.focusout(function () {
$dropDownMenu.css("display", "block");
});
});
I'm working on an application in which mimics desktop style application windows that open, minimize and close. I've managed to get them to expand and collapse, but I am unable to get the to close, and I can't figure out why. I need to be able to close the current div by clicking a button, see code / eg. below.
<script>
$(document).ready(function () {
$("form.common").first().show();
$(".expand").click(function () {
$(this).parents().next("form.common").show();
})
$(".collapse").click(function () {
$(this).parents().next("form.common").hide();
});
$(".close").click(function () {
$(this).parents().next("div.module").hide();
});
});
</srcipt>
<div id="task_manager" class="module"> <!-- Need the x with class close to hide this div-->
<h3>Task Manager</h3> <!-- This header and below icons are shown when minimized-->
<div class="module_actions">
<span class="icons_small right close">X</span>
<span class="icons_small right collapse">-</span>
<span class="icons_small right expand">+</span>
</div>
<form class="common">
<fieldset>
<legend> Some Titlee/legend>
</fieldset>
</form>
</div>
Can anyone see why this is not hiding the div?
THanks,
The answer is in the question:
$(".close").click(function () {
$(this).closest("div.module").hide();
});
Demo fiddle
Also you should change your calls to parents() to just parent() so you just go up one level in the DOM tree
You had a missing < in <legend> Some Titlee/legend>, after that it works.
Check here
This should work :
$(".close").click(function () {
$(this).parent().hide();
});
JSFiddle
Doc : parent()
Erm, why this don`t work, iv used similar code like this for my site many times..butnow dont work..
HTML
<div><span>a</span><input type='hidden' /> <input type='button' onClick='Remove(event)' />
JQuery
function Remove(e){
e.preventDefault();
$(this).closest('div').remove();
}
Looks like $(this) is not my button. I tested with alert($(this).val()) and nothing heppend.
How about adding a class to the button element and bind a handler to the button
<div>
<span>a</span>
<input type='hidden' />
<input type='button' class'removeDiv' />
Code:
$(function () {
$('.removeDiv').click (function () {
$(this).parent().remove();
// As I see the input is direct child of the div
});
});
My divs are created from clientside and serverside too. Its much easy to add onclick function instead to unbind-rebind all on new item, no?
In such cases you can use delegated events. See below,
$(function () {
//Replace document with any closest container that is available on load.
$(document).on('click', '.removeDiv', function () {
$(this).parent().remove();
// As I see the input is direct child of the div
});
});
This should work!
HTML
<div><span>a</span><input type='hidden' /> <input type='button' onClick='Remove(this)' />
JQuery
function Remove(obj){
$(obj).closest('div').remove();
}