在页面上提交加载AJAX

Question

I'm very new to AJAX and Jquery so I wondered if anybody could help me.

I've made a AJAX search/filter-system. When you send a form a new page (filter_content.php) will load into the parent page (filter.php). The output of filter_content.php is based on some GET values which you can fill in the form on filter.php

$("#filter").submit(function(event) {
event.preventDefault();
$("#result").html('');
var values = $(this).serialize();
$.ajax({
    url: "filter_content.php",
    type: "get",
    data: values,
    success: function(data){
        $('#result').hide().html(data).fadeIn('normal');
    },
    error:function(){
        $("#result").html('There is error while submit');
    }
});
});

HTML:

<form action="" name="filter" method="get" id="filter">
<input type="text" name="s" value="<?php echo $_GET['s']; ?>" />
<select id="genre" name="genre">
<option value="0">Alle</option>
<option value="5">Deep house</option>
</select>
<input type="submit" name="submit" value="Filter" />
</form>

The problem I now experience is when I visit eg "filter.php?query=hello" the search-query box will be filled in with "hello" but the ajax loaded content can't read the query-value so the content will just display without any conditions. I hope somebody can help me with it!

Thanks in advance!

PS here's a working example: http://phpserver.de-breul.nl:8082/~106967/pov6/filter2.php

Answer 1

Best solution would have the PHP code just output the results from the start.

But if you still want the client to do the search, submit the form if there is a value.

$(function(){
    if ($('input[name="s"]').val().length>0) {
        $("#filter").submit();
    }
});