-
hc-innov
Junior Member
-
Posts: 39
Threads: 0
Joined: Mar 2019
Reputation:
1
-
sarath_unrelax
Junior Member
-
Posts: 46
Threads: 8
Joined: Jun 2019
Reputation:
0
-
sarath_unrelax
Junior Member
-
Posts: 46
Threads: 8
Joined: Jun 2019
Reputation:
0
Ok buddy,
I don't why it not working... Now my jQuery validation also not working. Can you fix
-
hc-innov
Junior Member
-
Posts: 39
Threads: 0
Joined: Mar 2019
Reputation:
1
use private message please....
give me a link to download your code
-
hc-innov
Junior Member
-
Posts: 39
Threads: 0
Joined: Mar 2019
Reputation:
1
06-22-2019, 03:36 AM
(This post was last modified: 06-22-2019, 03:42 AM by hc-innov.)
(06-19-2019, 03:04 AM)InsiteFX Wrote: Please do not tie up the forum with replies like this.
Get Skype or another chat system like Team Viewer.
Yes I agree. The complete workaround with comments (it's a dropzone issue but perhaps it can help some people).
The problem: sarath don't have the $_FILE beacause dropzone send an ajax request every time a new file is append to the dropzone. But if you set the dropzone option "autoProcessQueus" to false, dropzone doesn't send the ajax request. In this case, you must add the class dropzone to your form tag and add an event listener to the submit button to send the ajax request with $_POST and $_FILE. The result:
the controller
PHP Code: function addProperty()
{
$this->load->library('form_validation');
$this->form_validation->set_rules('prop_rooms','Rooms','trim|required|numeric');
$this->form_validation->set_rules('prop_address','Address','trim|required|max_length[200]');
$this->form_validation->set_rules('prop_owner_phone','Mobile Number','required|min_length[10]');
$this->form_validation->set_rules('prop_owner_name','Owner Name','required|min_length[5]');
$this->form_validation->set_rules('prop_owner_email','Owner Email','required|valid_email');
if($this->form_validation->run())
{
$prop_title = ucwords(strtolower($this->security->xss_clean($this->input->post('prop_title'))));
$prop_status = ucwords(strtolower($this->security->xss_clean($this->input->post('prop_status'))));
$prop_type = ucwords(strtolower($this->security->xss_clean($this->input->post('prop_type'))));
$prop_price = $this->security->xss_clean($this->input->post('prop_price'));
$prop_sqft = $this->security->xss_clean($this->input->post('prop_sqft'));
$prop_rooms = $this->security->xss_clean($this->input->post('prop_rooms'));
$prop_address = $this->security->xss_clean($this->input->post('prop_address'));
$prop_owner_name = $this->security->xss_clean($this->input->post('prop_owner_name'));
$prop_owner_email = $this->security->xss_clean($this->input->post('prop_owner_email'));
$prop_owner_phone = $this->security->xss_clean($this->input->post('prop_owner_phone'));
$prop_detailed_info = $this->security->xss_clean($this->input->post('prop_detailed_info'));
$prop_current_status = $this->security->xss_clean($this->input->post('prop_current_status'));
$propertyInfo = array('title'=>$prop_title, 'status'=>$prop_status, 'type'=>$prop_type, 'price'=>$prop_price,
'sqft'=>$prop_sqft, 'rooms'=>$prop_rooms, 'address'=>$prop_address, 'name'=>$prop_owner_name,
'email'=>$prop_owner_email, 'phone'=>$prop_owner_phone, 'detailedInfo'=>$prop_detailed_info,
'currentStatus'=>$prop_current_status);
$result = $this->property_model->addNewProperty($propertyInfo);
//$result=1;//for my debug-no database
$error = false;
if($result > 0)
{
if (!empty($_FILES)) {
$count_img = count($_FILES['file']['name']);
foreach($_FILES['file']['tmp_name'] as $key => $value) {
$tempFile = $_FILES['file']['tmp_name'][$key];
//You must change the name of the file. Think : many users can send an image with the same name: it's a problem
//append the name with your $result (id of the property).You can also create a directory with this ID.
$fileName = $_FILES['file']['name'][$key].$result;
$targetPath = 'property-images/';
$targetFile = $targetPath . $fileName ;
//$this->load->model('user_model');
$imgData = array('path'=>$targetFile,'propertyid'=>$result);
$addUpload=false;
if(move_uploaded_file($tempFile, $targetFile))
{
//$addUpload=true;//for debug -no database.
$addUpload = $this->property_model->addPropertyImgs($imgData);
if (!$addUpload) {
$error = 'Error in database with upload';
}
} else {
$error = 'We have a problem with upload.<br>';
}
}
} else {
$error = 'You must provide image<br>';
}
//we deal with errors. If is an ajax request, just echo else set flashdata.
if ($this->input->is_ajax_request()) {
if ($error===false) {
echo 'Thank you for submiting your property with us!, Our team will contact you shortly';
} else {
echo 'Submission of property failed, Contact [email protected]';
echo '<br>Details:<br>'.$error;
}
} else {
if ($error===false) {
$this->session->set_flashdata('success', 'Thank you for submiting your property with us!, Our team will contact you shortly');
} else {
$this->session->set_flashdata('error', 'Submission of property failed, Contact [email protected]');
}
}
}
else
{
if ($this->input->is_ajax_request()) {
echo 'Submission of property failed, Contact [email protected]';
} else {
$this->session->set_flashdata('error', 'Submission of property failed, Contact [email protected]');
}
}
} else {
$this->listProperty();
}
}
}
the view
PHP Code: <div class="content-area-7 submit-property">
<div class="container">
<div class="row">
<div class="col-md-12" id="myMessage">
<!-- <div id="error_message" class="notification-box"></div> -->
<?php
$this->load->helper('form');
$error = $this->session->flashdata('error');
if($error)
{
echo '<div class="notification-box">'.$error.'</div>';
}
$success = $this->session->flashdata('success');
if($success)
{
echo '<div class="notification-box">'.$success.'</div>';
}
?>
</div>
<div id="error_msg" class="alert alert-danger wow fadeInRight delay-01s" role="alert" style="visibility: hidden;">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Oops!</strong>, Please fix the following errors and submit again
</div>
<?php echo $error; ?>
<div class="col-md-12">
<div class="submit-address">
<form name="property-form" action="<?php echo site_url() ?>index.php/home/addProperty" enctype="multipart/form-data" method="post" class="dropzone" id="property-form">
<div class="main-title-2">
<h1><span>Tell Me</span> Something About Your Property</h1>
</div>
<div class="search-contents-sidebar mb-30">
<div class="form-group">
<label>Property Title</label>
<input class="input-text" name="prop_title" id="prop_title" placeholder="Property Title">
<?php echo form_error('prop_title'); ?>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Status</label>
<select class="form-control required" id="prop_status" name="prop_status">
<option value="">Select</option>
<option value="Sale">For Sale</option>
<option value="Rent">For Rent</option>
</select>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Type</label>
<select class="form-control required" id="prop_type" name="prop_type">
<option value="">Select</option>
<option value="Modern">Modern</option>
<option value="Traditional">Traditional</option>
<option value="Arabic">Arabic</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="form-group">
<label>Price (Dirham)</label>
<input class="input-text" name="prop_price" id="prop_price" placeholder="AED">
<?php echo form_error('prop_price'); ?>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="form-group">
<label>Sqft</label>
<input class="input-text" name="prop_sqft" id="prop_sqft" placeholder="SqFt">
<?php echo form_error('prop_sqft'); ?>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="form-group">
<label>Bed Rooms</label>
<select class="form-control required" name="prop_rooms" id="prop_rooms">
<option value="">Select</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
<!-- <div class="col-md-3 col-sm-6">
<div class="form-group">
<label>Bathroom</label>
<select class="selectpicker search-fields" name="1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
</div> -->
</div>
</div>
<div class="main-title-2">
<h1><span>Location</span></h1>
</div>
<div class="row mb-30 ">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Address</label>
<input class="input-text" id="prop_address" name="prop_address" placeholder="Address">
</div>
<?php echo form_error('prop_address'); ?>
</div>
</div>
<div class="main-title-2">
<h1><span>Contact</span> Details</h1>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Name</label>
<input class="input-text" name="prop_owner_name" id="prop_owner_name" placeholder="Name">
<?php echo form_error('prop_owner_name'); ?>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Email</label>
<input class="input-text" name="prop_owner_email" id="prop_owner_email" placeholder="Email">
<?php echo form_error('prop_owner_email'); ?>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Contact No</label>
<input class="input-text" name="prop_owner_phone" id="prop_owner_phone" placeholder="Phone">
<?php echo form_error('prop_owner_phone'); ?>
</div>
</div>
</div>
<div class="main-title-2">
<h1><span>Upload</span> Photos Of Villa </h1>
</div>
<!-- IMPORTANT your div must have the class dropzone-previews to see the thumbails in this div and you add an options dropzonePreviews with this id to your javascript-->
<div id="myDropzone" class="dropzone-previews dropzone-design mb-10">
<div class="dz-default dz-message" data=""><span>Drop files here to upload</span></div>
</div>
<div class="main-title-2">
<h1><span>Detailed</span> Information</h1>
</div>
<div class="row mb-30">
<div class="col-md-12">
<div class="form-group">
<textarea class="input-text" id="prop_detailed_info" name="prop_detailed_info" placeholder="Detailed Information"></textarea>
</div>
<?php echo form_error('prop_detailed_info'); ?>
</div>
</div>
<div class="col-md-12">
<button type="submit" id="submit-all" class="btn button-sm button-theme">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="<?php echo base_url('assets/js/addProperty.js'); ?>"></script>
the addProperty.js
Code: /**
* File : addUser.js
*
* This file contain the validation of add user form
*
* Using validation plugin : jquery.validate.js
*
*
*/
$(document).ready(function(){
$('#error_msg').hide();
var addPropertyForm = $("#property-form");
var validator = addPropertyForm.validate({
rules:{
prop_title :{ required : true },
prop_status : { required : true, selected : true },
prop_type : {required : true, selected: true },
prop_rooms : {required : true, selected: true },
prop_address :{ required : true },
prop_owner_name :{ required : true },
prop_detailed_info :{ required : true },
prop_owner_email :{ required : true, email : true },
prop_owner_phone :{ required : true, digits : true },
prop_price : { required : true, digits : true },
prop_sqft : { required : true, digits : true }
},
messages:{
prop_title :{ required : "Please enter title of villa" },
prop_status : { required : "Please select status", selected : "Please select atlease one option" },
prop_type : { required : "Please select status", selected : "Please select atlease one option" },
prop_rooms : { required : "Please select status", selected : "Please select atlease one option" },
prop_address : { required : "Please enter address of villa"},
prop_owner_name : { required : "Please enter name of owner"},
prop_owner_email : { required : "Please enter email of owner", email : "Please enter valid email"},
prop_owner_phone : { required : "Please enter phone of owner", digits : "Please enter valid phone no"},
prop_price : { required : "Please enter price of villa", digits : "Please enter price in digits"},
prop_detailed_info : { required : "Please enter detailed information"},
prop_sqft : { required : "Please enter size of villa", digits : "Please enter size in Sqft"}
}
});
Dropzone.options.propertyForm = {
maxFiles:11,
autoProcessQueue: false,
uploadMultiple: true,
acceptedFiles: "image/*",
maxFilesize: 1,
parallelUploads: 100,
//event click is populate for this div (open the filles explorer)
clickable: "#myDropzone",
//The container for the preview. It must have the class dropzone-previews
previewsContainer: "#myDropzone",
//User can delete a file
addRemoveLinks: true,
init: function () {
var myDropzone = this;
this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
console.log('Click');
e.preventDefault();
e.stopPropagation();
$(window).scrollTop(0);
if ( $("#property-form").valid() ) {
//You call an ajax request to send your form to your controller
myDropzone.processQueue();
} else {
$('#error_msg').show();
}
});
// Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
// of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function() {
console.log('send event');
document.getElementById('myMessage').innerHTML = '';
$('#error_msg').hide();
});
//Your Ajax request is completed and success
this.on("successmultiple", function(files, response) {
//reset all inputs
document.getElementById('myMessage').innerHTML = '<div class="notification-box">'+response+'</div>';
document.getElementById('property-form').reset();
//Delete all files in the preview
myDropzone.removeAllFiles();
});
this.on("errormultiple", function(files, response) {
console.log('error');
});
}
};
});
|
