Load function in loop

Question

I have an working loadfunction. But when I use this in an loop it won't work, the data is not pulled or the code is not (correctly) triggered. When viewing the console there is no error. So hard to determine why the data is not shown.

In this code when the users selects an item of the first select list the second select list is updated with the corresponding data.

<select class="form-control" id="add_off_relatie_id" name="add_off_relatie_id" onchange="add_contact_table_4()">';
    foreach ($rows_adr as $row_adr)
    {
        echo '<option ';if($row['relatie_id'] == $row_adr['id']) { echo 'selected="selected"';} echo 'value="'.$row_adr['id'].'">'.$row_adr['naam'].'</option>';
    }
    echo '
</select>

<select class="form-control" id="add_off_contact_id" name="add_off_contact_id" onchange="validate_add_off_table_4()">';
    foreach ($rows_cnt as $row_cnt) if($row_cnt['relatie_id'] == $row['relatie_id'])
    {
        echo '<option ';if($row['contact_id'] == $row_cnt['id']) { echo 'selected="selected"';} echo 'value="'.$row_cnt['id'].'">'.$row_cnt['naam'].'</option>';
    }
    echo '
</select>

<script type="text/javascript">
function add_contact_table_4()
{
    $('#add_off_contact_id').load('includes/dynamic_drop/relatie_contact.php?choice=' + document.getElementById('add_off_relatie_id').value)
}
</script>

But when using the same structure in an for loop and the user select an new item in the first select list the data in the second select list is not updated.

<select class="form-control" id="edit_off_relatie_id['.$i.']" name="edit_off_relatie_id" onchange="edit_contact_table_4(this, '.$i.')">';
    foreach ($rows_adr as $row_adr)
    {
        echo '<option ';if($row_table_4['relatie_id'] == $row_adr['id']) { echo 'selected="selected"';} echo 'value="'.$row_adr['id'].'">'.$row_adr['naam'].'</option>';
    }
    echo '
</select>

<select class="form-control" id="edit_off_contact_id['.$i.']" name="edit_off_contact_id" onchange="validate_edit_off_table_4(this, '.$i.')">';
    foreach ($rows_cnt as $row_cnt) if($row_cnt['relatie_id'] == $row_table_4['relatie_id'])
    {
        echo '<option ';if($row_table_4['contact_id'] == $row_cnt['id']) { echo 'selected="selected"';} echo 'value="'.$row_cnt['id'].'">'.$row_cnt['naam'].'</option>';
    }
    echo '
</select>

<script type="text/javascript">
function edit_contact_table_4(selectVeld, nr)
{
    $('edit_off_contact_id['+nr+']').load('includes/dynamic_drop/relatie_contact.php?choice=' + document.getElementById('edit_off_relatie_id['+nr+']').value)
}
</script>

Any suggestions would be fantastic.

@NicoHaase I have tried te remove ['$i'] from the code and it works on the first of the loop. — Muiter
– Muiter, Commented May 7, 2020 at 5:32

Triby · Accepted Answer · 2020-05-06 15:15:38Z

1

Square brackets are used to special tasks, like getting attributes, like in input[name=something], so they need to be escaped:

$('edit_off_contact_id\\['+nr+'\\]').load('includes/dynamic_drop/relatie_contact.php?choice=' + document.getElementById('edit_off_relatie_id\\['+nr+'\\]').value)

Or you can change string format for your ids:

<select class="form-control" id="edit_off_relatie_id-' . $i . '" name="edit_off_relatie_id" onchange="edit_contact_table_4(this, ' . $i . ')">';
    foreach ($rows_adr as $row_adr)
    {
        echo '<option ';if($row_table_4['relatie_id'] == $row_adr['id']) { echo 'selected="selected"';} echo 'value="'.$row_adr['id'].'">'.$row_adr['naam'].'</option>';
    }
    echo '
</select>

<select class="form-control" id="edit_off_contact_id-' . $i . '" name="edit_off_contact_id" onchange="validate_edit_off_table_4(this, ' . $i . ')">';
    foreach ($rows_cnt as $row_cnt) if($row_cnt['relatie_id'] == $row_table_4['relatie_id'])
    {
        echo '<option ';if($row_table_4['contact_id'] == $row_cnt['id']) { echo 'selected="selected"';} echo 'value="'.$row_cnt['id'].'">'.$row_cnt['naam'].'</option>';
    }
    echo '
</select>



<script type="text/javascript">
function edit_contact_table_4(selectVeld, nr)
{
    $(`edit_off_contact_id-${nr}`).load('includes/dynamic_drop/relatie_contact.php?choice=' + document.getElementById(`edit_off_relatie_id-${nr}`).value)
}
</script>

answered May 6, 2020 at 15:15

Triby

1,7471 gold badge16 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Muiter Over a year ago

Thx, this helped me an lot. I had to use

$('edit_off_contact_id\\['+nr+'\\]').load('includes/dynamic_drop/relatie_contact.php?choice=' + document.getElementById('edit_off_relatie_id['+nr+']').value)

Collectives™ on Stack Overflow

Load function in loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related