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

jQuery: replaceWith SELECT then focus SELECT - How?

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();
		$(this).replaceWith($('#masterStockAmountChange').clone().attr('name','stockamountchange'+rowId).attr('id','stockamountchange'+rowId).attr('onChange','stockChangeInput(this,'+rowId+');'));
	});

Open in new window


My tests with .focus() are not included.


Any ideas?
0
Alfahane
Asked:
Alfahane
  • 3
  • 2
1 Solution
 
Julian HansenCommented:
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.
0
 
AlfahaneAuthor Commented:
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.
0
 
Julian HansenCommented:
And if you add .focus to the following?

            $(this).replaceWith($('#masterStockAmountChange').clone().attr('name','stockamountchange'+rowId).attr('id','stockamountchange'+rowId).attr('onChange','stockChangeInput(this,'+rowId+');')).focus();
0
 
AlfahaneAuthor Commented:
I thought that too, but it doesn't.
0
 
Julian HansenCommented:
And this
$(this).replaceWith($('#masterStockAmountChange').clone().attr('name','stockamountchange'+rowId).attr('id','stockamountchange'+rowId).attr('onChange','stockChangeInput(this,'+rowId+');'));
$('stockmountchange' + rowId).focus();

Open in new window

0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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