Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p><em>(Incorrect answer removed.)</em></p> <hr> <p>Edit:</p> <p>Initially, I misinterpreted the <code>jquery.js</code> 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 <code>$result_cameras[$i]["camera_hash"]</code>, <code>$result_cameras[$i]["camera_name"]</code>,<code>$camera_quality_flash</code>, and <code>$id_hash</code>? Also, what is the value for <code>url</code> that results?</p> <hr> <p>Solution:</p> <p>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 <code>click()</code> function has to return <strong>false</strong> (if no value is return, it is treated as a <strong>true</strong> result). </p> <p>Notes on this solution:</p> <ol> <li>Relies on the objects being in existence, so I moved everything inside a <code>ready()</code> event. </li> <li>Assumes this one of many buttons inside a loop (because of the <code>$i</code> variable in the PHP code), so the data is in the attributes of the button. </li> <li>Since there may be several buttons with the same functionality, it is generalized for multiples. </li> <li>The jQuery load command (cf., <a href="http://api.jquery.com/load/">http://api.jquery.com/load/</a> ) takes 3 paramenters: <ul> <li>the url</li> <li>some data</li> <li>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: <ul> <li><em>responseText</em>, the HTML returned from the server</li> <li><em>textStatus</em>, a status message</li> <li><em>XMLHttpRequest</em>, the request interface, which can be used to see various info about the request (cf., <a href="http://www.w3.org/TR/XMLHttpRequest/">http://www.w3.org/TR/XMLHttpRequest/</a>)</li> </ul></li> </ul></li> </ol> <p>The HTML test file:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"&gt;&lt;/script&gt; &lt;script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form&gt; &lt;?php $i = 0; $result_cameras = array(array("camera_hash" =&gt; "test1", "camera_name" =&gt; "test2")); $camera_quality_flash = 1; $id_hash = "hashish"; echo '&lt;button id="monitor1" class="monitor" camHash="' . $result_cameras[$i]["camera_hash"] . '" camName="' . $result_cameras[$i]["camera_name"] . '" camQual="' . $camera_quality_flash . '" &gt;Monitor 1&lt;/button&gt;'; echo '&lt;button id="monitor2" class="monitor" camHash="' . $result_cameras[$i]["camera_hash"] . '-2" camName="' . $result_cameras[$i]["camera_name"] . '-2" camQual="' . $camera_quality_flash . '-2" &gt;Monitor 2&lt;/button&gt;'; ?&gt; &lt;div class="tester"&gt;TEST DIV&lt;/div&gt; &lt;/form&gt; &lt;/body&gt; &lt;script type="text/javascript"&gt; 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=&lt;?php echo $id_hash; ?&gt;', 'camera=' + cameraHash, 'name=' + encodeURIComponent(cameraName), 'quality=' + cameraFlashQuality ].join('&amp;'); js('&lt;div&gt;TEST DIV 2&lt;/div&gt;').load(url , function(response, status, xhr) { js('.tester').text( "&lt;div&gt;xhr: &lt;br /&gt;" + xhr.status + "&lt;br /&gt;" + xhr.statusText + "&lt;br /&gt;" + xhr.getAllResponseHeaders() + "&lt;br /&gt;" + xhr.responseText + "&lt;br /&gt;" + xhr.responseXML + "&lt;br /&gt;" + "&lt;/div&gt;" ); // js(this).dialog(); } ); }; }); &lt;/script&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload