How to execute function stored as a string without eval()

Question

Let me preface this question by saying there may be a completely different solution than my title so let me tell you what I am after entirely.

Basically I have a series of menu links. The href in all the links are storing jQuery functions, not URL's (to control turn.js book script). So one of the href's may look like so:

<li id="menu-item-68" class="home menu-item menu-item-type-custom menu-item-object-custom menu-item-68">
  <a href="$('#primary').turn(‘page’,1);"></a>
</li>

The request is simple...on click() of a menu item i need to execute the contents of the href. My first thought was to run through each link and store a temp string of the href and then use eval() but that looks to be a bad option from what I read.

So, how can I execute the contents of my href quickly and safely?

Well it depends. Is the content of href coming from you or is it user provided? Because if you have control over the content, eval might not be a bad choice. — websymphony, Mar 13 '12 at 12:39
`Let me preface this question by saying there may be a completely different solution than my title so let me tell you what I am after entirely.` Then it's a poor title. It also does not need tags in it. — Lightness Races in Orbit, Mar 13 '12 at 12:40
I added a link that Wordpress generates. Note that Wordpress adds 'http://' before everything so using jQuery I have purposely eliminated that from every href. — Jared Eitnier, Mar 13 '12 at 12:43

tkone · Answer 1 · 2012-03-13T12:47:30.613

2

There are a few solutions here. You might want to look into using something like Backbone which provides something called routers that would aid you in navigation.

Or to hack up something similar, set each of your href tags to point to a new # anchor:

<a href="#2">next page</a>

and then attach a listener to the hashchange event. When the event fires, the user has clicked on the link. Then access the hash window.location.hash and use that as the argument to a function which does what you need it to do.

$(window).on('hashchange', function(event){
    $('#primary').turn('page', window.location.hash.slice(1));
}

The slice is there since window.location.hash includes the # character.

EDIT

I notice you updated saying you use wordpress and you're editing out the http:// part of your URLs. If you're using the hashchange event you don't need to since href="#2" is the same as href="http://mysite.post.com/this_post/#2"

edited Mar 13 '12 at 12:47

answered Mar 13 '12 at 12:39

tkone

22,092
5
54
78

I should mention that `hashchange` has some browser support caveats, so you might have to do something to handle that. If you Google it, you'll see what I mean. Also, if you're unconcerned with later browsers, you can always look into the history navigation API... – tkone Mar 13 '12 at 12:44
This doesn't appear to be doing anything in Firefox. – Jared Eitnier Mar 13 '12 at 13:13
Unfortunately I couldn't keep trying this method because I had to hack apart the menu anyway and do something different. The below solution worked in my new scenario. Thank you for the help though, never knew about the `hashchange()` function, looks pretty neat. – Jared Eitnier Mar 13 '12 at 13:36

score 1 · Accepted Answer · edited Mar 13 '12 at 14:52

1

How about use the onclick event?

<a onclick="function(){$('#primary').turn('page', 2); return false;}" href="#">Click me!</a>

Alternately, since you're using JQuery, you could .bind() the event:

<script>
    $('a.clickable').bind('click', function(e){
         var pageNum = $(this).attr('data-page');
         $(#primary).turn('page', pageNum);
         return false;
    });
</script>
<body>
   <a class='clickable' data-page='2' href='#'>Click me!</a>

Alternately, since you only have access to the href attribute, you COULD do this, which is the easy way out:

 <a href="javascript:$('#primary').turn('page', 2)">Click me!</a>

edited Mar 13 '12 at 14:52

Jared Eitnier

7,012
12
68
123

answered Mar 13 '12 at 12:41

Chris Sobolewski

12,819
12
63
96

This looks great, except I can't add attributes to my link since it's Wordpress doing the work. I mean - I COULD but I don't want to hack about the core. – Jared Eitnier Mar 13 '12 at 12:46
And of course trying that (which yes I thought of :) ) Wordpress does not like and completely removes it before saving the link! So, I will probably be using this method anyway since I found another big unrelated flaw in the menu. I need to create a somewhat static menu now and this should do it, I'll let you know shortly. – Jared Eitnier Mar 13 '12 at 13:21
This works great! I edited your `.bind()` example though, since the href is a hash and you added a custom attribute the code technically doesn't work. – Jared Eitnier Mar 13 '12 at 13:34

score 0 · Answer 3 · answered Mar 13 '12 at 12:38

0

Can't you simply simulate a click event on the links in that case? In other words, if you already have jquery loaded $("a#identifier").click(). In your current scenario that seems to be the easiest way.

answered Mar 13 '12 at 12:38

David Mulder

26,123
9
51
114

If you trigger the link by jQuery, the code inside href attribute will not be executed. – Simon Edström Mar 13 '12 at 12:41

score 0 · Answer 4 · answered Mar 13 '12 at 12:40

0

I've a similar issue and solved it like this:

In your script, define a function like:

$.fn.DoSomething=function (MyOption){ window.alert(MyOption); };

And in your link href call the function like javascript:$.fn.DoSomething('Hello');

answered Mar 13 '12 at 12:40

P3tro

139
1
3
9

How to execute function stored as a string without eval()

4 Answers4

Linked