jQuery function that dynamically load data AND also execute js?

89
January 01, 2020, at 3:40 PM

For example we have two php pages (same domain):

  • index.php
  • data.php (that uses a jQuery script)

If I load a part of the "data.php" inside the "index.php" I have to re execute the js file from the "data.php" like this:

$( ".box" ).load("data.php .my_data", function() {
  $.getScript("https://website.com/js/data.js");
});

Is there an other/better way to load a part from the external data.php and automatically execute all js that is connected with it?

Answer 1

data.php (this template contains no script)

<div class="template">
    <div class="title">
        <span>Title</span>
    </div>
    <div class="content">
        <span>Content</span>
    </div>
    <div>
        <button type="button">Read</button>
    </div>
</div>

Script on index.php:

In this example, I just show the event when clicking on the button, there are some ways to define it:

Option 1: Write the event after loading template successfully

$('.box').load('data.php').done(function (template) {
    template = $(template).appendTo('body');
    template.on('click', 'button', function () {
        console.log('clicked!');
    });
});

Option 2: Write the event outside the event which is used to load the template

$('.box').load('data.php').done(function (template) {
    $(template).appendTo('body');
});
$(document).on('click', 'button', function () {
    console.log('clicked!');
});

This ways require all of the scripts which are working on data.php are ready on index.php.

If you don't want to move/split the code:

data.php:

<div class="template">
    <div class="title">
        <span>Title</span>
    </div>
    <div class="content">
        <span>Content</span>
    </div>
    <div>
        <button type="button">Read</button>
    </div>
</div>
<script src="/js/data.js"></script>

In the file data.js, if you want to load something more but not immediately, make sure you're working with document (there are more ways but I highly recommend this):

data.js

// this code works imediately after your document has `.load` class
$(document).on('click', '.load', function () {
    // this code will work if your document already has `.box` class
    $('.box').load('some_data.php').done(function (template) {
        console.log(template);
    });
});

On the index.php, after appending the template, the code will work correctly. Nothing is automatically more.

READ ALSO
How to modify event data on eventRender method while drag or resize event on Fullcalendar

How to modify event data on eventRender method while drag or resize event on Fullcalendar

I am trying to modify my event while drag or resize event but it's not workingactually I am trying if day end at 24:00 (but full calendar show it as 00:00) then I want to add more 2 hours for the next days

90
Parse the content we get from copy and paste using jquery

Parse the content we get from copy and paste using jquery

I am working on a project and I am stuck on a very weird issueI have to restrict what content we receive from copy and paste on an input box

92
How to auto fill the address by using the postcode?

How to auto fill the address by using the postcode?

I want the user just enter their address's postcode without select any region because it will auto fillBut, I don't have an idea how to do it

95