Mixing
JQuery load() function keeps clearing user input
0
I've got JQuery with a load() function that works every second. However, when I type user input into a search box, it won't work.
$(document).ready(function() {
function loadData() {
$('body').load('index.php', function() {
if(window.reloadData != 0)
window.clearTimeout(window.reloadData);
window.reloadData = window.setTimeout(loadData, 1500)
}).fadeIn("slow");
}
window.reloadData = 0;
loadData();
});
<form action="search.php" method="get"><input type="text" placeholder="Search for movie"></form>
jquery html forms
asked Jul 13 '17 at 12:44
Steve WoodsSteve Woods
1989
|
show 6 more comments
0
I've got JQuery with a load() function that works every second. However, when I type user input into a search box, it won't work.
$(document).ready(function() {
function loadData() {
$('body').load('index.php', function() {
if(window.reloadData != 0)
window.clearTimeout(window.reloadData);
window.reloadData = window.setTimeout(loadData, 1500)
}).fadeIn("slow");
}
window.reloadData = 0;
loadData();
});
<form action="search.php" method="get"><input type="text" placeholder="Search for movie"></form>
jquery html forms
asked Jul 13 '17 at 12:44
Steve WoodsSteve Woods
1989
You're replacing the full body of the page every 1500ms. Why would you expect the input not to be destroyed and recreated per the HTML you're reloading (e.g., without whatever you typed)?
– T.J. Crowder
Jul 13 '17 at 12:47
How would I fix it so the input stays?
– Steve Woods
Jul 13 '17 at 12:49
It's going to sound facetious, but: Don't constantly reload the entire page. Reload just a part of it, not including the input.
– T.J. Crowder
Jul 13 '17 at 12:51
It didn't work. It still clears the input. What should I do?
– Steve Woods
Jul 13 '17 at 12:54
@SteveWoods did you tried to do like i said in my answer ?
– edisoni.1337
Jul 13 '17 at 12:56
|
show 6 more comments
0
0
0
I've got JQuery with a load() function that works every second. However, when I type user input into a search box, it won't work.
$(document).ready(function() {
function loadData() {
$('body').load('index.php', function() {
if(window.reloadData != 0)
window.clearTimeout(window.reloadData);
window.reloadData = window.setTimeout(loadData, 1500)
}).fadeIn("slow");
}
window.reloadData = 0;
loadData();
});
<form action="search.php" method="get"><input type="text" placeholder="Search for movie"></form>
jquery html forms
asked Jul 13 '17 at 12:44
Steve WoodsSteve Woods
1989
I've got JQuery with a load() function that works every second. However, when I type user input into a search box, it won't work.
$(document).ready(function() {
function loadData() {
$('body').load('index.php', function() {
if(window.reloadData != 0)
window.clearTimeout(window.reloadData);
window.reloadData = window.setTimeout(loadData, 1500)
}).fadeIn("slow");
}
window.reloadData = 0;
loadData();
});
<form action="search.php" method="get"><input type="text" placeholder="Search for movie"></form>
jquery html forms
jquery html forms
asked Jul 13 '17 at 12:44
Steve WoodsSteve Woods
1989
asked Jul 13 '17 at 12:44
Steve WoodsSteve Woods
1989
edited Nov 21 '18 at 19:03
Steve Woods
asked Jul 13 '17 at 12:44
Steve WoodsSteve Woods
1989
asked Jul 13 '17 at 12:44
Steve WoodsSteve Woods
1989
asked Jul 13 '17 at 12:44
Steve WoodsSteve Woods
1989
1989
You're replacing the full body of the page every 1500ms. Why would you expect the input not to be destroyed and recreated per the HTML you're reloading (e.g., without whatever you typed)?
– T.J. Crowder
Jul 13 '17 at 12:47
How would I fix it so the input stays?
– Steve Woods
Jul 13 '17 at 12:49
It's going to sound facetious, but: Don't constantly reload the entire page. Reload just a part of it, not including the input.
– T.J. Crowder
Jul 13 '17 at 12:51
It didn't work. It still clears the input. What should I do?
– Steve Woods
Jul 13 '17 at 12:54
@SteveWoods did you tried to do like i said in my answer ?
– edisoni.1337
Jul 13 '17 at 12:56
|
show 6 more comments
You're replacing the full body of the page every 1500ms. Why would you expect the input not to be destroyed and recreated per the HTML you're reloading (e.g., without whatever you typed)?
– T.J. Crowder
Jul 13 '17 at 12:47
How would I fix it so the input stays?
– Steve Woods
Jul 13 '17 at 12:49
It's going to sound facetious, but: Don't constantly reload the entire page. Reload just a part of it, not including the input.
– T.J. Crowder
Jul 13 '17 at 12:51
It didn't work. It still clears the input. What should I do?
– Steve Woods
Jul 13 '17 at 12:54
@SteveWoods did you tried to do like i said in my answer ?
– edisoni.1337
Jul 13 '17 at 12:56
You're replacing the full body of the page every 1500ms. Why would you expect the input not to be destroyed and recreated per the HTML you're reloading (e.g., without whatever you typed)?
– T.J. Crowder
Jul 13 '17 at 12:47
You're replacing the full body of the page every 1500ms. Why would you expect the input not to be destroyed and recreated per the HTML you're reloading (e.g., without whatever you typed)?
– T.J. Crowder
Jul 13 '17 at 12:47
How would I fix it so the input stays?
– Steve Woods
Jul 13 '17 at 12:49
How would I fix it so the input stays?
– Steve Woods
Jul 13 '17 at 12:49
It's going to sound facetious, but: Don't constantly reload the entire page. Reload just a part of it, not including the input.
– T.J. Crowder
Jul 13 '17 at 12:51
It's going to sound facetious, but: Don't constantly reload the entire page. Reload just a part of it, not including the input.
– T.J. Crowder
Jul 13 '17 at 12:51
It didn't work. It still clears the input. What should I do?
– Steve Woods
Jul 13 '17 at 12:54
It didn't work. It still clears the input. What should I do?
– Steve Woods
Jul 13 '17 at 12:54
@SteveWoods did you tried to do like i said in my answer ?
– edisoni.1337
Jul 13 '17 at 12:56
@SteveWoods did you tried to do like i said in my answer ?
– edisoni.1337
Jul 13 '17 at 12:56
|
show 6 more comments
1 Answer
1
active
oldest
votes
1
If you really wan't to replace the entire body and save the form state, just remove the form and put it back:
<!--Index.php-->
<!-- Set a identifier for it -->
<form id="searchForm" <!--more attributes...--> ></form>
The Script :
///main.js
(($) => {
const loadData = () => {
//"take" the form
let $form = $('#searchForm').detach();
$('body').load('index.php', () => {
if(window.reloadData != 0)
window.clearTimeout(window.reloadData);
window.reloadData = window.setTimeout(loadData, 1500);
//replace the default form with the saved form
$('#searchForm').replaceWith($form);
}).fadeIn("slow");
}
$(document).ready(() => {
window.reloadData = 0;
loadData();
});
})(jQuery)
PS: It's recomended to replace just a div where the search results should appear, because you don't want to save the state of every single thing in your page every time :)
answered Jul 13 '17 at 13:45
LucasLucas
700823
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f45080986%2fjquery-load-function-keeps-clearing-user-input%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
If you really wan't to replace the entire body and save the form state, just remove the form and put it back:
<!--Index.php-->
<!-- Set a identifier for it -->
<form id="searchForm" <!--more attributes...--> ></form>
The Script :
///main.js
(($) => {
const loadData = () => {
//"take" the form
let $form = $('#searchForm').detach();
$('body').load('index.php', () => {
if(window.reloadData != 0)
window.clearTimeout(window.reloadData);
window.reloadData = window.setTimeout(loadData, 1500);
//replace the default form with the saved form
$('#searchForm').replaceWith($form);
}).fadeIn("slow");
}
$(document).ready(() => {
window.reloadData = 0;
loadData();
});
})(jQuery)
PS: It's recomended to replace just a div where the search results should appear, because you don't want to save the state of every single thing in your page every time :)
answered Jul 13 '17 at 13:45
LucasLucas
700823
add a comment |
1
If you really wan't to replace the entire body and save the form state, just remove the form and put it back:
<!--Index.php-->
<!-- Set a identifier for it -->
<form id="searchForm" <!--more attributes...--> ></form>
The Script :
///main.js
(($) => {
const loadData = () => {
//"take" the form
let $form = $('#searchForm').detach();
$('body').load('index.php', () => {
if(window.reloadData != 0)
window.clearTimeout(window.reloadData);
window.reloadData = window.setTimeout(loadData, 1500);
//replace the default form with the saved form
$('#searchForm').replaceWith($form);
}).fadeIn("slow");
}
$(document).ready(() => {
window.reloadData = 0;
loadData();
});
})(jQuery)
PS: It's recomended to replace just a div where the search results should appear, because you don't want to save the state of every single thing in your page every time :)
answered Jul 13 '17 at 13:45
LucasLucas
700823
add a comment |
1
1
1
If you really wan't to replace the entire body and save the form state, just remove the form and put it back:
<!--Index.php-->
<!-- Set a identifier for it -->
<form id="searchForm" <!--more attributes...--> ></form>
The Script :
///main.js
(($) => {
const loadData = () => {
//"take" the form
let $form = $('#searchForm').detach();
$('body').load('index.php', () => {
if(window.reloadData != 0)
window.clearTimeout(window.reloadData);
window.reloadData = window.setTimeout(loadData, 1500);
//replace the default form with the saved form
$('#searchForm').replaceWith($form);
}).fadeIn("slow");
}
$(document).ready(() => {
window.reloadData = 0;
loadData();
});
})(jQuery)
PS: It's recomended to replace just a div where the search results should appear, because you don't want to save the state of every single thing in your page every time :)
answered Jul 13 '17 at 13:45
LucasLucas
700823
If you really wan't to replace the entire body and save the form state, just remove the form and put it back:
<!--Index.php-->
<!-- Set a identifier for it -->
<form id="searchForm" <!--more attributes...--> ></form>
The Script :
///main.js
(($) => {
const loadData = () => {
//"take" the form
let $form = $('#searchForm').detach();
$('body').load('index.php', () => {
if(window.reloadData != 0)
window.clearTimeout(window.reloadData);
window.reloadData = window.setTimeout(loadData, 1500);
//replace the default form with the saved form
$('#searchForm').replaceWith($form);
}).fadeIn("slow");
}
$(document).ready(() => {
window.reloadData = 0;
loadData();
});
})(jQuery)
PS: It's recomended to replace just a div where the search results should appear, because you don't want to save the state of every single thing in your page every time :)
answered Jul 13 '17 at 13:45
LucasLucas
700823
edited Nov 22 '18 at 17:00
answered Jul 13 '17 at 13:45
LucasLucas
700823
answered Jul 13 '17 at 13:45
LucasLucas
700823
answered Jul 13 '17 at 13:45
LucasLucas
700823
700823
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f45080986%2fjquery-load-function-keeps-clearing-user-input%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You're replacing the full body of the page every 1500ms. Why would you expect the input not to be destroyed and recreated per the HTML you're reloading (e.g., without whatever you typed)?
– T.J. Crowder
Jul 13 '17 at 12:47
How would I fix it so the input stays?
– Steve Woods
Jul 13 '17 at 12:49
It's going to sound facetious, but: Don't constantly reload the entire page. Reload just a part of it, not including the input.
– T.J. Crowder
Jul 13 '17 at 12:51
It didn't work. It still clears the input. What should I do?
– Steve Woods
Jul 13 '17 at 12:54
@SteveWoods did you tried to do like i said in my answer ?
– edisoni.1337
Jul 13 '17 at 12:56