Ajax loaded partial view - process html elements when document is modified

90
September 08, 2021, at 7:10 PM

I use MVC application and jQuery, and Bootstrap 4. When a user click on a button, I ajax load a partial view which contains a modal dialog, and show is like this:

function loadModal(url, data)
    $.ajax({ 
        url: url, data: data, type: "GET",
        success: function (data) { showModal(data); },
    });
}   
function showModal(data) {
    var $dialog = $(data);
    $("body").prepend($dialog);
    $dialog.modal({ show: true, keyboard: true, backdrop: 'static'});
}

In other cases sometimes I simply replace a html part of the document loaded by:

function loadPartial(url, data, targetSelector)
    $.ajax({ 
        url: url, data: data, type: "GET",
        success: function (data) { $(targetSelector).html( data ); },
    });
}   

That's simple. Works well.

My problem starts now: if the partial view contains html elements with specific attributes - I want to process them like this:

function siteIsModified($html) {
   $("select.selectpicker", $html).selectpicker();
   $('input[data-autocomplete]', $html).each(setupAutoComplete);
   ...
}

Unfortunately our JS lib contains several ajax loading call functions - I don't want to add siteIsModified(..) call to all of them. New functions may be developed later - and might forget to call this function.

I call this function on the document ready function, but that's ok these wont be executed on the later loaded partial html code. However the following ajaxtab click event will be attached:

$(document).ready(function () {
  $(document).on("click", '[data-on-click-toggle="ajaxTab"]', onClickAjaxTab);
  siteIsModified($(body));
  ...
}

How can I write such a code which will be called automatically when the document is changed (and this solution wont depend on $.ajax as we are replacing it to fetch)? Or can I write those processing lines like the document on:

// I am afraid it wont executes on the ajax loaded parts - or good as general
$(document).on("load","select.selectpicker", function() {$(this).selectpicker();})

I think calling this siteIsModified() function is not good from to the partial view, as I think it is executed before the html part is added to the DOM, and cannot process itself. And more important: it is not an elegant solution to add this JS snippet to each partial view at the end :(

<div>... some partial view content goes here...</div>
<script type="text/javascript">siteIsModified(??)</script>
Rent Charter Buses Company
READ ALSO
TypeScript - How to put a QR code over an image in a pdf?

TypeScript - How to put a QR code over an image in a pdf?

I'm using TypeScript with the PdfMakeWrapper library on a website to produce a pdf with some svg images and a QR code in itThe relevant bit of my code is as follows:

108
Python-shell problem after packaging my app with electron builder (Node Js)

Python-shell problem after packaging my app with electron builder (Node Js)

I finished my electron/node js & Python app (a steganography tool)So I'd like to package it to distribute it on github with a dmg, exe

91
Sharing Session object and MIME message in java mail API and authentication details sharing

Sharing Session object and MIME message in java mail API and authentication details sharing

My application needs to send generated email from appointments

84