Question posted in
You can find the official documentation here.

Calling .js file from HTML using AJAX – Jquery ajax

this js is at index.html between "<script type="text/javascript">"

function callanular() {

        peticion_http = new XMLHttpRequest();

        peticion_http.onreadystatechange = showContent;

        peticion_http.open('GET', 'anular.js', true); 
        peticion_http.send(null);                       


        function showContent() {

            if(peticion_http.readyState == 4) {

                if(peticion_http.status == 200) {

                    document.getElementById("notice").innerHTML=peticion_http.responseText;

                }
                else
                    document.getElementById("notice").innerHTML="ERROR "+peticion_http.status;
            }
        }
    }

index.html HTML code I have, looking to show box on div with id=notice

<div id="notice"></div>
<input type="submit" value="RESTRICTED ACCESS" onclick="callanular()">

At the same folder I have anular.js created, I want to show a simple box with a text, in this case I only have an alert to know it’s working.

window.onload = function() {
    return (alert("asdasdsa"));
}

Whatever I write I can only receive the literally code. e.g.

window.onload = function() {return (alert(“asdasdsa”)); }

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So this is how I solved it by using Jquery in first case, AJAX in second case.

    First Case

    Javascript code on index.html

    function callanular() {

        $.getScript("anular.js", function(){
            //You can write an alert or something
            //In my case it wasn't necessary.
        });
    }

    anular.js content

    document.getElementById("notice").innerHTML = "<div id='nopul' onclick='getText()'>YOU SHOULDN`T PRESS THIS BUTTON</div><br>";

    Back to index.html where I got:

    <div id="notice"></div> //here anular.js is going to show the div box
<input type="submit" value="RESTRICTED ACCESS" onclick="callanular()">

    At that point it was working fine as I wanted. So I added AJAX to get text from txt file simply doing a call to

    XMLHTTPRequest();

    peticion_http.open('GET', 'text.txt', true);

    -

    Second Case anular.js file 

    <div id='nopulses' onclick='getTexto()'>YOU SHOULDN`T PRESS THIS BUTTON</div><br>

    index.html javascript code

            peticion_http = new XMLHttpRequest();

        peticion_http.onreadystatechange = showContent;

        peticion_http.open('GET', 'anular.js', true);  
        peticion_http.send(null);                       

        function muestraContenido() {

            if(peticion_http.readyState == 4) {

                if(peticion_http.status == 200) {

                    document.getElementById("notice").innerHTML=peticion_http.responseText;

                }
                else
                    document.getElementById("notice").innerHTML="ERROR 404 Not Found "+peticion_http.status;
            }
        }

  2. 0

    You have to include the imported code in a script tag. Adding it to document body in a doc will not work. See answers here
    Is it possible to load new Javascript files with AJAX?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search