CODEWITHSUNDEEP
javascriptphpjqueryajax
Minnen
Minnen

Reputation: 441

AJAX - Issue calling two functions inside one onchange event

I am trying to retrieve two things from a database through AJAX, an image and a product price, with a function containing two functions within itself in one onchange event.

After many try and errors i finally stopped receiving errors in the console but now even though i get no errors the two things im requiring through AJAX do not appear.

I ran out of ideas and getting no error messages left me adrift.

The AJAX function in the <head> :

<script type="text/javascript">
    function seleccionProd(str) {

        function precioProd(str) {
            if (str=="") {
                document.getElementById("precio").innerHTML="";
                return;
            }
            if (window.XMLHttpRequest) {
                var xmlhttp = new XMLHttpRequest();
            }
            xmlhttp.onreadystatechange = function() {
              if (this.readyState == 4 && this.status == 200) {
                document.getElementById("precio").innerHTML = this.responseText;
                document.getElementById("precioOculto").value = this.responseText;
              }
            };
            xmlhttp.open("GET", "precio.php?q="+str, true);
            xmlhttp.send();
        }

        function imagenProd(str) {
            if (str=="") {
                document.getElementById("imagen").innerHTML="";
                return;
            }
            if (window.XMLHttpRequest) {
                var xmlhttp = new XMLHttpRequest();
            }
            xmlhttp.onreadystatechange = function() {
              if (this.readyState == 4 && this.status == 200) {
                document.getElementById("imagen").innerHTML = this.responseText;
              }
            };
            xmlhttp.open("GET", "seleccion_prod_compra_imagen.php?q="+str, true);
            xmlhttp.send();
        }
    }
</script>

The <select> element:

<select class="custom-select my-1 mr-sm-2" id="producto" name="producto" onchange="seleccionProd(this.value);" required>

The two PHP files called inside the AJAX function:

precio.php

<?php 
require $_SERVER['DOCUMENT_ROOT'].'/php/db_key.php';

$con = mysqli_connect($servername, $username, $password, $dbname);

$q = $_GET["q"];

$sql = "SELECT precio FROM productos WHERE titulo = '".$q."'";

$result = mysqli_query($con, $sql);

while($row = mysqli_fetch_array($result)) {
    echo $row['precio'];
}
?>

seleccion_prod_compra_imagen.php.php

<?php 
require $_SERVER['DOCUMENT_ROOT'].'/php/db_key.php';

$con = mysqli_connect($servername, $username, $password, $dbname);

$q = $_GET["q"];

$sql = "SELECT imagen FROM productos WHERE titulo = '".$q."'";

$result = mysqli_query($con, $sql);

while($row = mysqli_fetch_array($result)) {
    echo '<img src="/img/productos/'.$row['imagen'].'" class="card-img-top fluid">';
}
?>

As always any kind of help is greatly appreacited and thanks for your time.

Upvotes: 1

Views: 122

Answers (1)

Barmar
Barmar

Reputation: 781096

You define precioProd and imagenProd but never call them.

function seleccionProd(str) {
    precioProd(str);
    imagenProd(str);

    function precioProd(str) {
        if (str=="") {
            document.getElementById("precio").innerHTML="";
            return;
        }
        if (window.XMLHttpRequest) {
            var xmlhttp = new XMLHttpRequest();
        }
        xmlhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
            document.getElementById("precio").innerHTML = this.responseText;
            document.getElementById("precioOculto").value = this.responseText;
          }
        };
        xmlhttp.open("GET", "precio.php?q="+str, true);
        xmlhttp.send();
    }

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

Upvotes: 1

Related Questions