Jquery append and a javascript links

Question

I am generating links from json files on the client side.

loadSubjects = function() {
  return importData("themen", function() {
    var i, _i, _ref, _results;
    _results = [];
    for (i = _i = 0, _ref = data.themen.themen.length - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; i = 0 <= _ref ? ++_i : --_i) {
      $("#subjectBtns").append('<a href="javascript:generateSubjectOverview("' + data["themen"]["themen"][i]["dateiName"] + '");" class="btn btn-mghg">' + data["themen"]["themen"][i]["name"] + '</a>');
      console.log('appending: ' + '<a href="javascript:generateSubjectOverview("' + data["themen"]["themen"][i]["dateiName"] + '");" class="btn btn-mghg">' + data["themen"]["themen"][i]["name"] + '</a>');
      _results.push(false);
    }
    return _results;
  });
};

I also tired onlick instead of href, but that also didnt work. I am getting the error: Uncaught SyntaxError: Unexpected end of input

The javascript code looks somewhat messy, but that is, because it´s generated by coffeescript.

the function importData is just a short hand for $.getJSON with the path and the callback

You can't return results from an AJAX callback. The callback function runs asynchronously when the server responds. — Barmar
– Barmar, Commented Jul 27, 2014 at 11:53
@Barmar: I think the return there is to return the jqXHR object (or possibly another promise of some kind). Ben is passing in a callback. (Hmmmm... But then, why return _results; at the end of the callback? Maybe importData does something with that.) — T.J. Crowder
– T.J. Crowder, Commented Jul 27, 2014 at 11:59
he said importData is just shorthand for $.getJSON. Unless it's wrapping the callback in another function that does something with the return value, it won't be used. — Barmar
– Barmar, Commented Jul 27, 2014 at 12:02
@Barmar: Sometimes people say "shorthand" even when doing a small thing differently. Ben's the only one who can really answer, but is clearly aware of the need for callbacks. — T.J. Crowder
– T.J. Crowder, Commented Jul 27, 2014 at 12:06
return _results; is just because i am writing in coffeesctipt. it always return the last thing in a codeblock — Ben
– Ben, Commented Jul 27, 2014 at 17:13

T.J. Crowder · Accepted Answer · 2014-07-27 11:57:19Z

2

To call a function when the link is clicked, use the click event rather than trying to generate JavaScript source with the arguments in it to put on the href:

$("#subjectBtns").append(
    $('<a href="javascript:;" class="btn btn-mghg"></a>')
        .click(generateSubjectOverview.bind(null, data["themen"]["themen"][i]["dateiName"]))
        .append(data["themen"]["themen"][i]["name"])
);

This bit:

generateSubjectOverview.bind(null, data["themen"]["themen"][i]["dateiName"])

...looks up the value from the data object and binds that value to generateSubjectOverview, setting up a click handler to call the resulting bound function. The result is the same, but you don't make an unnecessary round-trip through JavaScript source code, so this works not just for strings and numbers, but any kind of argument you may want to pass.

Note: Function#bind is an ES5 feature. If you still need to support really old browsers (IE8, for instance), it can be shimmed. Search for "Function bind shim" to find options.

edited Jul 27, 2014 at 11:57

answered Jul 27, 2014 at 11:50

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

2 Comments

Ben Over a year ago

what does the null in .click(generateSubjectOverview.bind(null, data["themen"]["themen"][i]["dateiName"])) do?

T.J. Crowder Over a year ago

@Ben: The first argument to Function#bind determines what this will be when the original function is called: In loose mode, if it's undefined or null, the original function is called with this equal to the global object (window, on browsers). (In strict mode, the value is used as-is.) Any other arguments you give bind are passed on to the called function. So in loose mode, if you do var bound = foo.bind(null, 1, 2); and then you do bound('a', 'b', 'c');, foo gets called with this being the global object and the arguments 1, 2, 'a', 'b', 'c'.

Khalid · Accepted Answer · 2014-07-27 11:50:09Z

1

You have a problem with ' and ". change this

 $("#subjectBtns").append('<a href="javascript:generateSubjectOverview("' + data["themen"]["themen"][i]["dateiName"] + '");" class="btn btn-mghg">' + data["themen"]["themen"][i]["name"] + '</a>');

to this

 $("#subjectBtns").append('<a href="javascript:generateSubjectOverview(\"' + data["themen"]["themen"][i]["dateiName"] + '\");" class="btn btn-mghg">' + data["themen"]["themen"][i]["name"] + '</a>');

answered Jul 27, 2014 at 11:50

Khalid

4,8285 gold badges29 silver badges50 bronze badges

2 Comments

Ben Over a year ago

what do those slashes do?

Khalid Over a year ago

the slashes allow to show the char " inside a string which is between " String "

Collectives™ on Stack Overflow

Jquery append and a javascript links

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related