How to embed & execute javascript into html?

Question

index.html

<script>
function check() {
        var id = $('input[name=id]').val();
        $("#result").load("/ajax.php", {id:id});        
}
</script>

<input type="text" size="3" name="id"><br />
<button onclick="check();">Pay</button>
<div id="result"></div>

ajax.php

<?php
$id = (int)$_REQUEST['id'];
//some validations and SQL executions
echo "<script language=JavaScript src='https://*****/index.php?id=$id&invoice=$invoice&sum=$sum.......etc'></script>";

I try to form javascript in php file and embed it into div with id="result". I've used get, load, ajax, createElement methods but the script doesn't execute.

shouldn't your script tag contain valid js file..., you seem to use php file as source of script tag ..? — Sudhir Bastakoti
– Sudhir Bastakoti, Commented Jan 16, 2013 at 7:09
To be honest what you do is a bit strange. But if you want to load script by URL to loaded document, you do not have to send whole <script> tag by ajax. Just send URL and generate <script> tag on client side. — Tomáš Zato
– Tomáš Zato, Commented Jan 16, 2013 at 11:58

anujit · Accepted Answer · 2013-01-16 07:12:59Z

1

try this.. $('#result').load('ajax.php');

answered Jan 16, 2013 at 7:12

anujit

993 silver badges13 bronze badges

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

2 Comments

Anton Over a year ago

I need to send POST data to PHP script

Pebbl Over a year ago

@user1312750 api.jquery.com/load/#request-method - jQuery.load supports sending data as POST.

Reshil · Accepted Answer · 2013-01-16 07:39:09Z

1

In your php file ajax.php include the header.

header('Content-Type: text/javascript');

And in index.html add type=”text/javascript” to the script tag.

<script type=”text/javascript”>
        function check() {
           var id = $('input[name=id]').val();
           $("#result").load("/ajax.php", {id:id});        
         }
   </script>

edited Jan 16, 2013 at 7:39

answered Jan 16, 2013 at 7:29

Reshil

4813 silver badges9 bronze badges

1 Comment

Tomáš Zato Over a year ago

Since ajax.php returns HTML (<script ...) sending text/javascript content type makes no sense.

user2041141 · Accepted Answer · 2013-02-04 21:59:26Z

1

You must load script as real script element. DOM conversion of "<script>/*...*/</script>" may fail in this case. This is done via standart DOM document.createElement function.

var script = document.createElement("script");
script.src = path;

Other way is to download the script via AJAX and then eval it.

answered Feb 4, 2013 at 21:59

user2041141

Comments

Arvind Bhardwaj · Accepted Answer · 2013-01-16 07:09:48Z

0

Try using getScript:

$.ajax({
  url: url,
  dataType: "script",
  success: success
});

answered Jan 16, 2013 at 7:09

Arvind Bhardwaj

5,3215 gold badges38 silver badges50 bronze badges

Comments

Tarika · Accepted Answer · 2013-01-16 07:12:33Z

0

try this:-

"<script language=JavaScript src='https://*****/index.php?id="'.$id.'"&invoice="'.$invoice.'"&sum="'.$sum.'".......etc'></script>";

answered Jan 16, 2013 at 7:12

Tarika

2461 gold badge2 silver badges17 bronze badges

Comments

Tomáš Zato · Accepted Answer · 2013-01-16 11:55:33Z

Why wouldn't you load directly the script URL using AJAX? ajax.php only should return path to the script:

 $id = (int)$_REQUEST['id'];
 //some validations and SQL executions
 echo "https://*****/index.php?id=$id&invoice=$invoice&sum=$sum.......etc";

Besides that all HTML element attributes should be enclosed with quotes or apostrohpes.

Then you should load this url in javascript and generate script element here:

   function loadScript(url,appendTo) {
     var script = document.createElement("script")
     script.type = "text/javascript";
     script.src = url;
     if(typeof appendTo.appendChild == "function")     //Chceking if we can append script to given element
       appendTo.appendChild(script); 
     else
       document.body.appendChild(script)       //This will not work in old IE, where document.body is not defined. 
   }

You call this function with script url and optional target element (where will be put in) as parameters. Like this:

  $.get("ajax.php",{param1:"value"},function(scriptUrl) {loadScript(scriptUrl, document.getElementById("result");})

Collectives™ on Stack Overflow

How to embed & execute javascript into html?

6 Answers 6

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related