Pork.Iframe Examples

These are really simple examples to give you something to start with. Just remember to include pork.iframe.js on the client side and class.jsObject.php on the serverside ;-)

Submit a form and update a DIV with it's output

The code:

<form action='./ajax/test1/' name='testform1' id='testform1' method='post' onsubmit="new iframe(this, {update:'spacer1'}); return false;">
First value to pass: <input type='text' name='test' value='test'>

<input type='submit' class='submit' value='Test single update ->'>
</form>
<div id='spacer1'>I will hold the resulting responseText</div>

The PHP:

 <?php
 switch ($_TPL['menu']->path[0]) // this is where i get my URL 
path from. it's pre-exploded.
{
    case 'ajax':
        switch($_TPL['menu']->path[1])
        {
            case 'test1': // we're in /ajax/test1/
            echo("Found Posted data to /ajax/test1:");
            die(print_array($_POST)); // print_array does a print_r
 wrapped in <pre>
            break;");
        }
    break;
}



The works:

First value to pass:

---

Submit a form, and update multiple DIV's with it's output

The code:

<form action='./ajax/test2/' name='testform2' id='testform2' method='post' onsubmit="new iframe(this, {updateMultiple:true}); return false;">
First value to pass: <input type='text' name='test1' value='blah di blah'>

Second value to pass: <input type='text' name='test2' value='this works.'>

<input type='submit' class='submit' value='Test multiple update ->'>
</form>
<div id='test2output1'>I will hold the first value</div>
<div id='test2output2'>I will hold second value</div>


The PHP:

 <?php
 switch ($_TPL['menu']->path[0]) // this is where i get my URL 
path from. it's pre-exploded.
{
    case 'ajax':
        switch($_TPL['menu']->path[1])
        {
            case 'test2': // we're in /ajax/test2/
                $js = new jsObject(); // check out my jsObject here
                $js->test2output1 = $_POST['test1']; // create a new
 property and value.
                $js->test2output2 = $_POST['test2'];
                $js->display(); // die() with the JSON object.
            break;
        }
    break;
}



The works:

First value to pass:
Second value to pass:

---

Submit a form with an <input type="file">

Don't forget to add the enctype="multipart/form-data" part to the form! That's a common mistake if you find you get no output

The code:

<form action='./ajax/test3/' name='testform3' id='testform3' method='post' enctype="multipart/form-data" onsubmit="new iframe(this, {multiple:true}); return false;">
<form action='./ajax/test3/' name='testform3' id='testform3' method='post' enctype="multipart/form-data" onsubmit="new iframe(this, {multiple:true}); return false;">
File title: <input type='text' name='filename' value='My test image'>
File to pass (only JPG < 50kb accepted <input type='file' name='test2' value=''>
<input type='submit' class='submit' value='Test file upload ->'> </form> <div id='test3output1'>I will hold the title</div> <div id='test3output2'>I will hold your uploaded image</div>

The PHP:

 <?php
 switch ($_TPL['menu']->path[0]) // this is where i get my URL path from. it's pre-exploded.
{
    case 'ajax':
        switch($_TPL['menu']->path[1])
        {
            case 'test3'; // we're in test3
                $js = new jsObject();
                $js->test3output1 = $_POST['filename'];
                if($_FILES['test2']['error'] == 0 && ($_FILES['test2']['type'] == 'image/jpeg' ||$_FILES['test2']['type'] == 'image/jpg') && $_FILES['test2']['size'] / 1024 < 50) // check for the 3 error types at once and if it's all good continue
                {
                    $_SESSION['filecontents'] = file_get_contents($_FILES['test2']['tmp_name']);                    
                    @unlink($_FILES['test2']['tmp-name']);
                    $js->test3output2 = "<img src=\"./ajax/uploaded/?size={$_FILES['test2']['size']}\" alt=\"testing\">";
                }
                else
                {
                    @unlink($_FILES['test2']['tmp-name']);
                    if($_FILES['test2']['type'] != 'image/jpeg' && $_FILES['test2']['type'] != 'image/jpg') 
                    {
                        $error = "You uploaded a wrong filetype: {$_FILES['test2']['type']} instead of image/jpeg | image|jpg";
                    }
                    elseif(($_FILES['test2']['size'] / 1024) > 50) 
                    {
                        $error = "File too large. Only 50 kb allowed, you uploaded ".round($_FILES['test2']['size'] / 50)."kb.";
                    }
                    else
                    {
                        $error = "threre was something wrong with your file. try a real image.".print_array($_FILES['test2']);
                    }
                    $js->test3output2 = "<strong>Error: {$error}</strong>";
                }
                
                $js->display();
            break;

        }
    break;
}



The works:

File title:
File to pass (only JPG < 50kb accepted