Solved

Javascript onclick triggering on second click not first

Posted on 2011-02-15
8
746 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
This article discusses how to create an extensible mechanism for linked drop downs.
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
The viewer will learn how to dynamically set the form action using jQuery.

895 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now