EDIT: so I changed the style.display to block and some of them worked. the internal and external textareas are coming back with element not found
Another edit:
In my CSS I had a display:none.
When I remove this, it works. But thats no good as the element should only be available after an onclick. Why would setting it to display none stop it from ever being displayed?
I have a simple script here. Basically I wanted to set all the contents of a panel to be invisible (document.style.display ="none") and then after I've gone through all the contents, set one to be visible as indicated by the method.
Javascript:
function showText(divToShow)
{
var docsToHide = document.getElementsByClassName("full-width");
for (var i = 0; i<docsToHide.length;i++)
{
docsToHide[i].style.display="none";
}
var docToShow=document.getElementById(divToShow);
docToShow.style.display="table";
console.log(docToShow.style.display);
}
Some notes: full width returns a full list of textAreas in the form of:
[textarea#page-description-textarea.full-width, textarea#keywords-text-area.full-width, textarea#files-textarea.full-width, textarea#internal-links-textarea.full-width, textarea#external-links-textarea.full-width]
At the end of the loop after they've all been set, I set the specified textArea(divToShow).display to be table but yet nothing shows afterwards.
Any ideas? Am i overlooking something?
edit: Added html for textareas
<div id="text-column">
<div id="page-description-text">
<textarea id = "page-description-textarea" class="full-width">Page Description</textarea>
</div>
<div id="keywords-text">
<textarea id="keywords-text-area" class="full-width"> Keywords</textarea>
</div>
<div id="files-text">
<textarea id="files-textarea"class="full-width">files</textarea>
</div>
<div id="internal-links-text">
<textarea id="internal-links-textarea" class="full-width">internal</textarea>
</div>
<div id="external-links-text">
<textarea id="external-links-textarea"class="full-width">external</textarea>
</div>
</div>
One last thing to note is all the textArea elements do set themselves to be invisible. They just don't come back.
Are you passing the correct id to your showText() function?
Due to the fact that your variable is named divToShow, I think you are passing the id of the <div> which is correctly setting display:table but you've actually hidden the <textarea> child, which stays hidden.
If you pass the id of the <textarea> instead, the code function works as expected, as in this demo.
Related
I have multiple reason codes (For ex: RC1, RC2...). For each of these reason codes, I want to give the user a text box in which they can enter some comments. Also give them the option of adding multiple text boxes for each reason code.
To allow the user to add a dynamic text box, I have a button which allows the user to do so. If there was only one reason code, I can easily just just append a text box to the pre-existing text box using jquery (Using something like this: JQuery adding class to cloned element).
However since I have multiple reason codes(over 200) it doesnt make sense of having button for each reason code in Jquery. Is there a way for me to search by a basic identifier.
I have pasted the contents of the HTML file generated by my JSP file.
<div id="Reasoncode1">
<div id="inputTextBox_Reasoncode1">
<input type="text" placeholder="Add some text"/><button class="button_Reasoncode1">
+</button>
</div>
</div>
<p>
Reason code2
</p>
<div id="Reasoncode2">
<div id="inputTextBox_Reasoncode2">
<input type="text" placeholder="Add some text"/><button class="button_Reasoncode2">
+</button>
</div>
</div>
My Jquery attempt is:
$(".button_Reasoncode1").click(function() {
$('#Reasoncode1').clone().insertAfter('#inputTextBox_Reasoncode1');
});
$(".button_Reasoncode2").click(function() {
$('#Reasoncode2').clone().insertAfter('#inputTextBox_Reasoncode2');
});
I dont want to do this for each and every reason code, i was wondering if there is a better approach to this.
My JSFiddle: https://jsfiddle.net/mvp71L61/
Assuming all buttons are statically added to the DOM,
$("button[class*='button_Reasoncode']").click(function() {
var rCode = $(this).attr('class').match(/\d+/g)[0];
$("div[id='Reasoncode'+rcode]").clone().insertAfter("input[id='inputTextBox_Reasoncode'+rcode]");
});
I am working with jQuery 2.1.4 and javascript to do a simple Bootstrap form validation.
I found 3 strange things.
I am sure my jQuery code is working in the onblur and onfocus event of <input> elements (as you can try in my fiddle), but I cannot see .has-error class style. I have introduced boostrap.css etc. in my <head> part, of course.
<form-group> is indenting my paragraph to very end of left side of screen and it hides part of it, I must be using it wrongly but I don't know why.
Cancelar button is not working. I have tried <s:url value="/listaReservas.jsp" /> and plain url like in fiddle, no avail. FF complains about cancelar not defined.
Am I allowed to define a pure Javascript function like I did (mixing Javascript with jQuery), or I must bind it like this: $('#xxxId').click(function(){});???
Thanks all.
.has-error works but you need to make some changes. First, the class should be added to parent node form-group and second, your <input> field should have the class form-control. The HTML looks something like this:
<div class="form-group has-error">
<label class="control-label" for="tarjetaId">No. Tarjeta:</label>
<div class="controls">
<input class="input-xlarge form-control" id="tarjetaId" name="usuarioCompra.numeroTarjeta" value="" />
</div>
</div>
And the JavaScript
$("#tarjetaId").blur(function(){
var cuenta = $("#tarjetaId");
if (cuenta.val().length != 20){
cuenta.closest('.form-group').addClass("has-error");
$("#comprarButtonId").prop('disabled', true);
} else {
cuenta.closest('.form-group').removeClass("has-error");
}
});
As for .form-group giving your layout a negative margin. You are using .row as its parent, which also has negative margin. So you are actually applying two layers of negative margins. Having <div class="row"> is redundant.
Lastly, declare
function cancelar() {
window.location = "/listaReservas.jsp";
};
in the global scope, which means outside of $(document).ready(). The HTML for the submit button should have onclick="cancelar()" instead of onclick="cancelar"
I have two sets of data: "heat" and "cold", which are retrieved from another provider. This data is quite unorganized and I have removed lots of stuff in the code just to show the essential part of my problem. "Heat" and "cold" both contain properties that the user has to fill in. This property however is dynamic and the amount of properties is not fixed (hence it is in a loop as shown in the code).
My goal is to hide/disable the submit button, which is located all the way down, whenever one single input field in the list in either sets of data is empty. This should also preferably work on Internet Explorer 9, where the 'required' tag is not supported.
I have tried:
Adding the required tag. This unfortunately does not work in IE9 and I have some issues even in Google Chrome because it is still submitting my form. (I added the form tags too)
Adding Ng-show on the submit form. I checked whether the userInput is empty, but this still does not work.
Now you may ask, why wouldn't I just check in my controller whether these properties are empty in my submit method? While it is a good point, I can not access this dynamic data very easily in my controller. Hence, I need a solution that will hopefully fix this problem with no/mimimal effort in the controller.
Code:
<!--Start wrapper!-->
<div class="wrapper">
<div ng-repeat="(code, program) in data.old.heat">
<div class="row" ng-repeat="(componentId, component) in program">
<div class="inputForm">
<!--This field may not be left empty!-->
<input type="text" class="form" ng-model="component.userInput">
</div>
</div>
</div>
<div ng-repeat="(code, program) in data.old.cold">
<div class="row" ng-repeat="(componentId, component) in program">
<div class="inputForm">
<!--This field may not be left empty!-->
<input type="text" class="form" ng-model="component.userInput">
</div>
</div>
</div>
</div>
<!--End of wrapper !-->
<div class="submitPanel">
<button ng-click="submit()">Submit</button>
</div>
Here ya go : https://jsfiddle.net/DIRTY_SMITH/zxbe5rt0/
function validate(){
var text1 = document.getElementById('text').value;
if (text1.length > 0){
alert("went through");
return true;
}
alert("did not go through");
return false;
}
Not specific to angular, but you could check if it has characters via jQuery.
Html
<div class="submitPanel">
<button class="submit-btn" ng-click="submit()">Submit</button>
</div>
jQuery
$('#form input').blur(function()
{
if( $(this).val().length === 0 ) {
$(this).parents('.submit-btn').addClass('hide');
}
});
CSS
.hide{
display:none;
}
I have two options for you, but they both include ng-disabled (https://docs.angularjs.org/api/ng/directive/ngDisabled).
You can put this attribute on the button and you can either call a function on the scope in that attribute and check if all values are given.
So like: ng-disabled="checkInputs()".
Or
You wrap a form around all your inputs, give the form a name like name=form and set the required attribute on all inputs. (EDIT: you could use ng-required="true" for IE9.)
Then you could say ng-disabled="!form.$valid".
Imagine I have the following HTML:
<p id="message" ng-show="something"></p>
Now during the lifetime of the page #message can be filled up with some text message after an AJAX call.
I would like #messageto toggle itself visible/hidden based on if it contains something or not.
Something like:
<p id="message" ng-show="self.text != ''"></p> <!--Not working but you get the idea -->
My best suggestion would be to bind the content of #message to a scope variable.
<p id="message" ng-show="Content != ''">{{Content}}</p>
Then you simply need to update the value of $scope.Content to change both the contents of #message and its visibility.
Feussy is correct in that binding the #message element's content to a scope variable is the correct way to do this.
If for some reason you can't or don't want to bind the content to a variable in your Controller, you can bind the content directly on the element which will get you closer to the syntax that you are looking for.
<p id="message" ng-bind="self.text" ng-show="self.text !== ''"></p>
Here is a working example.
I'm using a bit of javascript to fade in a couple of message bars at the top of my page - a bit like stackoverflow does :)
I have:
<div id='message' style="display: none;">
<span>Wow, that was quick! - below is a preview of your page.</span>
X
</div>
<div id='message' style="display: none;">
<span>Try posting something interesting</span>
X
</div>
CSS:
#message {height:30px;width:100%;z-index:105;text-align:center;color:white;padding:10px 0px 10px 0px;background-color:#8E1609;}
#message span {text-align: center;width: 95%;float:left;}
.close-notify {white-space: nowrap;float:right;margin-right:10px;color:#fff;text-decoration:none;border:2px #fff solid;padding-left:3px;padding-right:3px}
.close-notify a {color: #fff;}
and Javascript:
$(document).ready(function() {
$("#message").fadeIn("slow");
$("#message a.close-notify").click(function() {
$("#message").fadeOut("slow");
return false;
});
});
But unfortunately only the first message displays. How come? Surely the second one should show as well?
thanks
id attributes should be unique among all elements in the page. Change the HTML, CSS and JavaScript to use class="message" instead of id="message" and it will work fine.
Technically what happens here is that jQuery sees the #message selector and tries to find the element using document.getElementById (which is fastest). This function returns only one element, in this case the first one. So the second never has a chance to be processed.
You also have a bug: As the code stands now, hitting the "close" link will make all messages disappear. You need to tweak the click handler a bit to make it behave as expected.
See all of this in action here.
An ID should only be used once on the page. It is a unique identifier.
You'll want to use a class instead if you have multiple items.
Html
<div class="message">Some Message</div>
<div class="message">Some Other Message</div>
jQuery
$('.message').fadeIn('slow');
Here's a demo: http://jsfiddle.net/GBjxH/
Both of your elements have the same ID #message - an ID should be unique, so this should be a class instead.
You can't use an ID for two elements, try using a class!
<div class='message' style="display: none;">
$('.message').fadeIn();
It's because they both have the same id. The fadeIn is only being called for the first one. If you want to do it for both (or all) of them, apply a class and do something like
$(".classname").each(...
You can't have two identical ID's
You shouldn't have elements with the same 'id'.
ID's are unique! You cannot have 2 Elements with the same ID. Use Classes
You shouldn't have multiple items with the same id, use a class instead.