Resetting part of a page on submitting a form

I have this page:
https://kroweb.dk/gfdev/arkivalier/canvas3/

I need to reset one div when submitting the search form.

If you hover over the map to the left and click a selection, you get a couple of text blocks to the right. Those blocks are nested in this div:
 <div id="herredssogne_list"> </div>
It is this div I need to reset when submitting the search form.

Could that be done within a script?
Peter KromanSenior Proposal SpecialistAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Olaf DoschkeSoftware DeveloperCommented:
I see this div initially is empty and you populate it when you click on regions of the map on the left side.

If you only want to empty it you would simply do almost the same action(s) you do to set it to the text blocks now: Load the html you want to put in and set the div elements inner HTML.

What you now do is an ajax call of getParishes.php and put in the result (data) with $('#sognList').html(data); I am a but puzzled how that sets this div, as its id isn't sogList, that'll become an inner div, after setting it. Still the outer div has id herredssogne_list.

Well, you know what data you want, you want data='', so you can spare the whole ajax call in this case and only do the final and most important line to set the html of that div:
$('#herredssogne_list').html('');

Open in new window

That's it already, that's your solution. The rest is just to explain more in detail.



The same is true for the part of code I know you took from the answers of another question.
$(function() {
  $('form').submit(function(event) {
    event.preventDefault();
    this.submit();
    this.reset();
    $('#herredssogne_list').load(window.location.href+' #herredssogne_list'); //fjerner herreds og sognelister når "Søg Sogn direkte" formen bliver submitted   
  })
});

Open in new window


After this.reset() to reset the HTML form after its submit, all you also want to do is again:
...
$this.reset();
$('#herredssogne_list').html('');
...

Open in new window


The reason I gave you the solution - in its general form $('#id').load(window.location.href+' #id') - is I thought you have some HTML in there, that was initially not empty and is lost because it's overwritten.

In the more general case, you really want to reset some div or another HTML element with an id, load used this way is a general solution, even if not the ideal one. To explain that I need to go two rounds.

First of all load() is a very simplified ajax call, which doesn't let you define a function to act on the data returned, it simply puts the data as inner HTML of the element you specify ba $('#id').
Secondly, the call of load() in this form makes use of the specialty to not only specify the URL to load but also an id of the element to pick out of that loaded response. So what you're literally doing here in your case is loading the initial HTML full page including the section "<div id="herredssogne_list"> </div>" and then pick out the single space between the opening and closing tag to finally put that into the div with that same id='herredssogne_list' of the HTML document, as it currently is loaded with HTML.

You can have that simpler for your case, but as said, whenever you really have some initial HTML  you want to reset to, that's how you can get it back by simply reloading the page and getting the original inner HTML from there. As jQuery's excellent $() function offers more ways to address elements than by their id there are more ways, but it's simplest with an id when you adhere to the rule ids are unique and so only a single HTML tag can be meant.

Bye, Olaf.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Peter KromanSenior Proposal SpecialistAuthor Commented:
Thanks Olaf,

Nice and working solution. And fine explanation too :)
0
Olaf DoschkeSoftware DeveloperCommented:
Fine, it also explained a lot to see your site.

I forget to explain, why the load solution is not ideal. Well, you load window.location.href, the whole current page, only to extract a part of it. Ideally, you had a script or functionality that returns just the div content you want, that would give minimum server load. You actually do have getParishes.php, so if your div would initially show one regions data, you could reset to that via that script.

On the other side, the ideal composition of a web page from single scripts each providing snippets you can put together is typically rather replaced by a template engine. but that's getting off topic shoptalk.

A bigger problem with reloading window.location.href is, that it might need the right post or get variables set to get the page as is, and then you don't want to reset post variables, when they generate and save some content, as you then create this double.

But all that luckily is no problem here anyway, when resetting only means emptying.

Bye, Olaf.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.