StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Firstly it seems you're building an application which is heavily reliant on JavaScript, and does very little in terms on <a href="http://en.wikipedia.org/wiki/Progressive_enhancement" rel="nofollow">progressive enhancement</a>. If this is a well thought out decision, then cool. </p> <p>One thing I would recommend is to make use of <code>data-*</code> attributes rather than fiddling around with splitting the ID. Instead of <code>ActivityLike_ID</code> have a class of <code>ActivityLike</code>, and give each of those elements a <code>data-id</code> attribute of the <code>Id</code>. You then have;</p> <pre><code>$(document).on('click', '.ActivityLike', function () { var theId = $(this).data('id'); }); </code></pre> <p>Awesome.</p> <p>Because you've got simple cases of <code>like <--> unlike</code> and <code>comment <--> remove comment</code> this should be easy to do in JavaScript. You can add a class to the element when one of the states is selected, or can set a(nother) data attribute. A simple check in your code will let you know what to render the link as.</p> <p>If there's a chance of more complicated manipulation occurring in future, you may be interested in letting the server control what to change in the page (as it's likely the server has more context on the request than the client).</p> <p>Let the server return a data structure like this;</p> <pre><code>[ { "selector": "#something", "operator": "append", "params": ["<div>Hi</div>"] } ] </code></pre> <p>I.e. an array of objects which map to jQuery operations. The <code>selector</code> describes the jQuery selector, the <code>operator</code> is the jQuery method to call and the <code>params</code> attribute is an array of parameters to pass the method.</p> <p>In the response handler for your AJAX request you can then do;</p> <pre><code>for (var i=0;i<response.length;i++) { var curr = response[i]; jQuery.fn[curr.operator].apply($(curr.selector), curr.params); } </code></pre> <p>To handle those operations.</p> <p>As a concrete example, to give the HTML to unlike an activity, the server could respond with;</p> <pre><code>[ { "selector": ".like[data-id=\"activityId\"]", "operator": "html", "params": ["you liked this activity, click to unlike"] } ] </code></pre> <p>Note that <code>param</code>s must be an array (in this example it only has one element).</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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