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>

`file.name` should keep name of file in callback of `removedfile` — Ultrazz008, Oct 29 '16 at 23:03
That was actually the first thing I tried, but it returns the name of the uploaded file BEFORE it is renamed. After renaming I can see the ney name when I hover over the image thumbnail, but I cannot get then new renamed name. — , Oct 29 '16 at 23:05

Mamdouh Saeed · Answer 1 · 2016-10-29T23:05:47.507

1

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();

edited Oct 29 '16 at 23:05

answered Oct 29 '16 at 22:44

Mamdouh Saeed

2,302
1
9
11

Is your form dynamic? – Mamdouh Saeed Oct 29 '16 at 22:57
This part is dynamic. – Oct 29 '16 at 22:59
How is that dynamic? created from ajax or on click or..? – Mamdouh Saeed Oct 29 '16 at 23:00
When I upload 10 images, every one of them gets the structure you see in the screen shot. They do not exist until images are not uploaded. – Oct 29 '16 at 23:01
So you must wait for images loading then use `var f = get_fname();` as updated above – Mamdouh Saeed Oct 29 '16 at 23:07
I don't know why but even using the fname solution I am getting an empty variable. – Oct 29 '16 at 23:11
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/126979/discussion-between-mamdouh-freelancer-and-sandor). – Mamdouh Saeed Oct 29 '16 at 23:14

paolobasso · Answer 2 · 2016-10-29T23:05:57.777

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 ");
    });
  }

It might be returning Undefined as Dropzone is created dynamicly. Your example works because it is static. This is my best explanation. Would you b able to modify your answer so it works with dynamicly created elements? — , Oct 29 '16 at 22:34
I've edit the question, but you have to show me how you set the timestamp or you could build the function with a callback — paolobasso, Oct 29 '16 at 22:43

Ultrazz008 · Answer 3 · 2016-10-29T22:40:26.180

0

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.

edited Oct 29 '16 at 22:40

answered Oct 29 '16 at 22:24

Ultrazz008

1,678
1
13
26

If that's the case, starting at the `body` won't help much. One can not get what is not there. – adeneo Oct 29 '16 at 22:25
It is on body, it were just created after dom ready, so you can't get it with just class name of `dz-filename` – Ultrazz008 Oct 29 '16 at 22:26
Then you shall define your Dropzone with variable and use the dropzone: `dropzone_variable.files[0].name` – Ultrazz008 Oct 29 '16 at 22:30

score 0 · Answer 4 · answered Oct 30 '16 at 07:38

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);
    });
  }

jQuery getting text content of a span

4 Answers4