How to programmatically change the Url based on a query string in Url

Question

GridView generated into a table:

<table id="ctl00_centerContent_GridView1">
        <tr>
            <th scope="col">
                <!-- COLUMN INFORMATION -->
            </th>
        </tr>
        <tr>
            <td style="font-weight:bold;"><a href="icard.aspx?cid=34&amp;cpid=345&amp;ccid=908">Insurance 1</a></td> <!-- link color by default is blue and turns orange on hover -->
            <td align="center">&nbsp;</td>
            <td align="center">Y</td>
            <td>908 as ave</td>
            <td align="center">N</td>
            <td align="center">N</td>
            <td align="center">Y</td>
            <td>Electronic</td>
            <td style="white-space:nowrap;">090-093-2311</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td style="font-weight:bold;"><a href="icard.aspx?cid=34&amp;cpid=345&amp;ccid=542">Insurance 2</a></td>
            <td align="center">&nbsp;</td>
            <td align="center">Y</td>
            <td>908 as ave</td>
            <td align="center">N</td>
            <td align="center">N</td>
            <td align="center">Y</td>
            <td>Electronic</td>
            <td style="white-space:nowrap;">090-093-2311</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td style="font-weight:bold;"><a href="icard.aspx?cid=34&amp;cpid=345&amp;ccid=587">Insurance 3</a></td>
            <td align="center">&nbsp;</td>
            <td align="center">Y</td>
            <td>908 as ave</td>
            <td align="center">N</td>
            <td align="center">N</td>
            <td align="center">Y</td>
            <td>Electronic</td>
            <td style="white-space:nowrap;">090-093-2311</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td style="font-weight:bold;"><a href="icard.aspx?cid=34&amp;cpid=345&amp;ccid=125">Insurance 4</a></td>
            <td align="center">&nbsp;</td>
            <td align="center">Y</td>
            <td>908 as ave</td>
            <td align="center">N</td>
            <td align="center">N</td>
            <td align="center">Y</td>
            <td>Electronic</td>
            <td style="white-space:nowrap;">090-093-2311</td>
            <td>&nbsp;</td>
        </tr>
</table>

How can I add a JQuery script which takes the url from each row and checks the ccid value and if it is either a 542 or 587, then the link shouldn't be linked to anywhere and the font color should be black and the cursor should be default (arrow).

For example for the second row, <a href="icard.aspx?cid=34&cpid=345&ccid=542">Insurance 2</a> should be <a href="javascript:void(0);" style="color: #000; cursor: default;">Insurance 2</a>

Script (Started to write but need some help):

$("#ctl00_centerContent_GridView1 tr td").each(function() {
    var url = $(this).attr("href");
    var cid = getParameterByName('ccid');
    /* HOW CAN I REPLACE THE URL OF THE ANCHOR to "javascript:void(0);" IF "cid" is 542 or 587? */
    $(this).closest('a').css('color', 'black'); //will this work?
    $(this).closest('a').css('cursor', 'default'); //will this work?
});

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

How can I replace the Url of the anchor to Javascript:void(0); if cid is 542 or 587.
How can I change the text color to black and the cursor to default arrow.

Jamiec · Accepted Answer · 2015-09-03 07:54:20Z

You can set an attribute using .attr (There's also no need for 2 calls to .css):

$(this).closest('a')
       .attr('href','javascript:void(0)')
       .css({color:'black',cursor:'default'});

Your code needs a few changes to do what you want, because currently its looking for the ccid variable in the url of the current page - not the url in the href attribute.

First off, change your each to be looking only at the a elements:

$("#ctl00_centerContent_GridView1 tr td a").each(function() {
----------------------------------------^ here

Next, change your getParameterByName to take the url and the parameter you're looking for:

function getParameterByName(url, name) {
    console.log(url)
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(url);
    return results ? decodeURIComponent(results[1].replace(/\+/g, " ")) : "";
}

Finally, change your code to only perform the action originally specified in this answer if the ccid matches your requirement (note the removal of closest('a') as we're now only looking at a elements):

$("#ctl00_centerContent_GridView1 tr td a").each(function() {
    var url = $(this).attr("href");
    var cid = getParameterByName(url, 'ccid');
    if (cid == "542" || cid == "587"){
        $(this)
            .attr('href','javascript:void(0)')
            .css({color:'black',cursor:'default'});
    }
});

Live example below.

$("#ctl00_centerContent_GridView1 tr td a").each(function() {
    var url = $(this).attr("href");
    var cid = getParameterByName(url, 'ccid');
    if (cid == "542" || cid == "587"){
        $(this)
       		.attr('href','javascript:void(0)')
       		.css({color:'black',cursor:'default'});
    }
});

function getParameterByName(url, name) {
    console.log(url)
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(url);
    return results ? decodeURIComponent(results[1].replace(/\+/g, " ")) : "";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="ctl00_centerContent_GridView1">
        <tr>
            <th scope="col">
                <!-- COLUMN INFORMATION -->
            </th>
        </tr>
        <tr>
            <td style="font-weight:bold;"><a href="icard.aspx?cid=34&amp;cpid=345&amp;ccid=908">Insurance 1</a></td> <!-- link color by default is blue and turns orange on hover -->
            <td align="center">&nbsp;</td>
            <td align="center">Y</td>
            <td>908 as ave</td>
            <td align="center">N</td>
            <td align="center">N</td>
            <td align="center">Y</td>
            <td>Electronic</td>
            <td style="white-space:nowrap;">090-093-2311</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td style="font-weight:bold;"><a href="icard.aspx?cid=34&amp;cpid=345&amp;ccid=542">Insurance 2</a></td>
            <td align="center">&nbsp;</td>
            <td align="center">Y</td>
            <td>908 as ave</td>
            <td align="center">N</td>
            <td align="center">N</td>
            <td align="center">Y</td>
            <td>Electronic</td>
            <td style="white-space:nowrap;">090-093-2311</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td style="font-weight:bold;"><a href="icard.aspx?cid=34&amp;cpid=345&amp;ccid=587">Insurance 3</a></td>
            <td align="center">&nbsp;</td>
            <td align="center">Y</td>
            <td>908 as ave</td>
            <td align="center">N</td>
            <td align="center">N</td>
            <td align="center">Y</td>
            <td>Electronic</td>
            <td style="white-space:nowrap;">090-093-2311</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td style="font-weight:bold;"><a href="icard.aspx?cid=34&amp;cpid=345&amp;ccid=125">Insurance 4</a></td>
            <td align="center">&nbsp;</td>
            <td align="center">Y</td>
            <td>908 as ave</td>
            <td align="center">N</td>
            <td align="center">N</td>
            <td align="center">Y</td>
            <td>Electronic</td>
            <td style="white-space:nowrap;">090-093-2311</td>
            <td>&nbsp;</td>
        </tr>
</table>

Well, yes and no. Your cid variable is being read from the current url of the page not the url in the href of that row. You need to change getParameterByName to look in the href of the link in that row and then what you suggest would work.
There was a 0 missing from javascript:void(0) in all my examples.

Andrei · Accepted Answer · 2015-09-02 16:25:12Z

Let's go in steps.

Iteration should be over a elements, as you do not have any irrelevant anchors, so good selector would be

#ctl00_centerContent_GridView1 tr td a

To extract value of ccid something like that should work:

var ccidValue = getParameterByName($(this).attr("href"), "ccid");

Make sure to update getParameterByName to accept url parameter instead of working with current page url all the time:

function getParameterByName(url, name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(url);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

Then check for the value to be "542" or "587", and do replace:

if (ccidValue === "542" || ccidValue === "587") {
    $(this).attr("href", "javascript:void(0);")
}

And if you want some styles applied, I really recommend defining a class and using it instead of some inline scripting:

disabledCardLink {cursor: default; color: black;}

$(this).addClass("disabledCardLink");

Gregg Duncan · Accepted Answer · 2015-09-02 16:34:32Z

1

Try this:

$(function(){
    $('a[href*="ccid=542"]', 'a[href*="ccid=587"]').each(function(){
        DisableLink($(this));
    });
});

function DisableLink(elem){
    elem.parent().html('<a href="javascript:void(0);" style="color: #000;cursor: default;">' + elem.text() + '</a>');
}

Using the jquery 'Contains' selector to select all anchors that contain the ccids you looking for and passing each element to a method that replaces the html of its parent td element with the modified anchor tag.

answered Sep 2, 2015 at 16:34

Gregg Duncan

2,7251 gold badge17 silver badges20 bronze badges

2 Comments

Jamiec Over a year ago

Just a small note - the selector should be $('a[href*="ccid=542"], a[href*="ccid=587"]') otherwise it'll look for one within the other.

Gregg Duncan Over a year ago

You are correct. I always do that wrong until I debug the problem.

Collectives™ on Stack Overflow

How to programmatically change the Url based on a query string in Url

3 Answers 3

7 Comments

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

2 Comments

Related