Isuzu CrewCab Ответов: 1

Объединение функций jquery и ajax в одном скрипте/странице

Привет,

У меня есть 2 сценария, которые я хотел бы объединить. Первый скрипт вызывает php скрипт, который ищет таблицу MySQL и возвращает результаты

<script type="text/javascript">
           var start = 0;
            var limit = 50;
            var reachedMax = false;

            $(window).scroll(function () {
                if ($(window).scrollTop() == $(document).height() - $(window).height())
                    getData();
            });

            $(document).ready(function () {
               getData();
            });

            function getData() {
                if (reachedMax)
                    return;

                $.ajax({
                   url: 'data.php',
                   method: 'POST',
                    dataType: 'text',
                   data: {
                       getData: 1,
                       start: start,
                       limit: limit
                   },
                   success: function(response) {
                        if (response == "reachedMax")
                            reachedMax = true;
                        else {
                            start += limit;
                            $(".results").append(response);
                        }
                    }
                });
            }
        </script>


while the second script displays the letters of the alphabet and captures which ever one was clicked.


<body>
<table>
    <tr>
        <td>
        <button type="button"  value="A">A</button></td>
        <td><button type="button" value="B">B</button></td>
        <td><button type="button" value="C">C</button></td>
        <td><button type="button"  value="D">D</button></td> 
        <td><button type="button" value="E">E</button></td>
        <td><button type="button" value="F">F</button></td>
        <td><button type="button"  value="G">G</button></td> 
        <td><button type="button" value="H">H</button></td>
        <td><button type="button" value="I">I</button></td>
        <td><button type="button"  value="J">J</button></td> 
        <td><button type="button" value="K">K</button></td>
        <td><button type="button" value="L">L</button></td>
        <td><button type="button"  value="M">M</button></td>
    </tr> 
    <tr>
        <td><button type="button" value="N">N</button></td>
        <td><button type="button" value="O">O</button></td>
        <td><button type="button"  value="P">P</button></td> 
        <td><button type="button" value="Q">Q</button></td>
        <td><button type="button" value="R">R</button></td>
        <td><button type="button"  value="S">S</button></td> 
        <td><button type="button" value="T">T</button></td>
        <td><button type="button" value="U">U</button></td>
        <td><button type="button"  value="V">V</button></td> 
        <td><button type="button" value="W">W</button></td>
        <td><button type="button" value="X">X</button></td>
        <td><button type="button"  value="Y">Y</button></td> 
        <td><button type="button" value="Z">Z</button></td>
        <td><button type="button" value="0-9">0-9</button></td>
    </tr>
</table>


<script>

$("button").click(function() {
    var fired_button = $(this).val();
   alert(fired_button); 


});

</script>


Что я в конечном счете хочу сделать, так это нажать на букву и отправить ее в php-скрипт, который будет выполнять поиск.

Я пытался собрать их вместе. Я передаю переменную из захвата кнопки в функцию, но она терпит неудачу. Я новичок в Jquery/AJAX, поэтому любая помощь будет оценена по достоинству.

Спасибо

Что я уже пробовал:

<head>

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body>
 <div class="container" style="margin-top: 20px">
            <div class="row">
                <div class="col-md-6 col-md-offset-3 results">

                </div>
            </div>
        </div>
<table>
    <tr>
        <td>
        <button type="button"  value="A">A</button></td>
        <td><button type="button" value="B">B</button></td>
        <td><button type="button" value="C">C</button></td>
        <td><button type="button"  value="D">D</button></td> 
        <td><button type="button" value="E">E</button></td>
        <td><button type="button" value="F">F</button></td>
        <td><button type="button"  value="G">G</button></td> 
        <td><button type="button" value="H">H</button></td>
        <td><button type="button" value="I">I</button></td>
        <td><button type="button"  value="J">J</button></td> 
        <td><button type="button" value="K">K</button></td>
        <td><button type="button" value="L">L</button></td>
        <td><button type="button"  value="M">M</button></td>
    </tr> 
<pre> <tr>
        <td><button type="button" value="N">N</button></td>
        <td><button type="button" value="O">O</button></td>
        <td><button type="button"  value="P">P</button></td> 
        <td><button type="button" value="Q">Q</button></td>
        <td><button type="button" value="R">R</button></td>
        <td><button type="button"  value="S">S</button></td> 
        <td><button type="button" value="T">T</button></td>
        <td><button type="button" value="U">U</button></td>
        <td><button type="button"  value="V">V</button></td> 
        <td><button type="button" value="W">W</button></td>
        <td><button type="button" value="X">X</button></td>
        <td><button type="button"  value="Y">Y</button></td> 
        <td><button type="button" value="Z">Z</button></td>
        <td><button type="button" value="0-9">0-9</button></td>
    </tr>
</table>


<script>
    var x = "";
    var fired_button = "";

    $("button").click(function() {
        var fired_button = $(this).val();
     alert(fired_button);
     search(fired_button);
    });

    function search(x) {
    var start = 0;
    var limit = 50;
    var reachedMax = false;

    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height())
            getData(x);
        });

<pre>$(document).ready(function () {
            getData(x);
        });

            function getData(y) {
                if (reachedMax)
                    return;

                $.ajax({
                   url: 'data.php',
                   method: 'POST',
                    dataType: 'text',
                   data: {
                       getData: y,
                       start: start,
                       limit: limit
                   },
                   success: function(response) {
                        if (response == "reachedMax")
                            reachedMax = true;
                        else {
                            start += limit;
                            $(".results").append(response);
                        }
                    }
                });
            }
    }

</script>
</body>

DerekT-P

О, и в дополнение к моему предложенному решению; говорить нам, что "это не удается", как правило, не очень полезно! Это может указывать на синтаксическую ошибку, или сбой запуска события, или неожиданные результаты, или... что угодно, на самом деле. Расскажите нам, что происходит и почему это не то, чего вы ожидали или на что надеялись. Ваше "что я сделал" также не указывает на то, что вы пытались устранить проблему. Используйте отладчик сценариев браузера для установки точек останова и пошагового выполнения кода. Удачи вам!

Isuzu CrewCab

Спасибо за решение и предложение, Дерек.

1 Ответов

Рейтинг:
10

DerekT-P

У вас есть обработчик событий window.scroll и обработчик событий document.ready, определенные в функции search (); поэтому, хотя функция search() вызывается, в этот момент нет обработчиков, которые будут срабатывать для получения ваших данных.

Вам больше не нужно обрабатывать document.ready в любом случае, так как в этот момент пользователь не сделал никакого выбора, поэтому нет никакого значения для параметра, чтобы отправить его обратно в функцию ajax. Я предполагаю, что нажатие кнопки должно получить первые результаты через ajax, затем прокрутка до конца загрузит больше, и так далее...?

В этом случае достаточно безопасно (я считаю) просто сделать fired_button глобальной переменной, установить ее в событии нажатия кнопки и получить доступ к ней из getData без необходимости передавать в качестве параметра, что на самом деле не добавляет никакого значения. В вашей функции getData ничего не делайте, если кнопка еще не выбрана (т. е. если пользователь прокручивает вниз перед нажатием кнопки).

Когда пользователь нажимает кнопку, вам нужно очистить предыдущие результаты и сбросить флаги start pointer и max.

Поэтому я думаю, что ваш код становится

<script>
    var fired_button = "";
    var start = 0;
    var limit = 50;
    var reachedMax = false;

    $("button").click(function() {
        fired_button = $(this).val();
        //alert(fired_button);
        start = 0;              // reset start position as this is a new button click
        reachedMax = false;     // reset max flag as this is a new button click
        $(".results").html(""); // clear any previous results for a different button
        getData();
    });

    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height())
            if (fired_button != "") // only get more data if button has been pressed before scrolling
                getData();
    });

    function getData() {
         if (reachedMax)
             return;

         $.ajax({
             url: 'data.php',
             method: 'POST',
             dataType: 'text',
             data: {
                 getData: fired_button,
                 start: start,
                 limit: limit
             },
             success: function(response) {
                 if (response == "reachedMax")
                     reachedMax = true;
                 else {
                     start += limit;
                     $(".results").append(response);
                 }
             }
         });
    }
</script>
В качестве общего замечания, поскольку (я предполагаю) существует только один список результатов, я бы использовал уникальный идентификатор и ссылку через #results, а не имя класса и .results ... Может быть, это только я, но я нахожу, что использование определенного идентификатора делает гораздо более ясным, что вы ссылаетесь на уникальный элемент, а не на имя класса, которое может возвращать несколько элементов.