Javascript AJAX read updated database changes without refresh

I have having difficult completely my AJAX. The code below works fine and it submits to database without refreshing.

The part I am having difficulty completing and perhaps understanding is that I want upon submit to be able to bring back to the page information in the database without refreshing.

I was told by a coder that I need code to fire upon completion and it should go under this:

                    if (xhr.status === 200) {

This is the Javascript for submitting to database.

            function Submit(handlerUrl, formElement) {
            if (validate()) {
                var xhr = new XMLHttpRequest();
                xhr.open('POST', handlerUrl, true);
                xhr.onload = function () {
                    if (xhr.status === 200) {
                                //code that will run when the page is done saving goes here.

                        alert(xhr.responseText);
                    }
                }
                xhr.send(new FormData(formElement));
            }
        }

This is the SAVE and Submit that works fine.

<input type="button" style= "cursor:pointer;" onclick="Submit(post.asp', document.getElementById('mainform'))" value="Submit and Save Your Changes" name="edit">

I want to bring current any changes to the database in this field:


<%=rs (username")%>

Any help would be appreciated so I can read the database and fire when the SAVE button is clicked without refreshing the page.

Thank you.

Hi,

I read through your question a couple of times and didn’t really get what you are trying to achieve.

Could you perhaps start at the beginning and step through what you currently have and what functionality you would like to add.

Simplifying my thoughts, once you click the Submit and Save Your Changes button (which posts to the database) how do you then update the fields on the page, without a refresh?

Hope that better explains and thank you James as I truly appreciate your help.

Is this still using the Quill example we worked on a while back?

This is not the Quill example but one that is similar. I tried to mirror image it and can’t seem to take this code below and alter it so it reads back the database saved changes to the page:

            function Submit(handlerUrl, formElement) {
            if (validate()) {
                var xhr = new XMLHttpRequest();
                xhr.open('POST', handlerUrl, true);
                xhr.onload = function () {
                    if (xhr.status === 200) {
                                //code that will run when the page is done saving goes here.

                        alert(xhr.responseText);
                    }
                }
                xhr.send(new FormData(formElement));
            }
        }

OK, so I still need to understand your setup. You have what… a form? And when you submit this form (via Ajax?) the submitted values should be inserted into the database and then the page the form is on, should get updated without a page refresh. Did I get that right?

Would it be possible that you post a link to what you have so far?

Yes

Yes, via AJAX - and yes it is inserted into database (works fine)

Correct, the page that the form is on should get updated without a page refresh.

I was told by a rather good coder is that all I need is to have some code where is says this in bold below. He said that this function is already on the page and I need to put new code so that it will fire upon completion. He further said, with I don’t understand “you can manipulate the DOM but to start if you want to manipulate a single item the best way to do so is to ensure it has a unique id on the page.”

//code that will run when the page is done saving goes here.

All I want to update is this field: <%=rs (username")%>

I am having problems figuring out what that code is.

The form is part of a login page and would be difficult to post. Hope that doesn’t present a problem.

If you need more information, please let me know. Thank you very much.

Well the way such a setup would work is as follows:

  1. You have a form
  2. You attach an event listener to the form that catches its submit event.
  3. When the form is submitted, the listener prevents the browser’s default submit action
  4. The listener then makes an Ajax call to an endpoint on a server somewhere, sending any necessary data along for the ride.
  5. The server receives the Ajax call, processes whatever data it is sent and maybe inserts the data into a database
  6. When its done, the server will typically return a response to the client.
  7. The client receives that response, which it can use (for example) to update the page.

It seems like you are stuck at point 6.

The code you posted above has a line to alert the successful response from the server — alert(xhr.responseText);

Is that firing at all? I.e. once you have submitted the form and the data has been inserted into the database, do you see an alert on the page? If so, what does it contain?

Yes it says:

Your information has been saved

Oh good :slight_smile:

Is that an input field? Is it part of the form?

It is an input field. Like this:

<input name="username" id="username" value="<%=rs ("tUserName")%>" style="height:20px; width:200px; font-size:12pt; color:#4c659b;" maxlength="100">

So obviously, once submitted it’s correct.

But this is where I need it to update on the page:

I want the user to know what the URL would be:

URL is: https://<%=Request.ServerVariables(“SERVER_NAME”) %>/<%=rs (“username”)%>

Therefore, once you save it changes.

And where on the page is the URL to be found?
Is it part of the page somewhere? Is it the form URL? Is it the address in the browser?

The user choses a username in the input field.
Underneath that is says that your username will be sitename/username.

So once it’s saved, I want to update to: sitename/username name choosen

or if a user already has chosen a username it will show that on the form page.

So if the user wants to change that, upon that saved change it would update to the newly inputted username, because it will read for the database that was just saved.

What’s the HTML for that?

This is all under the form post - here is the html:


The input:
 <td width="50%" bgcolor="skyblue" height="23"><font face="Arial" size="2"><input name="username" id="username" value="<%=rs ("UserName")%>" style="height:20px; width:200px; font-size:12pt; color:#4c659b;" maxlength="100"></td>
<td width="50%" bgcolor="skyblue" align="center" colspan="2" height="23"><font face="Arial" size="2">URL is: <b>https://<%=Request.ServerVariables("SERVER_NAME") %>/<%=rs ("username")%></b></font></td>
    </tr>

         <tr>
      <td width="50%" align="center" colspan="2" bgcolor="skyblue" height="23"><br /><a href="https://<%=Request.ServerVariables("SERVER_NAME") %>/<%=rs ("username")%>" target="New"><font face=arial size="4"><b>VIEW YOUR WEBSITE</b></font></a><br />(Opens is a new window or tab)</td>

Wrap the URL in a span, then attempt to manipulate it from within the xhr success callback:

<td width="50%" bgcolor="skyblue" align="center" colspan="2" height="23">
  <font face="Arial" size="2">
    URL is: 
      <b>
        <span id="myUrl">
          https://<%=Request.ServerVariables("SERVER_NAME") %>/<%=rs ("username")%>
        </span>
    </b>
  </font>
</td>

and:

if (xhr.status === 200) {
  document.getElementById("myUrl").textContent = 'Yo!';
  alert(xhr.responseText);
}

Try saving something and observing if the URL changes to ‘Yo!’, then let me know what happens.

Did as you said, it just says “yo!” where the url goes.

Cool.

Now you need to return the correct value from the server, instead of the text “Your information has been saved”.

Once you have done this, change the xhr callback like so:

if (xhr.status === 200) {
  console.log(xhr.responseText);
}

And let me know what is logged to the console.

To clarify, you want me to take this:

                    if (xhr.status === 200) {
                        document.getElementById("myUrl").textContent = 'Yo!';
                         alert(xhr.responseText);
                    }

and change to this:

if (xhr.status === 200) {
  console.log(xhr.responseText);
}

Not sure what this means or if I need to change anything else:

Now you need to return the correct value from the server, instead of the text “Your information has been saved”.

Yup.

After inserting the data to the databse, your server-side script (ASP, right?) is returning a response to the client, namely “Your information has been saved”.

You should change whatever ASP code is returning “Your information has been saved” and have it return the new URL instead.