Call file using AJAX from a file called from JQuery

Question

I am trying to call the server side from a file called trough JQuery. This is so hard to explain but what I am really doing is, I call a file that will pop up like a window using JQuery. Then in that pop up window I am going to call the server side file using an AJAX.

This is how I called the first file:

JQUERY

function AddBill(id) {
    $("#displayDIV").show();
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("displayDIV").innerHTML = this.responseText;
        }
    };
    xmlhttp.open("GET","file1.php?",true);
    xmlhttp.send();
}

Now I want to call another file inside the file1.php

AJAX

$(function() { 
    $("#formAdd").submit(function(e) {
        e.preventDefault();
        alert();
        $.ajax({  
            url: $(this).attr('action'),
            type: "post",  
            data: $(this).serialize(),
            error:function(){
                alert("ERROR : CANNOT CONNECT TO SERVER");
            },
            success: function(data) {
                alert(data);
            }
        });
        return false; 
    });
});

By the way. This is where I call the AddBill()

<input type="button" class="updateButton" value="ADD BILLED TO" onclick="AddBill()"/>

And this is the content of my file1.php

<form id="formAdd" action="server.php" method="POST">
    <input type="text" name="text1">
    <input type="submit" value="ADD">
</form>

The AJAX is not being read by the program. Where did I go wrong or what is the better way to do this?

THANKS

you may need to wrap the ajax in a script tag, so the contents are interpreted as a script by the browser — filype
– filype, Commented Nov 12, 2016 at 0:44
yes. I did that. My jQuery and Ajax are both in the same script tag. — Benjamin G
– Benjamin G, Commented Nov 12, 2016 at 0:46
They are both in the same script tag?? Like <script src="path_to_jQuery"> function(){...}</script> If so, try your script in another script tag. You can't include scripts in a script tag that has a src attribute. — Louys Patrice Bessette
– Louys Patrice Bessette, Commented Nov 12, 2016 at 0:49
@LouysPatriceBessette so I put another script tag inside the html or should I put it inside the file I called? — Benjamin G
– Benjamin G, Commented Nov 12, 2016 at 0:53
Do you want the AJAX to execute after it finishes loading on this line: document.getElementById("displayDIV").innerHTML = this.responseText; ? — filype
– filype, Commented Nov 12, 2016 at 0:54

Louys Patrice Bessette · Accepted Answer · 2016-11-12 01:04:47Z

1

Looking at the updated question, perhaps your ajax code is running before the contents are added on the page:

Try this in your ajax:

$(document).on('submit', "#formAdd", function(e) {

instead of

$("#formAdd").submit(function(e) {

edited Nov 12, 2016 at 1:04

Louys Patrice Bessette

34k7 gold badges40 silver badges69 bronze badges

answered Nov 12, 2016 at 1:02

filype

8,47010 gold badges46 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:53:34Z

0

The browser will not execute scripts that are inserted in the DOM. You should consider other ways of achieving this.

You can include a script, adn then inject the contents of file1.php as an exmaple:

if (this.readyState == 4 && this.status == 200) {
    var g = document.createElement('script');
    var s = document.getElementsByTagName('script')[0];
    g.text = this.responseText;
    s.parentNode.insertBefore(g, s);
}

There are some other useful solutions on this question: Can scripts be inserted with innerHTML?

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Nov 12, 2016 at 1:00

filype

8,47010 gold badges46 silver badges70 bronze badges

Collectives™ on Stack Overflow

Call file using AJAX from a file called from JQuery

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related