Question

I use a combination of html/php and javascript to open a new browser window that launches a flash app. This works fine, but most users these days don’t expect window popups and often forget to allow the popups. So I thought a good solution might be using Jquery’s dialog: http://jqueryui.com/demos/dialog/#default.

I’m looking for some guidance here on how to implement this with jquery dialog as this flash app needs many things passed into it. Hence the round about way of doing this.

I first create a button in html with a bunch of things pulled out of a DB:

<button id="monitor" onClick='startmonitor("<?php echo htmlentities($_SERVER['REQUEST_URI']); ?>","<?php echo $result_cameras[$i]["camera_hash"]; ?>","<?php echo $result_cameras[$i]["camera_name"]; ?>","<?php echo $camera_quality_flash; ?>")'>Monitor</button>

Then I create a form in javascript with the passed parameters from the button:

 function startmonitor(to, camerahash, cameraname, cameraflashquality)
 {
    var myForm = document.createElement("form");
    myForm.method = "post";
    myForm.action = to;

    var myInput = document.createElement("input");
    myInput.name="video";
    myInput.value="Monitor";
    myForm.appendChild(myInput);

    myInput = document.createElement("input");
    myInput.name="camera_hash";
    myInput.value=camerahash;
    myForm.appendChild(myInput);

    myInput = document.createElement("input");
    myInput.name="camera_name";
    myInput.value=cameraname;
    myForm.appendChild(myInput);

    myInput = document.createElement("input");
    myInput.name="camera_quality_flash";
    myInput.value=cameraflashquality;
    myForm.appendChild(myInput);

    document.body.appendChild(myForm);
    myForm.submit();
    document.body.removeChild(myForm);
 }

And finally process this in php further and call javascript to launch flash app:

if (isset($_POST['video'])) {
    //get user hash for monitor app
    $query_user_hash = "SELECT id_hash FROM #__users WHERE user_id=".$user->id;
    $db->setQuery($query_user_hash);
    $id_hash = $db->loadResult();

    $camera_hash = check_input($_POST['camera_hash']);
    $camera_name = check_input($_POST['camera_name']);
    $camera_quality_flash = check_input($_POST['camera_quality_flash']);

    echo '<script type="text/javascript">
        window.open("flashapp/app.php?user='.$id_hash.'&camera='.$camera_hash.'&name='.$camera_name.'&quality='.$camera_quality_flash.'", "Flash_monitor", "location=0,menubar=0,status=0,scrollbars=0,width=360,height=405")
    </script>';
}

Not even sure where to start from here. Do I try to use jquery dialog where I do the window.open? In which case I’m not sure how I pass the same parameters? Or is there a better way to tackle this.

Answer 1

It seems the dynamic creation of a form and posting back to the server may be unnecessary. All seems it you are really doing is looking up the user’s id_hash. If you had that available on the main page you would not need the extra server side call. Then you could do something like this:

<button id="monitor" onclick="startMonitor('<?php echo $result_cameras[$i]["camera_hash"]; ?>', '<?php echo $result_cameras[$i]["camera_name"]; ?>');">Monitor</button>

and

var startMonitor = function(cameraHash, cameraName) {
    var url = ['flashapp/app.php?user=<?php echo $user_id_hash; ?>', 'camera=' + cameraHash, 'name=' + cameraName, 'quality=<?php echo $camera_quality_flash; ?>'].join('&');
    $('<div></div>').load(url, function() {
        $(this).dialog();
    });
};