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:
I will hold the resulting responseText


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:
I will hold the first value
I will hold second value


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'] == && ($_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
I will hold the title
I will hold your uploaded image

Reply