HTML Нажатие кнопки вызывает неправильную функцию - PullRequest
Новая
       0

HTML Нажатие кнопки вызывает неправильную функцию

0 голосов
/ 26 апреля 2020

Я разрабатываю веб-интерфейс с использованием bootstrap, который вызывает серверный веб-сервис Java для извлечения данных из базы данных и их отображения в таблице. У меня есть функция, которая вызывается так: 

<body onload="refreshVOI()">

Это работает, как ожидалось. Однако у меня также есть кнопка поиска, которая снимает другой запрос со значением поиска в качестве параметра. По какой-то причине, однако, кажется, что это нажатие кнопки снова вызывает refreshVOI (). Смотрите фрагменты ниже: 

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
var voiDataArray = [];

function makeHttpObject() {
    try {
        return new XMLHttpRequest();
    } catch (error) {
        alert("error");
    }
    try {
        return new ActiveXObject("Msxml2.XMLHTTP");
    } catch (error) {
        alert("error");
    }
    try {
        return new ActiveXObject("Microsoft.XMLHTTP");
    } catch (error) {
        alert("error");
    }
    throw new Error("Could not create HTTP request object.");
}

function refreshVOI() {
    // Find a <table> element with id="VOITable":
    var VOITable = document.getElementById("VOITable");
    var tableRows = VOITable.getElementsByTagName('tr');
    var rowCount = VOITable.rows.length;
    console.log("Getting all alerts...");
    for (var r = 1; r < rowCount; r++) {
        VOITable.deleteRow(-1);
    }

    var request = makeHttpObject();
    var xmlDoc;
    var parser;
    var x, i;
    var vois, voi;
    request.open("GET", "http://localhost:8080/VehiclesOfInterestWebServices/webresources/model.vehicleofinterest", true);
    request.send();
    request.onreadystatechange = function () {

        if (request.readyState == 4)
        {
            console.log("data " + request.responseText.toString());
            parser = new DOMParser();
            vois = parser.parseFromString(request.responseText.toString(), "text/xml");
            voi = vois.documentElement.childNodes;

            for (i = 0; i < voi.length; i++)
            {
                var row = VOITable.insertRow(-1);

                // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                var cell3 = row.insertCell(2);
                var cell4 = row.insertCell(3);
                var cell5 = row.insertCell(4);
                var cell6 = row.insertCell(5);
                var cell7 = row.insertCell(6);
                var cell8 = row.insertCell(7);

                // Add some text to the new cells:
                cell1.innerHTML = vois.getElementsByTagName("licensePlate")[i].childNodes[0].nodeValue;
                cell2.innerHTML = vois.getElementsByTagName("reason")[(i * 2) + 1].childNodes[0].nodeValue;
                cell3.innerHTML = vois.getElementsByTagName("make")[(i * 4) + 1].childNodes[0].nodeValue;
                cell4.innerHTML = vois.getElementsByTagName("model")[(i * 2) + 1].childNodes[0].nodeValue;
                cell5.innerHTML = vois.getElementsByTagName("vehYear")[i].childNodes[0].nodeValue;
                cell6.innerHTML = vois.getElementsByTagName("color")[i].childNodes[0].nodeValue;
                cell7.innerHTML = vois.getElementsByTagName("ownersName")[i].childNodes[0].nodeValue;
                cell8.innerHTML = vois.getElementsByTagName("ownersPhone")[i].childNodes[0].nodeValue;
            } // end of for loop
        }  // end of if statement
        request.close();

    }; // end of fucntion
} // end of refreshSales function

function searchVOI(search_val) {
    if (search_val.length > 0) {
        var form = document.getElementById('myInput');
        var search_val = form.elements.searchfield.value;
        console.log("Searching for VOI by license plate: " + search_val);
        // Find a <table> element with id="VOITable":
        var VOITable = document.getElementById("VOITable");
        var tableRows = VOITable.getElementsByTagName('tr');
        var rowCount = VOITable.rows.length;
        console.log("get table");
        for (var r = 1; r < rowCount; r++) {
            VOITable.deleteRow(-1);
        }

        var request = makeHttpObject();
        var xmlDoc;
        var parser;
        var x, i;
        var vois, voi;
        request.open("GET", "http://localhost:8080/VehiclesOfInterestWebServices/webresources/model.vehicleofinterest"+search_val, true);
        request.send();
        request.onreadystatechange = function () {

            if (request.readyState == 4)
            {
                console.log("data " + request.responseText.toString());
                parser = new DOMParser();
                vois = parser.parseFromString(request.responseText.toString(), "text/xml");
                voi = vois.documentElement.childNodes;

                for (i = 0; i < voi.length; i++)
                {
                    var row = VOITable.insertRow(-1);

                    // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
                    var cell1 = row.insertCell(0);
                    var cell2 = row.insertCell(1);
                    var cell3 = row.insertCell(2);
                    var cell4 = row.insertCell(3);
                    var cell5 = row.insertCell(4);
                    var cell6 = row.insertCell(5);
                    var cell7 = row.insertCell(6);
                    var cell8 = row.insertCell(7);

                    // Add some text to the new cells:
                    cell1.innerHTML = vois.getElementsByTagName("licensePlate")[i].childNodes[0].nodeValue;
                    cell2.innerHTML = vois.getElementsByTagName("reason")[(i * 2) + 1].childNodes[0].nodeValue;
                    cell3.innerHTML = vois.getElementsByTagName("make")[(i * 4) + 1].childNodes[0].nodeValue;
                    cell4.innerHTML = vois.getElementsByTagName("model")[(i * 2) + 1].childNodes[0].nodeValue;
                    cell5.innerHTML = vois.getElementsByTagName("vehYear")[i].childNodes[0].nodeValue;
                    cell6.innerHTML = vois.getElementsByTagName("color")[i].childNodes[0].nodeValue;
                    cell7.innerHTML = vois.getElementsByTagName("ownersName")[i].childNodes[0].nodeValue;
                    cell8.innerHTML = vois.getElementsByTagName("ownersPhone")[i].childNodes[0].nodeValue;
                } // end of for loop
            }  // end of if statement
            request.close();
        }; // end of fucntion
    }
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Apr 20, 2020, 9:37:46 PM
    Author     : ryan
*/

body {
  padding: 0;
  margin: 0;
  background: #212121;
  color: #f5f5f5;
}
.table-dark {
    background: #212121;
}
.navbar {
    background: #424242;
}
.form-control {
    background: #424242;
    border: none;
    color: #212121;
}
.d-flex {
    margin-left: 10%;
    margin-right: 10%;
}
image

По какой-то причине кажется, что страница просто обновляет sh и загружает все данные, как и прежде. Я не вижу сообщения журнала от searchVOI (), появляющегося в консоли вообще. Мне интересно, вызывается ли каким-либо образом метод refreshVOI () при нажатии кнопки и перезаписи результатов поиска.

Любая помощь будет принята с благодарностью !!!

1 Ответ

1 голос
/ 26 апреля 2020

Ваша проблема была связана с ссылкой на страницу sh при нажатии кнопки поиска, поскольку это была кнопка типа отправки, поскольку вы вызываете функцию для нее, поэтому вам нужно сделать так, чтобы кнопка type = "button" не отправляла, просто проверьте, хотите ли вы этого. 

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
var voiDataArray = [];

function makeHttpObject() {
    try {
        return new XMLHttpRequest();
    } catch (error) {
        alert("error");
    }
    try {
        return new ActiveXObject("Msxml2.XMLHTTP");
    } catch (error) {
        alert("error");
    }
    try {
        return new ActiveXObject("Microsoft.XMLHTTP");
    } catch (error) {
        alert("error");
    }
    throw new Error("Could not create HTTP request object.");
}

function refreshVOI() {
    // Find a <table> element with id="VOITable":
    var VOITable = document.getElementById("VOITable");
    var tableRows = VOITable.getElementsByTagName('tr');
    var rowCount = VOITable.rows.length;
    console.log("Getting all alerts...");
    for (var r = 1; r < rowCount; r++) {
        VOITable.deleteRow(-1);
    }

    var request = makeHttpObject();
    var xmlDoc;
    var parser;
    var x, i;
    var vois, voi;
    request.open("GET", "http://localhost:8080/VehiclesOfInterestWebServices/webresources/model.vehicleofinterest", true);
    request.send();
    request.onreadystatechange = function () {

        if (request.readyState == 4)
        {
            console.log("data " + request.responseText.toString());
            parser = new DOMParser();
            vois = parser.parseFromString(request.responseText.toString(), "text/xml");
            voi = vois.documentElement.childNodes;

            for (i = 0; i < voi.length; i++)
            {
                var row = VOITable.insertRow(-1);

                // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                var cell3 = row.insertCell(2);
                var cell4 = row.insertCell(3);
                var cell5 = row.insertCell(4);
                var cell6 = row.insertCell(5);
                var cell7 = row.insertCell(6);
                var cell8 = row.insertCell(7);

                // Add some text to the new cells:
                cell1.innerHTML = vois.getElementsByTagName("licensePlate")[i].childNodes[0].nodeValue;
                cell2.innerHTML = vois.getElementsByTagName("reason")[(i * 2) + 1].childNodes[0].nodeValue;
                cell3.innerHTML = vois.getElementsByTagName("make")[(i * 4) + 1].childNodes[0].nodeValue;
                cell4.innerHTML = vois.getElementsByTagName("model")[(i * 2) + 1].childNodes[0].nodeValue;
                cell5.innerHTML = vois.getElementsByTagName("vehYear")[i].childNodes[0].nodeValue;
                cell6.innerHTML = vois.getElementsByTagName("color")[i].childNodes[0].nodeValue;
                cell7.innerHTML = vois.getElementsByTagName("ownersName")[i].childNodes[0].nodeValue;
                cell8.innerHTML = vois.getElementsByTagName("ownersPhone")[i].childNodes[0].nodeValue;
            } // end of for loop
        }  // end of if statement
        request.close();

    }; // end of fucntion
} // end of refreshSales function

function searchVOI(search_val) {
    if (search_val.length > 0) {
        var form = document.getElementById('myInput');
        var search_val = form.elements.searchfield.value;
        console.log("Searching for VOI by license plate: " + search_val);
        // Find a <table> element with id="VOITable":
        var VOITable = document.getElementById("VOITable");
        var tableRows = VOITable.getElementsByTagName('tr');
        var rowCount = VOITable.rows.length;
        console.log("get table");
        for (var r = 1; r < rowCount; r++) {
            VOITable.deleteRow(-1);
        }

        var request = makeHttpObject();
        var xmlDoc;
        var parser;
        var x, i;
        var vois, voi;
        request.open("GET", "http://localhost:8080/VehiclesOfInterestWebServices/webresources/model.vehicleofinterest"+search_val, true);
        request.send();
        request.onreadystatechange = function () {

            if (request.readyState == 4)
            {
                console.log("data " + request.responseText.toString());
                parser = new DOMParser();
                vois = parser.parseFromString(request.responseText.toString(), "text/xml");
                voi = vois.documentElement.childNodes;

                for (i = 0; i < voi.length; i++)
                {
                    var row = VOITable.insertRow(-1);

                    // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
                    var cell1 = row.insertCell(0);
                    var cell2 = row.insertCell(1);
                    var cell3 = row.insertCell(2);
                    var cell4 = row.insertCell(3);
                    var cell5 = row.insertCell(4);
                    var cell6 = row.insertCell(5);
                    var cell7 = row.insertCell(6);
                    var cell8 = row.insertCell(7);

                    // Add some text to the new cells:
                    cell1.innerHTML = vois.getElementsByTagName("licensePlate")[i].childNodes[0].nodeValue;
                    cell2.innerHTML = vois.getElementsByTagName("reason")[(i * 2) + 1].childNodes[0].nodeValue;
                    cell3.innerHTML = vois.getElementsByTagName("make")[(i * 4) + 1].childNodes[0].nodeValue;
                    cell4.innerHTML = vois.getElementsByTagName("model")[(i * 2) + 1].childNodes[0].nodeValue;
                    cell5.innerHTML = vois.getElementsByTagName("vehYear")[i].childNodes[0].nodeValue;
                    cell6.innerHTML = vois.getElementsByTagName("color")[i].childNodes[0].nodeValue;
                    cell7.innerHTML = vois.getElementsByTagName("ownersName")[i].childNodes[0].nodeValue;
                    cell8.innerHTML = vois.getElementsByTagName("ownersPhone")[i].childNodes[0].nodeValue;
                } // end of for loop
            }  // end of if statement
            request.close();
        }; // end of fucntion
    }
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Apr 20, 2020, 9:37:46 PM
    Author     : ryan
*/

body {
  padding: 0;
  margin: 0;
  background: #212121;
  color: #f5f5f5;
}
.table-dark {
    background: #212121;
}
.navbar {
    background: #424242;
}
.form-control {
    background: #424242;
    border: none;
    color: #212121;
}
.d-flex {
    margin-left: 10%;
    margin-right: 10%;
}
image
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...