• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 806
  • Last Modified:

Javascript onclick triggering on second click not first

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
CCSOFlag
Asked:
CCSOFlag
  • 5
  • 2
1 Solution
 
gdupadhyayCommented:
where you write:

NameSuggestSelect.Attributes.Add("onclick", "PopulateName('" + NameSuggestSelect.SelectedValue + "')");
0
 
BurniePCommented:
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
 
CCSOFlagAuthor Commented:
where you write:

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


What about it?  Did I miss something you were trying to say?
0
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

 
CCSOFlagAuthor Commented:
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
 
BurniePCommented:
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
 
CCSOFlagAuthor Commented:
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
 
CCSOFlagAuthor Commented:
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
 
CCSOFlagAuthor Commented:
Thanks for trying.  I figured out how to get it to work without having to click twice.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now