Search code examples
phpjqueryhtmlflashjquery-dialog

PHP to jquery dialog() interaction issues.

I have an html button:

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

This would load flash content:

<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script type="text/javascript">
var js = jQuery.noConflict();

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

I want to use the jquery dialog to open this content. Everything passed in seems to be perfect (according to the GET response from firebug) but I still get a jquery error.

missing ; before statement jquery.js line 612

What am I doing wrong? I'm not even sure how to debug this. Thanks in advance.

EDIT: Firebug reports the GET as: http://myurl.com/flash/app.php?user=dee8c751cfdd2b5fb8194a3a9bac12044621df3d&camera=8f753c6bb3a8d9852a220abff0ed0d7686563007&name=test22&quality=0. I expect these values.

If I paste this url into my browser the flash app starts in the browser as expected but not with the jquery dialog obviously. Must be something wrong with my jquery code?

Solution

  • (Incorrect answer removed.)

    Edit:

    Initially, I misinterpreted the jquery.js as a file you created, rather than the real jquery. After testing out the code, I can see that the data that you are sending may be the problem. Can you post a sample with the data for $result_cameras[$i]["camera_hash"], $result_cameras[$i]["camera_name"],$camera_quality_flash, and $id_hash? Also, what is the value for url that results?

    Solution:

    The button submits the form, and the page is reloading. The dialog shows, but then the page is immediately reloaded, so it seems like there never was a dialog. In order to prevent this behavior, the button's click() function has to return false (if no value is return, it is treated as a true result).

    Notes on this solution:

    1. Relies on the objects being in existence, so I moved everything inside a ready() event.
    2. Assumes this one of many buttons inside a loop (because of the $i variable in the PHP code), so the data is in the attributes of the button.
    3. Since there may be several buttons with the same functionality, it is generalized for multiples.
    4. The jQuery load command (cf., http://api.jquery.com/load/ ) takes 3 paramenters:
      • the url
      • some data
      • a callback function for when the load returns (if you only provide 2 parameters, the second one is assumed to be the callback function). The callback parameters are:
        • responseText, the HTML returned from the server
        • textStatus, a status message
        • XMLHttpRequest, the request interface, which can be used to see various info about the request (cf., http://www.w3.org/TR/XMLHttpRequest/)

    The HTML test file:

    <html>
<head>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
</head>
<body>
<form>
    <?php 
        $i = 0;
        $result_cameras = array(array("camera_hash" => "test1", "camera_name" => "test2"));
        $camera_quality_flash = 1;
        $id_hash = "hashish";

        echo '<button id="monitor1" class="monitor" camHash="' . $result_cameras[$i]["camera_hash"] . '" camName="' . $result_cameras[$i]["camera_name"] . '" camQual="' . $camera_quality_flash . '" >Monitor 1</button>';
        echo '<button id="monitor2" class="monitor" camHash="' . $result_cameras[$i]["camera_hash"] . '-2" camName="' . $result_cameras[$i]["camera_name"] . '-2" camQual="' . $camera_quality_flash . '-2" >Monitor 2</button>';
    ?>
    <div class="tester">TEST DIV</div>
</form>
</body>

<script type="text/javascript">
    var js = jQuery.noConflict();
    js(document).ready(function(){

        var monitor = js(".monitor");
        //alert(monitor[1]);

        monitor.each(
            function(i){ 
                js(this).click(
                    function(){
                        //alert(js(this).attr('camHash'));
                        startMonitor( 
                            js(this).attr('camHash'),
                            js(this).attr('camName'),
                            js(this).attr('camQual')
                        ); 
                        return false;
                    }
                );
            }
        );

        var startMonitor = function(cameraHash, cameraName, cameraFlashQuality) {

            var url = [
                    'flash/app.php?user=<?php echo $id_hash; ?>', 
                    'camera=' + cameraHash, 
                    'name=' + encodeURIComponent(cameraName), 
                    'quality=' + cameraFlashQuality
                ].join('&');

            js('<div>TEST DIV 2</div>').load(url
                , function(response, status, xhr) {
                    js('.tester').text( "<div>xhr: <br />"
                        + xhr.status + "<br />"
                        + xhr.statusText + "<br />"
                        + xhr.getAllResponseHeaders() + "<br />"
                        + xhr.responseText + "<br />"
                        + xhr.responseXML + "<br />"
                        + "</div>"
                    );
//                  js(this).dialog();
                }
            );
        };
    });
</script>

</html>