jQuery getting text content of a span

Question

I am trying to write a delete function in Dropzone.js. In order to do that I need the id of the file the way it was uploaded.

I tried to get a property of an object with no success. Now I am trying to use jQuery to get the value or text content of the span that has it.

this is the screenshot of the structure. The jQuery code I am trying is:

var loooot = $(".dz-filename").parents('span').text();

To be more specific I am trying to get the number 1_1477778745352 (which is a time stamp).

The Dropzone code is as follows:

<script>

var listing_id = "1"; 

// these are the setting for the image upload
Dropzone.options.pud = {
acceptedFiles: ".jpeg,.jpg,.png,.gif",
uploadMultiple: false,
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 1, // MB
addRemoveLinks: true,
maxFiles: 10,
renameFilename: function (filename) {return listing_id + '_' + new Date().getTime();},
init: function() 
{
this.on("removedfile", function(file) 
  { 
  var loooot = $("span", ".dz-filename").html();
  alert(loooot);
  });
}
};
</script>

Answer 1

Use:

var loooot = $("span", ".dz-filename").html();

Working Demo.

var loooot = $("span", ".dz-filename").html();
alert(loooot);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="dz-filename">
  <span>Test</span>
</div>

EDIT

Since you are setting the text dynamically it may happens that jquery read the HTML before that you set it, to prevent this you have to call this function after the timestamp as a callback (i can't help you without seeing how you set the span text). So do something like:

function setSpan(callback) {
    // Set your stuffs

    // Call the callback
    callback();
}

function getText() {
    // I'm the callback witch get the html
}

//Onload
setSpan(getText());

EDIT

For dropzone you can use queuecomplete that start a function after the queue, i'm not an dropzone expert but i suppose:

init: function () {
    this.on("queuecomplete", function (file) {
        //Get span html
        alert("All files have uploaded ");
    });
  }

Answer 2

It becomes undefined because dropzone works dynamicly, use this:

$('body').find(".dz-filename").find('span').text();

Best way to do this is to declare dropzone:

//first declare somewhere variable
var my_drop;

// then on creating dropzone:
my_drop = new Dropzone('.dropzone', { 
/* your setup of dropzone */ 
});

Then you can retreive information about files with this:

my_drop.files[0].name

The [0] represent's first file, you can loop through them if there's more then one.

Answer 3

Try this use JQuery's .text(); to get inner text Update: use this with DOM .ready() like that.

Deep selector

$(document).ready(function(){
  var fname = $("#pud .dz-filename span [data-dz-name]").text();
});

OR (if your form is dynamic)

function get_fname(){
return $("#pud .dz-filename span [data-dz-name]").text();
}

Then use get_fname();

Answer 4

The working solution I found is this:

init: function() 
  {
  this.on("removedfile", function(file) 
    { 
    var loooot = $(file.previewElement).find('[data-dz-name]').text();
    alert(loooot);
    });
  }