I am working on property site. While adding property if its type is hotel then i've to show room type of hotel and i've to upload images of hotel as well as its room types. For uploading hotel images i am using dropzone and it is working fine. Hotel room types will come as checkboxes now when user check any checkboxes then i've to dynamically add dropzone for room type. Follwing is my ajax function:-
$("body").on("click", ".propsubtype", function(){
var propsubtype_id = $(this).attr("id");
if($(this).is(":checked")){
$.ajax({
type: "POST",
url: "inc/ajax_call/get_propertysubtypeimage.php",
data: { propsubtype_id : propsubtype_id },
cache: false,
success: function(html){
if(html == 0){
$(".propertysubimages").html("").hide();
}else{
$(".propertysubimages").append(html).show();
}
}
});
}else{
$("#subtype"+propsubtype_id).remove("");
}
});
Following is the code in get_propertysubtypeimage.php file.
<?php
$propsubtype_id = $_POST["propsubtype_id"];
?>
<div id="subtype<?php echo $propsubtype_id; ?>">
<div class="alert alert-success" id="uplodmsg" style="display: none; margin-top: 20px;"><span style="color:red;" id="uploadfilemsg<?php echo $propsubtype_id; ?>"></span></div>
<div class="innerMain">
<label class="control-label valiclrBold"><?php echo $propsubtypename." Images"; ?></label>
<div class="DinInput">
<div class="field_value">
<?php
$cntimg = $dclass->select("tbl_propertyimages","count(id) as cnt"," AND property_id = '$prop_id'");
if(isset($cntimg[0]["cnt"]) && $cntimg[0]["cnt"] != ""){
$finalimgCnt = $checkmaxupload - $cntimg[0]["cnt"];
}else{
$finalimgCnt = $checkmaxupload;
}
$length = 4;
$subrandstring = substr(str_shuffle("ABCDEFGHIJKLMNOPQRSTUVWXYZ"), 0, $length);
?>
<div class="dropzone" id="my-dropzone"></div>
<input type="hidden" name="propertysubname_tag" value="<?php echo $subrandstring;?>">
</div>
<input type="hidden" id="subfilecntr" value="<?php echo $finalimgCnt; ?>"/>
</div>
</div>
<div style="clear: both;"></div><br/>
</div>
<script type="text/javascript">
$(document).ready(function (){
var cntr = 0;
var maxuploadfile = $("#subfilecntr").val();
Dropzone.options.myDropzone = {
url: "../action/subtypeupload.php?&type=garage&name_tag=< ?php echo $subrandstring;?>",
fileExtensions: "image/gif, image/jpeg,image/gif, image/png, image/jpe",
accept: function(file, done){
if(cntr == maxuploadfile){
done("You can not upload more than "+ maxuploadfile +" files.");
$("#uplodmsg").show();
if(maxuploadfile == 0){
$("#uploadfilemsg").html("You can not upload more then 15 files for a property. Please delete some files and try again").show();
}else{
$("#uploadfilemsg").html("You can not upload more than "+ maxuploadfile +" files.").show();
}
return false;
}
cntr++;
var re = /(?:\.([^.]+))?$/;
var ext = re.exec(file.name)[1];
ext = ext.toUpperCase();
if(ext == "JPEG" || ext == "GIF" || ext == "JPG" || ext == "PNG" || ext == "JPE"){
done();
}else {
done("just select jpeg or gif or png files.");
return false;
}
}
};
});
</script>
when i call this function the dropzone div is coming when i cliked on that div then it is not opening the file select control. Any help will be appreciated. Thanks in Advance.