The query entered by the user to search the reddit API

Using Reddit's API search function has been a game-changer for me. I'm still learning the ropes of javascript, and it seems like my code is running the API search function before the user even enters their query.

HTML:

<div id="site-content">
<form name="RedditSearch">
    Enter your query:
    <input type="text" name="query" onkeydown="if (event.keyCode == 13) document.getElementById('search').click()"/>
    <input type="button" id="search" value="Search" onclick="searchquery();" />
</form>    
</div>

Javascript:

var container = $('#site-content')
function searchquery()
{
 var query = document.RedditSearch.query.value;
}
 $.getJSON("http://www.reddit.com/search.json?q=" + query, function(data) {
  $.each(data.data.children, function(i,item){
    var title = item.data.title
    var post = '<div>'+title+'</div>'
    container.append(post)        

});
});

Answer №1

It seems that the getJSON query on your page is being triggered as soon as the page loads, before any user input is entered. This results in it executing too early.

To fix this issue, you should add an event listener to detect when the user inputs something, and then make the AJAX call to the reddit API.

If the user is entering keywords in a text area, you can use the .change() method for this purpose.

For more information, you can visit: http://api.jquery.com/category/events/ or here http://www.w3schools.com/jquery/event_change.asp

You can also refer to this example specific to your case: http://jsfiddle.net/2ECG6/1/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to incorporate a fade out transition into the current tab-pane?

I am currently implementing Bootstrap 5.3 with a basic pills and tab structure, and I am looking for a way to smoothly add a fadeOut effect to the active tab before the fadeIn of the selected tab. It appears that simply adding the "fade" class only introd ...

"PHP, AJAX, and JavaScript work together to run a loop that processes only the final element

Hello everyone, I need assistance in saving data from a loop. Here is the code snippet that I am working with: <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> ...

How can JavaScript be utilized to iterate through regex matches and divide a string into an array of segments separated by hyperlinks?

After receiving a string from an api, it appears like this: "If you <a href='https://example.com'>Click here</a> then <a href='https://example.net'>Click here</a>." I aim to construct an array that mir ...

Transferring information from ReactJs via the fetch API to a nodeJs server

I've encountered an issue where I am sending JSON data from my React application using the Fetch API, but on the server side, the req.body is showing up as empty. I'm not sure what the problem could be. Here is a snippet of my React code: impor ...

How can I connect HTML and JavaScript to get the clicker functioning?

While the HTML and javascript work flawlessly on jsfiddle where I initially created this project, I'm encountering a problem with Google Drive's hosting. The HTML displays correctly but there is no interaction happening with the javascript. Belo ...

Allow AngularJS to make HTTP POST requests with CORS enabled

I am looking to submit a form to send an HTTP POST request to a server located on a different domain, with CORS enabled in the server script using Node.js. Below is the Angular configuration script: var myApp = angular.module('myApp', ['ng ...

Issue with MVC and three.js

Currently, I have a three.js code that enables me to develop a virtual tour. I am looking to incorporate an MVC approach, but I am encountering an error that I am struggling to resolve. Below is the code I have: Scene.js import * as THREE from 'thre ...

Showing JSON arrays within innerHTML

One of my peers provided me with an array, and my task is to present it in an HTML format. Even after consulting various resources and examples, I am unable to display the required values. This is my first attempt at such a task, so any guidance would be ...

Troubleshooting problems with AJAX JSON API responses and dealing with undefined variables and issues related to [

I am currently working on a new API project and I'm facing some challenges. I have removed certain information, like the Bearer token, for privacy reasons. This is my first attempt at creating an API and I could use some guidance. Reading books and br ...

Is there a way to update Checkbox changes within a Datagrid without selecting the entire row?

My Table Cell Checkbox Behavior Issue: Within a table cell, I have a checkbox that changes upon clicking it. However, the change only occurs the first time. Subsequent clicks on the same checkbox do not trigger any change until I click outside the cell. T ...

Incorporating Select2 into Your Laravel 4 Application

I've recently incorporated select2 into my multiselect search filter, but I'm struggling to integrate it effectively. Here's the method I'm using: public function getContactByName($name) { return Contact::select(array('id&apo ...

What could be the reason for my function throwing a TypeError with the message "<function> is not a function"?

Every time I try to call a function that clearly appears to be defined as a function, I continuously receive the error message: TypeError: [function name] is not a function. To demonstrate the issue, here is a simple example: main.ts import someFunction ...

What method can I use to adjust the font style when it overlays an image?

Sorry if this is a bit unclear, but I'm trying to figure out how to change only a section of my font when it overlaps with an image while scrolling. If you visit this example website, you'll see what I'm referring to: For a visual represen ...

JavaScript framework enabling front-end communication with RESTful APIs

I am searching for a lightweight javascript framework to build a client-side web application that will interact with the server via a REST API. I initially considered using react.js, but my team members rejected the idea because it lacks templating. Angul ...

Increase the border at the bottom while hovering with React.js and the Material UI library

Can someone help me achieve a hover effect similar to the one in this question on Stack Overflow: Hover effect : expand bottom border I am attempting to create the same effect in React using makeStyles of Material UI. Here is my current code: const useSty ...

It appears that Javascript variables are behaving in a static manner

I am currently building a PHP website with a registration page for users. I am implementing the LOOPJ jQuery Autocomplete script from to enable users to select their country easily. In this process, I encountered an issue where the value of another field ...

I am in search of the replicated information found in the specific column

UPDATE tab s SET s.DATA = json_transform(DATA, REPLACE '$.dataFilterDefn.columns[1]' = (SELECT JSON_ARRAYAGG(JSON FORMAT JSON RETURNING CLOB) FROM (SELECT JSON FROM (SELECT j.json || ',' || JSON AS json F ...

Quasar QDrawer module - locking closure

Is there a way to prevent the drawer from closing if the user has unfinished work in it? I want to be able to display a confirmation message, etc... I thought about using something like can-be-closed="canBeClosed", and then I discovered the dial ...

"Encountering an error in Vue.js when trying to dynamically access nested arrays: push function not

My goal is to have two buttons displayed when a user uploads data: one for old products and one for new products. When the user clicks on either button, the corresponding products will be uploaded as 'old_product' or 'new_product'. Howe ...

What is the best way to animate an element when it comes into the user's view

In order to activate the animation of the skill-bars when the element is displayed on the website, I am seeking a solution where scrolling down through the section triggers the animation. Although I have managed to conceptualize and implement the idea with ...