0

Is it possible to have two links in same HTML tag, the first link should be the main link. But if that source is not present, I want it to show another html. And I don't want it to open in a a new tab.

    <div id="side_bar">
        <ul>
            <li onclick="window.location.href='season_ranking.html'">Season</li>
            <li onclick="window.location.href='day01.html'">Day 01</li>
            <li onclick="window.location.href='day02.html'">Day 02</li>
            <li onclick="window.location.href='day03.html'">Day 03</li>
            <li onclick="window.location.href='day04.html'">Day 04</li>
            <li onclick="window.location.href='day05.html'">Day 05</li>
            <li onclick="window.location.href='day06.html'">Day 06</li>
            <li onclick="window.location.href='day07.html'">Day 07</li>
            <li onclick="window.location.href='day08.html'">Day 08</li>
            <li onclick="window.location.href='day09.html'">Day 09</li>
            <li onclick="window.location.href='day10.html'">Day 10</li>
            <li onclick="window.location.href='day11.html'">Day 11</li>
            <li onclick="window.location.href='day12.html'">Day 12</li>
            <li onclick="window.location.href='day13.html'">Day 13</li>
            <li onclick="window.location.href='day14.html'">Day 14</li>
            <li onclick="window.location.href='day15.html'">Day 15</li>
            <li onclick="window.location.href='day16.html'">Day 16</li>
            <li onclick="window.location.href='day17.html'">Day 17</li>
            <li onclick="window.location.href='day18.html'">Day 18</li>
            <li onclick="window.location.href='day19.html'">Day 19</li>
            <li onclick="window.location.href='day20.html'">Day 20</li>
            <li onclick="window.location.href='day21.html'">Day 21</li>
            <li onclick="window.location.href='day22.html'">Day 22</li>
            <li onclick="window.location.href='day23.html'">Day 23</li>
            <li onclick="window.location.href='day24.html'">Day 24</li>
            <li onclick="window.location.href='day25.html'">Day 25</li>
            <li onclick="window.location.href='day26.html'">Day 26</li>
            <li onclick="window.location.href='day27.html'">Day 27</li>
            <li onclick="window.location.href='day28.html'">Day 28</li>
        </ul>
    </div>
Ullas
  • 11
  • 3
  • can you post your code? – asdru Sep 11 '20 at 12:03
  • 1
    Not directly, afaik. You'd need some asynchronous call that if returned "bad" - call it on second (and if "bad" - than what?). Simple `two links` does not exist. – iAmOren Sep 11 '20 at 12:04
  • You could open in another tab (i know - you don't want to - hide it?), wait a while, check it's content (cross-domain issues might arise), and if it's not there - activate second link (again - what if it's "not there"?). – iAmOren Sep 11 '20 at 12:06
  • @iAmOren We're conducting a 28 day match. Data for first first 4 days is available, but on our website, options for 28 days is displayed. So if someone click link for other days I want to re-direct to a common website showing "Data Not Available." I hope u understand what I want. – Ullas Sep 11 '20 at 13:18
  • Could you 'ping' the first to see if it's OK, as @iAmOren suggests? Something like is done in [link](https://stackoverflow.com/questions/18898268/javascript-how-to-catch-error-on-page-navigated-to-using-window-location-href) – A Haworth Sep 11 '20 at 13:35
  • Well, change the link for days 5 through 28(?) or disable it altogether... A green filled circle next to the first four with live link, and a red/yellow next to the others with link disabled. – iAmOren Sep 11 '20 at 13:49
  • @iAmOren It would have been possible if it was a dynamic website. All Html from Day 1 to Day 28 have a sidebar to select the these html. So if I was to take your idea, each day I would've have to manually type in the links. – Ullas Sep 11 '20 at 18:38
  • use javascript. after page loads, go through sidebar links, skip the first 4, disable the rest (+ add info bubble "not available yet"). you can set the default not found page on your server to check what was the sender page, and give an appropriate response. – iAmOren Sep 11 '20 at 19:29
  • @iAmOren Can you provide the code for that? I'm pretty noob in js. – Ullas Sep 12 '20 at 11:11
  • Ullas, can you provide the code for the sidebar? JavaScript and HTML, please. – iAmOren Sep 12 '20 at 12:03
  • @iAmOren I've added to the question. – Ullas Sep 12 '20 at 14:07
  • Add this either in `window.onload` or in `` AFTER `side_bar`: `var listItems=document.getElementById("side_bar").children[0].children; for(var i=5; i – iAmOren Sep 12 '20 at 14:30
  • Can you show me the JavaScript code that creates the sidebar? - You CAN edit it, right? – iAmOren Sep 12 '20 at 14:31
  • @iAmOren Actually I prevent using javascript if not needed. So sidebar is not created using Javascript. FYI this is the website 'www.ultimumpilaeleague.rf.gd'. – Ullas Sep 12 '20 at 18:47
  • JavaScript can make your life easier. If you don't want JavaScript - why did you tag the question with JavaScript? You are manually coding all the pages? - Then manually set the target pages... After all this, back to your question: No way to double-target a link without using JavaScript + Ajax (I'm not familiar with it) or some other library - see @AHaworth's comment. If you want to use JavaScript to construct your pages - I can help. Nice site, by the way! – iAmOren Sep 12 '20 at 19:03
  • @iAmOren I asked this question when I was planning the website and decided to use js. When I saw this was taking longer than expected, I manually coded all pages. Thanks for you time though. But If I were to use js, what would be the code? And, Thanks for your feedback on my site. – Ullas Sep 13 '20 at 17:28
  • I'd use a JavaScript file - `data.js` - and keep all the data there. Another file for the code - `function`s - `functions.js`. I'd load both into the pages and let the functions display the data. I'd update `data.js` as needed, and after `functions.js` is working - there will be no need to update it. Of course, your nice css as well - should be in `style.css` or something like that. – iAmOren Sep 13 '20 at 17:45
  • I don't know how you collect the data, but when I did something similar, I've used a spreadsheet, and then exported it. Eventually, I used google sheets so others can update the data. That's a whole other headache... :) – iAmOren Sep 13 '20 at 17:47
  • @iAmOren I use MS Excel. I enter data there and do a little trick to automatically add tags for the table. Also I didn't know I could use js to save datas. – Ullas Sep 16 '20 at 17:06
  • Use the excel "trick" to add link depending on row: 1st to season, 2-5 to days 1-4 (or, however many), and the rest to unavailable! JS to save data - well, there are filereaders, etc., but, what I meant was something similar to what you are doing with excel, but instead of html, js arrays/objects/variables. – iAmOren Sep 16 '20 at 17:56
  • @iAmOren I didn't understand anything. Do you have a Youtube channel or anything? – Ullas Sep 17 '20 at 15:40
  • YouTube - for what? Excel: A2:John, B2:Smith, D2:=""&A2&""&"&B2&"". Something like that? – iAmOren Sep 17 '20 at 19:14
  • I think you are going to need some Javascript for this whatever the method adopted is. Could you explain why you don't want to use Javascript. Given you are already using Javascript (there is some in every li element) could we not add more? – A Haworth Sep 18 '20 at 18:08
  • @iAmOren I asked if u have a youtube channel. And yes, I use this method in excel. – Ullas Sep 19 '20 at 17:43
  • @AHaworth I could use ur method. But the problem is... I would have to manually edit this everyday. – Ullas Sep 19 '20 at 17:45
  • Not sure what the 'this' is that you'd have to manually edit - whatever is creating your next file, say day05.html, would just replace the one that had the redirection in it. – A Haworth Sep 19 '20 at 18:22
  • I have a YouTube channel - why? Excel: add a column `link page available` and in the formula that creates the `` tag - if link available = same as you have now, if not = set it to `unavailable.html` or something like that. – iAmOren Sep 19 '20 at 20:46
  • I have put up a second method which requires a small Javascript function but otherwise more closely matches what you require. Let me know if it works for you. – A Haworth Sep 19 '20 at 21:25

1 Answers1

0

Clarification of the problem in the comments says:

We're conducting a 28 day match. Data for first first 4 days is available, but on our website, options for 28 days is displayed. So if someone click link for other days I want to re-direct to a common website showing "Data Not Available."

There is also a desire not to use JavaScript.

Having thought about various ways to detect whether a file (e.g. day05.html) actually exists, which seems complex, I suggest the easiest way is to make all the files exist. The ones that are related to days for which data is not yet available each have in them just this line:

<script>window.location="the URL of the common website";</script>

This is the simplest possible solution I think and it doesn't require any complex JS, one line in each of the files will suffice.

EDIT: The method above was not accepted so here is another method which works, but does require a Javascript function. As the original question's code already contained some Javascript (using window.onload...) it is already assuming that Javascript is available so that is not a constraint.

What we do here is change each list element's onclick event handling so that they call a function which checks that the relevant file exists and if it doesn't then it goes to the default file (which will have some suitable message in it).

change every li to replace the window.location.href with a call to function goto

<li onclick="window.location.href='day01.html'">Day 01</li>

becomes

<li onclick="goto('day01.html');">Day 01</li>

and add this code somewhere suitable

<script>
//goes to url if it exists or to a default url if not
function goto(url) {
  var http = new XMLHttpRequest(); 
  http.open('HEAD', url, false); 
  http.send();
  if (http.status != 200) {url="PUT YOUR DEFAULT FILENAME IN HERE";}
  window.location=url;
}
</script>

NOTE: this is not the most modern way of checking for a file's existence, it works but it is deprecated in favour of an asynchronous method. You will see something like this in your dev tools console log:

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/

However, for this simple use case a synchronous method is easy to understand I find so I have used it here as the question wanted to avoid JS if possible - so, JS is not avoided but only a few lines of code.

A Haworth
  • 30,908
  • 4
  • 11
  • 14