1 Вопрос: Как изменить предварительный просмотр оповещения в Javascript HTML

вопрос создан в Thu, May 2, 2019 12:00 AM

У меня есть javascript (из которого я не эксперт), который возвращает запрос, который я делаю через службу Python, к базе данных Mongodb.

Этот запрос приходит в готовом формате следующим образом

  

[{ЦЕПЬ: «УЛИЦА УЖЕ, ЭЛМЕР», КОД: «1234»}, {ЦЕПЬ: «УЛИЦА ЛМ, ЛМАО», КОД: «5678»}]

Решение, которое я увидел, состояло в том, чтобы создать таблицу, которая возвращала этот результат, чтобы показать его пользователю. Я должен сделать пару изменений:

Один из них - вернуть полный курсор базы данных, пока не вернется только строка, которую я написал в HTML, но в базе данных я создаю своего рода LIKE, который возвращает все строки, содержащие эту строку. То есть, когда я пишу LM, база данных возвращает предыдущий список, но в HTML я получаю только

  

{ЦЕПЬ: "УЛИЦА LM, ЛМАО", КОД: "5678"}

Второе, что мне нужно сделать, - это изменить окно, которое появляется, когда я нажимаю на элемент этой таблицы. Прежде чем нажать на таблицу, я получаю результат

  

УЛИЦА УЛИЦА LM, LMAO

но теперь теперь я должен объединить, кроме результата строки, код и показать что-то вроде

  

УЛИЦА УЛИЦА LM, LMAO 5678

У них будет представление о том, как я могу это изменить? Я понятия не имею, и у меня было довольно много времени, не находя, как

Это мой код:

<style>
            table tr:not(:first-child){
                cursor: pointer;transition: all .25s ease-in-out;
            }
            table tr:not(:first-child):hover{background-color: #ddd;}
            table td {border: 1px #DDD solid; padding: 5px; cursor: pointer;}
</style>

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    </head>
    <body>
        <div id="cantidad">
        Cantidad de elementos sugeridos:
        <input type="radio" id="10" name="cant" value="10" checked="checked"> 10
        <input type="radio" id="15" name="cant" value="15"> 15
        <input type="radio" id="20" name="cant" value="20"> 20
        </div>
        <div id="country">
        Seleccione País:
        <select name="pais">
        <option value="ARGENTINA" selected="selected">ARGENTINA</option> 
        <option value="PARAGUAY">PARAGUAY</option> 
        <option value="URUGUAY">URUGUAY</option>
        </select>
        </div>
        <br>
        Ingrese la calle a buscar, la localidad, partido/depto.y provincia en cualquier orden.<br>
        Para obtener mejor resultado en la búsqueda, ponga entre comillas los nombres compuestos<br>
        Por ejemplo: "san martin", etc.<br>
        <input id="CHAIN" type="text" placeholder="ingrese el string para buscar una calle" autocomplete="off" size="80"/>
        <table id="table">
            <tbody>
            </tbody>
        </table>
    </body>
</html>

<script type="text/javascript">
    var parsedJSON;
    var ex = document.getElementsByName('pais')[0];
    function actualiza () {
        var selected_pais= ex.options[ex.selectedIndex].text;
            var params = {
                type: 'POST',
                url: 'http://127.0.0.1:5007/suggestStreetName',
                //data: JSON.stringify({ "CHAIN": $("#chain").val() }),
                contentType: 'application/json; charset=utf-8',
                dataType: "json",
                success: function (response) {
                    parsedJSON = JSON.parse(JSON.stringify(response));
                    $("#table tr").remove();
                    var tableRef = document.getElementById('table');
                    for (var i = 0; i < parsedJSON.length; i++) {
                        var newRow   = tableRef.insertRow(0);
                        var newCell  = newRow.insertCell(0);
                        /*newCell.onclick = function () {  tableText(this);  };*/
                        newCell.onclick = function () {  tableText(this);  };
                        var newText  = document.createTextNode(parsedJSON[i].CHAIN);
                        var newText2  = document.createTextNode(parsedJSON[i].CODIGO);
                        newCell.appendChild(newText);
                    }
                    console.log(selected_pais);
                },
                error: function (error) {
                    console.log(error);
                }
            };
        if ($("#chain").val().length > 0) {
            cantidad = "10";
            if (document.getElementById('10').checked) {
                cantidad = "10";
            } else {
                if (document.getElementById('15').checked) {
                    cantidad = "15";
                } else {
                    cantidad = "20";
                }
             };
             if (selected_pais == 'ARGENTINA') {
                console.log("Pais en el IF: ",selected_pais);
                params.data = JSON.stringify({ "CHAIN": $("#chain").val(), "CANTIDAD": cantidad }),
                params.url = 'http://127.0.0.1:5007/suggestStreetName';
                }
            else if (selected_pais == 'PARAGUAY') {
                console.log("Pais en el IF: ",selected_pais);
                params.data = JSON.stringify({ "CHAIN": $("#chain").val(), "CANTIDAD": cantidad }),
                params.url = 'http://127.0.0.1:5008/suggestStreetName';
                }
            else if (selected_pais == 'URUGUAY') {
                console.log("Pais en el IF: ",selected_pais);
                params.data = JSON.stringify({ "CHAIN": $("#chain").val(), "CANTIDAD": cantidad }),
                params.url = 'http://127.0.0.1:5009/suggestStreetName'
                }
            else {
                params.data = JSON.stringify({ "CHAIN": $("#chain").val(), "CANTIDAD": cantidad }),
                params.url = 'http://127.0.0.1:5007/suggestStreetName'
                }
            $.ajax(params);
        } else {
                 document.getElementById('table').innerHTML = '';
        }
    }

    $("#chain").keyup(function (e) {
        actualiza();
    });

    $('input[type=radio][name=cant]').change(function() {
        console.log('Imprime radio button');
        actualiza();
    });

    $('select[name=pais]').change(function() {
        console.log('Imprime pais');
        $("#table tr").remove();
        $("#chain").val(undefined);
        console.log('Limpia Cadena');
        actualiza();
    });

function tableText(tableCell) {
    alert(tableCell.innerHTML);
}


function highlight(e) {
    if (selected[0]) selected[0].className = '';
    e.target.parentNode.className = 'selected';
}


</script>
    
0
  1. Вы действительно должны избегать использования переводчика с испанского на английский для публикации своих вопросов или, по крайней мере, проверять переведенный текст перед публикацией, так как это может быть трудно для людей, которые не не знаю испанского, чтобы правильно понять вашу проблему. Кроме того, я вижу кое-что, что сделало меня любопытным. В вашей функции успеха в AJAX вы вызываете parsedJSON[i].STRING, которая (как вы указали в своем вопросе) имеет структуру возвращаемой строки JSON с CHAIN ​​и индексом CODE. Итак, что произойдет, если вы используете: parsedJSON[i].CHAIN и parsedJSON[i].CODE
    2019-05-02 18: 52: 09Z
  2. прости меня, Келли, я внес изменение
    2019-05-02 19: 18: 29Z
1 ответ                              1                         

Вы можете кэшировать данные, полученные с помощью ajax, в глобальную переменную, а затем создать функцию для извлечения нужных данных, назначив событию onclick функцию, например: функцию FindValues ​​(position) ... примерно так: р>

for (var i = 0; i < parsedJSON.length; i++) {
    var newRow   = tableRef.insertRow(0);
    var newCell  = newRow.insertCell(0);
    newCell.onclick = FindValues(i);
    var newText  = document.createTextNode(parsedJSON[i].CHAIN);
    var newText2  = document.createTextNode(parsedJSON[i].CODIGO);
    newCell.appendChild(newText);
}

в FindValues ​​(позиция) у вас будут необходимые данные, и вы сможете делать все, что вам может понадобиться.

Надеюсь, это поможет

Приветствия р>     

0
2019-05-03 17: 27: 31Z
источник размещен Вот