www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 25 of 25

Thread: Load tab content AFTER clicking on tab

  1. #16
    Join Date
    Jan 2010
    Location
    Belgium
    Posts
    319
    Ok, I'll do what you suggested. Thank you!

  2. #17
    Join Date
    Jan 2010
    Location
    Belgium
    Posts
    319
    Hi,

    I have a small problem with the script.

    When I include an upload php-script in one of the ajax tabs, the script won't work. I can upload images but the uploaded image isn't written to the server, nor an error is showing. The page simply loads again with a fresh upload form.

    The php script works perfectly on a normal page.

    Also when providing a link in a tab to another tab (for example domain.com/#2) the url changes, but the second tab won't load. When loading domain.com/#2 directly in the browser (copy/paste) it does work.

    ... any suggestions? Normally this must work, isn't it?

    Best,
    Christophe
    Last edited by Christophe27; 01-11-2010 at 07:55 PM.

  3. #18
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    945
    I don't understand the problem. Please elaborate or demonstrate.

  4. #19
    Join Date
    Jan 2010
    Location
    Belgium
    Posts
    319
    Hi mitya,

    Here is an example on a test domain where I include a photo upload script in an ajax tab: Example 1

    When uploading a photo you see nothing happens. No error messages, or success messages, nor is the photo written to the destination directory.

    Here is a direct link to the photo upload file I include: Example 2

    As you notice, the script itself works perfectly.

    Also when I provide a link to another tab in one of the tabs, the url changes but the tab won't change as you can see in the example below:

    Example 3

    But when clicking the exact same link with Ctrl, the correct tab opens (in a new browsertab of course)

    Any suggestions ...

    Best,
    Christophe

  5. #20
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    945
    You have no action property set in your form. In such cases, the form merely calls itself again.

    Therefore, it works with your include method, because the include file has the necessary code to handle the upload.

    But in the ajax tab page, there is no code to handle the upload. Think about it; the form calls the ajax tabs page, and that has no PHP on it to process your upload.

    You probably want it to forward the upload via ajax to the php page, but this isn't possible - ajax doesn't do file uploads.

    I hope the above is understandable. The reason is very simple but hard to explain.

  6. #21
    Join Date
    Jan 2010
    Location
    Belgium
    Posts
    319
    Thank you for your reply!

    Oh, I figured the tab would simply reinclude the php file with the proper code.

    So I cannot upload files IN ajax tabs using PHP?

    Christophe
    PS: I received my book today I mentioned earlier (javascript the good parts)

  7. #22
    Join Date
    Jan 2010
    Location
    Belgium
    Posts
    319
    This is the PHP file btw
    Code:
    <?php
    // define a constant for the maximum upload size
    define ('MAX_FILE_SIZE', 716800);
    
    if (array_key_exists('upload', $_POST)) {
      // define constant for upload folder
      define('UPLOAD_DIR', '/path to image folder/');
      // replace any spaces in original filename with underscores
      // at the same time, assign to a simpler variable
      $file = str_replace(' ', '_', $_FILES['image']['name']);
      // convert the maximum size to KB
      $max = number_format(MAX_FILE_SIZE/1024, 1).'KB';
      // create an array of permitted MIME types
      $permitted = array('image/gif', 'image/jpeg', 'image/pjpeg', 'image/png');
      // begin by assuming the file is unacceptable
      $sizeOK = false;
      $typeOK = false;
      
      // check that file is within the permitted size
      if ($_FILES['image']['size'] > 0 && $_FILES['image']['size'] <= MAX_FILE_SIZE) {
        $sizeOK = true;
    	}
    
      // check that file is of an permitted MIME type
      foreach ($permitted as $type) {
        if ($type == $_FILES['image']['type']) {
          $typeOK = true;
    	  break;
    	  }
    	}
      
      if ($sizeOK && $typeOK) {
        switch($_FILES['image']['error']) {
    	  case 0:
    		// $username would normally come from a session variable
            $username = 'testfolder';
    		// if the user's subfolder doesn't exist yet, create it
    		if (!is_dir(UPLOAD_DIR.$username)) {
    		  mkdir(UPLOAD_DIR.$username);
    		  }
            // check if a file of the same name has been uploaded
    		if (!file_exists(UPLOAD_DIR.$username.'/'.$file)) {
    		  // move the file to the upload folder and rename it
    		  $success = move_uploaded_file($_FILES['image']['tmp_name'], UPLOAD_DIR.$username.'/'.$file);
    		  }
    		else {
    		  // get the date and time
    		  ini_set('date.timezone', 'Europe/London');
    		  $now = date('Y-m-d-His');
    		  $success = move_uploaded_file($_FILES['image']['tmp_name'], UPLOAD_DIR.$username.'/'.$now.$file);
    		  }
    		if ($success) {
              $result = "$file uploaded successfully";
    	      }
    		else {
    		  $result = "Error uploading $file. Please try again.";
    		  }
    	    break;
    	  case 3:
    		$result = "Error uploading $file. Please try again.";
    	  default:
            $result = "System error uploading $file. Contact webmaster.";
    	  }
        }
      elseif ($_FILES['image']['error'] == 4) {
        $result = 'No file selected';
    	}
      else {
        $result = "$file cannot be uploaded. Maximum size: $max. Acceptable file types: gif, jpg, png.";
    	}
      }
    // if the form has been submitted, display result
    if (isset($result)) {
      echo "<p><strong>$result</strong></p>";
      }
    ?>
    <form action="" method="post" enctype="multipart/form-data" name="uploadImage" id="uploadImage">
        <p>
    		<label for="image">Upload image:</label>
    		<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo MAX_FILE_SIZE; ?>" />
            <input type="file" name="image" id="image" /> 
        </p>
        <p>
            <input type="submit" name="upload" id="upload" value="Upload" />
        </p>
    </form>

  8. #23
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    945
    The PHP is fine - it must be, it works fine using the include method.

    But no, you can't upload files with ajax, or at least not without a lot of hacking and workaround. It's not generally done.

    The workaround would be to simulate ajax using hidden iframes. Route your form through the a hidden iframe (e.g. make an iframe with name 'ifr' and give your form target='ifr').

    Hidden iframes were the standard way of achieving the ajax effect before ajax itself became widely supported by the various browsers.

  9. #24
    Join Date
    Jan 2010
    Location
    Belgium
    Posts
    319
    Ok, I'll find a solution to work around ajax for uploading files. Thanks!

    Best,
    Christophe

  10. #25
    Join Date
    Jan 2013
    Posts
    1
    Hi,
    I don't know if you guys are still active here, I would really appreciate it, if I can get some guidance.
    I am doing something very similar to Christophe, but I am using a CMS that publishes pages and folders to a database.
    I have three tabs on my page, each prints different page links from database. It's more like a filtered search.
    Like group results in terms of categories or locations.Like that.

    I am stuck at php part of it, any tips about how ajax can invoke php and pull up links from databases?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles