Databases
StackOverflow2013
Postsdbo
POHow to show content based on url parameter via JavaScript?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to show content based on url parameter via JavaScript?
    primarykey
    data
    text
    <p><strong>[Update] code I have edited</strong></p> <p>First, the plain HTML :</p> <pre><code>&lt;ul&gt; &lt;li&gt;&lt;a href="javascript_accord.php/option/coke/"&gt;coke&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript_accord.php/option/bubble-tea/"&gt;buble-tea&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript_accord.php/option/milk/"&gt;milk&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>Second, link page (javascript_accord.php) contain javascript:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="development-bundle/jquery-1.3.2.js"&gt;&lt;/script&gt; &lt;script language="javascript"&gt; $(document).ready(function() { var option = 'coke'; var url = window.location.pathname.split('/'); option = url[3]; showDiv(option); }); function showDiv(option) { $('.boxes').hide(); $('#' + option).show(); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="boxes" id="coke"&gt;Coke is awesome!&lt;/div&gt; &lt;div class="boxes" id="bubble-tea"&gt;Bubble tea is da bomb!&lt;/div&gt; &lt;div class="boxes" id="milk"&gt;Milk is healthy!&lt;/div&gt; &lt;p&gt; I change my mind: &lt;ul&gt; &lt;li&gt;&lt;a href="javascript:showDiv('coke')"&gt;Coke&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:showDiv('bubble-tea')"&gt;Bubble Tea&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:showDiv('milk')"&gt;Milk&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/p&gt; &lt;a href="http://localhost/selectaccord.php"&gt;Back to main page&lt;/a&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <hr> <p>I found some tutorial about 'show/hide' content based on URL parameter via JavaScript. But I stuck when I change a part of the JavaScript code. </p> <p>Here are the code that I learned from the tutorial. First page contain some links to other page: </p> <pre><code>If you had to choose a drink, what would you choose: &lt;a href="/demo/demo-show-hide-based-on-url.html?option=coke" &lt;a href="/demo/demo-show-hide-based-on-url.html?option=bubble-tea" &lt;a href="/demo/demo-show-hide-based-on-url.html?option=milk </code></pre> <p>And here is the code contain in linking page (<code>/demo/demo-show-hide-based-on-url.html</code>) :</p> <pre><code>&lt;div class="boxes" id="coke"&gt;Coke is awesome!&lt;/div&gt; &lt;div class="boxes" id="bubble-tea"&gt;Bubble tea is da bomb!&lt;/div&gt; &lt;div class="boxes" id="milk"&gt;Milk is healthy!&lt;/div&gt; &lt;p&gt; I change my mind: &lt;ul&gt; &lt;li&gt;&lt;a href="javascript:showDiv('coke')"&gt;Coke&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:showDiv('bubble-tea')"&gt;Bubble Tea&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:showDiv('milk')"&gt;Milk&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/p&gt; &lt;a href="/demo/demo.html"&gt;Back to main page&lt;/a&gt; </code></pre> <p>And the javascript : </p> <pre><code>&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function() { var option = 'coke'; var url = window.location.href; option = url.match(/option=(.*)/)[1]; showDiv(option); }); function showDiv(option) { $('.boxes').hide(); $('#' + option).show(); } &lt;/script&gt; </code></pre> <p>It works greatly, but when I try to change the link page from</p> <pre><code>href="/demo/demo-show-hide-based-on-url.html?option=coke" </code></pre> <p>into something like this :</p> <pre><code>href="/demo/demo-show-hide-based-on-url.html/option/coke" </code></pre> <p>And change the url variable in javascript from</p> <pre><code>var url = window.location.href; option = url.match(/option=(.*)/)[1]; </code></pre> <p>to</p> <pre><code>var url = window.location.pathname.split('/'); option = url[3]; </code></pre> <p>And all content in</p> <pre><code>&lt;div class="boxes" id="..."&gt; </code></pre> <p>appear.</p> <p>It supposed to be only selected one will appear. I have tried </p> <pre><code>var url = window.location.pathname.split('/'); option = url[3]; </code></pre> <p>in simple JavaScript to check whether it will catch the right or value or not. And it does return the right value (coke, milk, bubble-tea).</p> <p>So, what went wrong? I hope somebody understand this problem and help.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USPiTheNumber
    1. USTania Rida
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to show content based on url parameter via JavaScript?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow to show content based on url parameter via JavaScript?
      1. USChris Ford
      1. VTFavorite
    1. COdo you see some error in javascript console on page load? can you share your code? you can use jsfiddle.net
      singulars
      1. POHow to show content based on url parameter via JavaScript?
      1. USNakul
    2. CO@Nakul I'm not sure how to use jsfiddle.net but here is the code http://jsfiddle.net/WLTSd/1/
      singulars
      1. POHow to show content based on url parameter via JavaScript?
      1. USTania Rida
    3. COcan you paste the full url that you see on link(javascript) page?
      singulars
      1. POHow to show content based on url parameter via JavaScript?
      1. USYogesh
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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