Remove empty space when visible property is set to false using JavaScript - c#

I'm having a DropdownList and when its Selected Value is changed (for ex: 0 ) I need to set the visible property of a Panel to True and the visible property of another Panel to False.
and when another Value is selected I need to do Vice Versa Using JAVASCRIPT.
I'm currently achieving this but the space remains as it is. How can i remove the spaces also.
can anyone help me??
I'm attaching the code also.
function visible(val) {
var ddl = document.getElementById("ddl_IDProof");
var selectedFilterType = drpFilterType.options[ddl.selectedIndex].value;
if (selectedFilterType == "0") {
document.getElementById("pnl1").style.visibility = "visible";
document.getElementById("pnl2").style.visibility = "hidden";
}
else {
document.getElementById("pnl1").style.visibility = "hidden";
document.getElementById("pnl2").style.visibility = "visible";
}
}

Use display instead of visibility.
This will hide the entire element:
// Show pnl1 (maybe you have to use inline or inline-block insdead of block)
document.getElementById("pnl1").style.display = "block";
// Hide pnl2
document.getElementById("pnl2").style.display = "none";

Related

Invoke a Jquery function from a webbrowser

I am trying to get a data from a password protected webpage using webbrowser , which uses a div container with 3 JQuery data fields. The 2nd field depends on the 1st one, and the 3rd one of the 2nd one.I need to set those 3 comboboxes and hit submit in order to get the data I want to scrape. The problem is that once the 1st combobox changes, it invokes a function which populates the 2nd and 3rd boxes. I can't figure out how to invoke this function...
This is how the first combobox looks like:
Select s[DCOM1] Selection1
I managed to set the 1st combobox, however the big problem that I have is to invoke viewStep.onSChanged() , which supposed to populate the 2nd box, I just can't make it work.
The onSChanged function is located in a Jquery js. file
self.onsChanged = function(selectadj) {
self.viewBasicsUpdated = true;
log.debug('onsChanged');
if (self.s) {
self.adjEnabled = false;
self.adj = null;
self.auctionType = 'S';
controller.ds.getadjList(self.s.id, function(response) {
controller.applyUpdates(function() {
self.adjList = response.data;
// Add "Add adj" option (as first in array).
self.adjList.unshift({
id : ADD_adj_ID,
fullName : controller.locale.getMessage('app.label.add.adj')
});
self.adjEnabled = true;
self.standardEnabled = true;
self.vixEnabled = (StringUtils.trimWS(self.s.vixFlag) === 'Y') ? true : false;
self.offsiteEnabled = (StringUtils.trimWS(self.s.offsiteFlag) === 'Y') ? true : false;
self.titOnlyEnabled = (StringUtils.trimWS(self.s.titOnlyFlag) === 'Y') ? true : false;
self.salType = self.s.salType;
self.titProcurementFlag = (StringUtils.trimWS(self.s.titProcurmentFlag) === 'Y') ? true : false;
//Selects the adj when a new adj is added.
if(selectadj){
angular.forEach(self.adjList, function(object, index) {
log.debug("object.id++"+object.id);
if(object.id===self.newadjId){
self.adj=object;
log.debug("self.newadjId++"+object.id);
}
});
}
});
});
}else{
controller.applyUpdates(function() {
self.adj = null;
self.adjEnabled = false;
self.auctionType = 'S';
self.standardEnabled = false;
self.vixEnabled = false;
self.offsiteEnabled = false;
self.titOnlyEnabled = false;
self.salType = null;
self.titProcurementFlag = false;
});`
}
};
I have tried to invoke the function in many different options including invokescript, posting an identical post request as the one I see with Fiddler (I guess it fails since the cookie is different) but everything fails. Is there a way to execute this function?
When setting values on input controls with Javascript the DOM events might not fire, depending on how the values are set.
Instead of trying to execute the very same function that the webpage would normally trigger, in this case self.onsChanged, fire the event on the control that you updated.
$("#selectBox1").val("Value A");
$("#selectBox1").change();
https://api.jquery.com/change/

Text.Replace in gridview replacing entire cell

I have a gridview that is bound to a sql database. As the user enters data they must indicate whether that cell's information is complete or not. To do this they enter /end/ at the end of their statement and it will automatically change the cell color. If nothing is entered then nothing happens.
Here is the code:
if (dataItem != null)
{
var label = dataItem["Status"].FindControl("Statuslbl") as Label;
if (label != null)
{
var item = dataItem;
var text = label.Text;
if (text.Contains("/end/"))
{
item["Status"].BackColor = Color.Lime;
item["Status"].Text = item["Status"].Text.Replace(#"/end/", #"");
}
else
{
item["Status"].BackColor = Color.Salmon;
}
}
}
Instead of just hiding the '/end/' like I need it to, it hides the entire cells contents.
How can I go about fixing this?
Discovered all I would need to do would be the following to achieve my result:
if (text.Contains("/end/"))
{
item["Test"].BackColor = Color.Lime;
item["Test"].Text = label.Text.Replace("/end/", " ");
}
Really simple, I just needed to use label.Text.

Am I correctly getting the label text?

I have some JS that reads an asp label's text and based on that sets a div visible or not.
function setToLabel() {
text = document.getElementById('add_view');
lbl = document.getElementById('lblAddVisible');
var isHidden = text.innerText == 'true';
text.style.display = isHidden ? 'block' : 'none';
}
$(document).ready
(
function()
{
setToLabel();
}
);
The problem is it only works if I explicitly set the isHidden variable. When I tell it to read the label to get the bool, it does not ever work.
Thanks
That's because when the control is rendered ASP gives the control a distinct ID from the one you've specified. If the script is rendered on the same page as your ASP code you can add this
lbl = document.getElementById('<%= lblAddVisible.ClientID %>');
otherwise you'll have to add a CssClass to the lblAddVisible control and get the element by class name. Also, make sure you are using the correct element that you need to read the innerHTML from.
If you are having nested controls in your aspx page, it might be that you are not using the correct Id. Try this:
text = document.getElementById('<%=add_view.ClientID%>');
function setToLabel() {
text = document.getElementById('add_view');
lbl = document.getElementById('lblAddVisible');
var isHidden = lbl .innerText;
text.style.display = isHidden ? 'block' : 'none';
}
$(document).ready
(
function()
{
setToLabel();
}
);
instead of txt.innerText ,you need to use lbl.innerText as you have to read from label

Javascript does not take hidden text box value?

I am using this javascript function to show different popups if location count varies. Here the txthiddenloccount value is null if the txtbox's visibility is false. If the visibility is true, it works fine. What strange is this??? Can someone help me out.
function isPageValid()
{
var validated = Page_ClientValidate('groupProfile');
var loccount = document.getElementById("ctl00_ContentPlaceHolder1_txthiddenloccount").value;
if(validated)
{
if(loccount == '1')
{
var mdlPopup = $find('<%= ModalPopupExtendersavechanges.ClientID %>');
if(mdlPopup)
{
mdlPopup.show();
}
}
else
{
var mdlPopup = $find('<%= ModalPopupExtenderMerchantUpdate.ClientID %>');
if(mdlPopup)
{
mdlPopup.show();
}
}
}
}
if txthiddenloccount is an asp:TextBox that has the Visible property set to false then it does not exist on the page that is readable by javascript. It will be stored in the ViewState.
For something like this you're probably better off using an asp:HiddenField and setting the value, that will create an input type='hidden' that will be accessible through javascript.
Here you are trying to get txthiddenloccount control's value which hasn't rendered on the page because its visibility is false.
so first you have to check if it is null i.e you can write code like this.
var loccount='';
if(document.getElementById("ctl00_ContentPlaceHolder1_txthiddenloccount") != null)
{
loccount = document.getElementById("ctl00_ContentPlaceHolder1_txthiddenloccount").value;
}
If the Visible property of the control is set as false via ASP.NET, it will be part of the control tree but will never actually get rendered to the page. If it doesn't get rendered to the page, JavaScript can't access it.
If you want to hide it using ASP.NET, you could do it this way in C#...
txthiddenloccount.Style.Add("display", "none");
That will not prevent the control from rendering on the page AND it will use CSS to hide it. Alternatively, you could do this, but it might not be what you want, visually...
txthiddenloccount.Style.Add("visibility", "hidden");
Hope that helps.

How to initialize textbox to hide for first display and still have jquery work

So I now have the following jquery to hide or show a textbox based on specific values selected in a DropDownList. This works except that I need the first display of the popup to always be hidden. Since no index change was made in the drop down list, the following does not work for that. If I code it as visible="false", then it always stays hidden. How can I resolve this?
<script language="javascript" type="text/javascript">
var _CASE_RESERVE_ACTION = "317";
var _LEGAL_RESERVE_ACTION = "318";
function pageLoad() {
$(".statusActionDDLCssClass").change(function() {
var value = $(this).val();
if (value == _CASE_RESERVE_ACTION || value == _LEGAL_RESERVE_ACTION) {
$(".statusActionAmountCssClass").attr("disabled", false);
$(".statusActionAmountCssClass").show();
}
else {
$(".statusActionAmountCssClass").attr("disabled", true);
$(".statusActionAmountCssClass").hide();
}
});
}
</script>
Thank you,
Jim in Suwanee, GA
If you set
visible=false
.Net will not render it. You can do
style="display:none;"
and .Net will render the tag properly but CSS will hide it from the user.
Add the following to pageLoad function
function pageLoad(sender, args) {
$("input.statusActionAmountCssClass").hide();
.... rest of code .....
}
By the way, I would recommend using the selector $("input.statusActionAmountCssClass") to get a jQuery object containing a reference to your input, otherwise jQuery will search all elements to match the CSS class .statusActionAmountCssClass
EDIT:
Another change that could also be made is to use jQuery's data() to store the two global variables
$.data(window, "_CASE_RESERVE_ACTION","317");
$.data(window, "_LEGAL_RESERVE_ACTION","318");
then when you need them simply cache the value in a local variable inside the function
function someFunctionThatNeedsGlobalVariableValues() {
var caseReserveAction = $.data(window, "_CASE_RESERVE_ACTION");
var legalReserveAction = $.data(window, "_LEGAL_RESERVE_ACTION");
}
this way, the global namespace is not polluted. See this answer for more on data() command

Categories

Resources