Solved

Javascript onclick triggering on second click not first

Posted on 2011-02-15
8
738 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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
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…

762 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

23 Experts available now in Live!

Get 1:1 Help Now