CODEWITHSUNDEEP
jqueryajaxjson
Steve
Steve

Reputation: 43

Jquery - Ajax Calls just not working

I've wrestled with this half the day or more. I cannot figure out what is wrong. I stripped out other javascript functions, php code, etc; and I still get a page reload rather than an asynch call with nothing returned. Firebug does not show an XHR call either.

Jquery is loaded properly and works fine for other functions. Just any ajax or jSON call fails to work asynchronously.

I even changed the keypress function to a simple button click handler and the same result...nothing.

If I load the "findmatch.php" page directly it generates the proper result.

Another program in this same directory uses lots of ajax and jSON calls effortlessly and flawlessly. Same doctype, same version of jquery, same structure of the ajax call....I'm baffled in a major way. I keep looking for really stupid errors because that is what these things tend to be...but no luck.

        <script type=text/javascript>
        $(document).ready( function() {

    $('#searchtext').live('keypress',function(e)

    {       if (e.which == 13)          {
                mysearch=$("#searchtext").val();            if(mysearch=="")            {
                        alert("Trying typing something in the box, ok?");           }           else            {
                    $.ajax({
                    url: 'findmatch.php',                          
                    data: 'x='+mysearch,            
                    dataType: 'html',
                    success: function(res)          
                    {
                         alert(res);    

                        if(res.length>0)
                        {
                            buildit="<table><tr><td>id</td>td><b>Machine Name</b></td></tr>";   

                            buildit=buildit+res+"</table>";

                            $("#searchresults").html(buildit);

                            $("$searchtext").focus();
                        }
                        else
                        {
                            $("#searchresults").html("No Results Found");
                            $("#searchtext").focus();
                        }
                    }
                    });             }
                            }     });


    });

    </script>

</head>

<body>


<div class="searchy">
<h3>Search for an existing record?</h3>

<form>
Enter a Machine Name to search for, such as "bl-psy-srv" or "psy-srv" or something similar. A partial name will return appropriate matches. Hit Enter to submit.
<br />
<input type=text id="searchtext" size=30>
</form>

</div>

<div class="searchy" id="searchresults">
</div>

Upvotes: 0

Views: 110

Answers (1)

Amadan
Amadan

Reputation: 198324

Is #searchtext in a form? I think Enter will trigger a submit action on the form, and you're not preventing it. Try inserting an e.preventDefault(), see how it goes.

Unrelated, you probably want to URL-encode mysearch, or better yet just use an object - jQuery is smart enough to convert it into a proper form: { x: mysearch }

Upvotes: 1

Related Questions