Hello all.
I am trying to use four modals in codeigniter. Main page has four simple links, each of them pops up its modal. Then each modal has a form with upload image, this means main page requires four images which would be uploaded through modals.
The upload form is being processed through jquery so that main page would not refresh. So in short words when we click a link on main page, it will open a modal, modal will upload image and when we close the modal, the image would be placed in main page and all these processes without refreshing any page.
My code is as follows.
(Main page for links to open modals)
<a href="<?php echo base_url("BellaAdmin/img_data/?id=1&rand=".$rand);?>" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false" id="mybtn">Set/Edit main page thumbnail</a>
<br>
<a href="<?php echo base_url("BellaAdmin/img_data1/?id=2&rand=".$rand_two);?>" data-toggle="modal" data-target="#myModal1" data-backdrop="static" data-keyboard="false" id="mybtn1">Set/Edit first product image</a>
<br>
<a href="<?php echo base_url("BellaAdmin/img_data2/?id=3&rand=".$rand_three);?>" data-toggle="modal" data-target="#myModal2" data-backdrop="static" data-keyboard="false">Set/Edit second product image</a>
<br>
<a href="<?php echo base_url("BellaAdmin/img_data3/?id=4&rand=".$rand_four);?>" data-toggle="modal" data-target="#myModal3" data-backdrop="static" data-keyboard="false">Set/Edit third product image</a>
<!-- Modals for each of above link -->
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modals for each of above link -->
<!-- Modal -->
<div id="myModal1" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal3" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>(Form upload page in each modal)
<div align="center">
<br>
<h3>Upload Main Thumbnail</h3>
<hr>
<br>
<div id="targetLayer"></div>
<div id="data"></div>
<br><br>
<?php
print_r($this->input->get());
echo "<br><br>";
echo current_url();
?>
<div id="wrapper">
<form method="post" action="" enctype="multipart/form-data" id="Myform">
<label for="upload_file" class="custom-file-upload">
Choose Image To Upload
</label>
<input type="file" id="upload_file" class="custom-file" name="upload_file" required>
<br>
<div align="center" style="width: 200px;">
<input type="hidden" name="Confirm" value="YES">
<input type="hidden" name="rand" value="<?php echo $rand;?>">
<input type="submit" name="submit_image" value="Upload">
</div>
</form>
<?php
echo "<h4>Recommended size 500 X 500</h4>";
?>
</div>
<hr>
<div id="button"><button type="button" class="btn btn-default" data-dismiss="modal" id="donot">Close</button></div>
<br><br>
</div>(Jquery to submit form the form)
<script>
function thumb()
{
getData("main_thumb");
}
var button = '<button type="button" class="btn btn-default" data-dismiss="modal" id="do" onclick="thumb()">Add This Image And Close</button>';
$(document).ready(function (e) {
$("#Myform").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "http://localhost/codeigniter/bellaadmin/add_form/",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData: false,
success: function(data)
{
$("#targetLayer").html(data);
$("form").trigger("reset");
$('#button').html(button)
},
error: function(data)
{
console.log("error");
console.log(data);
}
});
}));
});
</script>(upload image and display preview in modal)
<?php
if(isset($info_a)) {
foreach($temp_image as $row):
echo '<img src="http://localhost/codeigniter/uploads/';
echo $row['name'];
echo '" width="200" height="200" id="image">';
endforeach;
}
?>Now when modal close button is pressed it will add image to main page. Please note that I have shared the code only for one modal, however it is same for other three modals with the change of their ids.
This all is working fine.
My question is actually I was trying to do this all collectively, I was trying to make one file for form upload (in modal), one jquery code for all four files, and one upload form file (the last code).
(Please forgive me for not using comments anywhere in any code, actually I do it in the end)
Note: Please tell me if controller and/or model is required.