I have a peculiar situation happening with my show hide function,
this is my code :
function expandedFunction(e) {
var $content = $(".expanded").hide();
$(".stylistbutton").on("click", function(e){
$(this).toggleClass("expanded");
$content.toggle();
});
}
with this code being the call to action:
<div>
<table>
<tr><td width="15%">
</td><td width="55%">
<label for="advanced">Advanced Settings?</label></td><td width="15%">
<input class="stylistbutton" type="button" onClick="expandedFunction(event)" value="+">
</td><td width="15%">
</td></tr>
</table>
</div>
I then have my expand/collapse boxes with the class="expanded".
Now for the question.
The function works, It will expand and collapse. However, when I click the button to expand the first two times it doesn't do anything, then it will open, close, then when it next opens it loses the button so I can no longer show and hide my toggled classes.
Can anyone explain why it is not opening when I click it the first few times, then can you explain why the button disappears, then lastly if you could help me fix the problem you would have made my day a lot more worthwhile!
Html:
<div>
<table>
<tr><td width="15%">
</td><td width="55%">
<label for="advanced">Advanced Settings?</label></td><td width="15%">
<input class="stylistbutton" type="button" value="+">
</td><td width="15%">
</td></tr>
</table>
</div>
JQuery:
$(document).ready(function(){
$(".stylistbutton").click(function(){
$(".expanded").toggle();
});
});
And remeber to set expanded class style to display: none; at start. Isn't it a better solution? :)
Related
I would like to show the second text field incl. copy button as soon as i submit the the first text field. how i can hide the second text field and show after submit?
I tried as following:
HTML:
First Texfield:
<tr><td><input type="text" id="source">
<button type="submit" id="submit" id="formButton">Submit</button></td></tr>
Second Textfield:
<tr><td><input type="text" size="62" id="target" id="form1">
<button onClick="myFunct()" id="form1">Copy</button></td></tr>
JQuery:
<script>
$("#formButton").click(function(){
$("#form1").toggle();
});
</script>
Thank you so much for your support.
If you intend to submit data to a server normally you should have your inputs and buttons wrapped in a <form> tag, so I added one and set it up so that it sends to a live test server. There's also an iframe added as well to display the server's response. The jQuery is simple:
$('#main').on('submit', function() {...
When form#main "hears" a submit event (i.e. when the button[type=submit] is clicked...
$('.row2').removeClass('hide');
...Remove the class .hide form tr.row2 which removes the style display:none
BTW, ids must be unique. #form1 is duplicated and there's 2 ids on one button in OP code.
Demo
$("#main").on('submit', function() {
$(".row2").removeClass('hide');
});
.hide {
display: none
}
<form id='main' action='https://httpbin.org/post' method='post' target='view'>
<table>
<tr>
<td><input type="text" id="source" name='source'>
<button type="submit">Submit</button></td>
</tr>
<tr class='row2 hide'>
<td><input type="text" size="62" id="target" name='target'>
<button type='button'>Copy</button></td>
</tr>
</table>
</form>
<iframe name='view'></iframe>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The first problem is that you have duplicate IDs on the button (both submit and formButton). An element can only have one ID. I've gone with the latter in my example.
Second, you have duplicate form1 IDs, which is also invalid markup. Simply make use of classes instead.
Then it's just a matter of hiding these elements by default, and showing them on click of the button. I'd recommend .show() for this instead of .toggle().
This can be seen in the following:
$("#formButton").click(function() {
$(".form1").show();
});
.form1 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<input type="text" id="source">
<button type="submit" id="formButton">Submit</button>
</td>
</tr>
<tr>
<td>
<input type="text" size="62" id="target" class="form1">
<button onClick="myFunct()" class="form1">Copy</button>
</td>
</tr>
In my page I have some styling, then a form, then some java-script code.
I have two issues:
First: when I click button 'submit', all my styling goes away, also the expected action (div to appear) does not happen.
Second: I have an output-text for displaying a small phrase saying subscription was successful or not, which reads a bean property called result. The problem is that this property never gets refreshed. The inputFields after I refresh the page they come up clean, this outputText no. How can I make it get without any text when user comes to the page for the second time?
Thank you so much!
Style:
#mainTableRightDiv1 {
display: none;
background-color:rgba(0, 0, 0, 0.5);
}
Body:
<button class="button" id="subscribe">Subscribe</button>
<div id="mainTableRightDiv1">
<table class="hidden" id="formTable">
<tr>
<td id="formTd">First Name:</td>
<td><h:inputText class="form" id="inputFirstName" value="#{visitor.firstName}"/></td>
</tr>
<tr>
<td id="formTd">Last Name:</td>
<td><h:inputText class="form" id="inputLastName" value="#{visitor.lastName}"/></td>
</tr>
<tr>
<td id="formTd">Email:</td>
<td><h:inputText class="form" id="inputEmail" value="#{visitor.email}"/></td>
</tr>
</table>
</div>
<p><h:commandButton class="button" id="submit" value="Submit" action="#{visitor.registerVisitor()}"/></p>
<p><h:outputText class="output" id="result" value="#{visitor.result}"/></p>
Javascript:
$("#subscribe").click(function (e) {
$("#mainTableRightDiv1").css('display', 'block');
});
Replace your jquery statement with the .on() event instead of .click(),also make sure that you have included jQuery.
As for your second question, you can set the result to no text when the document has been compiled with jQuery
$(document).ready(function(){
result = "";
$(document).on("click","#subscribe",function(){
$("#mainTableRightDiv1").css("display","block");
})
});
It is recommended to put all of your jquery code in the $(document).ready() function to ensure that everything executes.
I have a jquery event handler for an element w/ID = submitButton. The code works fine -- but if I click on another button w/ID = yeahTotallyButton then the jquery event handler for the submitButton stops working. No errors show in the console -- but the handler for #submitButton stops firing. The debugger does not stop at breakpoints for submitButton once I have clicked the yeahTotallyButton.
In debugging so far, I have noticed that by commenting out two lines in the event handler for the yeahTotallyButton (indicated in the code below) then the submit button works even after I click the yeahTotallyButton. So basically something in these two lines of code is breaking the submitButton handler. Why is this? How can I fix this? I need to do the things that these two lines of code do in my final website.
<body>
<div id='header'>
</div>
<div id='captchaPanel'>
<div id='top'>
<div id='fillerTop'>
</div>
<div id='captcha'>
<img id='captchaText' src='cryptographp.inc.php'> </img>
</div>
</div>
<div id='bottom'>
<div id='left'>
<p id='answerprompt'>Answer: </p>
<input id="answerBox" type="text" name="firstname">
</div>
<div id='right'>
<table id='buttonTable'>
<tr>
<td><img id='recycleButton' src="images/buttons_recycle.png" ></td>
</tr>
<tr>
<td><img src="images/buttons_audio.png" ></td>
</tr>
<tr>
<td><img src="images/buttons_question.png" ></td>
</tr>
</table>
<div id='logo'>
<img src="images/smallLogo.png">
</div>
</div>
<div id='introButtons'>
<button id='yeahTotallyButton' type="submit" class="button">Yeah, totally. I am cool person.</button>
<button id='imARobotButton' type="submit" class="button">No, I can't come. I'm a robot.</button>
</div>
</div>
</div>
<div id='submitDiv'>
<input id='submitButton' type="submit" class="button" value="Submit"/>
</div>
</body>
Here is the script:
$(document).ready(function () {
$("#submitButton").click(function(event) {
$.ajax({
url: 'getRejection.php',
success: function(data) { alert(data) }
});
$('#captchaPanel').animate({ opacity: 1}, 200);
$("#captchaText").attr('src', 'cryptographp.inc.php');
alert(event.target.id);
});
$("#imARobotButton").click(function(){
alert("thanks for being honest");
location.reload();
});
$("#yeahTotallyButton").click(function(){
$("#introButtons").css('visibility','hidden');
//when these two lines are commented out,
//then the submit button works even after
// I click the yeahTotallyButton
//$("#captchaPanel").css('visibility','visible');
// $("#bottom").css('visibility','visible');
$("#top").css('visibility','visible');
$("#left").css('visibility','visible');
$("#right").css('visibility','visible');
$("#captchaPanel").fadeIn("fast");
$("#captchaText").attr('src', 'cryptographp.inc.php');
$("#top").attr('border-radius', '4px');
});
$("#recycleButton").click(function(){
$("#captchaText").attr('src', 'cryptographp.inc.php');
});
});
My guess is that you somehow end up having more than one element with id set to submitButton, and the button you're checking the click on is not the first in this list. For example, in this scenario...
<div id='submitDiv'>
<input id='submitButton' type="submit" class="button" value="Alert Submit" />
<input id='submitButton' type="submit" class="button" value="Alertless Submit" />
</div>
$('#submitButton').click(function() { alert(42); });
... while clicking the first button shows that alert, clicking on the second does nothing.
You can easily patch it by adjusting the selector:
$('[id=submitButton]').click(function() { ... });
Fiddle. But obviously, that'll only mask the real problem: in no circumstances you'd have more than one element with a specific ID in DOM.
The handlers for the yeahTotallyButton were making the captchaPanel element bigger, so that it hung over the submit button -- even though the submitButton was visible. So when you clicked on the submitButton jQuery was not getting the event somehow. Carefully resizing the catpchaPanel solved the problem.
I have some radio buttons in a table. I want to show/hide certain divs in a sibling td when I select certain radio buttons.
Here's the code I have:
$("input[type='radio'].map").change(function () {
$(this).closest('tr').find('.agency-mapping').show();
$(this).closest('tr').find('.agency-new').hide();
});
$("input[type='radio'].new").change(function () {
$(this).closest('tr').find('.agency-mapping').hide();
$(this).closest('tr').find('.agency-new').show();
});
...
<tr>
<td></td>
<td>
<div>
<input type="radio" class="map" value="map" checked="checked" />
<input type="radio" class="new" value="new" />
</div>
</td>
<td>
<div class="agency-mapping">
</div>
<div class="agency-new" style="display:none">
</div>
</td>
</tr>
...
This works fine if I have a couple rows. But I have hundreds of rows, and the performance is really poor. I click a radio button and it takes 5-10 seconds to show/hide the div.
Is there a better way to do this?
You may use .on() to attach the event only on the parent element like <tbody> or <table> instead of having it on every radio button on your table. Like this:
$('tbody').on('click', 'input.map', function(){
...
});
Read "Direct and delegated events" here
. Hope that helps..
I'm trying to make more than one <td> field visible or invisible on my screen based on user input and element class. I'm using jquery, html, and javascript.
Basically, I have an HTML table with different fields. I want these fields to have a class of either "Visible", "Visible and Required", or "Invisible". When the user selects an option, it changes the class of that element by removing the previous one and adding the new one. The onload default of these fields should be invisible.
HTML:
<body onload="ShowTheScreen()">
<table border="1">
<tr>
<td class="ReasonCode" align="center">
<span class="FieldLabel">Reason Code</span>
</td>
<td class="CostCenter" align="center">
<span class="FieldLabel">Cost Center</span>
</td>
</tr>
<tr>
<td class="ReasonCode" align="center">
<input type="text" id="ReasonCode" name="ReasonCode" value="1243">
</td>
<td class="CostCenter" align="center">
<input type="text" id="CostCenter" name="CostCenter" value="00123">
</td>
</tr>
</table>
<input type="button" value="MakeVis" onclick="PopulateTable()">
</body>
Javascript:
function ShowTheScreen(){
ToggleFieldVisibility(".ReasonCode", 3);
ToggleFieldVisibility(".CostCenter", 3);
DisplayFields();
}
function PopulateTable(){
ToggleFieldVisibility(".ReasonCode", 2);
ToggleFieldVisibility(".CostCenter", 1);
DisplayFields();
}
function ToggleFieldVisibility(element, x){
switch(x){
case 1:
$(element).removeClass("Invisible Required").addClass("Visible");
break;
case 2:
$(element).removeClass("Invisible").addClass("Visible Required");
break;
case 3:
$(element).removeClass("Visible Required").addClass("Invisible");
break;
default:
$(element).removeClass("Visible Required").addClass("Invisible");
break;
}
DisplayFields();
}
function DisplayFields(){
$(".Invisible").css({"visibility":"hidden"});
$(".Visible").css({"visibility":"visible"});
}
The problem I'm having is this: When I open the page, the fields get the "Invisible" class added to them as they should be and they become hidden. But when I try and remove the invisible class later and add the visible class, the invisible class is never removed and the visible class is never added: the elements simply retain the classes they had at first, and therefore stay hidden.
I saw previous threads relating to problems with jquery add/removeClass, but none that seemed to help me out. Let me know if you need more info.
UPDATE 1: Thanks for all the replies, everyone! Unfortunately, and I thought this would happen, the code I posted here is a far simplified version of the code I actually have and most of the answers I've received seem to be related to the syntax posted--like the issue with the quotes. I've updated the code to better reflect what I'm really doing. Hopefully this will narrow down what the issue is.
UPDATE 2: I know what I was doing wrong. In my code I have shown here I'm calling ToggleFieldVisibility(".ReasonCode", 2), which works fine. But in my actual code, I was retrieving the number 2 from a SQL call using an outside application, and it was returning it as a string. The "2" would get compared to 2 in the switch (or "1" to 1 and "3" to 3) and always go to default, so that's why those fields always came up invisible. Hah!
I think the problem lies in your inline onClick handlers. As you currently have them, you are using quotation marks as both attribute delimiters and to wrap your strings; this is going to cause your attribute to be truncated as ToggleFieldVisibility(" and your function will not run.
Try:
<input type="button" value="MakeVis" onclick="ToggleFieldVisibility('.ReasonCode', 1)">
<input type="button" value="MakeVisReq" onclick="ToggleFieldVisibility('.ReasonCode', 2)">
<input type="button" value="MakeInVis" onclick="ToggleFieldVisibility('.ReasonCode', 3)">
If you need to use "s for some reason, you can always escape them with a \: (\".ReasonCode\"...
A quick guess, in calling the DisplayFields() function at the end, it adds css to the element in the form of an inline style tag. Try running a .removeAttr("style") right after doing the removeClass()
The code:
jquery:
function ToggleFieldVisibility(element, x){
//alert("Hello");
switch(x){
case 1:
$(element).removeClass("Invisible Required").removeAttr("style").addClass("Visible");
break;
case 2:
$(element).removeClass("Invisible").removeAttr("style").addClass("Visible Required");
break;
case 3:
$(element).removeClass("Visible Required").removeAttr("style").addClass("Invisible");
break;
default:
$(element).removeClass("Visible Required").removeAttr("style").addClass("Invisible");
break;
}
DisplayFields();
}
function DisplayFields(){
$(".Invisible").css({"visibility":"hidden"});
$(".Visible").css({"visibility":"visible"});
}
html:
<body onload="ToggleFieldVisibility('.ReasonCode .CostCenter', 3)">
<table border="1">
<tr>
<td class="ReasonCode" align="center">
<span class="FieldLabel">Reason Code</span>
</td>
<td class="CostCenter" align="center">
<span class="FieldLabel">Cost Center</span>
</td>
</tr>
<tr>
<td class="ReasonCode" align="center">
<input type="text" id="ReasonCode" name="ReasonCode" value="1243">
</td>
<td class="CostCenter" align="center">
<input type="text" id="CostCenter" name="CostCenter" value="00123">
</td>
</tr>
</table>
<input type="button" value="MakeVis" onclick="ToggleFieldVisibility('.ReasonCode', 1)" />
<input type="button" value="MakeVisReq" onclick="ToggleFieldVisibility('.ReasonCode', 2)" />
<input type="button" value="MakeInVis" onclick="ToggleFieldVisibility('.ReasonCode', 3)" />
</body>