rendering anchor href with json2html

Question

I am trying to render an anchor with json2html with the following transform:

'renderTimeline':[  {
    tag: "a",  
    class: "btn btn-warning btn-circle", 
    style: "float: right;", 
    html: "<i class=\"icon-remove\"></i>",
    "href": function() {
        var myhref = "javascript:delSchedule(" + this + ");";
        return myhref;
    }
}]

intention is to delete the json object,which is passed to it with :

$('#sunTimeLine').json2html(sched1.sunday, transforms.renderTimeline, {'events':true});

I get the following as o/p on the rendered html:

<a class="btn btn-warning btn-circle" style="float: right;" href="javascript:delSchedule([object Object]);"><i class="icon-remove"></i></a>

when i click on the link(button) i get a message in browser console:

SyntaxError: missing ] after element list

Please help me solve this issue.

is there any other way to do this? may be on onclick event? a botton will also do instead of a link. — pacific ray, Dec 16 '14 at 10:49

score 0 · Answer 1 · answered Dec 16 '14 at 10:23

0

Assuming you are trying to pass the reference of the clicked element to the delSchedule function, you need to change your href definition like this:

"href": function() {
    var myhref = "javascript:delSchedule(this);"; // note 'this' is part of the string, not concatenated
    return myhref;
}

answered Dec 16 '14 at 10:23

Rory McCrossan

331,213
40
305
339

1

no errors. console displays: Empty string passed to getElementById(). – pacific ray Dec 16 '14 at 11:03

score 0 · Answer 2 · answered Dec 16 '14 at 10:25

0

{
  tag: "a",  
  class: "btn btn-warning btn-circle", 
  style: "float: right;", 
  html: "<i class=\"icon-remove\"></i>",
  "href": function() {
      var myhref = "javascript:delSchedule(this);";
      return myhref;
    }
}

answered Dec 16 '14 at 10:25

TwilightTitus

190
1
9

does not work, i guess since "this" is not being passed as an object. – pacific ray Dec 16 '14 at 10:32

score 0 · Answer 3 · answered Dec 16 '14 at 20:37

0

check the documentation for more examples but you should be using the built in jquery events like so

'renderTimeline':[  {
tag: "a",  
class: "btn btn-warning btn-circle", 
style: "float: right;", 
html: "<i class=\"icon-remove\"></i>",
"onclick": function(e) {
    delSchedule(this);
}}
}]

Note that json2html supports most jquery events by just adding the prefix "on" to the event .. eg onclick, onfocus, etc...

answered Dec 16 '14 at 20:37

Chad Brown

1,627
1
13
22

"this" returns the button node inside the delSchedule() function. confirmed by console.log() inside delSchedule() function. What I need is the json piece passed to this transform; and is being rendered by this transform. – pacific ray Dec 17 '14 at 09:14
then use e.obj .. more info at json2html.com => Attributes => jquery => Event Attributes – Chad Brown Dec 17 '14 at 23:59

pacific ray · Accepted Answer · 2014-12-18T07:13:14.130

Following code solved my issue:

'renderTimeline':[  {
    tag: "a",  
    class: "btn btn-warning btn-circle", 
    style: "float: right;", 
    html: "<i class=\"icon-remove\"></i>",
    "onclick": function(e) {
       delSchedule(e);
   }}
}]

If I am passing the following json :

{ monday:[ { startTime:10:00, endTime: 12:00, room_id:cse124 }, { startTime:13:00, endTime: 15:00, room_id:lotus } ] }

I want to be able to access "monday" in the function delSchedule(). How do i do this? Please help.

rendering anchor href with json2html

4 Answers4