Solved

Javascript onclick triggering on second click not first

Posted on 2011-02-15
8
753 Views
Last Modified: 2012-05-11
I have a text box that I want populated with the value of a listbox (a suggest list) that is in an update panel.  Everything is working fine EXCEPT I have to click twice on the listbox before it triggers the javascript to populate the textbox and make the listbox disappear.  Has anyone seen this before?  Any ideas on what can be causing this?
Javascript function:
        function PopulateName(varName) 
        {
            document.getElementById('NameSearchText').value = varName;
            document.getElementById('NameSuggestSelect').style.display = 'none';
        }

Open in new window

HTML:

    <form id="form1" runat="server">
    <div>

        <asp:ScriptManager runat="server">
        </asp:ScriptManager>
        <asp:TextBox ID="NameSearchText" runat="server" Width="231px" AutoPostBack="true" >
        </asp:TextBox>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:LEADSConn %>" 
            ProviderName="<%$ ConnectionStrings:LEADSConn.ProviderName %>" 
            >
        </asp:SqlDataSource>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="NameSearchText" EventName="TextChanged" />
            </Triggers>
            <ContentTemplate>
                <asp:ListBox runat="server"
                    ID="NameSuggestSelect"  
                    DataSourceID="SqlDataSource1" 
                    SelectionMode="Single" 
                    DataTextField="FullName" 
                    DataValueField="NameValue" 
                    Visible="false">
                </asp:ListBox>
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
    </form>

Open in new window

CODE Behind C# that assigns the javascript event:
        NameSuggestSelect.Attributes.Add("onclick", "PopulateName('" + NameSuggestSelect.SelectedValue + "')");

Open in new window

0
Comment
Question by:CCSOFlag
  • 5
  • 2
8 Comments
 
LVL 9

Expert Comment

by:gdupadhyay
ID: 34901886
where you write:

NameSuggestSelect.Attributes.Add("onclick", "PopulateName('" + NameSuggestSelect.SelectedValue + "')");
0
 
LVL 16

Expert Comment

by:BurnieP
ID: 34902041
Hi,

One thing is sure, you should use the ClientID of your textbox control :

Javascript function:
        function PopulateName(varName)
        {
            document.getElementById('<%=NameSearchText.ClientID%>').value = varName;
            document.getElementById('<%=NameSuggestSelect.ClientID%>').style.display = 'none';
        }

It might even fix your problem.
0
 
LVL 9

Author Comment

by:CCSOFlag
ID: 34902435
where you write:

NameSuggestSelect.Attributes.Add("onclick", "PopulateName('" + NameSuggestSelect.SelectedValue + "')");


What about it?  Did I miss something you were trying to say?
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 9

Author Comment

by:CCSOFlag
ID: 34902443
One thing is sure, you should use the ClientID of your textbox control :

I'm actually using Static ClientIDMode so it doesn't matter.  For grins I did it anyways and it actually broke the page and the suggest box didn't even work.
0
 
LVL 16

Expert Comment

by:BurnieP
ID: 34902524
Hi,

Thanks for the info,  you might need to add a return false at the end of your PopulateName.

        function PopulateName(varName)
        {
            document.getElementById('NameSearchText').value = varName;
            document.getElementById('NameSuggestSelect').style.display = 'none';
            return false;
        }

Any reason why you are using an UpdatePanel for this?  If this is your real code with nothing else, you don't need an update panel to prevent a PostBack.  By adding return false inside your PopulateName function the PostBack will not occur after the click.

Just asking..

0
 
LVL 9

Author Comment

by:CCSOFlag
ID: 34906948
the return false didn't change anything.

What the update panel does is updates the listbox real time with suggestions according to what they are typing in the text box.  I didn't post all my code, but I will post it all again just in case it helps with figuring this out.

Again this is working as desired except having to click on the item twice for the javascript to trigger.
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Test : System.Web.UI.Page
{   
    protected void Page_Load(object sender, EventArgs e)
    {
        NameSearchText.Attributes.Add("onkeyup", "PostBackSuggest();setTimeout('__doPostBack(\\'" + NameSearchText.UniqueID + "\\',\\'\\')', 0);");
        NameSuggestSelect.Attributes.Add("onclick", "PopulateName('" + NameSuggestSelect.SelectedValue + "')");
        if (IsPostBack)
        {
            string varName = NameSearchText.Text;
            bool varSplit = false;
            int varResponse = 0;
            string varLast = "";
            string varFirst = "";
            string varEmpSQL = "";
            int varCount = 0;
            //Parses the name to find the format the user is using

            if (varName.IndexOf(", ") > 0)
            {
                varResponse = varName.IndexOf(", ");
                varLast = varName.Substring(0, varResponse);
                varFirst = varName.Substring(varName.Length - (varName.Length - varResponse - 2));
                varSplit = true;
            }
            else if (varName.IndexOf(" ") > 0)
            {
                varResponse = varName.IndexOf(" ");
                varFirst = varName.Substring(0, varResponse);
                varLast = varName.Substring(varName.Length - (varName.Length - varResponse - 1));
                varSplit = true;
            }
            //Finds similar names to what the user is inputting
            if (varSplit == true)
            {
                varEmpSQL = "SELECT TRIM(EMFName)||' '||TRIM(EMMName)||' '||TRIM(EMLName)AS FullName, TRIM(EMFName)||' '||TRIM(EMLName) AS NameValue FROM LEADS.EMMain WHERE UPPER(EMLName) LIKE '%" + varLast.ToUpper() + "%' AND UPPER(EMFName) LIKE '%" + varFirst.ToUpper() + "%' AND EMDateTerm IS NULL ORDER BY FullName";
            }
            else
            {
                varEmpSQL = "SELECT TRIM(EMFName)||' '||TRIM(EMMName)||' '||TRIM(EMLName)AS FullName, TRIM(EMFName)||' '||TRIM(EMLName) AS NameValue FROM LEADS.EMMain WHERE (UPPER(EMLName) LIKE '" + varName.ToUpper() + "%' OR UPPER(EMFName) LIKE '" + varName.ToUpper() + "%') AND EMDateTerm IS NULL ORDER BY FullName";
            }
            SqlDataSource1.SelectCommand = varEmpSQL;
            NameSuggestSelect.DataBind();
            DataSourceSelectArguments dssa = new DataSourceSelectArguments();
            dssa.AddSupportedCapabilities(DataSourceCapabilities.RetrieveTotalRowCount);
            dssa.RetrieveTotalRowCount = true;
            DataView dv = (DataView)SqlDataSource1.Select(dssa);
            varCount = dv.Table.Rows.Count;
            if (varCount > 20 && varName.Length > 0)
            {
                varCount = 20;
                NameSuggestSelect.Visible = true;
            }
            if (varCount > 0 && varName.Length > 0)
            {
                NameSuggestSelect.Rows = varCount;
                NameSuggestSelect.Visible = true;
            }
            else
            {
                NameSuggestSelect.Visible = false;
            }
        }

    }
    protected void SqlDataSource1_Selecting(object sender, SqlDataSourceSelectingEventArgs e)
    {
    }
    protected void SqlDataSource1_Selecting1(object sender, SqlDataSourceSelectingEventArgs e)
    {
    }
}

Open in new window

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" ClientIDMode="Static" %>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function PopulateName(varName) 
        {
            document.getElementById('NameSearchText').value = varName;
            document.getElementById('NameSuggestSelect').style.display = 'none';
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <asp:ScriptManager runat="server">
        </asp:ScriptManager>
        <asp:TextBox ID="NameSearchText" runat="server" Width="231px" AutoPostBack="true" >
        </asp:TextBox>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:LEADSConn %>" 
            ProviderName="<%$ ConnectionStrings:LEADSConn.ProviderName %>" 
            >
        </asp:SqlDataSource>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="NameSearchText" EventName="TextChanged" />
            </Triggers>
            <ContentTemplate>
                <asp:ListBox runat="server"
                    ID="NameSuggestSelect"  
                    DataSourceID="SqlDataSource1" 
                    SelectionMode="Single" 
                    DataTextField="FullName" 
                    DataValueField="NameValue" 
                    Visible="false">
                </asp:ListBox>
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
    </form>
</body>
</html>

Open in new window

0
 
LVL 9

Accepted Solution

by:
CCSOFlag earned 0 total points
ID: 34909450
I figured out the issue.  The double click is being required, because the page refreshes on the single click because the text box is losing focus and it has autopostback set to true.  Below is my code that I changed so the answer can be seen by future askers.


CHANGED my javascript function:

        function PopulateName()
        {
            varName = document.getElementById('NameSuggestSelect').value;
            document.getElementById('NameSearchText').value = varName;
            document.getElementById('NameSuggestSelect').style.display = 'none';
        }

(Added the statement for the javascript to grab the value that is selected on the list box)


Changed
        <asp:TextBox ID="NameSearchText" runat="server" Width="231px" AutoPostBack="true" >
        </asp:TextBox>
TO
        <asp:TextBox ID="NameSearchText" runat="server" Width="231px" >
        </asp:TextBox>
(Removed autopostback = true)



Also changed the ASP.NET javascript event declaration:
        NameSuggestSelect.Attributes.Add("onclick", "PopulateName('" + NameSuggestSelect.SelectedValue + "')");

TO

        NameSuggestSelect.Attributes.Add("onclick", "PopulateName()");

(Removed the passing of the listbox value and instead did it thru the javascript function above.)


With autopostback set to false the page could no longer find the value that was in the listbox for some reason.  It kept showing null.  This is why I added it to the javascript to find it instead, and removed it from the code behind C#.
0
 
LVL 9

Author Closing Comment

by:CCSOFlag
ID: 34941344
Thanks for trying.  I figured out how to get it to work without having to click twice.
0

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

832 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question