SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jun 2007
    Location
    Stockholm, Sweden
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Dynamic content replacement using Ajax/Javascript/PHP

    I'm sure some wizard will tell me this is a classic example of "piece of cake"; in which case I bow and promise to listen In case I've struck granite rock, feel free to throw questions my way and I'll tell you if I've tried it or not.

    I have a file, main.php (I know this is the JS-forum, bear with me). It outputs HTML and inline Javascript functions. When the user clicks on a graphical "tab", that tab is activated, and an ajax call is made to fetch.php with some specific parameters. Once the ajax request has completed, a given innerHTML container on the now active tab is filled with the stuff that fetch.php outputs.

    So far so good.

    The problem is that the stuff that fetch.php outputs is partial pure HTML and partial inline javascript. And this is where it gets tricky. If I declare an inline javascript function in the returned data, Firefox (and I suspect MSIE) refuses to understand that the function is there. It simply doesn't exist (!).

    Using the Web Developer add-on for Firefox, there's an option to look at "Source code" and "Generated source code". The output from these two differ in that when I view the "Generated source code", I see the dynamically inserted javascript/HTML from fetch.php, whereas viewing "just" the source doesn't.

    What did I do wrong? How do I get the browser to find/accept/activate the javascript code/functions that were inserted dynamically? I cannot put them in a .js file and include it, since they need to be dynamically created, and I cannot use eval() since that executes javascript "as is", in which a function will not be executed unless called.

    I'm using Prototype 1.5.1, and haven't run into any other snags with the Ajax, forms, etc. than this :-(


    -joho

  2. #2
    SitePoint Zealot dustbuster's Avatar
    Join Date
    Jan 2003
    Location
    End-World
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The solution to your problem is located somewhere in the Prototype docs but I don't know where...

    You have to set evalScripts= true:
    Code:
    var myAjax = new Ajax.Updater({success: target}, url, {asynchronous: true, method: 'post', parameters: pars,evalScripts: true, onFailure: reportError});
    "If all else fails brute force is always an option."
    M.E.

  3. #3
    SitePoint Member
    Join Date
    Jun 2007
    Location
    Stockholm, Sweden
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    Hmm.. I must have overlooked something the last time I ran into evalScripts, 'coz I sure looked at it :-) Googling "prototype evalscripts" gives a zillion hits, of which this is one:

    http://www.sergiopereira.com/articles/prototype.js.html

    If you search for "evalscripts" in that page, you come to an explanation as to why what I do doesn't work (well, it's sort of an explanation anyway :-). I'll change the code and see if I can get it working.



    Thanks for re-reminding me about this..


    -joho

  4. #4
    SitePoint Member
    Join Date
    Jun 2007
    Location
    Stockholm, Sweden
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    I can still not get this to work. The fetch.php file now creates plain vanilla HTML with inline javascript like this:
    Code:
    <div id="viewform" style="height: 550px;"><div id="tabProperties" style="margin-top: 20px; color: red; clear: both;">
    
    <script type="text/javascript">
    <!--
    fooF = function () {
    alert ('yes');}
    // -->
    </script>
    
    </div></div>
    This is then inserted into the innerHTML container of a div somewhere on the "master" page. But when I try to call the fooF() function in the master page, Firefox claims its not there

    Most places that have references to evalScripts=true talk about .Updater(), not .Request(), and I'm beginning to wonder if that is the problem..

    (like this: http://wiki.script.aculo.us/scriptac...w/Ajax.Updater)


    -joho

  5. #5
    SitePoint Member
    Join Date
    Jun 2007
    Location
    Stockholm, Sweden
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    Eureka!

    If I switch to Ajax.Updater() instead of Ajax.Request(), then it works .. praise the Browser and the almighty bitstream

    Now, why it doesn't work with .Request() I don't know.

  6. #6
    SitePoint Zealot dustbuster's Avatar
    Join Date
    Jan 2003
    Location
    End-World
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think Updater is intended to reflect changes in your document while Request is generally just used to issue commands to your script. I dunno...
    "If all else fails brute force is always an option."
    M.E.


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
  •