Чтение и использование данных, вводимых пользователем в jquery

Я слежу за https://tableau.github.io/webdataconnector/docs/wdc_multi_table_tutorial. Я хочу получить определенные параметры от пользователя и создать соответствующий URL-адрес. это мой код

<html>
<head>
    <title>USGS Earthquake Feed</title>
    <meta http-equiv="Cache-Control" content="no-store" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
        crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
        crossorigin="anonymous"></script>
    <script src="https://connectors.tableau.com/libs/tableauwdc-2.3.latest.js" type="text/javascript"></script>
    <script>
    (function () {
        // Create the connector object
        var myConnector = tableau.makeConnector();
        myConnector.getSchema = function (schemaCallback) {
            var cols = [{
                id: "MONTH",
                dataType: tableau.dataTypeEnum.string
            }, {
                id: "METRICKEY",
                alias: "METRICKEY",
                dataType: tableau.dataTypeEnum.string
            }, {
                id: "NUMERATOR",
                alias: "NUMERATOR",
                dataType: tableau.dataTypeEnum.float
            }, {
                id: "DENOMINATOR",
                dataType: tableau.dataTypeEnum.float
            }];

            var tableSchema = {
                id: "feed",
                alias: "Feed",
                columns: cols
            };

            schemaCallback([tableSchema]);
        };

        myConnector.getData = function (table, doneCallback) {
            var filters = tableau.filters;
            console.log("filters");
            console.log(tableau.filters);
            var projections = tableau.projections;
            var apicallUrl = 'test/?name=nb&filters=' + filters + '&projections=' + projections;
            console.log(apicallUrl);
            $.getJSON(apicallUrl, function (resp) {
                var feat = resp.DATA,
                tableData = [];
                // Iterate over the JSON object
                for (var i = 0, len = feat.length; i < len; i++) {
                    tableData.push({
                        "MONTH": feat[i].MONTH,
                        "METRICKEY": feat[i].METRICKEY,
                        "NUMERATOR": feat[i].NUMERATOR,
                        "DENOMINATOR": feat[i].DENOMINATOR
                    });
                }
                table.appendRows(tableData);
                doneCallback();
            });
        };
        tableau.registerConnector(myConnector);
        $(document).ready(function () {
            $("#submitButton").click(function () {
                var filters = $('#filters').val().trim();
                var projections = $('#projections').val().trim();
                tableau.filters = JSON.stringify(filters);
                tableau.projections = projections;
                tableau.submit();
            });
        });
    })();
    </script>
</head>
<body>
    <div class="container container-table">
        <div class="row vertical-center-row">
            <div class="text-center col-md-4 col-md-offset-4">
                <h2>Get Earthquake Data for a Time Range</h2>
                <form>
                    <div class="form-inline">
                        <label for="start-date-one" class="text-center">filters</label>
                        <span>&mdash;</span>
                        <label for="end-date-one">projections</label>
                    </div>
                    <div class="form-inline">
                        <input type="text" class="form-control" id="filters" value="">
                        <input type="text" class="form-control" id="projections" value="">
                    </div>
                </form>
                <button type="button" id="submitButton" class="btn btn-success" style="margin: 10px;">Get Earthquake Data!</button>
                <div id="errorMsg"></div>
            </div>
        </div>
    </div>
</body>
</html>

Я пытаюсь получить параметры пользовательских данных tableau.filters и tableau.projection, но когда я пытаюсь прочитать их в функции get dat, значения приходят как undefined. есть идеи, почему это происходит?

Есть ли общий способ получить данные пользователя и использовать их в какой-либо другой функции в jquery, которую я могу использовать здесь?

проекции и фильтры - это текстовые блоки, значение которых я читаю в своем коде в $ (document) .ready. когда я печатаю значения tableau.filters и tableau.projection в этой функции, я получаю значения, но когда я печатаю эти значения в getdata (), они становятся неопределенными.

Благодарность

Я не вижу ссылок на проекции в упомянутом вами руководстве. Попробуйте console.log(tableau) ; или console.log(tableau.projections);. Изучите параметр, который вы добавили в созданный вами var apicallUrl, чтобы получить дополнительную информацию.

mcv 11.04.2018 12:19

@mcv мы печатаем tableau.filters и tableau.projection $ (document). Уже получаю значения, но когда я печатаю их в getdata (), они приходят как undefined.

bhavesh 11.04.2018 12:36

Ваш код действительно трудно (для меня) читать, потому что между каждой строкой есть пробел. Приходится много листать. Просто кое что для раздумий.

wizzwizz4 11.04.2018 12:38

в получении данных вы уверены, что это не переменная table ?!

mcv 11.04.2018 14:01

@mcv извини, я тебя не понял

bhavesh 11.04.2018 14:29

Я бы повторил ваши шаги в руководстве, чтобы увидеть, где вы ошиблись ... Я не могу найти ссылку на projections в предоставленной вами ссылке.

mcv 11.04.2018 15:14

@mcv ya projection отсутствует в учебнике, это что-то, что я использую как вводимые пользователем данные из формы.

bhavesh 11.04.2018 19:21

ну почему бы не получить доступ к информации, которую вы уже получили? Используйте javascript или jQuery внутри getData. Я думал, что getData предназначено для получения информации из внешнего источника URL.

mcv 11.04.2018 22:54
2
8
77
1

Ответы 1

У меня есть решение Это была глупая проблема мы должны записать данные в параметр connectionData или connectionName объекта tableau.

$(document).ready(function() {
            $("#submitButton").click(function() {
              var urlObject = {
                  filters: $("#filters").val().trim(),
                  projections: $("#projections").val().trim(),
              };
                    tableau.connectionData = JSON.stringify(urlObject);
                    tableau.submit();

            });
        });

Другие вопросы по теме