Symfony 1.4 with AJAX jQuery. How can I improve the AJAX's function that contains a select box which depends on another select box?

问题

I use Symfony 1.4. I have three tables related to one another as shown below.

Table 1:

Conflictos1:
  connection: doctrine
  tableName: conflictos_1
  columns:
    id:
      type: integer(4)
      fixed: false
      unsigned: false
      primary: true
      autoincrement: true

    id_sector_actividad:
      type: integer(4)
      fixed: false
      unsigned: false
      primary: false
      notnull: true
      autoincrement: false

    id_subsector_actividad:
      type: integer(4)
      fixed: false
      unsigned: false
      primary: false
      notnull: false
      autoincrement: false

  relations:

    SectorActividadCiuTa7:
      local: id_sector_actividad
      foreign: id
      type: one
    SubsectorActividadTa8:
      local: id_subsector_actividad
      foreign: id
      type: one

Table 2 and 3:

SectorActividadCiuTa7:
  connection: doctrine
  tableName: sector_actividad_ciu_ta7
  columns:
    id:
      type: integer(4)
      fixed: false
      unsigned: false
      primary: true
      autoincrement: true
    sector_actividad:
      type: string(255)
      fixed: false
      unsigned: false
      primary: false
      notnull: true
      autoincrement: false
  relations:
    Conflictos1:
      local: id
      foreign: id_sector_actividad
      type: many
    SubsectorActividadTa8:
      local: id
      foreign: id_sector
      type: many
SubsectorActividadTa8:
  connection: doctrine
  tableName: subsector_actividad_ta8
  columns:
    id:
      type: integer(4)
      fixed: false
      unsigned: false
      primary: true
      autoincrement: true
    id_sector:
      type: integer(4)
      fixed: false
      unsigned: false
      primary: false
      notnull: true
      autoincrement: false
    descripcion:
      type: string(255)
      fixed: false
      unsigned: false
      primary: false
      notnull: true
      autoincrement: false
  relations:
    SectorActividadCiuTa7:
      local: id_sector
      foreign: id
      type: one
    Conflictos1:
      local: id
      foreign: id_subsector_actividad
      type: many

I have generated with Symfony a module named "conflictos". In this module I have a partial _form.php.This partial contains an AJAX function. Here the code:

<?php use_stylesheets_for_form($form) ?>
<?php use_javascripts_for_form($form) ?>
<?php use_helper('Date') ?>

<!--Aquí el javascript para select dependientes-->
<script type="text/javascript">
$(document).ready(function()
{
    $("#conflictos1_id_sector_actividad").change(function()
    {
        var id_sub = $(this).val();
        if(id_sub != '')
        {
            $.ajax
            ({
                type: "POST",
                url: '<?php echo url_for('conflictos/subsector'); ?>'+ '?id=' + id_sub,
                cache: false,
                data: "id_sub="+ id_sub,
                success: function(data)
                {
                    $("#conflictos1_id_subsector_actividad").html(data); // but it does not select the value of dropdown list.
                }
            });
        }
        else
        {
            $("#conflictos1_id_subsector_actividad").html("<option value=''>-- No se ha seleccionado subsector --</option>");
        }
        return false;
    });
});
</script>
<form action="<?php echo url_for('conflictos/'.($form->getObject()->isNew() ? 'create' : 'update').(!$form->getObject()->isNew() ? '?id='.$form->getObject()->getId() : '')) ?>" method="post" <?php $form->isMultipart() and print 'enctype="multipart/form-data" ' ?>>
    <?php if (!$form->getObject()->isNew()): ?>
        <input type="hidden" name="sf_method" value="put" />
    <?php endif; ?>
    <table border="0" width="96%">
        <tfoot>
            <tr>
                <td align="center" colspan="4">
                    <?php echo $form->renderHiddenFields(false) ?>
                    &nbsp;<a href="<?php echo url_for('conflictos/index') ?>"><button class="btn btn-success" type="button">Listado</button></a>
                    <?php if (!$form->getObject()->isNew()): ?>
                        &nbsp;<?php echo link_to('<button class="btn btn-danger" type="button">Borrar</button>', 'conflictos/delete?id='.$form->getObject()->getId(), array('method' => 'delete', 'confirm' => '¿Está seguro?')) ?>
                    <?php endif; ?>
                    <!--<input type="submit" value="Save" />-->
                    <button class="btn btn-primary" type="submit">Grabar</button>
                </td>
            </tr>
        </tfoot>
        <tbody>
            <?php echo $form->renderGlobalErrors() ?>
            <tr>
                <td  width="24%"><?php echo "<b>Sector Actividad <font color='red'> (*)</b></font><br>"  ?>
                    <?php echo $form['id_sector_actividad']->renderError() ?>
                    <?php echo $form['id_sector_actividad'] ?>
                </td>
                <td  width="24%"><?php echo "<b>Subsector Actividad</b><br> "  ?>
                    <?php echo $form['id_subsector_actividad']->renderError() ?>
                    <select name="conflictos1[id_subsector_actividad]" id="conflictos1_id_subsector_actividad">
                        <option value="" selected="selected">Seleccione sub-sector</option>
                </td>
        </tbody>
    </table>
</form>

The AJAX function works fine when I add a new record, but when I want to edit a record, the field corresponding to select id_subsector_actividad appears empty.

My question is: What should I change in the AJAX function, to display the field value "id_subsector_actividad", when I call the function executeEdit with Symfony?

回答1:

I solved the problem. The function should look like:

<script type="text/javascript">
$(document).ready(function()
{
    var sector = document.getElementById("conflictos1_id_sector_actividad");

    var id_sub = sector.options[sector.selectedIndex].value;

    {
      $.ajax
      ({
         type: "POST",
         url: '<?php echo url_for('conflictos/subsector'); ?>'+ '?id=' + id_sub,
         cache: false,
                 data: "id_sub="+ id_sub,

success: function(data)
                    {
//                          alert(data);// its show my returned value

                         $("#conflictos1_id_subsector_actividad").html(data);// but it does not select the value of dropdown list.
                   }  
      });
     }

  $("#conflictos1_id_sector_actividad").change(function()
  {

    var id_sub = $(this).val();

    if(id_sub != '')  
     {
      $.ajax
      ({
         type: "POST",
         url: '<?php echo url_for('conflictos/subsector'); ?>'+ '?id=' + id_sub,
         cache: false,
                 data: "id_sub="+ id_sub,

success: function(data)
                    {                        

                         $("#conflictos1_id_subsector_actividad").html(data);// but it does not select the value of dropdown list.
                   }  
      });
     }
     else
     {
       $("#conflictos1_id_subsector_actividad").html("<option value=''>-- No se ha seleccionado subsector --</option>");
     }
    return false;
  });
});
</script>

The same function is now executed when the document is loaded. Now I've the better answer here: Symfony 1.4: How I can retrieve the selected value with AJAX's function in select dependent?

来源：https://stackoverflow.com/questions/19236402/symfony-1-4-with-ajax-jquery-how-can-i-improve-the-ajaxs-function-that-contain