1

In the web site pib.nic.in/newsite/erelease.aspx, the left-side links are getting opened in the same page -- an inconvenience in reading and switching to the next topic.

A function called Getrelease was passing on the unique id corresponding to the clicked item to fetch and show on the right-side column.

The relevant page, HTML snippet is:

<div class="leftrightdiv" id="lreleaseID">
    <ul class="link1">
        <li style="list-style:none;border-bottom: blue 1px dotted;color:blue;font-size:110%" class="rel">Prime Minister's Office</li>
        <!-- <li class="rel" style="border-bottom: teal 1px dotted;cursor:pointer" **onclick='Getrelease(94318)'** >PM's statement at the BRICS Leaders - Africa Dialogue Forum<span style='font-weight:lighter;color: ThreeDDarkShadow;'> ()</span></li>  -->
        <li onclick="Getrelease(94318)" style="border-bottom: teal 1px dotted;cursor:pointer" class="rel">PM's statement at the BRICS Leaders - Africa Dialogue Forum</li>
        <li style="list-style:none;border-bottom: blue 1px dotted;color:blue;font-size:110%" class="rel">Ministry of Finance</li>
        <!-- <li class="rel" style="border-bottom: teal 1px dotted;cursor:pointer" onclick='Getrelease(94339)' >Central Board of Excise and Customs (CBEC) Offices to Remain open on 29th, 30th & 31stmarch, 2013 ;<span style='font-weight:lighter;color: ThreeDDarkShadow;'> ()</span></li>  -->
        <li onclick="Getrelease(94339)" style="border-bottom: teal 1px dotted;cursor:pointer" class="rel">Central Board of Excise and Customs (CBEC) Offices to Remain open on 29th, 30th &amp; 31stmarch, 2013 ;</li>
        <!-- <li class="rel" style="border-bottom: teal 1px dotted;cursor:pointer" onclick='Getrelease(94338)' >India and Liechtenstein Sign Tax Information Exchange Agreement (TIEA)<span style='font-weight:lighter;color: ThreeDDarkShadow;'> ()</span></li>  -->
        <li onclick="Getrelease(94338)" style="border-bottom: teal 1px dotted;cursor:pointer" class="rel">India and Liechtenstein Sign Tax Information Exchange Agreement (TIEA)</li>
        <!-- <li class="rel" style="border-bottom: teal 1px dotted;cursor:pointer" onclick='Getrelease(94337)' >Government Committed to bring down the Current Account<span style='font-weight:lighter;color: ThreeDDarkShadow;'> ()</span></li>  -->
        <li onclick="Getrelease(94337)" style="border-bottom: teal 1px dotted;cursor:pointer" class="rel">Government Committed to bring down the Current Account</li>
    </ul>
    <br>
</div>


I wanted to change the above into the following code so that on clicking the item, it will open in a new page.

<div class="leftrightdiv" id="lreleaseID">
    <ul class="link1">
        <li style="list-style:none;border-bottom: blue 1px dotted;color:blue;font-size:110%" class="rel">Prime Minister's Office</li>
        <!-- <li class="rel" style="border-bottom: teal 1px dotted;cursor:pointer" onclick='Getrelease(94318)' >PM's statement at the BRICS Leaders - Africa Dialogue Forum<span style='font-weight:lighter;color: ThreeDDarkShadow;'> ()</span></li>  -->
        <li onclick="window.open('http://www.pib.nic.in/newsite/erelease.aspx?relid=94318')" style="border-bottom: teal 1px dotted;cursor:pointer" class="rel">PM's statement at the BRICS Leaders - Africa Dialogue Forum</li>
        <li style="list-style:none;border-bottom: blue 1px dotted;color:blue;font-size:110%" class="rel">Ministry of Finance</li>
        <!-- <li class="rel" style="border-bottom: teal 1px dotted;cursor:pointer" onclick='Getrelease(94339)' >Central Board of Excise and Customs (CBEC) Offices to Remain open on 29th, 30th & 31stmarch, 2013 ;<span style='font-weight:lighter;color: ThreeDDarkShadow;'> ()</span></li>  -->
        <li onclick="window.open('http://www.pib.nic.in/newsite/erelease.aspx?relid=94339')" style="border-bottom: teal 1px dotted;cursor:pointer" class="rel">Central Board of Excise and Customs (CBEC) Offices to Remain open on 29th, 30th &amp; 31stmarch, 2013 ;</li>
        <!-- <li class="rel" style="border-bottom: teal 1px dotted;cursor:pointer" onclick='Getrelease(94338)' >India and Liechtenstein Sign Tax Information Exchange Agreement (TIEA)<span style='font-weight:lighter;color: ThreeDDarkShadow;'> ()</span></li>  -->
        <li onclick="window.open('http://www.pib.nic.in/newsite/erelease.aspx?relid=94338')" style="border-bottom: teal 1px dotted;cursor:pointer" class="rel">India and Liechtenstein Sign Tax Information Exchange Agreement (TIEA)</li>
        <!-- <li class="rel" style="border-bottom: teal 1px dotted;cursor:pointer" onclick='Getrelease(94337)' >Government Committed to bring down the Current Account<span style='font-weight:lighter;color: ThreeDDarkShadow;'> ()</span></li>  -->
        <li onclick="window.open('http://www.pib.nic.in/newsite/erelease.aspx?relid=94337')" style="border-bottom: teal 1px dotted;cursor:pointer" class="rel">Government Committed to bring down the Current Account</li>
    </ul>
    <br>
</div>


So wrote this Greasemonkey script:

// ==UserScript==
// @name            Press Information Bureau
// @namespace       http://userscripts.org/scripts/show/163329
// @description     PIB new tab open
// @include         http://pib.nic.in*
// @require         http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// @version         2.4
// ==/UserScript==

function replaceOnclick() {

    var list = document.getElementById('lreleaseID');
    var lists = list.getelementsbytagname('li');

    for (i = 0; i < lists.length; i++) {
        var Str = lists[i].getAttribute("onclick");
        var seconds = Str.indexOf(')');
        var url = "http://www.pib.nic.in/newsite/erelease.aspx?relid=" + Str.substring(11, second);

        lists[i].setAttribute("onclick", "window.open('" + url + "')");
    }
}


The Greasemonkey script is getting injected. But its not making the expected changes in the output.
What is the mistake in the javascript usage? Kindly help me.

Brock Adams
  • 90,639
  • 22
  • 233
  • 295

1 Answers1

1

That script has multiple errors:

  1. It defines replaceOnclick() but never calls it. This is why you see no action and no errors in the error console (Ctrl Shift J).

  2. Invalid function name, getelementsbytagname, will then throw an error (exception). JavaScript is case-sensitive and the correct function is getElementsByTagName().

  3. Str is sometimes null, so var seconds=Str.indexOf(')'); will throw an exception and crash the script. One way to prevent this is to wrap its use in an if (Str) {...} statement.

  4. Likewise, seconds is sometimes null.

  5. This line:

    var url="http://www.pib.nic.in/newsite/erelease.aspx?relid="+Str.substring(11, second);
    

    uses the wrong name. second should be seconds.


Some more items that are not exactly errors, but that you should do differently...

  1. That site defaults to URL's like http://www.pib.nic.in/newsite/.... So you probably want to add an include line to account for that:

    // @include         http://www.pib.nic.in*
    
  2. The script references jQuery, but does not use it! Use jQuery and it will save you time and grief.

  3. The script does not specify a @grant directive. This can cause unexpected behavior and conflicts. Always specify at least one @grant line and don't use @grant none if you can avoid it.

  4. jQuery 1.3.2 is "Hella" obsolete. If you are going to use jQuery, use a more current version unless there is a compelling reason not to.


Use the items above to fix that script. Or here is what it looks like using jQuery:

// ==UserScript==
// @name            Press Information Bureau
// @namespace       http://userscripts.org/scripts/show/163329
// @description     PIB new tab open
// @include         http://pib.nic.in*
// @include         http://www.pib.nic.in*
// @require         http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @grant           GM_addStyle
// @version         2.4
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

//-- Use jQuery selector to get just the <li>s that have an onclick.
var articleLinks    = $("#lreleaseID li[onclick]");

//-- jQuery .each()
articleLinks.each ( function () {
    var jThis           = $(this);  // "this" is a special var inside .each()
    var onClickVal      = jThis.attr ("onclick");
    var articleMatch    = onClickVal.match (/Getrelease\s*\((\d+)\)/i);

    if (articleMatch  &&  articleMatch.length == 2) {
        var articleId   = articleMatch[1];
        var articleUrl  = "http://www.pib.nic.in/newsite/erelease.aspx?relid="
                        + articleId
                        ;

        jThis.attr ("onclick", "window.open('" + articleUrl + "')");
    }
} );
Brock Adams
  • 90,639
  • 22
  • 233
  • 295
  • thanks a lot Brock Adams. I will try to fix my js as you said. And am new to jQuery. The code that you have given works very much fine when the page http://www.pib.nic.in/newsite/erelease.aspx?relid=0 loads. But when i select the date, month, year to see the old archive on the left side top drop down, and click the link after that its not working – Ranjith Raj Mar 29 '13 at 08:01
  • I tried to figure out, After the drop down is changed the values are passed through WebForm_DoCallback function to fetch the new content. But unable to find a solution to fire the same jquery after it. i have asked for a help in the link http://stackoverflow.com/questions/15703056/firing-greasemonkey-script-after-ajax-loading for this. If you can solve, will be a great help. – Ranjith Raj Mar 29 '13 at 12:22