Simulation of selecting an option from the select element in a Firebug extension

[Ebrahim Khalil Abbasi]

Hi,

I am so sorry that I am posting this topic here, because this question might be irrelevant for the Firebug community. But, I posted this question in other groups and have not got a good answer. 

I am trying to simulate user actions in my Firebug extension. Given two select (combobox) elements A and B, by selecting an option from A, new options are loaded in B. I want to extract all these relations between options of the two select elements. To do this, I programmatically select an option from A and then trigger its change event to load new options in B: 

• jQuery(A).find('option')[j].selected=true;  ///  in which i is a counter
  
• jQuery(A).trigger('change');
  

Options are properly set in A, but the change event is not fired, so, no option is loaded in B. 

Any suggestion?

Thanks.

[Sebastian Zartner]

am so sorry that I am posting this topic here, because this question might be irrelevant for the Firebug community

Right, you should have better asked directly in the jQuery forum or at stackoverflow.

Anyway, I attached a test case, which works fine for me with and without jQuery. Hope that solves your problem.

Sebastian

[Ebrahim Khalil Abbasi]

Thanks Sebastian,

Both your and my codes work on some websites and fails on some others. For example, if you have a look at http://www.wrenchscience.com/, if you choose an item from the first select element (choose a Manufacture), new items are loaded in the second one (Choose a Model). I want to simulate this scenario in my extension. 

Ebrahim

[Sebastian Zartner]

In my test page I simply selected a value in the second select box when the value in the first one is changed, which solved the problem you had saying that the change event wasn't fired in your code.
Instead of just selecting a value in the second select box you can also replace all items from the second select box by new ones. On the website you link to an AJAX request returns the new items.
This should be pretty simple to achieve. So where exactly are you stuck at?

Sebastian

[Ebrahim]

Here is the code to automatically select options from selectElementA. After each change in selectElementA, an ajax is done and loads new options in selectElementB then I read this new values by the Read_Data function. The problem is that the change event after making a change in selectElementA is not fired. 

--------------------------------------------------------------------------------------------------------------

var selectElementA=$('#ctl00_pageContentRegion_frameManufacturer');

var selectElementB=$('#frameModel');

var options = selectElementA.options;

for (var j=0; j< options.length;j++) {

      jQuery(selectElementA).find("option")[j].selected = true;

      setTimeout(function(){jQuery(selectElementA).trigger("change");},5000);

      $(document).ajaxComplete(function complete(e){

         Read_Data(selectElementB);

         $(document).unbind('ajaxComplete',complete);

       }).trigger('ajaxComplete');

}

--------------------------------------------------------------------------------------------------------------

Ebrahim

[Sebastian Zartner]

I didn't test your code but it doesn't look right to me.

1. Where's the AJAX call?
   
2. Why do you loop over all options of the first select box?
3. You select each option of the first select box and trigger the change event for each of them.
4. Why do you trigger the event on a timeout?

To make progress you should create a simple test case page and try it with that. Though note that there are already hundreds of scripts, which do similar things. E.g.

• http://www.jquery4u.com/plugins/10-jquery-form-select-boxes/
• http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/
• http://www.9lessons.info/2010/08/dynamic-dependent-select-box-using.html
  

Anyway, as long as you don't have questions related to Firebug, you should really ask in the forums I stated earlier.

Sebastian

[Ebrahim]

Thanks Sebastian for your help. 

I started this topic in the jquery forum. I hope to get some feedback from there. 

 

Ebrahim