CODEWITHSUNDEEP
jquery
evavienna
evavienna

Reputation: 1109

Initializing initialized jQuery Function again after button click

Trying to initialize a initialized function again to reload my timeline (jquery.timline) events. Unfortunatley it does not work. Any idea how to fix the following?

    <script>
    
    var timelinefunction;
    
    $(document).ready(function() {  
    
        timelinefunction = function () {
                
            var defaultOpts = { 
            
                // "bar" or "point"
                  type            : "bar"
                  
            }   
                            
            $("#TestTimeline").Timeline(defaultOpts);
                
        };      

        timelinefunction(); // Execute function     


        // $(document).on("click", "#modal-edit-top-submit-btn", function () { // DONT WORK
        $("#modal-edit-top-submit-btn").click(function() {
            // $('#TestTimeline').Timeline('destroy')
            $('#TestTimeline').empty();
            timelinefunction();
        });
    
    });

</script>

Upvotes: 1

Views: 168

Answers (1)

Patrick Hume
Patrick Hume

Reputation: 2214

I think this should be what you want (note seems to work better in jsfiddle, seems to take too long to properly load in SO) : https://jsfiddle.net/PatrickHume/ckp7vgos/1/

you don't need the add/hide or $("#myTimeline").Timeline('reload'... they are just there to prove it still works properly after removing and reinitializing the timeline

let timelinefunction;
let timeline = null
let defaultOpts = {
  // "bar" or "point"
  type: "bar"
}
$(function() {
  timeline = null;
  timelinefunction = function() {
    $("#myTimeline").Timeline(defaultOpts)
    //For demo purposes to show timeline events still work
    $("#myTimeline")
      .Timeline('reload', defaultOpts, (elm, opts, usrdata) => {
        console.log(usrdata.msg)
      }, {
        msg: 'For demo purposes to show timeline events still work'
      })
  };
  timelinefunction(); // Execute function     
  timeline = $("#container").html()
  $("#remove").click(function() {
    $('#myTimeline').Timeline('destroy')
    $('#container').empty()
  });
  $("#add").click(function() {
    $("#container").html(timeline)
    timelinefunction()
  })

  $("#hide").click(function() {
    //For demo purposes to show timeline events still work
    $('#myTimeline').Timeline('hide')
    console.log('For demo purposes to show timeline events still work')
  });
  $("#show").click(function() {
    //For demo purposes to show timeline events still work
    $('#myTimeline').Timeline('show')
    console.log('For demo purposes to show timeline events still work')
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/ka215/jquery.timeline@main/dist/jquery.timeline.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/ka215/jquery.timeline@main/dist/jquery.timeline.min.js"></script>
<div id="container">
  <div id="myTimeline">
    <ul class="timeline-events">
      <li data-timeline-node="{ start:'2019-02-26 10:00',end:'2019-02-26 13:00',content:'<p>Event Body...</p>' }">Event Label</li>
      <li data-timeline-node="{ start:'2019-03-01 23:10',end:'2019-03-02 1:30' }">
        <span class="event-label">Event Label</span>
        <span class="event-content">
          <p>Event Body...</p>
        </span>
      </li>
    </ul>
  </div>
  <!-- Timeline Event Detail View Area (optional) -->
  <div class="timeline-event-view"></div>
</div>
<button id="remove">
  Remove
</button>
<button id="add">
  Re Add
</button>
<button id="hide">
  hide Add
</button>
<button id="show">
  show Add
</button>

I hope this helps

Upvotes: 1

Related Questions