Replacing the onclick parameters for a link in a cloned table row

Question

I have a button in a table that is cloning the current row and then clearing some of the values (which works without issue). However, one of the cells has a link that has an onclick event with some parameters

<td class="srcbtn"><a class="grid_button" onclick="functionName('#MyLiteral', 'STUDY=ABC&SURID=3&SID=ABC01&LANG=en-US&RID=4e60fd3d-1ab4-e711-80ec-0050568a179a');"><img src="imgsrc.png" alt="img" style="border-width:0px;"></a></td>

I'm able to grab the button

if ($(this).hasClass( "srcbtn" ) ) {
   var btn = $(this).find('.grid_button')[0];
   console.log(btn);
}

Which gives:

<a class="grid_button" onclick="functionName('#MyLiteral', 'STUDY=ABC&SURID=3&SID=ABC01&LANG=en-US&RID=4e60fd3d-1ab4-e711-80ec-0050568a179a');"><img src="imgsrc.png" alt="img" style="border-width:0px;"></a>

What I need to do however is either remove one of the parameters in the onclick or even just change the parameter name, but the other parameters need to be remain. The function itself creates an iframe in a Literal control and builds the URL with the parameters, the function and parameter name is created dynamically from some database values, so I can't just clear and recreate it.

In this case, the &RID=4e60fd3d-1ab4-e711-80ec-0050568a179a needs to either be stripped out or even just replace the &RID= to &XRID= or similar so the code further along doesn't see a RID parameter passed.

I thought I could use .replace('&RID=', '&XRID=') but get an error that replace is not a function. So then I tried .text thinking I could use the replace on the text, but the text returns blank.

It'd be helpful if someone could show me how to modify the text of the onclick.

thanks

Answer 1

It will be much better for you to use so called " live " events from jQuery and HTML5 data- attributes. In this case your HTML code may look something like this:

<td class="srcbtn"><a class="grid_button" data-target="#MyLiteral" data-study="ABC" data-surid="3" data-sid="ABC01" data-lang="en-US" data-rid="4e60fd3d-1ab4-e711-80ec-0050568a179a"><img src="imgsrc.png" alt="img" style="border-width:0px;"></a></td>

and then into your script you may use something like:

$('table').on('click', '.grid_button', function (ev) {
    ev.preventDefault();
    var $e = $(this);
    functionName($e.data('target'), $.param({
        STUDY: $e.data('study'),
        SURID: $e.data('surid'),
        SID: $e.data('sid'),
        LANG: $e.data('lang'),
        RID: $e.data('rid')
    }))
});