CODEWITHSUNDEEP
javascripthtml
Martin Matthew P.
Martin Matthew P.

Reputation: 23

How two mention two HTML files in javascript file

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

Upvotes: 2

Views: 117

Answers (1)

Pac0
Pac0

Reputation: 23174

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.

Upvotes: 1

Related Questions