Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Since you asked this in a comment:</p> <blockquote> <p>Well, I've got a database of videos with a unique ID. I have 2 buttons next to each video for either liking or disliking. The 2 buttons will have an id based on the ID of the video. For example video number 2 has 2 buttons: like(id=L2) and dislike(id=D2). When the user clicks either one of those buttons, I want to update the videos table's "likes" column without the page reloading. Would that be possible?</p> </blockquote> <p>I'll tell you a way to achieve it, and it doesn't even require Javascript! :) (at least at first).</p> <p>It's an old fashioned HTML form element. Since you'll be posting data you should use action post. The code can look like this:</p> <pre><code>&lt;form method="post" action="/requests/like-video/" class="like-video"&gt; &lt;div&gt; &lt;input type="hidden" name="video_id" value="&lt;?php echo $video-&gt;id ?&gt;"&gt; &lt;input type="submit" value="Like"&gt; &lt;/div&gt; &lt;/form&gt; &lt;form method="post" action="/requests/dislike-video/" class="dislike-video"&gt; &lt;div&gt; &lt;input type="hidden" name="video_id" value="&lt;?php echo $video-&gt;id ?&gt;"&gt; &lt;input type="submit" value="Dislike"&gt; &lt;/div&gt; &lt;/form&gt; </code></pre> <p>Once you have that in place (and working) it's just a matter of hijaxing those forms. A super easy way of doing that is to use jQuery's Form plugin and simply run:</p> <pre><code>$('form.like-video').ajaxForm(OPTIONS_GO_HERE); $('form.dislike-video').ajaxForm(OPTIONS_GO_HERE); </code></pre> <p>Doing it this way ensures users without JS also get a fully functional site.</p> <p>It's called progressive enhancement.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

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