Make user Control visible using Javascript - javascript

All I want to make user control visible on button click. I am getting object null typical error on following code. How do I make complete user Control visible or invisible using javascript?
Dim ucAddNewChekcing As SubscriberSetupPages_UserControls_CheckingAccount
ucAddNewChekcing = DirectCast(pnlTopLevel.Items().FindItemByValue("pnlAddChecking").FindControl("CheckingAcct1"), SubscriberSetupPages_UserControls_CheckingAccount)
Dim openWinScript As String = "SetVisibility('" & ucAddNewChekcing.ClientID & "');"
btnAddChecking.OnClientClick = openWinScript
Thanks in advance.

have visible="false" set means your control doesn't get rendered at all, so there's no element available when you want to display it. you can address this in a couple ways:
leave the control visible, so it renders, and use css styling to hide it until you want it: style="display: none;" in place of visible="false".
change visible to true and set style="display: none;" on some wrapping element (see edit below).
in your SetVisibility function, you can do
element.style.display = '';
to remove the none value and show the element.
edit: ok after thinking about this some more, we can't put style="display: none;" right in the user control tag because that doesn't map to any specific html element. instead, this needs to be set on an element that wraps the contents of the user control.
if the user control has such an element already, that would be a good place to set the display styling. you can add a method to the control that will return the ClientID for that element so you can reference it in script.otherwise if your layout will tolerate it you can put the control inside an asp:Panel and set the display property there.
the other option is to wrap your control in an UpdatePanel containing some control (like HiddenField) as a flag which will indicate if the control is visible or not. if you go that route you SetVisibility function looks something like
// change value on flag control
hiddenControl.value = '1';
// trigger a partial postback
__doPostBack('UpdatePanel1', '');
and then in your UpdatePanel_Load function you can check the value of your flag control and set the Visible property on your user control accordingly.

Related

How to remove the placeholder once set value in JavaScript

I'm unable to remove the placeholder after set the user name.
Anyone have idea how to remove place holder once set user name by using console
Link : https://login.microsoftonline.com
document.getElementById("i0116").value = "singapore#mail.com"
The trick is, Microsoft didn't used native HTML placeholder. They have added extra div for placeholder. You just need to hide that div after setting the value. Please see following code
document.getElementById("i0116").value = "singapore#mail.com";
document.getElementsByClassName("phholder")[0].style.display = "none";
Modified:
Microsoft is using Knockout for data binding. That's why you need to fire change event to set the values in ViewModel. Use following code after above two lines.
var event = new Event('change');
document.getElementById("i0116").dispatchEvent(event)

How do I get only the value of current input when prior input values were changed?

I have a modal with an accordion in it. There is an anchor tag for each image on the page that can open the modal window. Inside the modal, the accordion has slide switches where the user can choose to turn on or off a value for that image.
The undesired behavior occurs after one input has changed on a specific image. I am receiving the value of the input values that were previously changed as well.
What I would like to see is for each image to have it own values, that is, the values that were changed specific to that image. I shouldn't see the values from any other image. In addition, if I change the value of a specific image to
true, I don't want to see that value set to true for any other image. I hope this all makes sense. I'm not very savvy with JavaScript but I've tried to explain as best I can.
This is what the JavaScript looks like
$(".glyphicon-tags").on('click', function(){
var iid = $(this).data('iid'); // this is the imageId
$(".onoffswitch ").on("click", function(){
var tid = $(this).data('tid'); // this is the tagId
alert(iid + ' ' + tid);
});
});
Using
$(".onoffswitch ").off("click").on("click", function(){
should fix it.
The way you've got it now, every time glyphicon-tags is clicked, you just keep on adding extra event handlers for "onoffswitch" and never removing the old ones. Next time onoffswitch is clicked, it runs all the defined event handlers. Setting an event handler on an element doesn't remove the old one (unless you're running IE6 or something), it adds an extra one to the existing list of handlers.
The "off" method removes previously defined event handlers on an element. See http://api.jquery.com/off/ for more details of the options you can pass in etc.

ASP.NET - using javascript to change text of LinkButton on every click

I have a LinkButton that essentially toggles a menu, "show/hide".
So I am doing the show/hide logic in a javascript method called onShowFiltersClick(), that is attached as an OnClientClick event.
But how do I reach (and change) the text value of the button? It is currently being set statically in the .cs file to "Show filters". But I want to toggle this on the client side. And the changes will probably have to persist across postbacks.
But as it stands now, I can't even retrieve the string "Show filters" from the .js, trying everything both sending the button's clientID as a parameter to the javascript and by accessing it through jQuery $ and the button's css class. I then try to view all sorts of parameters, including text, innertext, value and innerHTML.
So how do I access it?
edit: Neha requested a code snippet, so I'm including one of several I have tried:
function onShowFiltersClick() {
var filtersPanel = $('.filters-panel');
var displayStyle = filtersPanel.css('display');
filtersPanel.toggle('fast');
var showFiltersButton = $('.show-filters-button');
alert(showFiltersButton.text);
alert(showFiltersButton.innerText);
alert(showFiltersButton.innerHTML);
alert(showFiltersButton.value);
if(displayStyle === 'none')
$('.price-slider').repaint();
}
This produces the following:
function (a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)}
followed by a bunch of undefined.

JavaScript - control.style.display = "none"; and control.style.display = "";?

When I created a label I set it's display to none in the designer.
<asp:Label ID="label1" runat="server" style="display:none;" Text="LABEL" asp:Label>
I use javascript to turn the label visible by:
var lbl = document.getElementById('label1');
lbl.style.display="";
WHen I do this the space is created where the label would be on the form but the label itself doesn't show up. I have tried
lbl.style.display="inline";
lbl.style.display="block";
just to see if the label would show up. Still nothing though. Just the extra space where the label would be is created.
You were saying
WHen I do this the space is created where the label would be on the form but the label itself doesn't show up. I have tried
That makes me believe that somewhere in your CSS you may have visibility set to hidden. That normally covers the space of the element, but doesn't show it. The display controls whether or not the space is preserved for the element.
Are you certain you have the control ID correct? Unless you set ClientIDMode to Static, the actual control ID will probably be something much longer than the ID you specify. Check the control's ClientID property.

Get Element in div with JavaScript

I want to disable/enable a button with JavaScript. Because the JavaScript is called, after a Flash animation is rendered, the button exists at the time of the execution.
The button is in a hierarchy:
<html><body><form#form1><div#control><asp:Button#Export1>
I tried for hours to get a reference to that button, but nothing seems to work:
document.getElementById("Export1")
// and
document.getElementbyId("form1").getElementById("control").getElementById("Export1")
// and many more
How to get a reference to that button (in order to change btnref.disabled = true)?
Thanks a lot for your help!
Have you tried right-clicking in the document and selecting "view source" to see how that code actually renders? An asp:Button is a server control, that gets translated to an input field during render. During this, the ID of the field will not be exactly what you set it to in your aspx.
You can use Export1.ClientID at serverside to get the ID of the control.
If it's the only button in your div, this should work:
var btnref = document.getElementById("controls").getElementsByTagName("button")[0];
Usually the id of the button won't stay the same in the page source. Click on view source in the HTML and look for that tag to find the new id. You can then use that id in something like:
document.getElementbyId("Export1_some_unique_id")...

Categories