My jquery function stops working when I change route

Asked

Viewed 52 times

0

I have a jquery function responsible for cutting a photo when a photo upload takes place:

document.addEventListener('DOMContentLoaded', function() {

    function readImage() {
        if (this.files && this.files[0]) {
            var file = new FileReader();
            file.onload = function(e) {
                document.getElementById("preview").src = e.target.result;
            };
            file.readAsDataURL(this.files[0]);
        }
    }

    document.getElementById("file").addEventListener("change", readImage, false);

    var x = document.getElementById("myDIV");

    $("[type=file]").on("change", function() {
        var file = this.files[0];
        var formdata = new FormData();
        formdata.append("file", file);
        if (file.name.length >= 30) {
            $('#name span').empty().append(file.name.substr(0, 30) + '..');
        } else {
            $('#name span').empty().append(file.name);
        }
        if (file.size >= 204800) {
            $('#preview').hide();
            $('#imgpadrao').show();
        } else {
            $('#imgpadrao').hide();
            $('#preview').show();
            $('.img-result').removeClass('hide');
        }
        var ext = $('#file').val().split('.').pop().toLowerCase();
        if ($.inArray(ext, ['png', 'jpg', 'gif', 'bmp']) == -1) {
            $('#info').hide();
            $('#size').hide();
            $('#labelfile').text('Escolha uma foto');
            $('#file').val('');
            $('#preview').hide();
            alert('Essa extensão de foto não é permitida!');
        }
    });

    //funcao crop:
    var cropper = '';
    $("#file").change(function(e) {
        if (e.target.files.length) {
            var file = this.files[0];
            if (file.size >= 204800) {
                $('.result').addClass('hide');
                $('#botaocortar').addClass('hide');
                alert('Esta imagem excedeu o tamanho máximo permitido (200kb)');
            } else {
                var reader = new FileReader();
                reader.onload = function(e) {
                    var img = document.createElement("img");
                    img.id = 'image';
                    img.height = '300'
                    img.src = e.target.result;
                    $('.result').html('');
                    $('.result').removeClass('hide');
                    $('.result').append(img);
                    $('#botaocortar').removeClass('hide');
                    $('.options').removeClass('hide');
                    cropper = new Cropper(img);
                };
                reader.readAsDataURL(e.target.files[0]);
            }
        }
    })
    $('#botaocortar').click(function(e) {
        e.preventDefault();
        var imgSrc = cropper.getCroppedCanvas({
            width: $('.img-w').val() 
        }).toDataURL();
        $('.cropped').removeClass('hide');
        $('.img-result').removeClass('hide');
        $('.cropped').attr('src', imgSrc);
        $('.download').removeClass('hide');
        $('.download').attr('download', 'imagename.png');
        $('.download').attr('href', imgSrc);
    })
});

The problem occurs that when I change route and then return to the page where the script should be executed, the function is not executed, it is only executed after I refresh the page. Does anyone have any idea what might be going on?

javascript jquery angular

  • Why are you wearing the event DOMContentLoaded ?

  • after I realized this problem where my function only worked after reloading the page, I started to transform this function from jquery to javascript... I haven’t finished yet, I expect the problem isn’t that

  • Already tested to use $().ready(function () { in place of document.addEventListener('DOMContentLoaded', function() { ?

  • yes, it was what was before the domcontentloaded, I believe the problem is another

  • Leticia, can you insert a demonstration of what you’re doing in the Code Snippet? It’s easier to help.

  • found some people who are with this problem too, I believe I’ll have to remove the script and add again every time in the class constructor

Show 1 more comment

1 answer

0

I couldn’t find a good practice of reloading only the scripts when the page opens, so I’m giving a Reload on the page before it loads:

  <a (click)="reloadpage()" [routerLink]="['meuperfil']">Meu Perfil</a>

  reloadPage(){
    this.location.back();
  }

Now I have a Reload on the page, it’s a bit uncomfortable, but at least now my jquery functionality works at the angle.

Browser other questions tagged javascript jquery angular

You are not signed in. Login or sign up in order to post.