jQuery: replaceWith SELECT then focus SELECT - How?

Posted on 2012-09-20
Last Modified: 2012-10-08
I have a huge form with many big SELECTs that are identical. Instead of having the SELECTs in the HTML I show a visual representation of an unfocused SELECT (<span class="stockChangeAmountDummy">0</span>)

On click I replace the selectDummy with a real SELECT. I want the click to focus the SELECT, because now I have to click twice, 1st click to replace the dummy with SELECT and the 2nd time to focus (open) the SELECT.

I cant get it to work with .focus()

This is the code

	$('tr.listrow').on('mousedown click','.stockChangeAmountDummy',function(){
		var rowId=$(this).parents('tr.listrow').children('td.trrownumber').html();

Open in new window

My tests with .focus() are not included.

Any ideas?
Question by:Alfahane
    LVL 49

    Expert Comment

    by:Julian Hansen
    From your other post on this - I had an idea that might be better for both questions.

    The problem with the select and clicking on it is that if you try to manipulate the control as part of the click (which the browser uses to drop the list etc) and the focus issues you are having - instead of doing the mouseover solution I posted earlier why don't you try this.

    For each non-populated select position a transparent div over the top of the select. Put the click event on that div so that when it is clicked
    a) It populates the the select
    b) It removes the transparent div
    c) It sets focus to the select

    You can create a small javascript routine to run on page load and create the transparent div's for each of the selects on the page - so no need to put it in the code.

    Let me know what you think - if you like and need help with the code I will see if I can knock something together.

    Author Comment

    I went with a hybrid of your previous solution simply because issues with handheld devices. Thye dont do mouse-movement events well.

    Then, I also saw that SELECTs slowed down rendering. Since this is a central and very heavily used FORM rendering matters. It's mostly a matter of lagging page scroll while page is loading. This is the reason why I've abandoned the almost empty SELECT for no SELECT, but create SELECT if needed.

    Your suggestion above sound very reasonable. But your solution in my previous post already worked as it should. This new problem is different.
    LVL 49

    Expert Comment

    by:Julian Hansen
    And if you add .focus to the following?


    Author Comment

    I thought that too, but it doesn't.
    LVL 49

    Accepted Solution

    And this
    $('stockmountchange' + rowId).focus();

    Open in new window


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Training Course: Java/J2EE and SOA

    This course will cover both core and advanced Java concepts like Database connectivity, Threads, Exception Handling, Collections, JSP, Servlets, XMLHandling, and more. You'll also learn various Java frameworks like Hibernate and Spring.

    Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
    There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

    779 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

    14 Experts available now in Live!

    Get 1:1 Help Now