Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript, views and events best practice
    text
    copied!<p>I am creating a page which can play a video file with alternate plug-ins based on users selection. The URL encodes which video should be played.</p> <p>The page is retrieved from a PHP server script. The user selects the plug-in by clicking on some AJAX links. Each link retrieves from server the required plug-in by doing an AJAX request with a Javascript function. This function must take as a parameter the video ID. On the client side I am using jQuery Javascript framework.</p> <p>I would like to know which is the best practice for doing this as a design pattern. I am thinking at several alternatives:</p> <ol> <li>use <code>onclick</code> HTML attribute for the AJAX links to call the functions that retrieve content from server</li> <li>use jQuery <code>$(#element).click()</code> to map the Javascript function which retrieves content.</li> </ol> <p>If I use the first alternative a can easily pass the video ID to the Javascript function:</p> <pre><code>&lt;a id="X" href="#" onclick="retrieveXPlugin('&lt;?php echo $id ?&gt;')"&gt;X Plugin&lt;/a&gt; </code></pre> <p>but the view code is mashed with events code, which is not a good practice.</p> <p>The second alternative looks better, but I must bind the click event in the same PHP file like this:</p> <pre><code>&lt;script type="text/javascript"&gt; $(document).ready(function() { $('#X').click(function() { retrieveXPlugin('&lt;?php echo $id ?&gt;'); }); } &lt;/script&gt; </code></pre> <p>As I figure out I cannot include the above code in a separate .js file because I need the server side PHP variable <code>$id</code>. The only way to do this would be to use global Javascript variables which doesn't look so good.</p> <p>So, which is the best practice to organize view and events in this example and in any other? I am waiting for your suggestions.</p>
 

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