I've hit my head against the walls for hours on this one, searching the internet for ideas and trying everything I can come up with. Yet I still can't explain why my simple little ajax call works in Chrome/FF/Safari but not in IE or Opera.
JQUERY
- using Google jsapi autoloader for jQuery 1.7.1 and jQueryUI 1.8.17
- also have jQuery Validate 1.9 and jQuery Forms
AJAX
- <script type="text/javascript">
- $(document).ready(function() {
- $('#zipper').submit(function() { // catch the form's submit event
- $.ajax({ // create an AJAX call...
- type: $(this).attr('method'), // GET or POST
- url: $(this).attr('action'), // the file to call
- data: $(this).serialize(), // get the form data
- cache: false,
- success: function(response) { // on success..
- $('#created').html(response) // update the DIV
- }
- });
- return false; // cancel original event to prevent form submitting
- });
- });
- </script>
FORM
- <form action="http://washingtonguard.colliertech.org/ngb/recruiter.php" method="get" enctype="application/x-www-form-urlencoded" name="zipper" id="zipper">
- <label for="zip">Enter your zipcode:</label>
- <input type="text" name="zip" id="zip"/>
- <input type="submit" name="submit" value="Search" />
- </form>
DIV
- <div id="created" class="created"></div>
The few times I've gotten it to half way work my results always end up on a blank page rather than in the specified div.
Any ideas as to what I'm missing here?