Doesn't work (events are not clickable) #28

AntonFix · 2018-12-11T15:27:06Z

Hello,

I use:

Google Chrome
Default libraries from examples

But timeline work not correct.

In console have no errors.

Example: https://vvt.maxmg.com/assets/uploads/timeline

ka215 · 2018-12-12T06:41:40Z

Hi there,
Warning in the plugin was occurred as below "Can not parse to object therefor invalid param.".
This warn is occurred when miss syntax of "data-event-node" attribute in tag that markupped events.
I found that as follow:

<li data-timeline-node="{ start:'2017-5-29 16:03',end:'2017-5-29 19:05',row:3,bgColor:'#a1d8e6',color:'#008db7',extend:{toggle:'popover',placement:'top',content:'It is also possible to bind external custom events.'} }">Show popover via bootstrap</li>
<li data-timeline-node="{ start:'2017-5-28 23:00',end:'2017-5-29 5:15',row:3,extend:{'post_id':13,'permalink':'https://www.google.com/'} }">Event having extended params</li>

This fix to valid markup:

<li data-timeline-node="{ start:'2017-5-29 16:03',end:'2017-5-29 19:05',row:3,bgColor:'#a1d8e6',color:'#008db7',extend:'{toggle:\'popover\',placement:\'top\',content:\'It is also possible to bind external custom events.\'}' }">Show popover via bootstrap</li>
<li data-timeline-node="{ start:'2017-5-28 23:00',end:'2017-5-29 5:15',row:3,extend:'{\'post_id\':13,\'permalink\':\'https://www.google.com/\'}' }">Event having extended params</li>

Please try it.

Thank you,

ka215 · 2018-12-12T07:23:22Z

Also I fixed a bug that does not open event detail when clicked event on the timeline. Then I released the hotfixed as version 2.0.0-alpha-3.

Thank you,

AntonFix · 2018-12-12T09:19:35Z

Thank you very much for answer.

I've updated CSS+JS and HTML-markup. Events stay not clickable. How to fix it?
Check here https://vvt.maxmg.com/assets/uploads/timeline/

Thank you for a good script!

AntonFix · 2018-12-12T10:35:43Z

Bootstrap modal window and tooltip doesn't work too.

ka215 · 2018-12-13T05:52:17Z

It was invalid markupped event yet in your html.
In the property named extend, that does not need the prefix of "data-".

<li data-timeline-node="{ start:'2019-05-17 14:00',end:'2019-05-17 15:30',row:2,bgColor:'#a1d8e6',color:'#008db7',extend:'{data-toggle:\'tooltip\',data-placement:\'top\',title:\'It is also possible to bind external custom events.\'}',label:'test label' }">Show tooltip via bootstrap</li>

Please try to re-markup as follow:

<li data-timeline-node="{ start:'2019-05-17 14:00',end:'2019-05-17 15:30',row:2,bgColor:'#a1d8e6',color:'#008db7',extend:'{toggle:\'tooltip\',placement:\'top\',title:\'It is also possible to bind external custom events.\'}',label:'test label' }">Show tooltip via bootstrap</li>

best regards,

AntonFix · 2018-12-13T07:40:07Z

Yes, i use same code. Don't work, check, please: http://vvt.maxmg.com/assets/uploads/timeline/
I have 1 item.

AntonFix · 2018-12-13T08:48:53Z

Do you have 1 work example with modal window, please?

ka215 · 2018-12-13T09:29:21Z

Sorry, I mistake had distributed zip file of v2.0.0a2.

I rebuilt the distribution version 2.0.0-alpha-3.
Please download latest version once more from here.

And example for relating to bootstrap's modal is as follow:

<!-- Define event -->
<li data-timeline-node="{start:'2018-12-13 00:00:00',end:'2018-12-13 23:59:59',extend:'{toggle:\'modal\',target:\'#myModal\'}'}"><h3 class="event-label">Bootstrap Modal</h3><p class="event-content">text text text text text...</p></li>

...

<!-- Markup modal element -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="jqtl-event-view"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

and scripts...

$(function(){

$('#my-timeline').Timeline();

});

Please try it.

AntonFix · 2018-12-13T10:27:21Z

Thank you very much for help!

Do you have PayPal? I want to buy coffee for you.

ka215 · 2018-12-14T02:30:11Z

As you have solved issue and I'm happy too.

I'm glad to you will make a contribution to plugin development from the following page.

https://ka215.github.io/jquery.timeline/donation.html

Thank you,

AntonFix · 2018-12-19T08:11:55Z

Do you have work example for:

Bootstrap 4 Popover/Tooltip
When i click on event i can't to see details of events. I mean this code:

`

  <div class="card mb-3">
    <div class"card-block">
      <h5><i class="fa fa-cog"></i> Timeline Configuration</h5>
      <div class="card-text">
        <!-- configuration content -->
      </div>
    </div>
  </div>
  <!-- /.card -->
</div>
<!-- /.col -->
<div class="col-lg-12 col-md-12">

  <div class="card mb-3">
    <div class="card-block timeline-event-view">
      <p class="h1">Timeline Event Detail</p>
      <p class="lead">Please click on any event on the above timeline.</p>
    </div>
  </div>
  <!-- /.card -->
</div>`

How to fix it?

ka215 · 2018-12-20T10:01:23Z

Hi there,

The example markup for working the bootstrap 4 popover/tooltip, and for showing detail of event when clicking on event is as follow:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Test of jQuery.Timeline</title>
  <!-- Bootstrap 4.1.3 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <!-- jQuery.Timeline (Latest 2.0.0a3) -->
  <link rel="stylesheet" href="https://ka215.github.io/jquery.timeline/css/jquery.timeline.min.css">
</head>
<body>
<div class="container-fluid">
  <section class="row">
    <div class="col-12">
    
        <div id="my-timeline">
          <ul class="timeline-events">
            <li data-timeline-node="{start:'2018-12-19 00:00:00',end:'2018-12-19 11:59:59'}"><strong class="event-label">Event Label</strong><p class="event-content">Event Body</p></li>
            <li data-timeline-node="{start:'2018-12-20 12:34:56',end:'2018-12-20 14:32:10',row:2,label:'Event Label in Attribute',content:'Event Boby in Attribute',extend:'{toggle:\'popover\'}'}"></li>
            <li data-timeline-node="{start:'2018-12-21 00:00:00',end:'2018-12-24 23:59:59',row:4,extend:'{toggle:\'modal\',target:\'#myModal\'}'}"><h4 class="event-label">Bootstrap Modal Example</h4><p class="event-content">Event Content</p></li>
            <li data-timeline-node="{start:'2018-12-01 00:00:00',end:'2018-12-9 23:59:59',row:5,callback:'$(\'#myModal\').modal()'}"><h4 class="event-label">Bootstrap Modal Example 2</h4><p class="event-content">Event Content 2</p></li>
            <li data-timeline-node="{start:'2018-11-28 5:48',end:'2018-12-21 6:37',row:6,extend:'{toggle:\'tooltip\'}'}"><div class="event-content">Start date of this event is out of range.</div></li>
            <li data-timeline-node="{start:'2018-12-24 13:05',end:'2019-1-2 16:27',row:7,image:'imgs/thumb_014.png',rangeMeta:'Custom Meta Content',extend:'{toggle:\'popover\'}'}"><span class="event-label">Add Image Event</span><span class="event-content">example of inserting image.</span></li>
          </ul>
        </div>
        
    </div><!-- /.col-12 -->
    <div class="col-12">
      
      <div class="card mb-3">
        <div class="card-block">
          <h5><i class="fa fa-eye"></i> Timeline Event Detail</h5>
          <div class="card-text">
            <div class="timeline-event-view"></div>
          </div>
        </div>
      </div><!-- /.card -->
      
    </div><!-- /.col-12 -->
  </section><!-- /.row -->
</div><!-- /.container-fluid -->

<div class="modal fade" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="jqtl-event-view"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div><!-- /.modal -->

<!-- REQUIRED SCRIPTS -->
<!-- jQuery (latest 3.3.1) -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- Popper.js for popover and tooltip -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<!-- Bootstrap 4.1.3 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- jQuery.Timeline (Latest 2.0.0a3) -->
<script src="https://ka215.github.io/jquery.timeline/js/jquery.timeline.min.js"></script>
<!-- inline scripts -->
<script>
$(function () {

var timeline_options = {
    type          : 'bar',
    startDatetime : '2018-12-1 0:00',
    scale         : 'day',
    minGridSize   : 24 * 2,
    headline      : {
        display   : true,
        title     : 'jQuery Timeline Ver.2.0.0-alpha-3',
        range     : true,
    },
    rows          : 10,
    ruler         : {
        top    : {
            lines      : [ 'year', 'month', 'day', 'weekday' ],
            height     : 26,
            fontSize   : 13,
            color      : '#777',
            background : '#FFF',
        },
        bottom : {
            lines      : [ 'week', 'year' ],
        }
    },
    rangeAlign      : 'latest'
};

$('#my-timeline').Timeline( timeline_options )
.popover({
    placement: 'auto',
    selector: '[data-toggle="popover"]',
    trigger: 'click'
})
.tooltip({
    selector: '[data-toggle="tooltip"]',
    html: true
});

});
</script>
</body>
</html>

Note: in order to apply popover and tooltip to events on the timeline you should specify the selector option.

Thank you,

AntonFix closed this as completed Jun 8, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Doesn't work (events are not clickable) #28

Doesn't work (events are not clickable) #28

AntonFix commented Dec 11, 2018

ka215 commented Dec 12, 2018

ka215 commented Dec 12, 2018

AntonFix commented Dec 12, 2018

AntonFix commented Dec 12, 2018

ka215 commented Dec 13, 2018

AntonFix commented Dec 13, 2018

AntonFix commented Dec 13, 2018

ka215 commented Dec 13, 2018

AntonFix commented Dec 13, 2018

ka215 commented Dec 14, 2018

AntonFix commented Dec 19, 2018

ka215 commented Dec 20, 2018

Doesn't work (events are not clickable) #28

Doesn't work (events are not clickable) #28

Comments

AntonFix commented Dec 11, 2018

ka215 commented Dec 12, 2018

ka215 commented Dec 12, 2018

AntonFix commented Dec 12, 2018

AntonFix commented Dec 12, 2018

ka215 commented Dec 13, 2018

AntonFix commented Dec 13, 2018

AntonFix commented Dec 13, 2018

ka215 commented Dec 13, 2018

AntonFix commented Dec 13, 2018

ka215 commented Dec 14, 2018

AntonFix commented Dec 19, 2018

ka215 commented Dec 20, 2018