On my image below as you can see I would like to be able change the position of the remove file link to out side of the content div area.
I have tried with custom template bit no luck.
Question How can I have a remove file button out side of my
content div area? Instead of below image.
I only want to be able to have the remove image link in different area
<div id="content">
<div id="my-dropzone" class="dropzone">
<span class="">Content Div Area</span>
<div class="dz-message">
<h3>Drop files here</h3> or <strong>click</strong> to upload
</div>
</div>
<div class="dropzone_preview" id="dz-preview">
<div class="dropzone_details">
<img data-dz-thumbnail />
</div>
<a id="dz-remove" href="javascript:undefined;" data-dz-remove>Remove <-- here</a>
</div>
</div>
<script src="<?php echo base_url(); ?>vendor/jquery/jquery.min.js"></script>
<script src="<?php echo base_url(); ?>vendor/dropzone/dropzone.min.js"></script>
<script>
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#my-dropzone", {
url: "<?php echo site_url("images/upload") ?>",
acceptedFiles: "image/*",
addRemoveLinks: true,
thumbnailWidth: null,
thumbnailHeight: null,
addRemoveLinks: true,
previewTemplate: document.getElementById('dz-preview').innerHTML,
removedfile: function(file) {
var name = file.name;
$.ajax({
type: "post",
url: "<?php echo site_url("images/remove") ?>",
data: { file: name },
dataType: 'html'
});
var previewElement;
return (previewElement = file.previewElement) != null ? (previewElement.parentNode.removeChild(file.previewElement)) : (void 0);
},
init: function() {
this.on("thumbnail", function(file, dataUrl) {
$('.dz-image').last().find('img').attr({width: '100%', height: '100%'});
}),
this.on("success", function(file) {
$('.dz-image').css({"width":"100%", "height":"auto"});
});
var me = this;
$.get("<?php echo site_url("images/list_files") ?>", function(data) {
// if any files already in server show all here
if (data.length > 0) {
$.each(data, function(key, value) {
var mockFile = value;
me.emit("addedfile", mockFile);
me.emit("thumbnail", mockFile, "<?php echo base_url(); ?>uploads/" + value.name);
me.emit("complete", mockFile);
});
}
});
}
});
</script>
I'm not 100% sure, if I understand you correctly, but does not previewTemplate solve your problem?
See http://www.dropzonejs.com/#config-previewTemplate
You do something like this:
HTML:
<div id="preview-template" class="dz-preview dz-file-preview">
<div class="dz-details">
<div class="dz-filename"><span data-dz-name></span></div>
<div class="dz-size" data-dz-size></div>
<img data-dz-thumbnail />
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-success-mark"><span>✔</span></div>
<div class="dz-error-mark"><span>✘</span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<div><img src="removebutton.png" alt="Click me to remove the file." data-dz-remove /></div>
</div>
<div id="content">
<div id="my-dropzone" class="dropzone">
<div class="dz-message">
<h3>Drop files here</h3> or <strong>click</strong> to upload
</div>
</div>
</div>
JS:
<script>
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#my-dropzone", {
...,
previewTemplate: document.getElementById('preview-template').innerHTML
});
</script>
Then you can modify with CSS where to display the removal button.
Just remove option parameter addRemoveLinks: true,... twice :-)
If you want some specific link to remove a file (instead of the built in addRemoveLinks config), you can simply insert elements in the template with the data-dz-remove attribute. Example:
<img src="removebutton.png" alt="Click me to remove the file." data-dz-remove />
You can find out more on https://docs.dropzone.dev/configuration/basics/layout
Related
This is my html page:
<html>
<div class="panel-body text-center">
<div class="ttl-info">
STOK TM
</div>
<h4 class="show-value">
<span id="stktimur">0</span>
<h4>
</div>
$(document).ready(function(){
$('#stktimur').ambilData({
url : '<?php echo site_url('data/datastk') ?>',
reload: 65,
success: function(dt, th){
$('#stktimur').data('list', dt.data);
if( parseInt($('#stktimur').text()) != parseInt(dt.total) ){
$('#stktimur').text(parseInt(dt.total) )
.textEffect({effect: 'jumble',jumbleColor :'#FFF', letterJumble: txt});
}
}
})
}
</html>
You are missing the <script> tag. Also some formatting issues.
Try it like this:
<div class="panel-body text-center">
<div class="ttl-info">
STOK TM
</div>
<h4 class="show-value">
<span id="stktimur">0</span>
<h4>
</div>
<script>
$(document).ready(function(){
$('#stktimur').ambilData({
url : '<?php echo site_url("data/datastk") ?>',
reload: 65,
success: function(dt, th){
$('#stktimur').data('list', dt.data);
if( parseInt($('#stktimur').text()) != parseInt(dt.total) ){
$('#stktimur').text( parseInt(dt.total) ).textEffect({effect: 'jumble',jumbleColor :'#FFF', letterJumble: txt});
}
}
})
});
</script>
I assume you want to do ajax request while the stktimur is click. The correct code should be like this.
jQuery Ajax
jQuery Click Event Listener
<div class="panel-body text-center">
<div class="ttl-info">
STOK TM
</div>
<h4 class="show-value">
<span id="stktimur">0</span>
</h4>
</div>
<script>
$(document).ready(function () {
$('#stktimur').click(function () {
$.ajax({
url: "<?php echo site_url('data/datastk') ?>",
success: function (dt, th) {
$('#stktimur').data('list', dt.data);
if (parseInt($('#stktimur').text()) != parseInt(dt.total)) {
$('#stktimur').text(parseInt(dt.total)).textEffect({
effect: 'jumble',
jumbleColor: '#FFF',
letterJumble: txt
});
}
}
})
})
});
</script>
My code works fine, it displays more users when the load more button is clicked.
my constraint right now is how to remove the Load more button if there is no more value on the response.
This is how my model looks like
public function getFreeAds($page){
$offset = 10*$page;
$limit = 10;
$this->db->select('*');
$this->db->from('escort');
$this->db->where('status', 'Approved');
$this->db->limit($offset ,$limit);
$this->db->order_by("time_stamp, UPPER(time_stamp)", "DESC");
$query = $this->db->get();
return $query->result();
}
My Controller looks like this
public function getCountry(){
$page = $_GET['page'];
$countries = $this->Home_model->getCountry($page);
foreach($countries as $country){
echo
'<div class="col-md-4 col-sm-6">
<div class="portfolio-item">
<div class="thumb">
<a ><div class="hover-effect" data-e_id="'.$country->e_id.'" id="profile2">
<div class="hover-content">
<h1> '.$country->ProfileName.'</em></h1>
<p> '.$country->Height.' CM tall '.$country->BreastCup.' Breast Size <b>Nationality: '.$country->Nationality.' </b></p>
<button type="button" class="btn-info">View More</button>
<button type="button" class="'.$country->confirmstatus.'">'.$country->confirmstatus.'</button>
<div class="top">
</div>
</div>
</div></a>
<div class="image" width="70%" height="1000px">
<img src="uploads/'.$country->ProfilePicture.'">
</div>
</div>
</div>
</div>';
}
exit;
}
Here is my query code that displays the response.
$(document).ready(function(){
getcountry(0);
$("#load_more").click(function(e){
e.preventDefault();
var page = $(this).data('val');
getcountry(page);
});
});
var getcountry = function(page){
$("#loader").show();
$.ajax({
url:"<?php echo base_url() ?>Home/getCountry",
type:'GET',
data: {page:page}
}).done(function(response){
$("#show_data").append(response);
$("#loader").hide();
$('#load_more').data('val', ($('#load_more').data('val')+1));
scroll();
});
};
var scroll = function(){
$('html, body').animate({
scrollTop: $('#load_more').offset().top
}, 1000);
};
What you can do is get the next values in the same function and if there are values available you can make an input field(hidden) and then show or hide the button according to its value.
I'm writing a possible solution for your case, comments are mentioned wherever necessary. Remember there are better ways of doing this like using count but this is according to your code. See if it helps you.
Controller
public function getCountry(){
$page = $_GET['page'];
$countries = $this->Home_model->getCountry($page);
$nextValue = $this->Home_model->getCountry($page+1); // get the values for the next page
$showButton = !empty($nextValue) ? 'yes' : 'no'; // show the button if next value exists
foreach($countries as $country){
echo
'<div class="col-md-4 col-sm-6">
<div class="portfolio-item">
<div class="thumb">
<a ><div class="hover-effect" data-e_id="'.$country->e_id.'" id="profile2">
<div class="hover-content">
<h1> '.$country->ProfileName.'</em></h1>
<p> '.$country->Height.' CM tall '.$country->BreastCup.' Breast Size <b>Nationality: '.$country->Nationality.' </b></p>
<input type="hidden" class="showButton" value="'.$showButton.'" />
<!-- make a hidden input field and assign a value (yes/no) -->
<button type="button" class="btn-info">View More</button>
<button type="button" class="'.$country->confirmstatus.'">'.$country->confirmstatus.'</button>
<div class="top">
</div>
</div>
</div></a>
<div class="image" width="70%" height="1000px">
<img src="uploads/'.$country->ProfilePicture.'">
</div>
</div>
</div>
</div>';
}
exit;
}
View
var getcountry = function(page){
$("#loader").show();
$.ajax({
url:"<?php echo base_url() ?>Home/getCountry",
type:'GET',
data: {page:page}
}).done(function(response){
$("#show_data").append(response);
$("#loader").hide();
$('#load_more').data('val', ($('#load_more').data('val')+1));
// check the value of input field
if($('.showButton:last').val() == "no"){
$('#load_more').hide(); // hide the button
}
scroll();
});
};
Add to your response metadata with total pages count. During every request make count query to your DB with same clauses. In your JS code after every request compare current page with total pages from response and hide button if last page reached.
I'm developing CMS. Issue is that jquery on click no working on EDIT Button. Code seems fine to me but I did not understand why it is not working. It is working on Add Button.
JS
<script>
var loading_message = "<div class='row'><div class='col-md-4 col-md-offset-4'><img src='<?=site_url()?>assets/_admin/images/loading.gif'/></div></div>";
function list()
{
$('#main_contents').html(loading_message);
var form_data = {
ajax : '1',
actioncall : 'show_all',
};
$.ajax({
url : "<?=site_url()?>itadmin/ajaxBanners",
type : 'POST',
data : form_data,
success : function(data){
$('#main_contents').html(data);
}
});
}
function add()
{
$('#right_block').html(loading_message);
var form_data = {
ajax : '1',
actioncall : 'add_form',
};
$.ajax({
url : "<?=site_url()?>itadmin/ajaxBanners",
type : 'POST',
data : form_data,
success : function(data){
$('#right_block').html(data);
}
});
}
$(document).ready(function()
{
list();
add();
$('#addbanner').on('click',function()
{
add();
});
$('.edit').on('click',function()
{
$('#right_block').html(loading_message);
var id = this.id;
alert(id);
var form_data = {
ajax : '1',
actioncall : 'edit',
id : id,
};
$.ajax({
url : "<?=site_url()?>itadmin/ajaxBanners",
type : 'POST',
data : form_data,
success : function(data){
$('#right_block').html(data);
}
});
});
$('.delete').on('click',function(){
var id = this.id;
alert(id);
});
$(document).on('submit','form#process-data',function(e) {
e.preventDefault();
var form_data = {
ajax : '1',
link_togo : $('#link_togo').val(),
title : $('#title').val(),
description : $('#description').val(),
keyword : $('#keyword').val(),
placement : $('#placement').val(),
location : $('#location').val(),
status : $('#switch-size').val(),//#default
actioncall : 'add'
};
//alert(JSON.stringify(form_data));
$.ajax({
url : "<?=site_url()?>itadmin/ajaxBanners",
type : 'POST',
data : form_data,
success : function(data)
{
/*setTimeout(function ()
{
$('.img_pre').attr('src',data);
$('.delete_btn').show();
}, 1000);*/
$("#right_block").html(data);
list();
}
});
});
});
</script>
HTML
<div class="banner-row1">
<div class="banner-row-pic">
<img src="http://localhost/cms-basic/assets/_admin/images/pic.png" alt="pic1" />
</div>
<div class="banner-row-text">
<h2>Latest News</h2>
<p>Every news is important</p>
<p class="text-muted">
<small>
Keyword: news<br />
Placement: others<br />
Location: Homepage<br />
Link: http://pakhotline.com
</small>
</p>
</div>
<div class="banner-row-edit">
<a class="edit" id="2" href="javascript:void(0);">
<img src="http://localhost/cms-basic/assets/_admin/images/edit.png" />
</a>
<a class="delete" id="2" href="javascript:void(0);">
<img src="http://localhost/cms-basic/assets/_admin/images/delet.png" />
</a>
</div>
<div class="clr"></div>
</div>
<div class="banner-row1">
<div class="banner-row-pic">
<img src="http://localhost/cms-basic/assets/_admin/images/pic.png" alt="pic1" />
</div>
<div class="banner-row-text">
<h2>title</h2>
<p>description</p>
<p class="text-muted">
<small>
Keyword: keyword<br />
Placement: Bottom<br />
Location: static_page<br />
Link: link
</small>
</p>
</div>
<div class="banner-row-edit">
<a class="edit" id="1" href="javascript:void(0);">
<img src="http://localhost/cms-basic/assets/_admin/images/edit.png" />
</a>
<a class="delete" id="1" href="javascript:void(0);">
<img src="http://localhost/cms-basic/assets/_admin/images/delet.png" />
</a>
</div>
<div class="clr"></div>
</div>
Note: - I'm using jQuery 1.11.3
You can only use an ID once, since it has to be unique.
The issue is happening because of same ids.
Replace
$('.edit').on('click',function()
with
$(document).on('click', '.edit', function()
I am using dropzone to upload files to my server without any issues, i would like to add extra parameters such a meta data.
Any ideas on how to do this?
Code Below and just using controller in normal fashion
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Select</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
</a>
</div>
</div>
<div class="ibox-content">
<form id="my-awesome-dropzone" class="dropzone" action="#Url.Action(" FileUploadHandler ", "Controller ")" method="post" enctype="multipart/form-data">
<div class="dropzone-previews"></div>
<button type="submit" class="btn btn-primary pull-right">Submit your application</button>
</form>
<div>
<div class="m text-right">test</div>
</div>
</div>
</div>
</div>
</div>
`
< script type = "text/javascript" >
$(document).ready(function() {
Dropzone.options.myAwesomeDropzone = {
autoProcessQueue: false,
parallelUploads: 1,
maxFiles: 1,
maxFilesize: 2000,
paramName: "test,123",
acceptedFiles: ".zip",
// Dropzone settings
init: function() {
var myDropzone = this;
this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
//Get All information to submit to server
var appName = "";
var typeOfApp = 1;
var commandLine = "";
var osType = 1;
});
this.on("sending", function(file, xhr, data) {
data.append("filetype", "avataruploadtype");
});
}
}
});
`
The way you have it set up, you're just submitting the form, so one easy approach is to just add inputs (or hidden fields) to the form and handle the multipart form data on the server.
See here for detail:
https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone
I'm trying to load the content from an external php file into a div but it is loading all the DOM instead. In other words it is creating a clone or a replica of the active page inside the div I'm trying to load the file.
I've tried to have all the html tags from the external file be echoed but is the same result.
I have this:
[index.php]
<div class="grid-body no-border"> <br />
<div class="row-fluid model_box" >
<div class="span2">
</div>
<div class="span2 model_item">
<img class="btn_image" src="<?php echo BASE_URL; ?>images/grid1.jpg" model="1"/>
</div>
<div class="span2 model_item">
<img class="btn_image" src="<?php echo BASE_URL; ?>images/grid2.jpg" model="2"/>
</div>
<div class="span2 model_item">
<img class="btn_image" src="<?php echo BASE_URL; ?>images/grid3.jpg" model="3"/>
</div>
<div class="span2 model_item">
<img class="btn_image" src="<?php echo BASE_URL; ?>images/grid4.jpg" model="4"/>
</div>
<div class="span2 model_item">
<img class="btn_image" src="<?php echo BASE_URL; ?>images/grid5.jpg" model="5"/>
</div>
</div>
</div>
<div id="active_model"></div>
[script.js]
$('.btn_image').click(function(){
console.log($(this).attr('model'));
model = $(this).attr('model');
save_data_parent.model = model;
$.ajax({
url: 'models/model_'+model+'.php',
type: 'post',
dataType: "html",
data: {},
success: function (data, status) {
//console.log("Success!!");
console.log(data);
//console.log(status);
$('#active_model').html(data).fadeIn(500);
}
});
});
[models/model_1.php]
<div>
<?php echo 'This is a test'; ?>
</div>
you can use echo to return a string of your html tags like...
echo "Your tags ";
try it hope useful...
Thank you #Pinoniq, the path in the ajax request was missing the entire url for it to work.
$('.btn_image').click(function(){
console.log($(this).attr('model'));
model = $(this).attr('model');
save_data_parent.model = model;
BASE_URL = 'http://localhost:8888/site/'; // <------------------
$.ajax({
url: BASE_URL+'models/model_'+model+'.php', // <------------------
type: 'post',
dataType: "html",
data: {},
success: function (data, status) {
//console.log("Success!!");
console.log(data);
//console.log(status);
$('#active_model').html(data).fadeIn(500);
}
});
});