JavaScript

18-Jan-12 18:12

window.location

And FYI, it is unnecessary to state that your issue is urgent. It might even be viewed as offensive.

User control - how to access the element using javascript

Member 779716716-Jan-12 12:40

Re: User control - how to access the element using javascript

16-Jan-12 12:40

Hi,

I have a PhoneSearch textBox in UserControlA. I want to disable or do not show it. The usercontrolA is being used in another UserControlB and finally the UserControlB is being used in a Test.aspx page. Now when I load the Test.aspx page and when I type in the PhoneSearch textBox the text disappear for the first time. I think some how there is a little page refresh is taking place in the first 3 to 5 seconds. But if I wait for first 5 seconds and then type in then the text stays in the SearchTextBox. So my idea is disable or do not show the Searchtextbox for the first few seconds and I think that may be the solution for page refresh issue (please mention if there is another way we can fix this and code snippet). I am not sure why there is a page refresh is taking place when the page loads of the first time.

Just as a side note the UserControlA and UserControlB both are inside an update panel and test.aspx is using a master page.

I am trying to use the below code in the userControlA as below but no luck

ASP.NET

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="Test.ascx.vb" Inherits="...Test" %>

<asp:UpdatePanel ID="SearchUpdatePanel" runat="server" RenderMode ="inline"  UpdateMode="Conditional">
    <ContentTemplate>

<asp:TextBox ID="PhoneSearch" TabIndex="5"  runat="server" Width="160px"/>

<<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

       <script type="text/javascript"  language="javascript">
           $(document).ready(function () {
               $('<%= PhoneSearch.ClientID%>').show();
               alert('<%= PhoneSearch.ClientID%>');
           });
      </script>
       
    </ContentTemplate>
</asp:UpdatePanel>

I get ctl00_DefaultContent_UserControlB_UserControlA_SearchTextBox in my alert box and the $('<%= PhoneSearch.ClientID%>').show(); doesn't show the text box. Can some one help me with this?

Thanks in advance,
L

modified 17-Jan-12 6:07am.

BobJanova17-Jan-12 4:07

Re: User control - how to access the element using javascript

17-Jan-12 4:07

How are you hiding the text box in the first place? There is no style information applied to it that I can see there.

jQuery will have some method of doing show/hide, which I suspect is assigning to (object).style.display. If the ASP rendering is hiding the control by doing something different, jQuery won't be able to show it. You need to either work out what ASP.net is doing and write script to reverse that, or hide it using some markup that jQuery (or simple clientside script) can easily change.

I recommend the second way:

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="Test.ascx.vb" Inherits="...Test" %>
 
<asp:UpdatePanel ID="SearchUpdatePanel" runat="server" RenderMode ="inline"  UpdateMode="Conditional">
    <ContentTemplate>
<div id="<%=SearchUpdatePanel.ClientID%>_TextBoxDiv" style="display:none">
 <asp:TextBox ID="PhoneSearch" TabIndex="5"  runat="server" Width="160px"/>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
 
       <script type="text/javascript"  language="javascript">
           $(document).ready(function () {
               document.getElementById('<%= SearchUpdatePanel.ClientID%>_TextBoxDiv').style.display = '';
           });
      </script>
       
    </ContentTemplate>
</asp:UpdatePanel>

I'm not sure if there's an asp:Container or something which is a server-side div that prevents the slightly ugly ID related hackery there, but the principle should be the same.

Member 779716717-Jan-12 5:08

Re: User control - how to access the element using javascript

17-Jan-12 5:08

Hi Bob,
Thanks for post. I am sorry I forgot to mention that I am setting my PhoneSearch text box disaplay to non as you see below but forgot to include the above code.
<asp:textbox id="PhoneSearch" tabindex="5" runat="server" width="160px" style="display:none">

I have tried your idea of putting it in a Div and also with out Div just setting the text box to display none and below is the code I have right now

HTML

<script type="text/javascript"  language="javascript">
       $(document).ready(function () {
           //alert('<%= SearchDoctorPanel.ClientID%>_TextBoxDiv');
           //document.getElementById('<%= PhoneSearch .ClientID%>').style.display = 'show';
           document.getElementById('<%= PhoneSearch .ClientID%>').style.display = '';
         //document.getElementById('<%= SearchUpdatePanel.ClientID%>_TextBoxDiv').style.display = '';
         });
  </script>

in either case what it is doing is it first shows the Textbox for few seconds and then disappear. I think I am almost there but I believe some thing to do with the styling to make it show and do not disappear.

Thanks,
L

Member 779716717-Jan-12 5:30

Re: User control - how to access the element using javascript

17-Jan-12 5:30

As an alternative I am also trying to use setTimeout but it doesn't seem like it is doing any difference.

XML

<script type="text/javascript"  language="javascript">
           $(document).ready(function () {
setTimeout(function(){
               document.getElementById('<%= SearchDoctor.ClientID%>').style.visibility=visible;
               },500);
               //alert('<%= SearchDoctorPanel.ClientID%>_TextBoxDiv');
               //document.getElementById('<%= PhoneSearch .ClientID%>').style.display = 'show';
               //document.getElementById('<%= PhoneSearch .ClientID%>').style.display = '';
             //document.getElementById('<%= SearchUpdatePanel.ClientID%>_TextBoxDiv').style.display = '';
             });
      </script>

any inputs on this as well?

Thanks,

L

Graham Breach17-Jan-12 6:42

Graham Breach

17-Jan-12 6:42

The relevant values for the .display style are "none" for not shown, and "inline" or "block" to show it again. "inline" is for elements that exist on the same line as text and "block" elements take up the whole width of the containing element, unless you set their width, make them float, etc.

The "visibility" attribute is less useful - I would stick to .display = 'none' and .display = 'block'.

Re: User control - how to access the element using javascript

BobJanova17-Jan-12 11:57

Re: User control - how to access the element using javascript

17-Jan-12 11:57

Setting display to the empty string means that the element gets its default display style, which will be inline or block but you don't need to know which. Showing and hiding things by setting their style.display to either 'none' or empty definitely works, I do that a lot.

BobJanova17-Jan-12 6:12

Re: User control - how to access the element using javascript

17-Jan-12 6:12

If it appears after that code is run, and then disappears, make sure you're not setting the style back somewhere else. If you're setting it in the update panel code behind then every time that control is re-rendered it will come as display:none, and document.onready is not called when an AJAX response is handled.

If you want it to be shown immediately, sometimes, you need to write your control in such a way that it renders it correctly, i.e.

<asp:TextBox ID="PhoneSearch" TabIndex="5" runat="server" Width="160px" <%= (some expression) ? "style=\"display:none\"" : "" %> />

... where (some expression) is however you determine whether this box should be shown.

You probably still want to render it inside a div on which you do the visibility logic, because you probably want to have some text or something as well as the text box which should all be switched together.

Member 779716717-Jan-12 7:33

Re: User control - how to access the element using javascript

17-Jan-12 7:33

Bob, I am running out of ideas on how to code using this approach

<%= (some expression) ? "style=\"display:none\"" : "" %> />

can you please help me with some code snippet?

BobJanova17-Jan-12 12:01

Re: User control - how to access the element using javascript

17-Jan-12 12:01

Well you showed some code yourself using <%= ... %>; that just causes the ASP.net renderer to output something. There must be some expression which you use to determine whether the text field should be displayed in the rendered control when it is requested, unless you want it to either always be hidden or always shown when the page segment is loaded (remember, you're putting it in an UpdatePanel, so this includes whenever that panel is updated).

If you're not familiar with the ? : syntax I suggest a quick visit to the documentation[^] (or if you have some books on any C family language you can find it in there too).

AspDotNetDev19-Jan-12 7:29

19-Jan-12 7:29

The ? : syntax can't be used with VB.net, which is the language the OP is using. Instead, the OP would use the If (condition, option1, option2) syntax.

Re: User control - how to access the element using javascript

BobJanova19-Jan-12 22:57

Re: User control - how to access the element using javascript

19-Jan-12 22:57

Oh, good catch, I missed that. I've just been spending a month writing a C#-based ASP.net website and forgot about the existence of VB.

Member 779716720-Jan-12 15:36

Re: User control - how to access the element using javascript

20-Jan-12 15:36

I am not sure if I understand it right what you have said. Can you please re frame your idea?

Yes I am using vb.net but not sure what you mean and what you want me to suggest to use or code how?

AspDotNetDev17-Jan-12 7:58

17-Jan-12 7:58

First, you should check if you really are getting a postback. Put this in your update panel:

ASP.NET

<%= Page.IsPostBack.ToString()%>

It could be that you have some JavaScript that is clearing the textbox on page load. Or the textbox is re-getting focus on page load and you are typing over what is already in the textbox.

Re: User control - how to access the element using javascript

Member 779716718-Jan-12 15:45

Re: User control - how to access the element using javascript

18-Jan-12 15:45

Hi,

The idea of putting <%= Page.IsPostBack.ToString()%> on my usercontrol helped me realize that it is not the issue with the Text disappearing in the textbox. But the issue is that the page is getting post back twice and that is why the text in the text box is disappearing.

When page is loaded for the first time the value of <%= Page.IsPostBack.ToString()%> is False and in few seconds a page post back is taking place all by itself and the value is true.

I couldn't figure out what is causing the second post back yet. But when I searched online I found that there could be two reasons for posting back twice.

1) It may be because of any client side scripting either java script or jQuery that may be causing the post back. In my case I do not see any client side that is written to cause a post back.

2) The other reason for the second time post back could be that if any Image tags are used and then if no src attribute is provided then this might also cause a post back.

In my case, we are using a default.master and I see quite a few <asp:image> tags are defined in the master page and I do not see either src or imageurl attribute being used in them. I just see that a skinID is being used.

I am not sure if I need to use imageurl in all of my <asp:image> tags to fix the page post back issue

Does any body have any inputs?

Thanks in advance,

L

AspDotNetDev18-Jan-12 18:10

18-Jan-12 18:10

Wow, that is crazy. I would never have suspected that an empty src attribute in an image control could possibly cause a double postback. However, from what I read online, it is indeed possible.

I recommend using something like Fiddler2 to intercept the HTML that the ASP.net gets rendered to. That way, you can search for all the image tags and see if any have strange src attribute values.

Also, you might want to try disabling JavaScript in your browser. That way, you can exclude the possibility that there is any JavaScript causing the postback.

Re: User control - how to access the element using javascript

Member 779716719-Jan-12 4:02

Re: User control - how to access the element using javascript

19-Jan-12 4:02

I think I am getting close to figure out what is causing the issue. I think it is the Java script that may be causing the issue. I just disable the java script (ttos/internet optionts/security and licked on custom level and disabled the Active scripting) and when I do this the value of page.ispostback doesn't change and it is always false when it loaded for the first and it doesn't change to true and the page doesn't post back. On our when we mouse over on our application tabs all the options slide down. But now that I disabled the javascript I am not seeing the options slide when I mouse over. So I had click on the tab that takes me to the page I am having page post issue with. When I enable the javascript all look good and it post back as usual.

Now, how do I figure out which javascript function is causing the issue. Out application is really huge. So just to make sure I am thinking it right. Once the page, that I am having issue, loads I am thinking to view page source and try to find all the javascripts and try to find that is causing the post back.

But what do I need to look in the view source for me to know which one causing the postback? I will keep at it and I need to fix it.

Thanks,

L

Member 779716719-Jan-12 4:23

Re: User control - how to access the element using javascript

19-Jan-12 4:23

I am looking at the page view source and found this javscript function

function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}

and I do see __doPostBack being called in so many instances. But all of those calls make sense to me

say for instance it is being called like this

openeing a tag.. id="ctl00_LoginStatusValue" class="headerLoginStatus" hre..="javascript:__doPostBack('ctl00$LoginStatusValue$ctl00','')">Log Out closing a tag

and other instances are like for a dropdown onchange events.. like
onchange="javascript:setTimeout('__doPostBack(\'ctl00$DefaultContent....

let us see what else causing it. I will keep posted when I find some thing new and or when I fixed the issue.

Member 779716719-Jan-12 4:35

Re: User control - how to access the element using javascript

19-Jan-12 4:35

I found this function on our default.master

// function onCancel() {
// __doPostBack('RedoPageLoad', '');
// }

and commented this out but still it is still posting back.

AspDotNetDev19-Jan-12 7:39

19-Jan-12 7:39

According to this, you can use Request.Form("__EVENTTARGET") to see which control caused the postback.

If that doesn't help, you have a couple options. For one, you could search the HTML source for "doPostBack" to see if there is anything funky that you missed. Also, you can use FireBug or the Chrome debugger to inspect all the JavaScript referenced by the page. If that doesn't get you anywhere, start removing things one by one until the second postback doesn't happen. That will help you narrow down what is causing the problem.

And like I mentioned before, Fiddler2 is a great help for figuring this type of stuff out. It will show you all requests/responses, and all of the data being sent with them to/from the server. And I'm pretty sure you can use some setting to monitor local traffic (that is, web traffic from a Visual Studio web application that is being run locally).

Re: User control - how to access the element using javascript

Member 779716720-Jan-12 12:30

Re: User control - how to access the element using javascript

20-Jan-12 12:30

When I debugged and used the Request.Form("__EVENTTARGET") to see which one is causing the post back then as I thought the dropdown that had the focus is the culprit.

I do not know why or couldn't figure out just because it lost the focus it is doing a post back. As you menioned with your tested example, and I did the same thing and for some reason it is doing a post back which it shouldn't as we tested it.

Member 779716719-Jan-12 9:14

Re: User control - how to access the element using javascript

19-Jan-12 9:14

I kind of figured the issue.

AS I have mentioned I have two User Controls , say UC-A and UC-B. The textBox that is being refreshed is located in UC-A and this is being used by UC-B and UC-B is used by a .aspx page so that is how it is structured.

The UC-B has two DropDownList controls whose AutoPostBack property set to true. And programatically it is a must to set the focus to one of these DropDowlists. So when the page is loaded the DropDownList gets focus and when I try get the focus to the textBox to type in some thing then the DropDowlist is doing a post back as its AutoPostBack property has been set to true.

So I am trying to figure out a way where, if I do not change the of the selectedIndex of the dropdown and just make its focus lost then do not do a post back. I think may be I can try to come up with a javascript function where I can nullify the post back in the javascript function.

Any inputs if this sounds doable?

AspDotNetDev19-Jan-12 10:53

19-Jan-12 10:53

So, your theory is that you set focus to the drop down list, then when you click on the textbox the focus is lost on the drop down list and causes a postback? That doesn't make sense to me, as I just created a test page and I couldn't replicate that behavior:

ASP.NET

<%@ Page Language="vb" AutoEventWireup="false" %>

<script runat="server">
  Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    ddlTest.Focus()
  End Sub
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test PostBack</title>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    Postback: <%= Page.IsPostBack.ToString() %>
    <br />
    <asp:DropDownList runat="server" ID="ddlTest" AutoPostBack="true">
      <asp:ListItem Text="Item 1" Value="1" />
      <asp:ListItem Text="Item 2" Value="2" />
      <asp:ListItem Text="Item 3" Value="3" />
    </asp:DropDownList>
    <br />
    <asp:TextBox runat="server" />
  </div>
  </form>
</body>
</html>

The focus starts on the drop down list. When I click the textbox, there is no postback. Can you create a test page that replicates the behavior?