After Enter is pressed page reloads

1

I have an problem with wikipedia App. The issue is that every time when is pressed page reloads.

The first GET response is from the API which has to displayed instead the whole page reloads.

Please refer https://github.com/vikramnr/WikipediaApp/blob/master/WikipediaApp/script.js for my code.

2

Is it a form? If it is, use e.preventDefault(); to stop it from reloading every time it is submitted.

3

I have used that in my code. but still its not working. Am I missing something else.

4

Did you add e as a function parameter?

5

yes I have added it also

6

Can you paste the code?

7

You were not able access my link??

var myData = "";
document.getElementById("finding").focus();	
$(document).ready(function () {
$('#finding').unbind().click(function (e) { 
		e.preventDefault();
		window.open("https://en.wikipedia.org/wiki/Special:Random");
	});
//$("#finding").focus();
$("#finding").unbind().click(function (e) {
		e.preventDefault();
		var searchQuery;
		searchQuery = "Vikram"
		$('#first').text(" ");
		searchQuery = $("#searchQuery").val();
		console.log(searchQuery);
		var playListURL = "https://cors-anywhere.herokuapp.com/https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchQuery + "&limit=10&namespace=0&format=json";
		$.getJSON(playListURL, function (data) {
			myData = data;
			displayData(data);
			$("#first").append("<p>That's a tough one...Please try again </p>" + "<hr>")
		});
	});
});
function displayData(data) {
	console.log(myData);
	preventDefault();
	for (var i = 1; i < myData[1].length; i++) {
		
			$("#first").append("<p>"+ myData[1][i] + "</p>" + "<p>" + myData[2][i] + "</p>" + "<a href="+ myData[3][i]+">"+"For further reference click here"+"</a><hr>")
	}
}
8

I copied your code into a pen. Everything between <body> in your html, your css, and your js.

The only error I got was 429 (Too Many Requests) while using the cors-anywhere url.

I think the issue is (or starts) in your html. In the head of your html you call bootstrap 8 separate times and multiple versions (calling both bootstrap 3 and bootstrap 4 will always conflict). You also call 2 different versions of jQuery. I also see calls to .unbind() which is deprecated in jQuery 3.

I think it will work better for you if you remove some of those extra script.

1 Like
9

I had this problem once, and the easy solution is to not listen for the onsubmit event handler but to remove the form tags and add an event handler to the submit button itself.
(I don’t know what your event handler preference is, but here’s a DOM Level 0 event handler for simplicity)

Instead of:

<form onsubmit="doStuff();">
<input type="text" id="textElement">
<input type="submit" id="submitButton">
</form>

try (with the form tags removed)

<input type="text" id="textElement">
<input type="button" value="submit" id="submitButton" onclick="doStuff();">

Hope this helps! (when you submit a form, the browser automatically reloads)
EDIT: You can also use Javascript Keycodes to detect the enter key (13).

1 Like
11

This suggestion is unsemantic and breaks the expected functionality. You don’t want pressing Enter to do nothing, you want it to do the same as clicking the submit button.

It seems like this is a problem with using onsubmit as an attribute in the HTML — it treats the assigned value as if it’s JavaScript in an anonymous function() {} wrapper, but you can’t pass in any arguments to that function (though there might be a way that I’m not aware of).

Instead, bind the event within your .js file or a <script> tag. @SkyC’s tutorial above is an excellent example.

Edit: Turns out that preventDefault can be simulated with the HTML inline onsubmit attribute by appending return false; to the value of that attribute. But it’s still best practice to separate content from behavior.

1 Like
12

thanks for all replies. I’ll try out one after and another. :smiley: