CODEWITHSUNDEEP
jquerytwitter-bootstrap-3bootstrap-modal
michi
michi

Reputation: 3

Retrieve dynamic variable in external bootstrap modal content

Help, I am desperate. I have read through all the topics explaining more or less what I am looking for and am still stuck.

I have a file text.php containing:

<a href="#" class="btn" id="openBtn" data-id="<?=$elements['ElementModuleID']?>">Open modal</a>

<div class="modal fade" id="myAjaxModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"> <a href="#" class="close" data-dismiss="modal" aria-hidden="true"><span>close</span>×</a>

                <div class="title-box">
                     <h4 class="title"></h4>

                </div>
            </div>
            <div class="modal-body">
                <p>My modal content here…</p>
            </div>
        </div>
    </div>
</div>
<script>
    $('#openBtn').click(function() {.....

       ----here i should probably pass ElementID, but how ?

        $('.modal-body').load('<?php URL_ROOT?>/modals/uploader.php', function(result) {
            $('#myAjaxModal').modal({
                show: true
            });
        });
    });
</script>

File uploader.php contains:

<form action="" method="post" enctype="multipart/form-data" id="FormUploadElementMainImage">
    <div class="modal-header">
        <a href="#" class="close" data-dismiss="modal" aria-hidden="true"><span><?php echo $lang["close"]; ?></span>×</a>

        <div class="title-box">
             <h4 class="title">Upload Image <?php echo $elements['ElementTitle']; ?></h4>

        </div>
    </div>
    <div class="modal-body">
        <input type="text" name="elementID" class="form-group" id="elementID" value="<?=$elements['ElementModuleID']?>" />
        <label for="ElementMainImage">
            <?php echo $lang[ "pleaseclickbrowse"]; ?>:</label>
        <input type="file" name="ElementMainImage" id="ElementMainImage" value="">
        <br>
        <script>
            $("#ElementMainImage").fileinput({
                'showUpload': false,
                showCaption: false,
                    'previewFileType': 'any'
            });
        </script>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
            <?php echo $lang[ "buttoncancel"]; ?>
        </button>
        <button type="submit" name="ButtonUploadMainImage" value="Submit" id="ButtonUploadMainImage" class="btn btn-primary">
            <?php echo $lang[ "startupload"]; ?>
        </button>
    </div>
</form>

The simple task is to retrieve $elements['ElementTitle'] and $elements['ElementID']in the file uploader.php. How can I pass it properly? Do you think, I can get it to work ? No! :-) Kind of ashamed because I am sure that it only needs a little correction. Can anybody help? Thank you so much

Upvotes: 0

Views: 632

Answers (1)

omma2289
omma2289

Reputation: 54629

You could send the data via POST using the second parameter of load():

var data = {
    elementTitle: "<?=$elements['ElementTitle']?>", 
    elementModuleID: "<?=$elements['ElementModuleID']?>"
};

$('.modal-body').load('<?php URL_ROOT?>/modals/uploader.php', data, function(result) {
    $('#myAjaxModal').modal({
        show: true
    });
});

Then in uploader.php you would retrieve it like this: 

<?php echo $_POST['elementTitle']; ?>
<?php echo $_POST['elementModuleID']; ?>

Upvotes: 1

Related Questions