Need to register javascript function in code behind then call it

Question

I've got a function that scrolls to an anchor:

function scrollToAnchor(aid) {
    var aTag = $("a[name='" + aid + "']");
    if (aTag.length) {
        $('html,body').animate({
            scrollTop: aTag.offset().top - 100
        }, 'slow');
        aTag.closest('.subpanel').effect("highlight", 5000);
    }
}

HTML

<a id="A2" class="gridLabel" name="Add Action Item">
    <span id="MainContent_Label19" title="Add / Edit an action item.">Add / Edit Action Item</span>
</a>

I have to call a server side event that performs some sort of action. Once the action is completed I need to call this scrollToAnchor. I tried this:

ScriptManager.RegisterClientScriptBlock(this, GetType(), "OpenActions", "$(function(){ 
 function scrollToAnchor(aid) { var aTag = $('a[name=''' + aid + ''']');if (aTag.length) 
{$('html,body').animate({ scrollTop: aTag.offset().top - 100 }, 
'slow');aTag.closest('.subpanel').effect('highlight', 5000);}} $('#tblAction').show(); 
scrollToAnchor('Add Action Item');});", true);

However I get errors in the console probably because of my ' ' and " ". Can someone help form this for me.

I also tried:

ScriptManager.RegisterClientScriptBlock(this, GetType(), "OpenActions", "$(function()
{function scrollToAnchor(aid) { var aTag = $('a[name=\"' + aid + '\"]' + ']');if 
(aTag.length) {$('html,body').animate({ scrollTop: aTag.offset().top - 100 }, 
'slow');aTag.closest('.subpanel').effect('highlight', 5000);}} $('#tblAction').show(); 
scrollToAnchor('Add Action Item');});", true);

Care to share the errors from your `console`? – Xotic750 Feb 11 '14 at 14:13 — Xotic750, Feb 11 '14 at 14:13

score 1 · Accepted Answer · answered Feb 11 '14 at 14:11

1

The issue seems to be here:

'a[name=''' + aid + ''']'

Try replacing that with:

'a[name=' + aid + ']'

Or if you need quotes in the value of name:

'a[name=\'' + aid + '\']'
// Or
'a[name=\"' + aid + '\"]'

answered Feb 11 '14 at 14:11

Cerbrus

65,559
18
128
140

This is almost working but here's the error i get: Uncaught Error: Syntax error, unrecognized expression: a[name=Add Action Item]] – JonH Feb 11 '14 at 14:21
@JonH: Then you'll need to use one of the last 2 examples. – Cerbrus Feb 11 '14 at 14:23
Now Im getting Uncaught SyntaxError: Unexpected string with the first example of the third example you posted. Here is my code: `ScriptManager.RegisterClientScriptBlock(this, GetType(), "OpenActions", "$(function(){function scrollToAnchor(aid) { var aTag = $('a[name=\'' + aid + '\']' + ']');if (aTag.length) {$('html,body').animate({ scrollTop: aTag.offset().top - 100 }, 'slow');aTag.closest('.subpanel').effect('highlight', 5000);}} $('#tblAction').show(); scrollToAnchor('Add Action Item');});", true);` – JonH Feb 11 '14 at 14:27
And if I use the last example I get this `Uncaught Error: Syntax error, unrecognized expression: a[name="Add Action Item"]] ` – JonH Feb 11 '14 at 14:29
1

@JonH You have 2 closing brackets now: [...Item"]] – fast Feb 11 '14 at 15:15

score 1 · Answer 2 · answered Feb 11 '14 at 14:13

1

What I'd do is put the function on the page (or in a js file loaded by the page) and then simply register a script like so:

    ScriptManager.RegisterClientScriptBlock(this, GetType(), 
"OpenActions", "scrollToAnchor('Add Action Item');", true);

From what I can tell, you don't need to register the entire script on each server side event. You just need to run the function with a given argument.

answered Feb 11 '14 at 14:13

mikey

4,968
3
22
27

I tried that but the scrolling doesnt appear to work, no errors though. – JonH Feb 11 '14 at 14:17
What does the tag look like (the one you're trying to scroll to), if you "View Source" from the browser? If your function doesn't find the tag, I don't think it would throw an error. – mikey Feb 11 '14 at 14:19
mikey looks like this ` Add / Edit Action Item ` – JonH Feb 11 '14 at 14:24
what happens if you do this: ... if (aTag.length) { alert('found it'); $('html,body').animate({ ... does the alert fire? Apologies to those who know of a better way to debug javascript than inserting alert tags, please let me know and I'll start doing that ASAP! ;) – mikey Feb 11 '14 at 15:17
I think the spaces in the name are what's killing you, see http://stackoverflow.com/questions/6802765/jquery-dealing-with-a-space-in-the-id-attribute – mikey Feb 11 '14 at 15:38

score -1 · Answer 3 · answered Feb 11 '14 at 14:13

Prefix your string with @, like so

 ScriptManager.RegisterClientScriptBlock(this, GetType(), "OpenActions", @"$(function(){ 
 function scrollToAnchor(aid) { var aTag = $('a[name=' + aid + ']');if (aTag.length) 
{$('html,body').animate({ scrollTop: aTag.offset().top - 100 }, 
'slow');aTag.closest('.subpanel').effect('highlight', 5000);}} $('#tblAction').show(); 
scrollToAnchor('Add Action Item');});", true);

Need to register javascript function in code behind then call it

3 Answers3