How two mention two HTML files in javascript file

Question

in these lines of code #result is a link to a div's id for a different HTML file than I'm using in a function before in my JS file.

Anyone knows how can I make it work and this JS function will append to an empty div id="result" I have in different HTML?

function getDetails() {
    window.close();
    var parentEl = $(this).parents('[data-book-id]'); // <-- index.html
    var bookAuthor = parentEl.find('[data-book-author-input]').val(); // <-- index.html
    var bookTitle = parentEl.find('[data-book-title-input]').val(); // <-- index.html
    var bookYearOfPublication = parentEl.find('[data-book-year-input]').val(); // <-- index.html

    var search = bookAuthor + bookTitle + bookYearOfPublication;
    if(search == "")
    {
      alert("Please enter something in the field");
    }
    else{
      window.open('http://localhost:8081/details');
      var url = "";
      var img = "";
      var title = "";
      var author = "";

      $.get("https://www.googleapis.com/books/v1/volumes?q=" + search, function(response){

        for(i=0;i<response.items.length;i++)
        {
          title=$('<h5 class="center-align white-text">' + response.items[i].volumeInfo.title + '</h5>');
          author=$('<h5 class="center-align white-text"> By:' + response.items[i].volumeInfo.authors + '</h5>');
          img = $('<img class="aligning card z-depth-5" id="dynamic"><br><a href=' + response.items[i].volumeInfo.infoLink + '><button id="imagebutton" class="btn red aligning">Read More</button></a>');
          url= response.items[i].volumeInfo.imageLinks.thumbnail;
          img.attr('src', url);
            title.appendTo('#result'); // <-- details.html
          author.appendTo('#result'); // <-- details.html
          img.appendTo('#result'); // <-- details.html
        }
      });
    }
    return false;
  }

With the local storage:

function getDetails() { 
var parentEl = $(this).parents('[data-book-id]'); var book = parentEl.find('[data-book-author-input]').val() + parentEl.find('[data-book-title-input]').val() + parentEl.find('[data-book-year-input]').val(); window.open('localhost:8081/details'); window.localStorage.setItem('book', JSON.stringify(book)); } // <-- index.html      

booksContainer.on('click', '[data-book-details-button]', getDetails); // <-- index.html 

 function setDetails() {

    var search = window.localStorage.getItem('book');

    if(search == "")
    {
      alert("The value from API is null");
    }
    else{
      var url = "";
      var img = "";
      var title = "";
      var author = "";

      $.get("https://www.googleapis.com/books/v1/volumes?q=" + search, function(response){

        for(i=0;i<response.items.length;i++)
        {
          title=$('<h5 class="center-align white-text">' + response.items[i].volumeInfo.title + '</h5>');
          author=$('<h5 class="center-align white-text"> By:' + response.items[i].volumeInfo.authors + '</h5>');
          img = $('<img class="aligning card z-depth-5" id="dynamic"><br><a href=' + response.items[i].volumeInfo.infoLink + '><button id="imagebutton" class="btn red aligning">Read More</button></a>');
          url= response.items[i].volumeInfo.imageLinks.thumbnail;
          img.attr('src', url);
            title.appendTo('#result');
          author.appendTo('#result');
          img.appendTo('#result');
          window.localStorage.clear();
        }
      });
    }
    return false;
  } // <-- details.html

  $('[search-details-button]').on('click', setDetails); // <-- details.html

import this script in the various HTML files where you want it to be used. (as a separate .js file, instead of writing directly the javascript code in the html file) — Pac0
– Pac0, Commented Jul 27, 2020 at 13:35
Thanks! I already had a separate js. I just pointed out in the code above where I use which html file. — Martin Matthew P.
– Martin Matthew P., Commented Jul 27, 2020 at 13:41

Pac0 · Accepted Answer · 2020-07-27 21:07:52Z

If you apply some modification with a script, everything is "forgotten" when you navigate to another page.

To keep shared data, some solution could be:

Use a framework

Like Angular, React or Vue.js (IMHO the most popular ones currently).

If you are starting to do complex things with shared data across pages, I'd urge you to start learning some of the advanced webapp frameworks out there, they are made to solve this exact problem, among many other things.

However, this is not something very fast to directly apply, they all have their learning curve. As a beginner you can sometimes be a bit puzzled on different new concepts.

Basically, what they do is create there own system of "pages" in one actual true web page, so from the browser's point of view, you never actually navigate away and you build some components that shows up when you need them, allowing you to share data between them.

Of course, you may want an easier solution for now. What I can think of is the following:

Use localStorage

This is not my favourite solutions, there are some limitations, but this could solve your issue quickly.

First, when you get your result, store this "shared data" on the browser's localstorage.
Second, use a JavaScript function that checks if there is something on the local storage when page is loaded, and if it is the case then do the addition you need.
You may need to experiment, for instance: when do you want it to be cleared? etc..

Some random blog posts that can show you how this works:

You can have a look at some blog post and another one to show you some usage example.

There are other solutions, maybe someone will post some here as well.

@MartinMatthewP. glad to help! Please upvote and/or accept answers that are useful ;) .
Ok, I'll do both but If you're good in frontend can you also help me solve why this code I posted above doesn't work? Sorry, I don't have much experience (barely any) in HTML & js. I added the edited version above.
what does "doesn't work" mean? You have an error? If you look at the Javascript console in the browser, is there any message?
I see that you "clear" the localStorage at each iteration. Clear means remove everything. So, you are never saving anything in there.
Okay, I shifted "clear" to the line before "return false;" and everything works now! Thanks a lot!

Collectives™ on Stack Overflow

How two mention two HTML files in javascript file

1 Answer 1

Use a framework

Use localStorage

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Use a framework

Use localStorage

5 Comments

Related