AJAX style uploader

Morning all. My script is running here:

http://www.actwebdesigns.co.uk/web-design-mansfield/php-functions/AJAX-style-image-uploader-script-php-jquery.开发者_Go百科php

It is an ajax style uploader.

My problem being:

when image is uploaded, it calls for a refreshed list of images that have been uploaded.

But once it has been refreshed once, the "get height and width" function no longer works.

Firebug returns: Code:

self.parent is null

Code:

var image =  self.parent.$("#imageSelect :selected").text();

here's my code:

act.uploader.iframe.js

Code:

// JavaScript Document
$(document).ready(function () {
    var pageContents = $("body").html();
    function getHeightAndWidth() {
         self.parent.$("#getHeightWidth").bind("click", function () {
            var dir = "getHeightAndWidth.php"; //directory to script
            var image =  self.parent.$("#imageSelect :selected").text();
             self.parent.$("input[class=userInput2], select, #getHeightWidth").attr('disabled', true);
             self.parent.$("#getError").html('<p>Gathering data please wait... <img src="loader.gif" /></p>');
            $.ajax({
                type: "POST",
                url: dir, 
                data: 'image=' + image, 
                cache: false,
                timeout:30000,
                error: function () {
                     self.parent.$("#getError").html("<p>We are currently have a large volume of users and are slowing down our system. Please try again later.</p>");
                     self.parent.$("input[class=userInput2], select, #getHeightWidth").removeAttr('disabled');
                },
                success: function (html) {
                     self.parent.$("#heightAndWidthWrapper").html(html);
                     self.parent.$("input[class=userInput2], select, #getHeightWidth").removeAttr('disabled');
                }
            });
        });
        self.parent.$("#uploaderIframe").remove();
    }
    function buttonConvert() { // this function can be used on any page you want to make more accessible. Turns all type="submit" into type="button"
        self.parent.$("input[type=submit]").each(function () {
            var buttonClassFind = $(this).attr("class");
            if (buttonClassFind!="leave")
            {
                var inputButton = $(this);
                var newInputButton = $('<input type="button" id="' + inputButton.attr('id') + '" name="' + inputButton.attr('name') + '" class="' + inputButton.attr('class') + '" value="' + inputButton.val() + '" rel="' + inputButton.attr('rel') + '"/>').insertBefore(inputButton);
                inputButton.remove();
            }            
        });
    }
    function refreshImages() {
        self.parent.$("#sizeOptionsWrapper").html('<p>refreshing... <img src="loader.gif" /></p>');
        $.ajax({
            url: 'function.loadImages.php',  
            cache: false,
            timeout:30000,
            error: function () {
                self.parent.$("#sizeOptionsWrapper").html("<p>We are currently have a large volume of users and are slowing down our system. Please try again later.</p>");
                self.parent.$("#uploaderIframe").remove();
            },
            success: function (html) {
                self.parent.$("#sizeOptionsWrapper").html(html);
                buttonConvert();
                getHeightAndWidth();
            }
        }); 
    }
    self.parent.$("#uploadResult").html(pageContents);
    refreshImages();
});

act.uploader.js

Code:

// JavaScript Document
$(document).ready(function () {
    window.name = "main";
    function upload() {
        $("#uploadSubmit").bind("click", function () {
            var results = '<iframe name="uploader" id="uploaderIframe"></iframe>';
            $("#uploader").append(results);
            $("#uploadResult").html('<p>Uploading please wait... <img src="loader.gif" /></p>');
        });
    }
    function getHeightAndWidth() {
        $("#getHeightWidth").bind("click", function () {
            var dir = "getHeightAndWidth.php"; //directory to script
            var image = $("#imageSelect :selected").text();
            $("input[class=userInput2], select, #getHeightWidth").attr('disabled', true);
            $("#getError").html('<p>Gathering data please wait... <img src="loader.gif" /></p>');
            $.ajax({
                type: "POST",
                url: dir, 
                data: 'image=' + image, 
                cache: false,
                timeout:30000,
                error: function () {
                    $("#getError").html("<p>We are currently have a large volume of users and are slowing down our system. Please try again later.</p>");
                    $("input[class=userInput2], select, #getHeightWidth").removeAttr('disabled');
                },
                success: function (html) {
                    $("#heightAndWidthWrapper").html(html);
                    $("input[class=userInput2], select, #getHeightWidth").removeAttr('disabled');
                }
            });
        });
    }
    function buttonConvert() { // this function can be used on any page you want to make more accessible. Turns all type="submit" into type="button"
        $("input[type=submit]").each(function () {
            var buttonClassFind = $(this).attr("class");
            if (buttonClassFind!="leave")
            {
                var inputButton = $(this);
                var newInputButton = $('<input type="button" id="' + inputButton.attr('id') + '" name="' + inputButton.attr('name') + '" class="' + inputButton.attr('class') + '" value="' + inputButton.val() + '" rel="' + inputButton.attr('rel') + '"/>').insertBefore(inputButton);
                inputButton.remove();
            }            
        });
    }
    buttonConvert();
    upload();
    getHeightAndWidth();
});

if need the php or html let me know.

Any help much appreciated.

You don't appear to be defining 'self' anywhere - is that the complete code?