AJAX style uploader

Question

Morning all. My script is running here:

http://www.actwebdesigns.co.uk/web-design-mansfield/php-functions/AJAX-style-image-uploader-script-php-jquery.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.

Answer 1

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