Reload main script when completing ajax request

Asked

Viewed 648 times

1

I am developing an application in which I have some "views" that are loaded in my <section id="view"> through ajax.

The view loads normally, but functions that have been programmed with jQuery for all inputs, for example, do not work. As far as my logic has allowed me to observe, this happens by elements added by ajax being added to the DOM later to the main script - which takes care of the inputs - being loaded, causing it not to notice the new elements.

I am currently copying and pasting the tag script in all views, which is being a bag for maintenance and will be unviable when launching the app, since I will need to minify everything in one app.min.js. What would be the solution to my case?

Remembering that in case I change the attr('src') from the script, Chrome warns me via console that it’s an obsolete way to do this.

Edit: Assuming this is mine main.js

//Selector personalizado
//Nenhum select option vai funcionar sem isso!
$('.selector-input').click(function(){
  var selector    = $(this).children('.selector');
  var pickerIcon  = $(this).find('.input-text .picker .picker-icon .material-icons');
  if(selector.css('display') == 'none'){
    selector.fadeIn(100);
    pickerIcon.addClass('rotated');
  }
});
$('.selector .options .option').click(function(){
  var content = $(this).text();
  var optId   = $(this).attr('data-opt');
  var inputId = $(this).parents('.selector').attr('data-picker-id');

  $('#' + inputId).text(content);
  $('#' + inputId).attr('data-selected', optId);
  $(this).parents('.selector').fadeOut(100);
  $('.material-icons').removeClass('rotated');
});

$(function(){
  //Caso seja empregador
  if($('#view2')){
    view = getUrlParameter('view') ? getUrlParameter('view') : window.location.href+="?view=newusers"

    $.ajax({
      method: "post",
      url: "views/empregador/" + view + ".php",
      data: {
        auth: 'loadedbyajax'
      }
    }).done(function(data) {
      $('#view2').html(data);
    });

    $('.user-profile-picture').each(function(){
      $(this).css('background-image', "url('" + $(this).attr('data-bg') + "')");
    });
  }

});

And this is the server response (which will be added to my <section id="view2">:

<div class="selector-input">
                    <div class="input-text">
                      <label>Estado</label>
                      <span class="picker">
                        <span id="estadoSelect" class="picked" data-selected="ES">
                        Espírito Santo</span>
                        <span class="picker-icon"><i class="material-icons">keyboard_arrow_down</i></span>
                      </span>
                    </div>
                    <div class="selector" data-picker-id="estadoSelect">
                      <div class="options">
                        <div class="option" data-opt="DF">Distrito Federal  </div><div class="option" data-opt="ES">Espírito Santo</div><div class="option" data-opt="MG">Minas Gerais</div><div class="option" data-opt="RJ">Rio de Janeiro</div><div class="option" data-opt="SP">São Paulo</div>                      </div>
                    </div>
                  </div>
javascript jquery ajax

  • @dvd It was an example. The main focus is: how to force the Reload of a script in the right way.

  • @dvd added the way I am making the requests and loading my view in the question.

  • O . click() of $('selector-input') - loaded by ajax. The ones that already exist in the page work perfectly.

2 answers

1


The problem is delegation, when new elements are added via Ajax, these elements will not be heard by clicking. You need to change to .on("click", "seletor"...:

Change the codes to:

$('.selector-input').click(function(){

for

$(document).on("click",".selector-input", function(){

and the other click too:

$('.selector .options .option').click(function(){

for

$(document).on("click",".selector .options .option", function(){
  • 1

    It worked that it is a beauty! But for what reason does it happen? Could you give me more details in this reply? Thank you!

  • The click only takes the elements that are already on the page. Before there was the method delegate which has already been discontinued and has been replaced by .on

  • 1

    You can use the click usually if not adding elements dynamically to the page, but if it is, use the .on the way above that will catch everything

  • You can use simple quotes '.. I put double quotes just as example, no problem at all

0

There’s a technique I use, and I always work....

You can do a function to reload the scribes ... example

  function inicia_scripts(){     //Selector personalizado
    //Nenhum select option vai funcionar sem isso!
    $('.selector-input').click(function(){
      var selector    = $(this).children('.selector');
      var pickerIcon  = $(this).find('.input-text .picker .picker-icon .material-icons');
      if(selector.css('display') == 'none'){
        selector.fadeIn(100);
        pickerIcon.addClass('rotated');
      }
    });
    $('.selector .options .option').click(function(){
      var content = $(this).text();
      var optId   = $(this).attr('data-opt');
      var inputId = $(this).parents('.selector').attr('data-picker-id');

      $('#' + inputId).text(content);
      $('#' + inputId).attr('data-selected', optId);
      $(this).parents('.selector').fadeOut(100);
      $('.material-icons').removeClass('rotated');
    });  }

And at the end of the page, you put a

$( document ).ready(function() {

inicia_scripts();

});

to load the functions... this way, you can always perform the function when ajax returns the data

Browser other questions tagged javascript jquery ajax

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