Combining a jquery and ajax functions in same script/page

Question

0.00/5 (No votes)

See more:

Hi,

I have 2 scripts that I would like to combine. The first script calls a php script that searches a MySQL table and returns the results

JavaScript

<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.

JavaScript

<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>

What I ultimately want to do is to click on a letter and have the letter pushed to the php script which will do the search.

I have tried to put them together. I pass the variable from the button capture to a function but it fails. Am a Jquery/AJAX newbie, so any assistance would be appreciated.

Thanks

What I have tried:

HTML

<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>

JavaScript

<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>

Posted 28-May-20 9:34am

Isuzu CrewCab

Updated 30-May-20 13:51pm

v2

Add a Solution

Comments

DerekT-P 29-May-20 12:41pm

Oh, and further to my suggested solution; telling us "it fails" is generally not very useful! That might indicate a syntax error, or a failure of the event to fire, or unexpected results, or... anything, really. Tell us what DOES happen and why this is not what you were expecting or hoping for. Your "What I have done" doesn't indicate that you've attempted to debug the issue, either. Use the browser's script debugger to set breakpoints and step through your code. Good luck!

Isuzu CrewCab 30-May-20 19:53pm

Thanks for the solution and the suggestion Derek.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

DerekT-P · Accepted Answer · 2020-05-29T06:39:00

You've got your window.scroll event handler and your document.ready event handler both defined within the search() function; so although search() is getting called, at that point there's no handlers that will fire to get your data.

You no longer need to handle document.ready anyway, since at that point the user hasn't made any selection so there's no value for the parameter to send back to the ajax function. I'm assuming that clicking the button should get the first results via ajax, then scrolling to the end will load more, and so on...?

In this case it's safe enough (I believe) to just make fired_button a global variable, set it within the button click event and access it from getData without needing to pass as a parameter, which really adds no value. In your getData function, do nothing if a button hasn't yet been selected (i.e. if the user scrolls down before clicking a button).

When the user clicks a button, you need to clear previous results and reset your start pointer and max flags.

So I think your code becomes

JavaScript

<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>

As a general comment, since (I assume) there is only one results list, I'd use a unique ID and reference via #results rather than use the class name and .results ... Maybe it's just me, but I find using a specific ID makes it much clearer that you are referring to a unique element rather than a classname which may return multiple elements.

Combining a jquery and ajax functions in same script/page

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us