Javascript AJAX read updated database changes without refresh

Scrolling through the post page and their is nothing other than database entry of “comments”

Do you still have access to the project?
You could look what you ended up with there.

I have done that and it seems like it’s not the same as here. There is nothing on the editor post page that posts back to the editor. On the editor, we didn’t post any of the html back to the page, we just posted the photos back.

But the principle is the same :slight_smile:

Could you post the ASP code here?

Let me look through the image upload files and I will post it. I should go because I have gone through the night and now it’s early morning because of time difference…but I didn’t want to not chat with you by going to bed! Let me get back to you. I really appreciate your time and I will get back to you. Thank you so much.

1 Like

No worries. I’m sure we’ll get to the bottom of things :slight_smile:

1 Like

Using my original code from our first discussion, I was able to have the alert now say the new username. Therefore, it responses back to the form page.

So if I wrap the span code that you gave me - what do you want me to use for the JS code?

I would like, that once you click Save, all it says is that is has been saved.

Thanks for your help.

Oh nice one.

So now we need to alter the URL to reflect the new username.

Change the HTML on your page as follows:

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

And the JavaScript like so:

if (xhr.status === 200) {
  document.getElementById("myUsername").textContent = xhr.responseText;
  alert("Your information has been saved");
}

This assumes that xhr.responseText contains only the new username.

Let me know if that works.

1 Like

The username after the URL shows “domainname/Your information has been saved”

Yes, unless you refresh it and then it shows correctly.
“Your information has been saved” - should be the newly saved username

James,

Sorry, this is my mistake. It does work. What I did was go back to my original form post. So I just changed it and it works fine.

Thank you so much for your help, without which, I would be lost.

Thanks!!!

PS

Maybe in future, we can talk about more than one field

Yay!

Sure. In this case you’d need to look at how to return a JSON response from your ASP script. For example:

{
  "firstName": "Garrison",
  "lastName": "Keillor",
  "userName": "g-keillor",
  "message": "Your information was successfully transmitted",
  ....
}

This can contain as many fields as you desire, which you can the access in your xhr success callback to update the page.

1 Like

Yay! Thanks to you!

I can’t express enough how much I appreciate your time.

Take care!

1 Like

I have another issue that I discovered. I have an email check so to notify the user that the email submitted is already in the system.

1

That’s the message before the change. It is a response.write message.

The username is also a response.write message too. So now the alert shows this:
2
on the email check and the message is now part of the URL…

URL is: https://domainname.com/**That email address is already in the system, please sign-in under that email address.**

I have other checks that would response.write back to the page. So is there a work around this?

Because if the other message responses are not activated, then all is fine with the username.

Oh, ok. Can you share the part of your ASP code that returns these messages?

Never did occur that the other response.writes would interfere or conflict with the newly added code.
This is what I currently have for the reponse.writes. Under the original code, they wrote and appeared in the alerts.

IF len(Email)<6 OR InStr(Email,"@")=0 THEN
Response.Write "You must have a valid E-mail Address"
Response.End
end if

If InStr(FirstName, CHR(34) )>0 THEN
Response.Write "You cannot use Quotes in your name. Please no nicknames."
Response.End
end if

If InStr(LastName, CHR(34) )>0 THEN
Response.Write "You cannot use Quotes in your name. Please no nicknames."
Response.End
end if


'if an unsafe input is entered the user is asked to try again
if (not valGoodChars(username)) then

Response.Write "No spaces are allowed and the only Special Characters allowed are: periods, hyphens and underscores."
Response.End
end if

This data for emails comes from the database...

Response.Write "That email address is already in the system, please sign-in under that email address."
Response.End()
end if

This data for agent username comes from the database...

Response.Write "That agent username is already taken, please choose another one."
Response.End()
end if

And then a end of code, this is what brings in the username ...
response.Write UserName

In ASP Response.End() stop the code below it to run
Hope this help and there is a work around.
As always, thanks for your time. Most appreciated.

Ok, cool, it seems that you are doing a bunch of validation on the server and as soon as the validation fails (for whatever reason), you are returning an error message.

Originally, you were alerting the error message with the following code (which I assume worked as intended):

function Submit(handlerUrl, formElement) {
  if (validate()) {
    const 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));
  }
}

However…

I’m not seeing this in the ASP code. Where does the message “Your information has been saved” come from?

Yes it did.

What I did to make the AJAX work, as you suggested for me to look at the Quill example, was rather than use:
Response.write "“Your information has been saved”

I replaced it with:

response.Write UserName

Username comes from the form post so I don’t need the quotes on it. When I first tried is I made the mistake of using, if you recall, rs"(“username”). That essentially error out and I realize that I should just use Username for the form post - never occurring to me that there we other response.write because those were passing the validation.

1 Like

OK, got it.

So now we’re in a situation where ideally, we need to return more than one value from the server.

You could hack it — instead or returning the username, return some kind of identifier in a sting, followed by the username, e.g. "username:<username>" (where the value in angled brackets would be the actual username). Something like:

"username:Cleavon"

Then in the xhr callback, you could look if the response starts with “user:” and react accordingly:

if (xhr.responseText.match(/user:/)){
  // update url and alert "All good"
} else {
  alert(xhr.responseText);
}

However, this system isn’t very scalable. A cleaner solution would be to figure out how to return JSON from the ASP script:

{
  "firstName": "Garrison",
  "lastName": "Keillor",
  "userName": "g-keillor",
  "message": "Your information was successfully transmitted",
  ....
}

Maybe this would help?

Not exactly sure if I am doing this right. In asp, I can do this:

response.Write “UserName” & UserName

That would start with the word user and & Username would bring in the actually user name. In trying that, I get that entire statement in the alert rather than “ALL Good” and the URL code is not updating.