Вызов функции не возвращает управление AJAX - PHP - MYSQLI

Question

Я проверил все подобные вопросы на этот вопрос, но не нашел ничего, что помогло ... вот так!

Я пишу проект сайта для моего проекта колледжа. Это просто галерея изображений. У меня есть счетчик, отображаемый для каждого изображения, которое увеличивается при каждом нажатии на изображение. Когда страница обновляется, отображается новый номер. Со мной так далеко?

Проблема в том, что после завершения обновления базы данных возврат не завершает оставшуюся часть кода ...

echo "<div class='gridImg'><a href=".$imgpath." data-lightbox='countryside' data-title='".$row['ldesc']."' onclick='"."showUser(&#39".$fname."&#39)'>";

Вышеуказанная строка находится в php-файле, и рассматриваемая функция - showUser, которая передает переменную $ fname ...

function showUser(str) {
    if (str === "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } 
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = 
                this.responseText;
            }
        };
        xmlhttp.open("GET","../php/countrysideupdateviews.php?q="+str,true);
        xmlhttp.send();
        return;
    }
}

Приведенный выше скрипт принимает переданное значение и передает его в countrysideupdateviews.php (Извините, если этот скрипт беспорядок, я новичок в AJAX и взял его с сайта W3Schools.

<?php
$q = $_GET['q'];
$conn=new mysqli('localhost','user','pass','dbname');
$sql="UPDATE countryside SET views = views + 1 WHERE fname = '".$q."'";
$result=$conn->query($sql);
mysqli_close($conn);
?>

Приведенный выше php-файл обновляет базу данных.

Хорошо ...

Итак, пользователь нажимает на одно из изображений на экране, которое открывает галерею лайтбокса, НО также обновляет счетчик просмотров и затем возвращает управление - за исключением того, что все работает - обновление происходит - но лайтбокс не запускается вместо этого показано статическое увеличенное изображение того, на который был нажат. Единственный способ очистить его - обновить сайт, который отражает обновленный счетчик.

Я добавил возврат к вызову функции onclick, который возвращает управление, но счетчик не обновляется. Куда я иду не так? Имейте в виду, пожалуйста, я все еще учусь, и я надеюсь, что это имеет смысл:)

Answer 1

Хорошо, поэкспериментировав с ответом @ apaatsio, я понял, что эта функция теперь выглядит ...

function showUser(str) {
  if (str === "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  } else { 
  if (window.XMLHttpRequest) {
  // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
    } 
    xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("txtHint").innerHTML = this.responseText;
      }
    };
  xmlhttp.open("GET","../php/countrysideupdateviews.php?q="+str,true);
  xmlhttp.send();
  event.preventDefault();
  }
}

Похоже, что предотвращение щелчка при открытии ссылки работало просто отлично - спасибо:)

Answer 2

Аргумент onclick должен быть функцией. showUser("foo") не является функцией. Вам также не хватает event.preventDefault(), что препятствует открытию ссылки действием клика.

Измените showUser на

function showUser(str) {
  return function(event) {
    if (str === "") {
      document.getElementById("txtHint").innerHTML = "";
    } else {
      if (window.XMLHttpRequest) {
        var xmlhttp = new XMLHttpRequest();
      }
      xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("txtHint").innerHTML = this.responseText;
        }
      };
      xmlhttp.open("GET","../php/countrysideupdateviews.php?q="+str,true);
      xmlhttp.send();
    }
    event.preventDefault();
  };
}