CODEWITHSUNDEEP
jquerycssformsjquery-mobile
eysikal
eysikal

Reputation: 589

Why Does the Form on this Page Only Work Once?

Here's the Form in Question

I'm new to jQuery Mobile, so I suspect this issue has something to do with the JS jQuery Mobile runs.

The form seems to behave as expected the first time through. Subsequent submissions seem to do nothing...and there is also mildly annoying animation after each submission.

EDIT: You can enter "test" for an example query. 

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Phone Price Look-up</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
        <style>
            /* App custom styles */
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
        </script>
        <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js">
        </script>
    </head>
    <body>
        <div data-role="page" id="page1">
            <div data-theme="a" data-role="header">
                <h3>
                    Price Finder
                </h3>
            </div>
            <div data-role="content">
                <div id="search-form-container">
                    <form name="search-form">
                        <div data-role="fieldcontain">
                            <fieldset data-role="controlgroup">
                                <label for="search_term">
                                    Enter Model Number:
                                </label>
                                <input id="search_term" placeholder="" value="" type="text" />
                            </fieldset>
                        </div>
                        <input id="search-form-submit" type="submit" data-theme="b" value="Submit" />
                    </form>
                </div>
            </div>
            <div data-theme="a" data-role="footer">
                <h2>
                    www.thephonerecyclers.com
                </h2>
            </div>
        </div>
        <script>
            $(document).ready(function() {
                $.mobile.ajaxLinksEnabled = false; // don't really know what this does.
                $('#search-form-submit').click(function() {
                    var searchTerm = $('#search_term').val();
                    $.ajax({
                        type: 'POST',
                        url: 'ajax/search.php',
                        data: {search_term: searchTerm},
                        success: function(response) {
                            response = JSON.parse(response);
                            if (!response.success) {
                                alert('no phone found');
                            } else {
                                var phoneInfo = JSON.parse(response.response);
                                alert(phoneInfo[0].manufacturer + ' ' + phoneInfo[0].name + ' (' + phoneInfo[0].model_no + ')' + '\n$' + phoneInfo[0].price);
                            }
                        },
                        error: function() {
                            //handle error
                            alert('error doing ajax, mate');
                        }
                    });
                });
            });
        </script>
    </body>
</html>

Upvotes: 2

Views: 744

Answers (3)

r0m4n
r0m4n

Reputation: 3512

Because much of JQuery mobile utilizes hash routing navigation and dynamically created content, normal event handlers may not be enough. In your example, you are posting a form to a new hash route and rebuilding the page without a reload. The newly created objects are not included in any of the event handlers you previously defined.

Instead of defining the click handler as you did:

$('#search-form-submit').click(function() {

You should utilize the jQuery "on" function. Because you are including an older version of JQuery, use the "live" function that serves a similar purpose like this:

 $('#search-form-submit').live("click", function(){

By binding the event in this manner, any dynamically created content should also be included by the handler.

Upvotes: 3

ThiefMaster
ThiefMaster

Reputation: 318488

Fix the syntax errors in this line:

alert(phoneInfo[0].manufacturer +' '+ phoneInfo[0].name +(+ +phoneInfo[0].model_no+ +)+ +'\n$'+ phoneInfo[0].price);

e.g.:

alert(phoneInfo[0].manufacturer+' '+phoneInfo[0].name+'('+phoneInfo[0].model_no+')'+'\n$'+phoneInfo[0].price);

Upvotes: 0

JKirchartz
JKirchartz

Reputation: 18022

Your alert in your ajax success function has syntax errors, I think this is what keeps it from working:

you have:

 alert(phoneInfo[0].manufacturer +' '+ phoneInfo[0].name +(+ +phoneInfo[0].model_no+ +)+ +'\n$'+ phoneInfo[0].price);

should be:

 alert(phoneInfo[0].manufacturer +' '+ phoneInfo[0].name +'('+phoneInfo[0].model_no+')\n$'+ phoneInfo[0].price);

Upvotes: 0

Related Questions