Simple javascript onclick not firing function - syntax checked via jsfiddle and firebug

Question

I'm calling a utility called Highslide in a javascript function. Embedding the whole thing in the link like this works fine:

<a href="http://localhost/theopscompany-local/test-page-1/" onclick = "return hs.htmlExpand(this, { 
            objectType: 'ajax', width: 400, 
            headingEval: 'this.a.title', wrapperClassName: 'titlebar' }     )">highslide test link1</a>

However, placing said code in a function and calling it via onclick like below doesn't work. I've put it through jsfiddle and Firebug for syntax and all looks fine, but it just doesn't fire the Highslide code for some reason. The linked page is loaded normally instead.

<a href="http://localhost/theopscompany-local/test-page-1/" onclick = "highslideview2();">highslide test link2</a>
<script type="text/javascript">
function highslideview2() {
    return hs.htmlExpand(this, { 
        objectType: 'ajax', 
        headingEval: 'this.a.title', wrapperClassName: 'titlebar' });}
</script>

I know this is likely a very simple thing, so I apologize if it's below the level of the usual question, but I'm stumped and can't see why this doesn't work. The purpose is to a)clean up the HTML links and b) let me call different Highslide configurations for different types of links, so it's important enough to pursue.

Thanks in advance for any help!

Emissary · Accepted Answer · 2012-03-22 09:45:37Z

1

The return value is now the result of the code executed within highslideview2() and not the function run when the onclick handler is fired. Adding the return back into the inline onclick attribute should fix it.

<a href="http://localhost/theopscompany-local/test-page-1/" onclick = "return highslideview2(this)">highslide test link2</a>
<script type="text/javascript">
function highslideview2(e) {
    return hs.htmlExpand(e, { 
        objectType: 'ajax', 
        headingEval: 'e.a.title', wrapperClassName: 'titlebar' });}
</script>

edited Mar 22, 2012 at 9:45

answered Mar 19, 2012 at 22:10

Emissary

10.1k9 gold badges56 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dains Over a year ago

No joy Emissary :( I'm wondering if the function should still be referencing "this" when in a script, or do I need to pass the link to it instead for it to work?

Emissary Over a year ago

@Dains - You're correct, sorry I missed that in haste (obviously I can't test the code) - you can give your new function a parameter though and pass this to it. I've updated the code above.

Emissary Over a year ago

I also edited headingEval - I'm not sure what exactly is happening with this code and whether that needed changing.

Dains Over a year ago

Woohoo works perfectly Emissary! Thank you for the help. Re the utility, it's an all-in-one JS windowizer you can find at highslide.com if you'd like to check it out. Aside from my ignorance in how to activate it properly, it's saving a lot of custom JS programming for the UI features I need.

Bigandrewgold · Accepted Answer · 2012-03-18 20:44:40Z

0

Try this

<a href="http://localhost/theopscompany-local/test-page-1/" onclick = "highslideview2()">highslide test link2</a>
<script type="text/javascript">
function highslideview2() {
    return hs.htmlExpand(this, { 
        objectType: 'ajax', 
        headingEval: 'this.a.title', wrapperClassName: 'titlebar' });}
</script>

answered Mar 18, 2012 at 20:44

Bigandrewgold

8353 gold badges13 silver badges20 bronze badges

Collectives™ on Stack Overflow

Simple javascript onclick not firing function - syntax checked via jsfiddle and firebug

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related