CODEWITHSUNDEEP
javascriptjqueryhtmlajax
hello
hello

Reputation: 1229

Including javascript file along with ajax response

I've got a dropdown that runs AJAX each time an option is selected. The ajax call returns HTML markup (buttons and text boxes) and a script tag, which the HTML(buttons) uses to submit to a database via ajax.

<html>
<head>........</head>
<body>........</body>
<select class="chooseOption">
...
...
</select>
<div class="ajaxResult">
<!-- after successful ajax -->
<!-- HTML Markup here -->
<!-- I'm having to include main.js here again so that HTML matkup can use AJAX -->
</div>
 ....
 ....
 ....
<footer> //include main.js </footer>

This arrangement seems to work fine only that, there's an exponential call to main.js each time an option is selected.

Doing something like this(below) doesn't seem to work, I'm guessing because AJAX is injected into the page and isn't aware of what scripts that are already available on the page?

<script>
var len = $('script').filter(function () {
    return ($(this).attr('src') == 'main.js');
}).length;

//if there are no scripts that match, the load it
if (len === 0) {
    var url = "main.js";
    $.getScript(url);
}
</script>

Is there a simple way around this? To make sure that main.js works across all AJAX requests without having to include it with each request?

Sample main.js content.

Ajax snippet that populates the HTML Markup (buttons and textboxes)

    $("#students").on("change", function (e) {
    e.preventDefault();
    var supervise = this.value;
    var faculty = $("#faculty").val();
    $.ajax({
        method: "POST",
        url: 'URL',
        dataType: 'html',
        data:
        {
            selectValue: supervise,
            faculty: faculty
        },
        success: function (result) {
            $("#ajaxResult").html(result);
        }
    })
});

When #statement_button from HTML markup returned from select dropdown is clicked

    $('#statement_button').click(function (e) {
    var student_statement = $("#student_statement").val();
    if (student_statement == '') {
        alert('Please enter your statement');
        return false;
    }
    var student = $("#student").val();
    var statement_button = $(this).attr("value");

    $.ajax({
        type: "POST",
        url: formsUrl,
        dataType: 'text',
        data:
        {
            student_statement: student_statement,
            student: studentusername,
            statement_button: statement_button
        },
        success: function (result) {
            $("#result").text(result);
            $("textarea#student_statement").val('');
        }
    })
});

Upvotes: 0

Views: 76

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196296

From the code you posted it looks like you can just delegate the button handling to the .ajaxResult element which is always present in the html (from the initial load).

So just changing how you bind your button handlers should be enough

$("#students").on("change", function (e) {

to

$('.ajaxResult').on('change', '#students', function (e) {

$('#statement_button').click(function (e) {

to

$('.ajaxResult').on('click', '#statement_button', function (e) {

etc..

So the script with the above code is run once in the initial load of the page (in a $(document).ready(..))

Upvotes: 2

Related Questions