The Simile timeline is now blank in a WP/TNG integrated site

[Steve1200]

To see the errors, launch TNG and display the timeline page. In Firefox, right click on the page and select inspect element. A window will open on your screen at the top of that window select console. That will show you errors and warnings.

To see the bands, right click inside the timeline window and select inspect element. You will need to expand each div in the inspection window to see whats inside.

Chrome has the same capability for viewing pages. After looking at the errors a bit more I believe there's a good chance there is an error or conflict in one of the scripts on your site. This is probably why simile timeline cannot change state and show content.

If the original TNG and Simile timeline files have not been changed, it is probably a corrupt or conflicting script. There is one more file that if it is an older version or corrupted could cause issues. The file is timeline.js and is located in the TNG js folder. This file initializes the simile timeline.

When I'm trouble-shooting a problem like this I always disable the mods so I'm working with core code and not code modified by someone else. This is why I asked if you disabled all the mods.  Additionally have you tried one of the TNG templates yet?

I remember when I was working on the scroll page mod, I put a comma in the wrong place and my Simile timeline quit working. It took a while to find the error.

[Pops57]

Thanks Steve;

I appreciate your patience with me.

I had installed something called "Timeline Events Library". I saw it as an easy way, I thought, to get a lot of historical events loaded in to my timeline.  And the author of that was very helpful as well. It is not a mod but does provide a revised version of timeline2.php, as well as a css stylesheet change to place in mytngstyle css file. It also included an images folder to match up with the events in the library.

I have removed all those files and replaced them with the original timeline2.php, and reverted the mytngstyle css file to its original state.

I reinstalled the original timeline.php file, the timeline2.php file from the 12.2 upgrade, and I re-installed the original timeline.js file. I think all those files are now back to their original states,  as I made no changes to the files themselves. But, I admit I still could have made a mistake somewhere. 

I'm still where I was, with no events in the simile. I don't know if this matters, but the Timeline Chart settings in my Setup>>Configuration>>Chart Settings does not show all the options that I see when I look at the Simile Timeline Settings wikipage. There, 9 options are shown. In my settings page, there are only 4 options. I don't think this has anything to do with it, as others who have tried to help me with this issue say that they also only have 4 options but their Simile works. So, that's just fyi I suppose. 

I want to learn how to troubleshoot such issues, without always needing help. Is there a good program to use to check my files, like the timeline.js file you mention for example, for me to "test" for errors, corruption, or conflicts?

Many thanks!

-Mike

 

[Steve1200]

I doubt installing the Timeline Events Library caused an issue. Incorrect formatting might make the timeline bubbles look bad and bad links won't open but timeline will still display the item.

I wish there were programs that would tell me what's wrong! I can assure you trouble-shooting websites can be challenging. While all pages are essentially html there are many languages that are used to create the html code. I've bought books on php, pearl, bash, javascript, MySQL, Linux, Apache and nginx and still don't know squat. I've also run into cases where certain php modules were not enabled on a server that created a host of problems that were difficult to find.

Regarding timeline wiki, many of the settings you referred to were removed from the admin timeline setup page but they are still there. These settings can be manually adjusted by editing timelineconfig.php with an editor that does not use BOM (Byte Order Mark) formatting. Komodo IDE and Notepad++ are the two editors I use the most. The default settings in TNG v12.2 are:

    $band1_pct = "10%";
    $band1_interval = 150; //pixels
    $band1_multiple = 1;

    $band2_pct = "28%";
    $band2_interval = 50; //pixels
    $band2_multiple = 1;

    $band3_pct = "47%";
    $band3_interval = 175; //pixels
    $band3_multiple = 1;

    $band4_pct = "15%";
    $band4_interval = 150; //pixels
    $band4_multiple = 1;

These are formatting controls for timeline and would not cause blank timelines unless a semicolon is missing or the value is set to zero or something. Since you did not edit them and didn't know where they were I doubt this is the problem.

You mentioned earlier this was an upgrade. Was Simile timeline working in the prior TNG version?

It sounds like you've tried everything except installing a TNG template. So have you tried the template yet?

[Pops57]

Steve;

Sorry, yes I am using a TNG template. It is a new one, Template 207. But I've tried it with other TNG templates - Template 4, and 9.  Sorry I didn't answer that last time.

Thanks for the explanation on the Simile settings. I can put that one to bed now.

The upgrade I was referencing was the latest TNG version upgrade to 12.2. Unfortunately, I had not gotten around to Timeline or Simile until a couple of weeks ago as I've been working on other pieces of the site, as well as on research. So, I never even looked at timeline on earlier versions.

I downloaded something called Visual Studio Code and ran a debugger on timeline.js. I got an error saying "jquery is not defined at 1:1" . For what it's worth, that line looks like this:

1. jQuery(document).ready(init);
2. jQuery(window).resize(onResize);

I don't know if this is a good approach or not....

[Pops57]

Here's the entire error message:

ReferenceError: jQuery is not defined
    at Object.<anonymous> (c:\Users\mirej\Documents\Ellis of Elk Park website\tngfiles121-122\js\timeline.js:1:1)
    at Module._compile (internal/modules/cjs/loader.js:952:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
    at internal/main/run_main_module.js:17:11
 

[Steve1200]

I run websites from a server at home. So I installed a new TNG v12.2, imported a GEDCOM added some events and Simile timeline is working fine. There has to be some bad code or script that was changed or added somewhere along the line. Although timeline is quite sensitive, it does work when everything is correct. When I revisited your webpage I noticed all the errors involve XML. One way to get this error is to save a file with something other than UTF-8 character encoding.

Short of a fresh install I'm not sure what else to try. Maybe someone else can offer better ideas.

[Pops57]

Thanks Steve.

You've been wonderful and I really appreciate it!!

I'll check files for the UTF-8 issue and then if that doesn't work, I will try a fresh install.

Thanks again for all your time and effort. You went above and beyond.

Hopefully I can return the favor later on.

-Mike

[Steve1200]

Thank you, but I didn't find a good solution for you. There are plenty of people on here that have helped me as well. Sorry I could not pinpoint the issue.

-Steve