Question

I added some javascript on my page to update a specific div based on the users selection.

I chose this method over simply loading info from the database through PHP because it can be changed on the fly by the user while the page is open through AJAX

The div is the <div id='fight'> div. The function it calls is the update_fight() function found below. I included the entire .js file for reference incase there is something I am missing.

window.onload = (function(){
update_fight();
});

function get_main(page){
     $.ajax({
            type: "POST",
            async: false,
            url: 'http://rickymason.net/d4beta/welcome/loadmain',
            dataType: 'json', 
            data: { page: page },
            success: function(content){
                var html = '';
                html += content['content'];
                $('#main').html(html);
            }
        });    
}

function pop_zone(page){
     $.ajax({
        type: "POST",
        async: false,
        url: 'http://rickymason.net/d4beta/welcome/popzone',
        dataType: 'json', 
        data: { page: page },
        success: function(content){
            var html = $(content['content'])
            var $dialog = $('<div></div>')
            .html(html)
            .dialog({
                    autoOpen: false,
                    title: 'Select Zone',
                    modal: true,
                    width: 800,
                    resizable: false 
            });
            $dialog.dialog('open');
        }
    });     
}
$(document).ready(function() {
    $("#pop_zone").dialog({autoOpen:false});    
});


function update_fight() {
    $.ajax({
        type: "POST",
        async: false,
        url: 'http://rickymason.net/d4beta/welcome/loadmain',
        dataType: 'json', 
        data: { page: 'get_zone' },
        success: function(content){
            var html = '';
            html += content['content'];
            $('#fight').html(html);
        }
    });   
}

function sql_zone(zone) {
    $.ajax({
        type: "POST",
        async: false,
        url: 'http://rickymason.net/d4beta/welcome/sql_zone',
        dataType: 'json', 
        data: { zone: zone },
        success: function(){
            update_fight();
        }
    });   
}

$("#changezone").live('click', function() {
    var page = 'change';
    pop_zone(page);
});


$(".zone").live("click",function() {
    var zone = this.id;
    sql_zone(zone);
    alert ( "Updated: Zone " + this.id );
});

update_fight() calls my controller loadmain: which can be seen here:

    public function loadmain()
    {
        $content = $this->main_model->get_zone();
        $page['content'] = $content;
        echo json_encode($page);
    }

get_zone() can be seen here:

    public function get_zone()
    {
        $user_id = $this->tank_auth->get_user_id();
        $itemroll = $this->db->query("SELECT current_zone, z.name FROM user_load ul
                                    INNER JOIN zones z
                                    ON z.id = ul.current_zone
                                    WHERE ul.user_id = $user_id");
        $result = $itemroll->row_array();
        $zone['current_zone']= $result['current_zone'];
        $zone['name'] = $result['name'];
        //HTML Formatting
        $content = '';
        $content .= "<div id='change'><input type='button' id='changezone' value='Zone'></input></div> ";
        $content .= "<div id='zonename'><a href='". base_url()."welcome/fight'>". $zone['name']."</a></div>";
        return $content;
    }

Is there any glaring issue that might cause this not to work during occasioal page loads, or during a new page load?

This definitely occurs in all 3 browsers, though more consistently in IE7.

Answer 1

You have jQuery so use it ;).

change

window.onload = (function(){

to

$(function() {