1 Replies - 373 Views - Last Post: 25 February 2018 - 10:34 AM

#1 chris98   User is offline

  • D.I.C Lover

Reputation: 41
  • View blog
  • Posts: 1,112
  • Joined: 06-July 13

jQuery File Upload - issue with dynamically loaded content

Posted 24 February 2018 - 10:56 AM

I'm creating a file upload system in jQuery and I'm very nearly there. Very frustratingly, however, at the final hurdle I appear to have come to a problem I can't get around. I'm using the Blue Imp jQuery plugin, and what I'm doing is uploading files, setting them in a table below as having an 'uploading' status, then once the upload has completed, I set the status to a 'complete' kind of status.

I already know what the problem is, which makes is so much more frustrating. Because of the fact I'm loading the table rows via AJAX (I do this because I'm rendering them as a Twig template) and THEN go on to upload the files, once the AJAX request is finished and I'm trying to set the properties I can't do it. I'm aware of the $(document).on("click" which fixes this for dynamically loaded content on a CLICK, but what I'm after here is for this to be done automatically, because it's the response from the query coming back which needs to set the status of that file upload to complete/failed or whatever.

My code is below, I'd be grateful for some advice on where to go on this because I genuinely feel like I've hit a dead end right now. The lines which are used for this are after done: function (e, data)


$(document).ready(function()
{
	function add_uploads(images)
	{
		var csrf_token = $("#csrf_token").val();
		$.post("index.php?act=ajax&do=load_upload_table",
		{
			images: images,
			csrf_token: csrf_token,
		},
		function(response, status)
		{
			try
			{
				data = JSON.parse(response);
			}
			catch (e)
			{
				$('#error-message').text(response);
				$('#ajax-error').slideDown();
				return false;
			}

			$('#upload-table').show();
			$('#upload-table > tbody:last-child').append(data['images']);
		});

		return true;
	}

	$('#fileupload').fileupload(
	{
		acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
		autoUpload: false,
		singleFileUploads: false,
		url: 'index.php?act=ajax&do=upload',
		dataType: 'json',
		add: function (e, data)
		{
			$('.selected-files').show();
			for (i = 0; i < data.files.length; i++)
				$('#files-list').append($('<li>').text(data.files[i].name));

			$(document).on("click", "#upload_images", function()
			{
				var images = [];
				for (i = 0; i < data.files.length; i++)
				{
					images[i] = data.files[i].name;
					++i;
				}

				if (add_uploads(images))
					data.submit();
			});
		},
		fail: function (e, data)
		{
			alert(data.errorThrown);
			alert(data.textStatus);
			alert(data.jqXHR);
		},
		done: function (e, data)
		{ 
			for (i = 0; i < data.result.length; i++)
			{
				$('#uploading-'+data.result[i]['name']).hide();
				if (data.result[i]['status'])
				{
					$('#success-'+data.result[i]['name']).slideDown();
					$('#href-'+data.result[i]['name']).attr('href', cdn_url + data.result[i]['name']);
					$('#image-'+data.result[i]['name']).attr('src', cdn_url + data.result[i]['name']);
				}
				else
				{
					$('#error-'+data.result[i]['name']).slideDown();
					$('#error-message-'+data.result[i]['name']).text(data.result[i]['errors'][0]);
				}
			}
		}
	}).on('fileuploadsubmit', function (e, data)
	{
		var csrf_token = $("#csrf_token").val();
		data.formData = {
			csrf_token: csrf_token
		};
	});
});


Is This A Good Question/Topic? 0
  • +

Replies To: jQuery File Upload - issue with dynamically loaded content

#2 chris98   User is offline

  • D.I.C Lover

Reputation: 41
  • View blog
  • Posts: 1,112
  • Joined: 06-July 13

Re: jQuery File Upload - issue with dynamically loaded content

Posted 25 February 2018 - 10:34 AM

Managed to fix this by creating & firing a custom event handler.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1