Question

I have page loading, via AJAX a PHP page into a div.

In turn, this loaded page has it’s own javascript and AJAX loaded div.

Reason is to allow user to select data > alter data within loaded data. I’m trying to do this without the help of JSON or such to communicate between JS and PHP.

I’m guessing the parent calling page has already loaded the javascript, and the AJAX loaded content can’t access that? (I’ve tried running the JS into the AJAX loaded content as well) If so, is there anyway to access that?

Here’s the JS I have on the main page, which, via AJAX, loads another page. It is the jQuery UI slider being used, as I write this I realise is not going to be able to apply to loaded content. But, the questions stands as it is not loading even if these scripts are all included in the loaded page:-

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="js/selectToUISlider.jQuery.js"></script>
<link rel="stylesheet" href="css/redmond/jquery-ui-1.7.1.custom.css" type="text/css" />
<link rel="Stylesheet" href="css/ui.slider.extras.css" type="text/css" />
<style type="text/css">
    fieldset { border:0; margin: 2em; height: 8em;} 
    label {font-weight: normal; font-size: 10px; float: left; margin-right: .5em; font-size: 1.1em;}
    select {margin-right: 1em; float: left;}
    .ui-slider {clear: both; top: 5em;}
</style>
<script type="text/javascript">
function readOut(IDin) {
if(IDin != '') { var ID = IDin; }
var myRequest = new ajaxObject('loader.php');
myRequest.update('tits=bumblebee&ID=' + ID);
myRequest.callback = function(responseText) {
document.getElementById('loader').innerHTML = responseText;
}
}

    $(function(){

        //demo 3
        $('select#valueAA, select#valueBB').selectToUISlider({
            sliderOptions: {
                change: function(readOut) {
                    var from = document.getElementById('valueAA').value;
                    var to = document.getElementById('valueBB').value;

                    var ID = document.getElementById('IDp').value;
                    var myRequest = new ajaxObject('tester.php');
                    myRequest.update('tits=bumblebee&ID=' + ID + '&from=' + from + '&to=' + to);
                    myRequest.callback = function(responseText) {
                    document.getElementById('elementId').innerHTML = responseText;
                    }
                }
            },
            labels: 12
        });

    });
</script>

Answer 1

You’re using some jQuery in there already. If you use the jQuery .html() function to stuff HTML into a container, then jQuery will find your <script> tags in there and run them. However, if you just set innerHTML yourself, the browser will not do that for you.