Changing text of span inside element not working using jQuery

Question

I am trying to change the text of a span. Inside a dropzone element. The problem is when I want to do it globally like this:

$('.resolutie').text(obj[0].dpi + 'DPI');

It works fine (but is not what I want because it changes all classes when there are multiple elements). But if I try this:

$(this).next('.resolutie').text(obj[0].dpi + 'DPI');

It stops working. I've tried multiple things. These too:

$(this).find('.resolutie').text(obj[0].dpi + 'DPI');
$(this).next('.resolutie').text(obj[0].dpi + 'DPI');
$(this + '.resolutie').text(obj[0].dpi + 'DPI');

But none of these work.

My code is inside a dropzone so my total code looks like this:

$('.dropzone').each(function(index){
    $maxfiles = $(this).attr('maxfiles'); <<<< this works, so why not the rest with $(this) ?
    $(this).dropzone({
        paramName: 'postedFile',
        addRemoveLinks: true,
        dictDefaultMessage: 'Sleep je bestand(en)',
        dictRemoveFile: 'Verwijder',
        dictCancelUpload: 'Annuleren',
        dictInvalidFileType: 'Dit type bestand is niet toegestaan',
        dictCancelUploadConfirmation: 'Weet je zeker dat je het uploaden wilt annuleren?',
        dictMaxFilesExceeded: 'Maximale aantal bestanden overschreden',
        maxFiles: $maxfiles,
        acceptedFiles: '.jpg, .jpeg, .png, .pdf, .tif, .tiff',
        thumbnailWidth: '150',
        thumbnailHeight: '120',
        thumbnailMethod: 'crop',
        previewTemplate: $(".hiddendiv").html(),
        // File contains dropzone file object, response contains ajax response from php file
        success: function (file, response) {
            var obj = JSON.parse(response);
            $(this).next('.resolutie').text(obj[0].dpi + 'DPI');
        },
    })
});

This is the entire HTML markup if that is helpful:

<form action="upload/uploaden.php" class="dropzone dz-clickable dz-started dz-max-files-reached" maxfiles="1" id="dropzone4">
   <input type="hidden" value="Monomeer" name="productnaam">
   <input type="hidden" value="Twan" name="klantnaam">
   <input type="hidden" value="20" name="hoogte">
   <input type="hidden" value="20" name="breedte">
   <div class="dz-default dz-message"><span>Sleep je bestand(en)</span></div>
   <div class="dz-preview dz-processing dz-image-preview dz-complete">
      <div class="dz-image"><img data-dz-thumbnail="" alt="Untitled-4.jpg"></div>
      <div class="dz-details">
         <div class="dz-size"><span data-dz-size=""><strong>0.1</strong> MB</span></div>
         <div class="dz-filename"><span data-dz-name="">Untitled-4.jpg</span></div>
      </div>
      <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress="" style="width: 100%;"></span></div>
      <div class="dz-error-message"><span data-dz-errormessage=""></span></div>
      <span class="toewijzen">Aantal toewijzen</span>
      <div class="uploadcontent">
         <input type="text" class="fileinput">
         <button class="plusminupload" id="minupload">−</button>
         <button class="plusminupload" id="plusupload">+</button>
      </div>
      <hr class="uploadline">
      <span class="infoline"><span class="infospan resolutie">Resolutie:</span> <i class="fas fa-check-circle goedgekeurd"></i></span>
      <span class="infoline"><span class="infospan formaat">Formaat:</span> <i class="fas fa-times-circle afgekeurd"></i></span>
      <button class="yellowbtn btn vrijgevenbtn" type="button">Bestand vrijgeven</button>
      <a class="dz-remove" href="javascript:undefined;" data-dz-remove="">Verwijder</a>
   </div>
</form>

please, try to create a minimal reproducible example, try to exclude from code the parts that are not relevant to solve your question, to avoid "polution" of the code, which makes harder to understand and find a solution — Calvin Nunes
– Calvin Nunes, Commented Feb 11, 2020 at 14:23

Yosef Tukachinsky · Accepted Answer · 2020-02-11 14:28:05Z

1

You use this inside function , so there this is not your object, but the function itself. try to set var $this = this in the outer function, then in the success function use $this.find('resolutie')

$('.dropzone').each(function(index){
    $maxfiles = $(this).attr('maxfiles'); <<<< this works, so why not the rest with 
    var $this = $(this);
    $(this) ?
    $(this).dropzone({
        paramName: 'postedFile',
        addRemoveLinks: true,
        dictDefaultMessage: 'Sleep je bestand(en)',
        dictRemoveFile: 'Verwijder',
        dictCancelUpload: 'Annuleren',
        dictInvalidFileType: 'Dit type bestand is niet toegestaan',
        dictCancelUploadConfirmation: 'Weet je zeker dat je het uploaden wilt annuleren?',
        dictMaxFilesExceeded: 'Maximale aantal bestanden overschreden',
        maxFiles: $maxfiles,
        acceptedFiles: '.jpg, .jpeg, .png, .pdf, .tif, .tiff',
        thumbnailWidth: '150',
        thumbnailHeight: '120',
        thumbnailMethod: 'crop',
        previewTemplate: $(".hiddendiv").html(),
        // File contains dropzone file object, response contains ajax response from php file
        success: function (file, response) {
            var obj = JSON.parse(response);
            $this.find('.resolutie').text(obj[0].dpi + 'DPI');
        },
    })
});

answered Feb 11, 2020 at 14:28

Yosef Tukachinsky

5,9051 gold badge15 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

twan Over a year ago

Thanks, this works but if I add multiple files in the dropzone all get updated. Is there a way to only update the preview of the last uploaded file.

Yosef Tukachinsky Over a year ago

$this.find('.resolutie').last().text(obj[0].dpi + 'DPI');

Collectives™ on Stack Overflow

Changing text of span inside element not working using jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related