Problem passing variables through html, javascript and php.

Question

I'm using JEditable and trying to populate a select based on a variable. I need a way to pass a variable from my page back through the JQuery to dynamically create the select.

JQuery:

$(".dblclick_district").editable('miscfreqs.php?mode=save_edit&module=miscfreqs&type=district',
{
    type: 'select',
    loadurl: 'tools.php?mode=get_districts_json',
    submit: 'OK',
    event: 'dblclick'
});

The HTML that I use is generated by PHP:

<div class="dblclick_province" id="freq_id">Province</div>
<div class="dblclick_district" id="freq_id">District</div>

I'd like to be able to somehow pass the value of province through the dblclick event of District, since the Districts available depend on which Province is selected.

Answer 1

First thing two elements on the same page cannot have same id. In your case both div are having same id ie freq_id so it should be changed.

You can have html as below -

<div class="dblclick_province" id="province_id">Province</div>
<div class="dblclick_district" id="district_id">District</div>

Then write the below code in your js file. It uses jquery's dbclick event.

$('document').ready(function(){
  $('#district_id').dblclick(function() {
    var province_value = $('#province_id').html();
   // write you code here in which you want to process province value.
  });
});