Databases
StackOverflow2013
Postsdbo
POJavaScript: Increment Variable value on click relative to parent
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavaScript: Increment Variable value on click relative to parent
    text
    copied!<p>I have a complicated question, so I will try and keep it as short as possible.</p> <p>My use-case is building an RSS feed for a mobile website. The interface will be similar to Pulse reader only browser based.</p> <p>I am doing the heavy lifting with PHP for connecting to the XML API and pulling in the initial data on page load. I am trying to build an AJAX call with jQuery that will modify my URI query string on <code>click()</code> and pull in a fresh set of results and append them to my existing elements.</p> <p>My URI looks something like this:</p> <p><code>http://www.domain.com/request.php?subcategoryId=1&amp;page=1</code></p> <p>I am running a PHP <code>foreach()</code> loop to populate my page: </p> <pre><code>&lt;?php // Collect Subcategories and Titles foreach ($phpObjects-&gt;SubcategoryResult as $SubcategoryResult) { ?&gt; &lt;?php // Callback to subcategoryArticleRequest() to recieve article data $subcategoryObjects = subcategoryArticleRequest($SubcategoryResult-&gt;subcategoryId); ?&gt; &lt;div class="subcategory"&gt; &lt;h2&gt;&lt;?php echo $SubcategoryResult-&gt;subcategoryName; ?&gt;&lt;/h2&gt; &lt;div class="articleFeed overthrow"&gt; &lt;table&gt; &lt;tr&gt; &lt;?php foreach ($subcategoryObjects-&gt;articleResult as $articleResult) { ?&gt; &lt;td&gt; &lt;!-- ARTICLE CONTENT POPULATED HERE --&gt; &lt;/td&gt; &lt;?php } ?&gt; &lt;td data-subcategoryId="&lt;?php echo $SubcategoryResult-&gt;subcategoryId; ?&gt;" onClick="page++"&gt; &lt;a class="loadMore" href="#"&gt;Load More&lt;/a&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt;&lt;!-- .articleFeed --&gt; &lt;/div&gt; &lt;?php } ?&gt; </code></pre> <p>The main area of focus would be this element I am appending to the table after the foreach runs. I will be using this link to click and load more articles through AJAX (I have hard-coded <code>data-subcategoryId</code> here):</p> <pre><code>&lt;td data-subcategoryId="1"&gt; &lt;a class="loadMore" href="#"&gt;Load More&lt;/a&gt; &lt;/td&gt; </code></pre> <p>In essence when someone clicks this button, it will make an AJAX call and retrieve <code>&amp;page=2</code> and so on.</p> <p>Here's my JavaScript:</p> <pre><code>var page = 1; $('.loadMore').click(function() { page++; var subcategoryId = $(this).parent().attr('data-subcategoryId'); var url = 'http://www.domain.com/request.php?subcategoryId='+subcategoryId+'&amp;page='+page; console.log(url); }); </code></pre> <p>The issue I keep running into is that when I click on the <code>.loadMore</code> link, it will increment the <code>page</code> variable, but it will do it globally. If I try moving the <code>var page = 1;</code> inside the click function, it will only increment once to <code>2</code>.</p> <p>Once I get this function right, I can pass the <code>url</code> variable to my AJAX function for pulling in the fresh content.</p> <p>Ive set up a JSFiddle just in case, though it keeps showing subcategoryId as undefined:</p> <p><a href="http://jsfiddle.net/jd657/12/" rel="nofollow">JSFiddle</a></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