Question

I’m trying to pass user input form data jquery/ajax to check if there’s any. Finally, I can grab them from server while using json_encode() method PHP side and display the result in Jquery.

But how to display a custom error message “Can Not find search…” in Jquery when it can not find anything return in Jquery HTML client side? I’m a bit new with Jquery syntax.

$.ajax({
            url: path,
            type: "POST",
            data: { search: keyword },
            dataType: "json",
            success: function(data) {
                $('#suggestionResult').fadeIn(500);
                $('#keyword').removeClass('loading');

                firstIndex = 0;
                limit = 25;

                $.each(data.tabResults, function(i, data) {
                    content = "<ul><li class='result'><strong>" + UCFirstChar(data.title) + "</strong></li>";

                if (data.actors.length > limit) {
                    content += "<li class='result'>" + UCFirstChar(data.actors.substring(firstIndex, limit)) + "...</li>";
                }
                content += "</ul>";
                $(content).appendTo('#suggestionResult');
            });

            error:function (xhr, textStatus, thrownError, data) {
                console.log("Can't find search item...");
                console.log(">> Update Error Status: ", xhr.status, " Error Thrown: ", thrownError);
            }); 

         <div class="search">
            <form id="myform" method="post" action="film_controller/test">
                <input type="text" name="keywordsearch" id="keyword">
                <input type="submit" name="search" value="Search">
            </form>
            <div id="suggestionResult"><div id="error_msg">Can't find search...</div></div>
        </div>

Answer 1

There are lots of ways to do it. A simple way would be to have the error message in a hidden div. When the search doesn’t return results, simply show the div. Something like:

<script type="text/javascript">
    $.ajax({
        url: path,
        type: "POST",
        data: { search: keyword },
        dataType: "json",
        success: function(data) {
            $('#error_msg').hide();
            $('#suggestionResult').fadeIn(500);
            $('#keyword').removeClass('loading');

            firstIndex = 0;
            limit = 25;

            $.each(data.tabResults, function(i, data) {
                content = "<ul><li class='result'><strong>" + UCFirstChar(data.title) + "</strong></li>";

            if (data.actors.length > limit) {
                content += "<li class='result'>" + UCFirstChar(data.actors.substring(firstIndex, limit)) + "...</li>";
            }
            content += "</ul>";
            $(content).appendTo('#suggestionResult');
        });

        error:function (xhr, textStatus, thrownError, data) {
            $('#error_msg').fadeIn(300);

            console.log("Can't find search item...");
            console.log(">> Update Error Status: ", xhr.status, " Error Thrown: ", thrownError);
        }); 
</script>

<div class="search">
    <form id="myform" method="post" action="film_controller/test">
        <input type="text" name="keywordsearch" id="keyword">
        <input type="submit" name="search" value="Search">
    </form>
    <div id="error_msg" style="display: none;">Can't find search...</div>
    <div id="suggestionResult"></div>
</div>

You can add a ‘close’ button to it that hides the div again, so another search can be performed.