Question

I have jQuery Tabs in which each tab and corresponding content are populated by a PHP foreach loop.

For each tab the user can upload a picture. I have this setup in a way so that as soon as the user chooses a file, a jquery script makes the upload begin automatically — and the browse button is hidden and replaced by “Uploading your picture”.

Here is the code (CI markup):

<ul class="tab_header">
    <?php foreach ($p as $row):
        echo '<li>
            <a href="#tabs-'. $row->p_id . '">' . $row->p_name . '</a>
               </li>'; 
        endforeach; ?>
</ul>
<?php foreach ($p as $row): ?>
    <div id="tabs-<?php echo $row->p_id; ?>">

        <?php echo form_open_multipart('/p/p_upload_picture/' . $row->p_id, 'id="upload_form"');
        echo form_upload('userfile', '', 'id="file_select"');
        echo form_hidden('upload','upload');
        echo form_close(); ?>
         <div id="loading" style="display:none;">
            Uploading your picture...
         </div>     
</div>

<?php endforeach; ?>

<script>
$(function(){
    $("#file_select").change(function(){
        $("#upload_form").submit();
        $("#upload_form_div").hide();
        $("#loading").show();
    });
});
</script>   

This works perfectly but only on the first tab.

In all other tabs, the jquery script doesn’t run — as soon as I choose a file, the file name is shown in the browse button field instead, and no upload happens (form isn’t submitted).

I wonder if this has to do with the script not being initialized for the other tabs.

How can I fix this?

Thanks for helping, much appreciated.

Answer 1

Your field has an id. Which should be unique per element.

jQuery only returns the first element it encounters with the given id, that’s why your code isn’t working. I would suggest adding a class instead of an id to your field.

$('.class-of-field')..change(function() {
    ..
});

The above should do the job.

This would be the equivalent code without jQuery:

var el = document.getElementById('file_select');

Which only returns one element, have a look at the documentation.