I'm using Blueimp File Upload, and I want to upload only a single file. When I click on choose file for the 2nd time after one file is uploaded, the 2nd file gets append below.And what I want is to replace the old file when the new file is selected for 2nd time. Code for this is as below:
Form
<form id="import_form">
<div class="row">
<div class="col-md-12">
<div class="row upload_text" id="category_import" style="background: #eee; padding: 10px 0;">
<div class="col-md-12">
<span style="color: #888;"><i class="fa fa-file"></i> Choose File</span>
<div class="btn-group pull-right">
<button type="button" class="btn btn-primary btn-sm" id="import_link">Import</button>
Download Demo File
</div>
<input type="file" name="files" id="add_upload_file" style="visibility: hidden; height:0; padding: 0;" />
</div>
<div class="clear"></div>
</div>
<div class="row loader" style="display: none;">
<div class="col-md-12">
<p><i class="hi hi-refresh text-info fa-spin"></i> Please wait while file is being uploaded.</p>
</div>
<div class="cleafix"></div>
</div>
</div>
</div>
Javascript for Blueimp
<script>
$(document).ready(function(){
$("#attach_file").click(function(e) {
e.preventDefault();
$("#add_upload_file").click();
});
var i = 0, a_ele;
$('#add_upload_file').fileupload({
url: '{{route("uploadCategory")}}',
autoUpload: true,
maxNumberOfFiles: 1,
limitConcurrentUploads: 1,
acceptFileTypes: /(\.|\/)(xlsx?|csv)$/i,
submit: function(e, data) {
if (!$(".attachment").is(":visible"))
$(".attachment").css({display: 'block'});
var html = "<div class='col-md-12 attachment_box_wrapper'>" +
"<div class='attachment_box' id='attachment_" + i + "'>" +
"<div class='file_name'>" +
data.files[0].name +
"</div>" +
"<div class='file_progress'>" +
'<div class="progress progress-striped active">' +
'<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">0%</div>' +
'</div>' +
'</div>' +
'<div class="cancel_upload" id="' + data.files[0].name + '"><i class="fa fa-times"></i></div>' +
"</div>" +
"</div>" +
"<div class='clearfix'></div>";
$(".upload_text").append(html);
data.context = $("#attachment_" + i);
i++;
$(".message_wrapper").css("height", "calc(100% - " + $(".upload_text").outerHeight() + "px)");
},
processfail: function(e, data) {
alert(data.files[data.index].name + "\n" + data.files[data.index].error);
},
progress: function(e, data) {
var percent = parseInt(data.loaded / data.total * 100, 10);
$(data.context).find(".progress .progress-bar").attr("aria-valuenow", percent).css("width", percent + "%").html(percent + "%");
},
done: function(e, data) {
$(data.context).find(".progress").remove();
},
fail: function(e, data) {
console.log(data);
}
});
});
</script>
I had the same problem. I fixed it without using options.
$('#add_upload_file').fileupload({
url: "",
add: function (e, data) {
if($(".attachment_box").length > 0) { //Just count file listing div
alert("Only single file can be uploaded")
return;
}
},
formData: {
},
progress: function (e, data) {
},
done: function (e, responseJSON) {
}
});
Related
I'm trying to fade out and fade in a card element. My html looks like this:
<form class=" mt-4 mw-800 center-block animated fadeInUp">
<div class="row">
<div class="col-lg-12 content">
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">{{ $random_idea->title }}</h3>
</div>
<div class="card-body">
{{ $random_idea->description }}
</div>
</div>
</div>
</div>
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<button id="idea" type="button" class="btn btn-raised btn-primary btn-block">
Geef mij een ander idee</button>
</form>
My jQuery code looks like this:
$( "#idea" ).click(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('input[name="_token"]').val()
}
});
$.ajax({
type: "POST",
url: "/idea",
success: function(response) {
$(".card").fadeOut();
$('<div class="card card-primary">' +
'<div class="card-header">' +
'<h3 class="card-title">' + response.title + '</h3>' +
'</div>' +
'<div class="card-body">' + response.description +
'</div>' +
'</div>').appendTo('.content').fadeIn();
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(errorThrown);
}
});
});
The card div is fading out and fading in. But there is a delay, it's not shown good.
My lay-out looks like this:
When you click on the button the card fades out and another card fades in. But it's not smooth. Do you have any ideas to help me?
jQuery fadeIn() and fadeOut() are asynchronous. So, the new and old elements are fading in/out together. But, those methods gets a callback will call after the animation. So, you can rewrite your success function as follows:
$(".card").fadeOut(function() {
$(this).remove();
$('<div class="card card-primary">' +
'<div class="card-header">' +
'<h3 class="card-title">' + response.title + '</h3>' +
'</div>' +
'<div class="card-body">' + response.description + '</div>' +
'</div>').appendTo('.content').fadeIn();
});
Try using this
var html = '<div class="card card-primary">' +
'<div class="card-header">' +
'<h3 class="card-title">' + response.title + '</h3>' +
'</div>' +
'<div class="card-body">' + response.description +
'</div>' +
'</div>';
$(html).hide().appendTo(".content").fadeIn(300);
The reason its not going smooth is because you didnt give a speed within your fadeout/fadein function.
If you read the docs on https://www.w3schools.com/jquery/eff_fadeout.asp you notice the syntax accepts a speed $(selector).fadeOut(speed,easing,callback)
Wenn you fill in the speed of your fadein() and your fadeout() it should go smooth.
I'm trying to display the data from json in my HTML. It doesn't seem to get the data properly.
I'm running it on my localhost so I can see the json properly. here on my demo, the json is hosted on my personal FTP.
How can I display the data in my HTML?
$(function() {
ajaxJS();
function ajaxJS(e) {
if (e) {
e.preventDefault();
}
$.ajax({
url: "http://www.domenghini.com/sample-data.json",
method: "GET",
success: function(data) {
console.log(data);
var html_to_append = '';
$.each(data.items, function(i, items) {
html_to_append +=
'<div class="col-3 mb-3"><div class="name text-left pb-1 text-uppercase"><p>' +
name.first +
'<div class="col-3 mb-3"><div class="last text-right pb-1 text-uppercase"><p>' +
name.last +
'</p></div><img class="image img-fluid" src="' +
picture +
'" /><p class="company">' +
company +
'</p></div>';
});
$("#items-container").html(html_to_append);
},
error: function() {
console.log(data);
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div id="items-container" class="row"></div>
</div>
I think the issue is you are trying to access name.first name.last in $.each without specifying items.name.first
$(function() {
ajaxJS();
function ajaxJS(e) {
if (e) {
e.preventDefault();
}
$.ajax({
url: "http://www.domenghini.com/sample-data.json",
method: "GET",
success: function(data) {
console.log(data);
var html_to_append = '';
$.each(data, function(i, item) {
html_to_append +=
'<div class="col-3 mb-3"><div class="name text-left pb-1 text-uppercase"><p>' +
item.name.first +
'<div class="col-3 mb-3"><div class="last text-right pb-1 text-uppercase"><p>' +
item.name.last +
'</p></div><img class="image img-fluid" src="' +
item.picture +
'" /><p class="company">' +
item.company +
'</p></div>';
});
$("#items-container").html(html_to_append);
},
error: function() {
console.log(data);
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div id="items-container" class="row"></div>
</div>
I make a simple form for uploading files. With form I can add multiple files to a queue. With special button I can remove file from a queue. But for some reason it doesn't work in a way I want. By clicking "Unload files" just 2 files are uploading to server. If I click second time than second 2 files are uploading. All code are below. How to upload ALL files by click a button just ones? Thanks in advance.
HTML:
<div class="panel panel-default">
<div class="panel-heading">
<strong>Прикрепить файлы</strong>
</div>
<div class="panel-body">
<button type="button" class="btn btn-primary" id="add-file">
<span class="glyphicon glyphicon-folder-close" aria-hidden="true"></span> Обзор...
</button>
<button type="button" class="btn btn-primary" id="upload-file">
<span class="glyphicon glyphicon-folder-close" aria-hidden="true"></span> Загрузить
</button>
<ul class="list-group dropzone-previews" style="margin-top: 10px; margin-bottom: 0;"></ul>
</div>
</div>
JS:
$(".panel").dropzone({
url: "upload.php",
autoProcessQueue: false,
init: function() {
var myDropzone = this;
$('#upload-file').click(function() {
myDropzone.processQueue();
});
},
clickable: '#add-file',
acceptedFiles: 'image/*,application/pdf,application/msword',
previewsContainer: '.dropzone-previews',
previewTemplate: '<li class="working list-group-item">' +
'<span data-dz-name></span> <span data-dz-size></span> (<u data-dz-remove>Удалить</u>)' +
'<div class="progress" style="margin-top: 10px; margin-bottom: 0;">' +
'<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-dz-uploadprogress></div>' +
'</div></li>'
});
And my server script on PHP:
<?php
$ds = DIRECTORY_SEPARATOR;
$storeFolder = 'uploads';
if (!empty($_FILES)) {
$tempFile = $_FILES['file']['tmp_name'];
$targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;
$targetFile = $targetPath. $_FILES['file']['name'];
move_uploaded_file($tempFile,$targetFile);
}
?>
Just increase the value of parallelUploads to 10 or 20. By default it will send two file at a time to server, So you need to increase the value of parallelUploads and it will work.
$(".panel").dropzone({
url: "upload.php",
autoProcessQueue: false,
init: function () {
var myDropzone = this;
},
parallelUploads: 20,
clickable: '#add-file',
acceptedFiles: 'image/*,application/pdf,application/msword',
previewsContainer: '.dropzone-previews',
previewTemplate: '<li class="working list-group-item">' +
'<span data-dz-name></span> <span data-dz-size></span> (<u data-dz-remove>Удалить</u>)' +
'<div class="progress" style="margin-top: 10px; margin-bottom: 0;">' +
'<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-dz-uploadprogress></div>' +
'</div></li>'
});
$('#upload-file').click(function () {
myDropzone.processQueue();
});
here is my codepen link
my html code
<div id="main">
<h1>Wikipedia Viewer</h1>
<form class="form-inline">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-4 col-lg-7 col-lg-offset-4">
<div class="form-group">
<label class="sr-only" for="search">search</label>
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="button" class="btn btn-primary"><i class="fa fa-search"></i></button></form>
</div>
</div>
</div>
Surprise me!
</div>
<div id="search">
</search>
jquery code for making wikipedia api search call and then displaying title and overview.i want to associate links to respective article on dynamically created p element
$(document).ready(function() {
$("button").click(function() {
var article = $("input").val();
$.ajax({ //wikipedia api call
url: "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + article + "&format=json",
dataType: "jsonp",
success: function(data) {
for (var i = 0; i < data.query.search.length; i++) { //displaying titles and snippets accroding to search query. i want to associate link to each dynamically created p element.
var title = data.query.search[i].title;
var snippet = data.query.search[i].snippet;
$("#search").append("<p>" + title + "<br>" + snippet + "</p>");
}
$("#main").attr({
'style': 'display: none'
});
},
error: function() {
$("h1").html("oops");
}
});
});
});
Change your $("#search").append() as follows:
$("#search")
.append("<p><a href='https://en.wikipedia.org/wiki/" + title + "'>" + title + "</a>" +
"<br>" + snippet + "</p>"
);
Codepen
I have a html code which displays ads ,but the ads are display like a coloumn vise, but I want them to display in a horizontal row .How can we display the horizontal rows.And ads are which are coming dynamically based on the user selection.How can we display these ads in a row wise fashion .
Html code is :
<div class="row">
<div class="col-md-3" id="adsid"></div>
</div>
Code snippet from JS:
<input type="checkbox" id=' + s[i]['id']['0'] + ' />
<a href="#" class="list-group-item ">
<input type="hidden" id="adsid" name="adsrunning" value=' + s[i]['id']["0"] + '/>
<h4 class="list-group-item-heading">
<font color="blue">' + s[i]['hea']["0"] + '</font>
</h4>
<p class="list-group-item-text">' + s[i]['desc']["0"] + '</p>
<p class="list-group-item-text">' + s[i]['desc2']["0"] + '</p>
<p class="list-group-item-text">
<font color="green">' + s[i]['url']["0"] + '</font>
</p>
</a><br/>
And JS is :
$("#groupid").change(function () {
$("#adsid").html("");
var grpvalue = $("#groupid").val();
var accid = $('#accountid').val();
var adsarray = [];
$.ajax({
type: "post",
dataType: 'json',
url: "pages/ads.php",
data: "adgroup=" + grpvalue + "&accid=" + accid,
success: function (s) {
for (var i = 0; i < s.length; i++) {
var head = s[i]['hea']["0"];
//alert(head);
var adid = s[i]['id']["0"];
var desc1 = s[i]['desc']["0"];
var desc2 = s[i]['desc2']["0"];
var url = s[i]['url']["0"];
var p = document.createElement('p');
var txt = document.createTextNode(head);
p.appendChild(txt);
//$('adsid').append(p);
adsarray.push(head, adid, desc1, desc2, url);
$("#adsid").append("");
$("#adsid").append('<input type="checkbox" id=' + s[i]['id']['0'] + ' /><input type="hidden" id="adsid" name="adsrunning" value=' + s[i]['id']["0"] + '/><h4 class="list-group-item-heading"><font color="blue">' + s[i]['hea']["0"] + '</font></h4><p class="list-group-item-text">' + s[i]['desc']["0"] + '</p><p class="list-group-item-text">' + s[i]['desc2']["0"] + '</p><p class="list-group-item-text"><font color="green">' + s[i]['url']["0"] + '</font></p><br/>');
}
}
});
});
And Json Data is:
[{
"hea": {
"0": "Kidney Stone Removal"
},
"id": {
"0": "40602813172"
},
"desc": {
"0": "Get treated at top kidney center"
},
"desc2": {
"0": "Take a free advice from our experts"
},
"url": {
"0": "www.ainuindia.com"
}
}]
I think your questions i answered here:
http://www.w3schools.com/css/css_float.asp
Use float to place the "rows" next to each other.
Though i would recommend you to change your "row" class to something more appropriate if possible. Since row are explicitly saying that it's a row, in other words a vertical alignment.
You can use ul li tag as bellow give style to li as list-style:none
<div class="row">
<ul >
<li class="col-md-3 col-sm-3 col-xs-6"><img src="" /><span class="badge">Lorem ipsum</span></li>
<li class="col-md-3 col-sm-3 col-xs-6"><img src="" /><span class="badge">Lorem ipsum</span></li>
<li class="col-md-3 col-sm-3 col-xs-6"><img src="" /><span class="badge">Lorem ipsum</span></li>
<li class="col-md-3 col-sm-3 col-xs-6"><img src="" /><span class="badge">Lorem ipsum</span></li>
</ul>
</div>
If you can modify the html of ad, try replacing col-md-3 by col-sm12 so the whole thing would read:
<div class="row">
<div class="col-sm-12" id="adsid">
</div>
</div>
I'm assuming you're using bootstrap, so having col-md-3 makes it float left with width 33%. On medium screen.