Solved

Javascript onclick triggering on second click not first

Posted on 2011-02-15
8
761 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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article discusses how to create an extensible mechanism for linked drop downs.
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

808 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