SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Ajax call can't run Javascript

    SgtLegend and anbody else interested! The title for the original post (iObj syntax error) was wrong from the getgo. There was no fault with the iObj javascript function addtocart(). I proved this by seting a timeout on the function in 'checout.js' that allowed me to run the script 10 seconds after the index.html was loaded. I then changed the innerHTML of div id f1 with Ajax call from 'index.js' and the functions in 'checout.js' ran. I decided I would call the functions from 'checout.js' with the Ajax call from 'index.js'. This can only be approached by creating a function in 'index.js' that creates a script tag and appends the script tag to document body [0]. That function would be added to the function in 'index.js' that calls the Ajax call in the same external.js. I proved that the script tag was added to the index.html by changing the onclick of an available button to alert the outerHTML of document getelementsbytagname script [2] which when clicked after the Ajax call was made and the responceText altered the innerHTML of f1 correctly, alerted the new script tags outerHTML as I had created it. The problem is that it doesn't run the script on the new objects in f1. This I don't understand. I had removed the echo script tag 'checout.js' from the php file that was used by the Ajax call as it to did not work. Would that it would but it doesn't. Any ideas why? Would be greatfully accepted!

  2. #2
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Ajax call can't run Javascript

    I have appended script tag type javascript to both head and body tags with onclick of ul li element that makes an Ajax call with get php file. The new script tag doesn't have any affect on the responceText innerHTML? Originaly I had an echo " <script tag in the php file used to make the server request but it also did not work so I removed it and set up the append method. I can't figure out why it is not working.

    index.html
    HTML Code:
    <script language=javascript src='scripts/index.js' type="text/javascript"></script>
    <!-- <script language=javascript src='scripts/checkout.js' type="text/javascript"></script> -->
    <!--checkout.js can't run till after responceText is written to div id='f1'-->
    <!--checkout.js works with a settimeout windo onload function used to allow 10 seconds for responceText-->
    <!--settimeout in checkout.js window onload is inconvienient and will throw errors if responceText isn't there-->
    </body>
    </html>
    External index.js .
    Code:
    function loadjs(checkout){
    var body=document.getElementsByTagName('body')[0];
    var script=document.createElement('script');
    script.language='javascript';
    script.type='text/javascript';
    script.src='scripts/checkout.js';//writes correctly
    body.appendChild(script);//also tried head.append
    }
    
    var sidebarli=document.getElementById('sidebar').getElementsByTagName('li');   
    for(i=0;i<sidebarli.length;i++){   
    if(sidebarli[i].className=='item' && sidebarli[i].parentNode.className=='prod'){ 
    sidebarli[i].onclick=function(){   
    alert(this.id+': Is sending your request.');
    EvalSound1();
    var p=this.id;
    getproduct(p);
    logo.className=p;
    f1.className='product';
    loadjs();//works
    hidewelcome();
    };//has more and works
    
    addEvent(placeorder,'click',function( ){ 
    alert(document.getElementsByTagName('script')[2].outerHTML);
    },false)//alerts new script tag correctly butscript doesn't run responceText?
    
    addEvent(window,'load',function(){//appropriate},false);
    External checkout.js
    Code:
    function f1alarm() {
        var bObj = document.getElementsByClassName('button');//doesn't work with tagName 
        
        for (var i = 0; i < bObj.length; i++) {
            bObj[i].onclick = function() {
                showt(this);
            };
        }
    }
    
    function showt(button) {
        if (true/* do something */) {
            alert('I am Here!');
        } else {
            alert('I am not here!');
        }
    }
    
    function init(){
    setTimeout('f1alarm()', 5000);
    }
    
    addEvent(window,'load',function(){init();},false); //doesn't run responce text
    PHP file
    PHP Code:
    <?php

    $q
    =$_GET["q"];

    $link=mysql_connect("localhost","root","root")or die(mysql_error( ));

    mysql_select_db("bwi",$link) or die(mysql_error( ));

    $query=mysql_query("SELECT * FROM ".$q)or die(mysql_error());

    while(
    $row mysql_fetch_array($query))

    {

    echo 
    "<div id='rowcontainer" $row['id'] . "' class='rowcontainer' title='Scroll to See more'>";

    echo 
    "<div id='rowcell" $row['id'] . "' class='rowcell'>";

    #more verbose php that works?

    echo "</div></fieldset></div></div>";

    echo 
    "<link rel='stylesheet' type='text/css' href='styles/product.css'/>"#works

    #echo "<script language='javascript' src='scripts/checkout.js' type='text/javascript'></script> " ;
    # Has no affect on responceText??
    }

    mysql_close($link);
    ?>
    I guess that is as clear as I can make it so why isn't the new checkout.js script tag not running the responceText after the loadjs() function appends the script tag?

  3. #3
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb RESOLVED!!Ajax call can't run Javascript

    Ok. apparently there is no other way than to hard code the events into the get.php file like so:
    get.php
    PHP Code:
    //should have fetch_as_array statement to hold new html data in memory
    echo "<img src='" $row['src'] . "' class='image' onclick='pictureclick()' title='Click to get a better look'/></div>"
    The 'OnClick' function is 'Hard Coded/Writen in-line of the HTML requested. As there is no window reload required by the Ajax call the function that makes the Ajax call actually writes the 'src' of a script tag with getelementbyid script tag id . This prevents appending or writing 10 or more of the same script tag to the document. If you force window reload the responceText HTML will disapear so the new script will draw errors like 'object not found/object expected'. The responceText HTML has to be hardcoded to run the new external.js!
    Add external.js with Ajax call
    Code:
    document.getElementById('blank').src='scripts/checkout.js';
    };
    index.html
    HTML Code:
    <script id="blank" src="" type="text/javascript"></script>
    Which makes me question why we decided to use 'Unobtrussive or External.js' in the first place as it actually adds a third step to comunicating with the server. The answer of course is security as this method doesn't reveal the script src in the original page source code! Not that a hacker won't look for it in the script file that is revealed. That becomes his only recourse and is an additional means of security.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •