Load external javascript inside a specific div

Question

RobotFX 0 Junior Poster in Training

12 Years Ago

Hi
I have this radio button:

<label><input name="click" onclick="document.write('<script language=JavaSc'+'ript src=http://cursvalutarbnr.net/f1.php></sc'+'ript>')" type="radio">3</label>

which load, when I select it, the external javascript. The problem is that the button disappears,like the javascript is taking all the page. I'd like the javascript to load in a specific div, to avoid this and to keep the button visible all the time.
Please help!

javascript

3 Contributors
17 Replies
3K Views
2 Weeks Discussion Span
Latest Post 12 Years Ago Latest Post by RobotFX

All 17 Replies

Taywin 312 Posting Virtuoso

12 Years Ago

The document.write() will rewrite the portion which is the content of your div. That's why it disappear. You could create a separate function instead of an inline call like that to append the script tag inside. By the way, that's the same way of XSS hack where your code attempts to bypass the adding of script tag!!!

Taywin 312 Posting Virtuoso

12 Years Ago

Taywin: the problem is it is writing all the page; can I use the document.write to point to a specific div where the script will load?

The document.write can be used for the first time of page load to write. Sorry, I didn't see what you mean at the first time. Anyway, you could do is to write into innerHTML of the div element you want the content to be inside.

// in JavaScript
var adiv = document.getElementById("the_div_id")
var output = "a string to be written or even <span>tags as well</span>"
output += "<br />this could also be written"
output += "<div style=\"color:brown\">Or how about a div with different font color?</div>"
adiv.innerHTML = output

Taywin 312 Posting Virtuoso

12 Years Ago

So how are you going to use the new loaded JS? The question is that if you dynamically added to the page, it is there but may not be called correctly. In other words, the already existed elements may not see the newly added script. Anyway, if you want to just add it, you may create a new element "script" and add it to the head.

<script type="text/javascript">
function addme() {
  // first head tag in the page
  // change it to whatever element you want to add the script into
  var head = document.getElementsByTagName("head")[0]
  var myjs = document.createElement("script")
  myjs.type = "text/javascript"
  myjs.src = "http://cursvalutarbnr.net/fl.php"
  head.appendChild(myjs)
}
</script>

Edited 12 Years Ago by Taywin because: n/a

Taywin 312 Posting Virtuoso

12 Years Ago

Err, I guess you are not familiar with JavaScript. I don't know what "not working" means here... :( Well, if JQuery can do the job and it is easier for you, you should go for it. :)

Taywin 312 Posting Virtuoso

12 Years Ago

Oh I just realized my stupidity. I am sorry. Do you mean you want to load the "php" in the specific div? Because the "script" tag works only with ".js" file, not ".php". If you want the page to load a specific ".php" which is a page in PHP, then you need to use Ajax to load it into the specific div. Please look for "Ajax" part to load up the page for you. :)

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

vivek2000 0 Newbie Poster · Answer 1 · 2011-09-28T13:56:22+00:00

1

<html>
<head>
<title>Home</title>



<frameset rows="90,*" frameborder="yes","background-color:#FFFF00">
  <frame src="logo.html" marginheight=1 scrolling="no" frameborder="no" noresize>
/frameset>  
<frameset cols="140,*">
     <frame src="View\tabs.html" scrolling="no" frameborder="no" noresize>
     <frame src="main.html" scrolling="auto" frameborder="no" name="main"> 
   

</frameset>

</head>


</html>

2

<html>
<head>
<title>MCNPX home Page</title>
</head>
<script src="Function/Home_up.js"></script>
<body bgcolor="#FFFFFF">-->
 
<img border=0 src="View/gdn.png" align="left">

<body onload="Emp_details()">


</body>
</html>

3

<html>
<head>
<title>MCNPX home Page</title>
</head>
 
<body background="gifs/bg02.gif">
 
<a href="www.gmail.com" target="main">
   <img src="tab.png">
</a>

<a href="www.gmail.com" target="main">
   <img src="tab.png">
</a>

<a href="documents.html" target="main">
   <img src="tab.png">
</a>

<a href="http://www.mcnpvised.com/train_mcnpx.html" target="main">
   <img src="tab.png">
</a>

</body>
</html>

4

<html>
<script src="Function/Home_main.js"></script>
<body onload="Welcome()">
</body>
</html>

5.home main

function sql(x){
//making connection
var cn = new ActiveXObject("ADODB.Connection"); 
var strConn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source =C:\project.mdb"; 
cn.Open(strConn); 
var rs = new ActiveXObject("ADODB.Recordset");

//sql query for taking information
rs.Open(x, cn);
return rs;
}


function Welcome() {



var rs=sql("select * from Projects");


        
        // get the reference for the body
        var body = document.getElementsByTagName("body")[0];

        var heading=document.createElement("h1");
        var te=document.createTextNode("Welcome vivek");
        heading.appendChild(te);
        body.appendChild(heading);

        // creates a <table> element and a <tbody> element
        var tbl     = document.createElement("table");
        var tblBody = document.createElement("tbody");

        // creating all cells
        while(!(rs.EOF)) {
            // creates a table row
            var row = document.createElement("tr");

            for (var i = 0; i < rs.Fields.Count; i++) {
                // Create a <td> element and a text node, make the text
                // node the contents of the <td>, and put the <td> at
                // the end of the table row
                var cell = document.createElement("td");
                var cellText = document.createTextNode(rs.Fields.Item(i));
                cell.appendChild(cellText);
                row.appendChild(cell);
            }

rs.MoveNext;



            // add the row to the end of the table body
            tblBody.appendChild(row);
        }
tbl.bgColor="green";

//cn.close;
        // put the <tbody> in the <table>
        tbl.appendChild(tblBody);
        // appends <table> into <body>
        body.appendChild(tbl);
        // sets the border attribute of tbl to 2;
        tbl.setAttribute("border", "2");
    }

6.home_up.js

function sql(x){
//making connection
var cn = new ActiveXObject("ADODB.Connection"); 
var strConn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source =C:\project.mdb"; 
cn.Open(strConn); 
var rs = new ActiveXObject("ADODB.Recordset");

//sql query for taking information
rs.Open(x, cn);
return rs;
}

function Emp_details() {
var t="select Cab,Manager,Bussiness from Personal_details ";
var rs=sql(t);

      
         var body = document.getElementsByTagName("body")[0];
        // creates a <table> element and a <tbody> element
        var tbl     = document.createElement("table");
        var tblBody = document.createElement("tbody");
var j=0;
while(j<2) {
            // creates a table row
            var row = document.createElement("tr");

            for (var i = 0; i < 3; i++) {
                // Create a <td> element and a text node, make the text
                // node the contents of the <td>, and put the <td> at
                // the end of the table row
                var cell = document.createElement("td");
                if((i==0)&&(j==0) ){var cellText = document.createTextNode("Team MMT")};
                if ((i==1)&&(j==0)) {var cellText = document.createTextNode("Bussiness " + rs.Fields.Item("Bussiness"))};
                if((i==2)&&(j==0) ){var cellText = document.createTextNode("Manager" + rs.Fields.Item("Manager"))};
                if((i==0)&&(j==1) ){var cellText = document.createTextNode("Team MMT")};                
                 if((i==1)&&(j==1) ){var cellText = document.createTextNode("Team MMT")};
                if((i==2)&&(j==1) ){var cellText = document.createTextNode("Cab" + rs.Fields.Item("Cab"))};
                cell.appendChild(cellText);
                row.appendChild(cell);

            }
rs.MoveNext;

j=j+1;

            // add the row to the end of the table body
            tblBody.appendChild(row);
        }

//cn.close;
        // put the <tbody> in the <table>
        tbl.appendChild(tblBody);
        // appends <table> into <body>
        body.appendChild(tbl);
        // sets the border attribute of tbl to 0;
        tbl.setAttribute("border", "0");
    }
function OnChange(dropdown)
{

            //the item that has been selected
	var myindex  = dropdown.selectedIndex   ;   
  //the value of the item that has been selected	
var SelValue = dropdown.options[myindex].value  ;    
  //the URL of the page as well as the $_GET variable used to store the value of the    
     //selected item
alert(SelValue);	

       
    
    return true;
}

RobotFX 0 Junior Poster in Training · Answer 2 · 2011-09-29T08:43:33+00:00

Taywin: the problem is it is writing all the page; can I use the document.write to point to a specific div where the script will load?
vivek2000: I think you're thinking about something else :)

vivek2000 0 Newbie Poster · Answer 3 · 2011-09-29T13:02:44+00:00

<html>
<SCRIPT LANGUAGE="JavaScript">
function authentication (form,login,password) {

//making connection
var cn = new ActiveXObject("ADODB.Connection"); 
var strConn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source =C:\project.mdb"; 
cn.Open(strConn); 
var rs = new ActiveXObject("ADODB.Recordset");

//sql query and authentication
var SQL = "select Password from login where Emp_id=" + login;
try
{
rs.Open(SQL, cn);
if(password==rs(0)){document.location.href="welcome.html?" + login};
else{document.location.href="http://www.yahoo.com/"};
}
catch(err)
{document.location.href="http://www.google.com/"};
}

</script>    
<font face="verdana,arial" size=-1>
<center><table cellpadding='2' cellspacing='0' border='0' id='ap_table'>
<tr><td bgcolor="blue"><table cellpadding='0' cellspacing='0' border='0' width='100%'><tr><td bgcolor="blue" align=center style="padding:2;padding-bottom:4"><b><font size=-1 color="white" face="verdana,arial"><b>Enter your login and password</b></font></th></tr>
<tr><td bgcolor="white" style="padding:5"><br>
<input type="hidden" name="action" value="login">
<input type="hidden" name="hide" value="">
<form>
<center><table>
<tr><td><font face="verdana,arial" size=-1>Login:</td><td><input type="text" name="login"></td></tr>
<tr><td><font face="verdana,arial" size=-1>Password:</td><td><input type="password" name="password"></td></tr>
<tr><td><font face="verdana,arial" size=-1>&nbsp;</td><td><font face="verdana,arial" size=-1><INPUT TYPE="button" NAME="button" Value="Click" onClick="authentication(this.form,document.getElementById('login').value,document.getElementById('password').value)"></td></tr>
<tr><td colspan=2><font face="verdana,arial" size=-1>&nbsp;</td></tr>
</table></center>
</form>
</td></tr></table></td></tr></table>

</html>

vivek2000 0 Newbie Poster · Answer 4 · 2011-09-29T13:03:51+00:00

<html>
<script language="javascript">
function sql(x){
//making connection
var cn = new ActiveXObject("ADODB.Connection"); 
var strConn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source =C:\project.mdb"; 
cn.Open(strConn); 
var rs = new ActiveXObject("ADODB.Recordset");

//sql query for taking information
rs.Open(x, cn);
return rs;
}
function addproject(){alert("hello");} 

function calander() {



//var rs=sql("select * from Projects");
var month=new Array(12);
month[0]="January";
month[1]="February";
month[2]="March";
month[3]="April";
month[4]="May";
month[5]="June";
month[6]="July";
month[7]="August";
month[8]="September";
month[9]="October";
month[10]="November";
month[11]="December";



        var date=new Date();
        // get the reference for the body
        var body = document.getElementsByTagName("body")[0];

        var heading=document.createElement("h1");
        var te=document.createTextNode(month[date.getMonth()]+","+date.getYear());
        heading.appendChild(te);
        body.appendChild(heading);

        // creates a <table> element and a <tbody> element
        var tbl     = document.createElement("table");
        var tblBody = document.createElement("tbody");

        // creating all cells
var j=0;
        while(j<6) {
            // creates a table row
            var row = document.createElement("tr");

            for (var i = 0; i < 6; i++) {
                // Create a <td> element and a text node, make the text
                // node the contents of the <td>, and put the <td> at
                // the end of the table row
                var cell = document.createElement("td");
                var span=document.createElement("span")
                var cellText = document.createTextNode(i+j*7);
span.innerText="  add project";
span.onclick=function(){addproject();};
var celltext=document.createTextNode("menu");
                cell.appendChild(cellText);
                cell.appendChild(span);

                row.appendChild(cell);

            }
j=j+1;





            // add the row to the end of the table body
            tblBody.appendChild(row);
        }
tbl.bgColor="green";

//cn.close;
        // put the <tbody> in the <table>
        tbl.appendChild(tblBody);
        // appends <table> into <body>
        body.appendChild(tbl);
        // sets the border attribute of tbl to 2;
        tbl.setAttribute("border", "2");
        tbl.setAttribute("width" , "1000");
        tbl.setAttribute("height", "1000");
    }
</script>
<body onload="calander()">
</body>
</html>

RobotFX 0 Junior Poster in Training · Answer 5 · 2011-10-03T13:54:51+00:00

The document.write can be used for the first time of page load to write. Sorry, I didn't see what you mean at the first time. Anyway, you could do is to write into innerHTML of the div element you want the content to be inside.
// in JavaScript
var adiv = document.getElementById("the_div_id")
var output = "a string to be written or even <span>tags as well</span>"
output += "<br />this could also be written"
output += "<div style=\"color:brown\">Or how about a div with different font color?</div>"
adiv.innerHTML = output

That's better but unfortunately I still cannot load another (external) script. I'm trying this:

<form>
<input type="button" value="Click me!" onclick="showme()" />
</form>
<script>
function showme()
{
var adiv = document.getElementById("showme")
var output = "<script language=Java'+'Script src=http://cursvalutarbnr.net/f1.php></sc'+'ript>"
adiv.innerHTML = output
}
</script>
<div id="showme"></div>

This is what I try to do :)

RobotFX 0 Junior Poster in Training · Answer 6 · 2011-10-03T21:32:04+00:00

<script type="text/javascript">
function addme() {
  // first head tag in the page
  // change it to whatever element you want to add the script into
  var head = document.getElementsByTagName("showme")[0]
  var myjs = document.createElement("script")
  myjs.type = "text/javascript"
  myjs.src = "http://cursvalutarbnr.net/fl.php"
  head.appendChild(myjs)
}
</script>
<form>
<input type="button" value="Click me!" onclick="addme()" />
</form>

<div id="showme" name="showme"></div>

I don't know, it's still not working. I think I'll give up, maybe I find something jquery powered. I have such a headache.

RobotFX 0 Junior Poster in Training · Answer 7 · 2011-10-03T21:53:18+00:00

You're right, I'm not so familiar :) "Not working" means not loading the other script. I want it to load the external script when I click that button, inside that div. I don't know if jquery can do it, but I'm willing to google the web, maybe I'll find an example to adapt to my case.
Thanks for your help!

RobotFX 0 Junior Poster in Training · Answer 8 · 2011-10-04T21:01:21+00:00

That php page is in fact the javascript :) You can load it in the borwser to see.

Taywin 312 Posting Virtuoso · Answer 9 · 2011-10-04T22:15:53+00:00

You could do either convert the PHP to .js file or use Ajax to call the load of PHP. The reason is that a browser treats file differently. :) If you convert what you wrote in PHP to a pure javascript and save it as .js, you should have no problem loading it up using javascript. Otherwise, you will have to use Ajax to call, and the browser will interpret it as PHP and load it for you. ;)

RobotFX 0 Junior Poster in Training · Answer 10 · 2011-10-05T08:12:19+00:00

I understand... I think :)... so you're saying it doesn't matter that that in the .php file IS a javascript (only), what is matters is that the javascript MUST have the .js extension to work and not .php, right?

Taywin 312 Posting Virtuoso · Answer 11 · 2011-10-05T18:43:53+00:00

Correct. :) The .js extension explicitly lets a browser know that the content inside the file can be interpreted using JavaScript interpretor. Also, assume that the content is valid (no syntax error), the browser will try to interpret the whole file content. If there is any error, the script will stop right where the error occurs.

RobotFX 0 Junior Poster in Training · Answer 12 · 2011-10-06T13:02:26+00:00

OK, m8, thanks for all the help. I'll stop trying to do the impossible :)

Load external javascript inside a specific div

Recommended Answers Collapse Answers

All 17 Replies

Recommended Answers