How to load plugins already configured after page load by ajax

Asked

Viewed 567 times

2

I have a page that has a form

In this form, it contains some inputs, which have classes, e.g.:

<input type="text" class="datepicker">
<input type="text" class="marcara-cpf">

And the configuration of this of some plugins is done in a js file

$(".datepicker").config...
$(".mascara-cpf").mask("000.000.000-00")

It turns out that when the page is loaded by ajax, it does not arrow the configuration of those plugins, having to make the call again from that setting. Which makes the code repetitive, every place that has a Cpf mask, have to do this... where I could just go to class mascara-Cpf for the desired input.

I read in some places, that the implementation of AMD could solve (using require.js)

But I don’t know how hard it will be to implement this require.js across the app

There is another elegant way to solve this problem with pages loading in ajax?

javascript jquery ajax

1 answer

1


As pointed out by the bfavaretto, the Mutations Events, such as the DOMNodeInserted have been marked as obsolete, so browsers may no longer support them.

On the other hand, we could use Mutations Observers, but only IE11 supports them, and we know how difficult it is to make the customer understand that IE is a... (Save Spartan!).

So in this way, the best thing to do is to declare a function that performs the loading of these plugins, and to prevent the same plugin from running n times in a given element, it is important to always delimit a scope for this function.

Below follows an example:

var content = $("#content");

var loadPlugins = function(escopo) {
  var maskCPF = $("[data-mask-cpf]", escopo);
  maskCPF.mask("999.999.999-99");
}

loadPlugins(document);
$(document).on("click", "#btAddMask", function () {
  $.post("Index/Home/0", {}, function(html) {
    var escopo = $(html);
    content.append(escopo);
      
    loadPlugins(escopo);
  }, "html");
});

//simular uma requisição AJAX via Post
$.post = function (url, data, sucess, dataType) {
  var row = $("<div>", { 
    "class": "row"
  });
  var maskCPF = $("<input>", { 
    "type": "text", 
    "data-mask-cpf": "" 
  });
  row.append(maskCPF);
  sucess(row[0].outerHTML);
}
body {

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://digitalbush.com/wp-content/uploads/2014/10/jquery.maskedinput.js"></script>
<button id="btAddMask">Incluir Campo</button>

<div id="content">
    <div class="row">
        <input data-mask-cpf="" />
    </div>
</div>

  • 1

    The problem with this method is that Mutation Events as DOMNodeInserted are obsolete, and may not exist in future browsers. https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events

  • 1

    Then in this case it will need to call the 'loadContent' method manually, or look for another event that monitors when a DOM element is added.

  • 1

    Manually calling seems a good one in his case, since he knows exactly when new elements are loaded.

  • Summarizing, create functions to assemble these elements and call them within the page that is loaded by ajax always, this?

  • Yes, but remember to delimit the scope, for example, if you are adding only one row to a table, only type the elements of this row.

  • To add a row in the table dynamically, ai only for that line that was add né, because the contrary would set the plug for all, can lose values, this?

  • Normally I create loadmask functions and in the window load I call them by ex, have problem if I pass $(.phone). Mask, even though there is no element with the phone class? That there in the case of masks I use a function and call for everything

  • @Rod, when you make $(".mask"). Mask(), it assembles a list of all elements with the mask class on the page, so it will resort to all elements of this list by calling the Mask method for them. If the list is empty then the method will not be called.

  • However, to prevent the Mask() method from being called repetitively for the same element, you must delimit a scope for your selection, say you receive an html by AJAX, then you can do something like this: var scope = $(html); $(".mascara", scope). Mask(); this way only the elements with the mask class that came through the AJAX request will be affected.

  • @Rod, I’ve made some changes to the answer.

Show 5 more comments

Browser other questions tagged javascript jquery ajax

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