The case:

Ok, so I have a popup which load a view from the server via ajax, this view could have JavaScript sometimes, and I assign this view to the popup by using jquery .html(page)

The problem

The popup JavaScript functions & variables are still alive even after I load a new view into the popup (which clear the old popup content because i'm using html()).

Possible solution

If I use iframe into the popup, I think the JavaScript ganna be cleared cause it simulate page refresh, but is there any other way ?, and am i right about iframe ?

The code:

Nothing special, just an ajax function which load a view:

function ajaxLoad(url1, async, method1, data1, placeOrCallback, loader = false, loadFromParent = false) {
  var placeContent = null;

  $.ajax({
    url: url1,
    headers: {
      'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
    },
    async: async,
    cache: false,
    method: method1,
    data: data1,
    beforeSend: function() {
      if (loader) {
        placeContent = $(placeOrCallback).html();
        $(placeOrCallback).html(spinnerLoader);
      }
    },
    error: function(xhr) {
      console.log("An error occured: " + xhr.status + " " + xhr.statusText + " " + url1);
      console.log(xhr.responseJSON);
      for (key in xhr.responseJSON.errors) {
        snackbar(xhr.responseJSON.errors[key]);
      }
      if (loader === true) {
        $(placeOrCallback).html(placeContent);
      }

    },
    success: function(result) {
      if (typeof placeOrCallback === 'function') {
        placeOrCallback(result);
      } else {
        if (loadFromParent === false)
          $(placeOrCallback).html(result);
        else
          $(placeOrCallback, window.parent.document).html(result);
      }
    }
  });
}

And an example of the returned view:

<script>
    let variables = "something";
    function finishTrain(e) {
        e.parent().remove();
        let amountDom = $("#armyTrain .card[data-type=infantry] .grid .amount");
        let currentAvailable = amountDom.html();
        amountDom.html(Number(currentAvailable) + 1);

    }

    $("#armyTrain .card:not(.locked) > img").on('click', function (e) {
        let armyInProgress = $("#armyInProgress");
        let type = $(this).parent().attr('data-type');
        let trainTime = $(this).parent().attr('data-trainTime');
        // let trainTime = 5;
        ajaxUpload('{{route('train')}}', true, {'unit': type});
        let card = '<div class="col-1">\n' +
            '            <div class="card">\n' +
            '\n' +
            '                <img src="/images/close.svg" alt="close" class="close-btn w-xm">\n' +
            '                <img src="/images/' + type + '.svg" alt="' + type + '">\n' +
            '\n' +
            '                <div class="in-progress" style="width: 50%;">\n' +
            '\n' +
            '                </div>\n' +
            '            </div>\n' +
            '        </div>';


        armyInProgress.append(card);

        runInProgress(armyInProgress.find(".card").last(), trainTime,0,finishTrain)
    })


    </script>
some html tags ..

0 Answers