Strange JavaScript AJAX Error not wotking

JavaScript
1

Hi,

I am using AJAX to call a Php program on the server that fetches data, based on query sent to it via the client. However, for some strange reason the AJAX return is not returning the dynamic part of the results, that is part created by the Php MySQL call!

And I have checked the Php page that AJAX is calling and when called by itself it shows that it is working A OK!

You can see the sample Php code being called here:

https://www.anoox.com/news/my_notes_fetch.php?val=Verisign

as you see it does display the (sample) results just fine.

However, this (sample) result is missing when sent back to the client via AJAX, as you can see here:

https://www.anoox.com/news/my_notes_test.php

ATTN: start typing into the above Textarea field: Verisign

As you will see Php program is called OK via the AJAX in that page, and data is returned OK from Php to that page, but the dynamic parts of the data is missing!

What is going on here?
FYI, I have lots of experience with AJAX and have never ran into this problem before!

Thanx,
Dean

2

If you check properly, it’s working. But, there seem to be lots of issues in the way you built it.

  1. When will the AJAX call start? (as soon as user start typing?)
    If you try this link, it’ll result in a blank table.
    https://www.anoox.com/news/my_notes_fetch.php?val=Verisig

This is what happening in your code.

You should better check the network (using inspector or firebug) to see what’s happening while typing.

3

The problem isn’t the AJAX itself AFAICT. You’re sending the XHR every 6 characters, so the input value just reads “Verisi” then. After that, the next XHR gets sent when the user has typed another 6 characters, and so on.

I’d suggest to use a time based throttle function instead, or debounce the XHR to be when the user has stopped typing for say 500ms. Like e.g.

var debounceTimeout

function doCheck () {
  const notes = document.getElementById('note_place').value
  const xmlhttp = GetXmlHttpObject()
  const url = 'my_notes_fetch.php?val=' + notes

  xmlhttp.onreadystatechange = stateChanged
  xmlhttp.open('GET', url)
  xmlhttp.send()  
}

function check_notes () {
  window.clearTimeout(debounceTimeout)
  debounceTimeout = window.setTimeout(doCheck, 500)
}
4

Thanks for this intel.
Actually I figured out what the problem is/was, and it has to do that the Code was working even better than we expected.
As it was finding no match for the resulting note being typed in, with letters: Verisign
And the DB which is of course in a test mode does not have that much data in it.

Now about your suggestion about timing the Query based on JS time, I think is not as good as idea as doing it based on counting number of Chars typed in, since a person may be slow or too fast typing.

But I have a related TINY question, but one that has been harping at me, and the question is when Querying a note as we are doing here, should the JS related call be via OnKeyDown or OnKeyUp? I hope you appreciate the delicacy yet importance of this question to this task.

Thanks,
Dean @ Anoox.com

5

Well, if the user is typing slowly, the fetched result will just update a couple of times more often. But if you’re throttling the XHR based on a character count, she has to enter a specific number of characters, or might otherwise wait for an update that will never happen because one or two characters are missing to trigger the update.

You’ll typically use keyup, as the keydown event will keep firing while the key is kept pressed.

6

Onkeyup it is then.
Thanks.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.