How to display the search result and load the content of another webpage through xhr request

Question

0.00/5 (No votes)

See more:

I have a page where I want to load the search results when user inputs keywords in the input field. I've a search button when clicked on search button an search-body div appears In the search-body there's an Input field and user inputs the keywords to search and now after the user inputs the keywords I want to display the search results through extracting the keywords and Perform an xhr request to this url "https://[REDACTED]/ajax/movie/search?keyword=" and in the place of the keyword={input-keywordoftheinputfield} and through xhr request the contents should be loaded inside

HTML

<div id="block-result"></div>

also after making the request the content of "https://[REDACTED]/ajax/movie/search?keyword=" this page should be loaded without including the header and body, like this is

HTML

<body> 
<!--rest content-->
</body>

and after body there's rest of its content like other div section etc all the contents should be loaded all things but just without including the body header and html. Here's the Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  
<link rel="stylesheet" href="https://[REDACTED]/css/group_1/theme_4/styles.min.css?v=0.6">
</head>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Neucha&display=swap');


*{
    margin: 0;
    padding: 0;
    font-family: 'Neucha', cursive;
}
html,body {
    background: rgb(248, 246, 246);
}
.srch{
    display: flex;
    justify-content: center;
    margin: 16px;
}
#sch{
    font-size: 22px;
    border-radius: 15px;
    width: 5em;
    font-weight: bold;
    color: black;
    background-color: rgb(121, 106, 95);
}
</style>

<body>
    <div class="srch">
        <button id="sch">Search</button>
    </div>

    <div id="search-body" style="display: none;">
        <div class="close-overlay" title="Close" id="close-button"></div>
        <div class="search-body-wrap xscroll">
            <div class="b-container">
                <div id="block-input">
                    <form class="search-content" id="search-form" action="/search">
                        <input autofocus="" autocomplete="off" name="keyword" required="" type="text" class="form-control search-input s-keyword" id="inpt" placeholder="Enter keywords...">
                        <div class="is-icon">^__i class="fas fa-search"></div>
                    </form>
                </div>
                <div class="loading-wrap text-center p-5" id="search-loading" style="display: none;">
                    <div class="d-flex justify-content-center">
                        <div class="spinner-border" role="status">
                            Loading...
                        </div>
                    </div>
                </div>
                <div id="block-result"></div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            let searchBody = document.getElementById("search-body");
            let closeButton = document.getElementById("close-button");
            let searchButton = document.getElementById("sch");

            searchButton.addEventListener("click", function () {
                searchBody.style.backgroundColor = "black";
                searchBody.style.display = "block";

            });
    
            closeButton.addEventListener("click", function () {
                searchBody.style.display = "none";
            });
        });
        
    </script>
    <script>
        let inputField = document.getElementById('inpt');
        let searchLoading = document.getElementById('search-loading');

       function checkInputValue() {
        // Check if the input field is not empty
        if (inputField.value.trim() !== '') {
            // Display the search loading element
            searchLoading.style.display = 'block';
        } else {
            searchLoading.style.display = 'none';
        }
        }

        // Check input value when the page loads and on every input change
        document.addEventListener('DOMContentLoaded', checkInputValue);
        inputField.addEventListener('input', checkInputValue);
    </script>
</body>
</html>

What I have tried:

I searched for it alot but couldn't find exact solution for this and I am not that familiar with xhr request thing and js although I can manage a bit to survive with js only a bit. So, anyone with the help would be very appreciated and Thank You.

Posted 8-Aug-23 6:49am

Nischal Shar

Updated 8-Aug-23 23:19pm

Richard Deeming

v2

Add a Solution

Comments

Richard Deeming 9-Aug-23 5:07am

I have removed the site name from your question, since it is not relevant to your question, and could make this look like spam.

We get a lot of "streaming movie site" spam, so anything that even vaguely resembles that could result in the more trigger-happy members reporting you and your question.

Nischal Shar 9-Aug-23 10:41am

cheers and thank you mate I've some more questions and doubt to clear about this can we connect other than this plattform would be helpful

Richard Deeming 9-Aug-23 10:42am

No. Help happens on the site, or it doesn't happen at all.

Nischal Shar 9-Aug-23 11:02am

okay the doubts

const url = new URL("https://[REDACTED]/ajax/movie/search?keywords={the keyword}");
url.searchParams.set("keyword", keyword);

I didn't understand this like you're doing this and

const url = new URL("https://[REDACTED]/ajax/movie/search");
url.searchParams.set("keyword", keyword);

this does not get the results https://[REDACTED]/ajax/movie/search
there should be this https://[REDACTED]/ajax/movie/search?keyword={the user's input}
and then when do the request and then only you can get the results of the content of this page https://[REDACTED]/ajax/movie/search?keyword={the user's input} and load it in.
THANK YOU

Richard Deeming 9-Aug-23 11:10am

Once again: DO NOT post the URL of that site! You are starting to look like a spammer.

The line:

url.searchParams.set("keyword", keyword)

will append the value of the keyword variable to the URL's querystring.

Demo[^]
URL - Web APIs | MDN[^]

If you're not getting the user's input in the URL, then you're not getting the user's input in the keyword variable. You need to debug your code to find out why.

Nischal Shar 9-Aug-23 11:38am

okk that's my fault to put the url there i just wanted to be clear
now this
if (!response.ok) {
const responseText = await response.text();
console.error(response.status, response.statusText, responseText);
// TODO: Display an error message to the user...
return;
}

const searchResults = await response.json();
// TODO: Display the search results to the user...

}
in this line
const searchResults = await response.json();
// TODO: Display the search results to the user...

}
as i said i wanted load the results of that url's user search page into the in my code can't we actually append it using js like after the request finishes when the request brings the result from that page and we append everything of that page the request brings in div result besides head body html tag of that page
and now also
I want to be clear I can manage a bit to survive till now using js only click events and user side level js
I know you will be so frustrated to clear this type of doubt to me and all i can say is, THANK YOU.

Richard Deeming 10-Aug-23 3:42am

You'll need to look at the data that's returned and decide how you want to map it to your HTML document.

Unless it returns an HTML fragment, you can't simply append the data directly to the document.

Nischal Shar 10-Aug-23 6:42am

sorry but there is fetch made request is being made after i applied your code.
you said you need to debug your code i looked everything but i don't think there is anything wrong with the code . Would you please look at it one more time ??. THANK YOU

Richard Deeming 10-Aug-23 6:45am

No, YOU need to debug your code.

If "there's nothing wrong with the code", then there's nothing to look at.

If there is something wrong with the code - which only you can see at this point - then you need to debug it to find out what the problem is. All modern browsers have built-in debuggers which you can use to step through your code line by line to see where it's going wrong.

Nischal Shar 10-Aug-23 7:02am

only code i've now is the code i uploaded in this question it's all from my native code editor there's nothing left i've uploaded everything here. THANK YOU

Richard Deeming 10-Aug-23 7:33am

The code you posted in the question does not include any of the code I posted in my solution.

So either you've tried to apply the code from my solution, got stuck somewhere, and now need to debug the combined code - which we can't see! - or you've ignored my solution, and want someone to just write all of the code for you and give you a finished script you can submit as your own work.

Nischal Shar 10-Aug-23 8:03am

You are so Right. THANK YOU. I'VE BEEN TRYING SO HARD TO DEBUG IT AND NOW I AM QUESTIONING MY SELF WHAT THE HECK OF A PROJECT I'VE TAKEN ON. ERGGG, THANK YOU

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2023-08-08T23:19:00

XHR is an older technique. All modern browsers support the Fetch API[^], which is much nicer to work with. Especially if you combine it with async/await[^].

For example:

JavaScript

let abortController = null;

async function loadSearchResults() {
    if (abortController) {
        abortControler.abort("Reload");
    }
    
    const keyword = inputField.value.trim();
    if (keyword.length === 0) {
        // TODO: Tell the user to enter the keyword...
        return;
    }
    
    abortController = new AbortController();
    searchLoading.style.display = "block";
    try {
        const url = new URL("https://[REDACTED]/ajax/movie/search");
        url.searchParams.set("keyword", keyword);
        
        const response = await fetch(url, {
			credentials: "same-origin",
			signal: abortController.signal
		});
        
        if (!response.ok) {
            const responseText = await response.text();
            console.error(response.status, response.statusText, responseText);
            // TODO: Display an error message to the user...
            return;
        }

        const searchResults = await response.json();
        // TODO: Display the search results to the user...

    } catch (e) {
        console.error(e);
    } finally {
        abortController = null;
        searchLoading.style.display = "none";
    }
}

document.getElementById("sch").addEventListener("click", loadSearchResults);

Now you just need to fill in the "TODO" blocks. You might want to consider using a templating language like Handlebars[^] to transform the search results into an HTML fragment.

How to display the search result and load the content of another webpage through xhr request

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us