3

I have seen this question about using Low Search with Ajax but I still don't see how to integrate them.

Given this form

{exp:low_search:form collection="foo" search_mode="any" result_page="foo/search" form_id="search_form"}
  <fieldset>
    <label for="keywords">Keywords</label>
    <input type="search" name="keywords" id="keywords" />
    <button type="submit" id="search">Search</button>
  </fieldset>
{/exp:low_search:form}

and this Javascript code

$(document).ready(function(){
    $("#search_form").on("submit", function(event){
        event.preventDefault();

        // HOW DO I GET THE ENCODED STRING HERE?

        var aData = [],
            sSource = $(this).attr("action");

        $.ajax(
        {
            'dataType': 'json',
            'type': 'POST',
            'url': sSource,
            'data': aData,
            'success': function (oAjaxData, sTextStatus)
            {
            },
            'error': function (jqXHR, sTextStatus, errorThrown)
            {
                console.log(sTextStatus);
            },
            'complete': function (jqXHR, sTextStatus)
            {}
        });
    });
});

How do I get the encoded query string in the Javascript code?

3

The answer is to use the Low Search URL tag, which can produce a human-readable ACT URL with the keywords as a param.

http://gotolow.com/addons/low-search/docs/tags#url-tag

| improve this answer | |
  • Can you show me how this would work with AJAX? – developarvin Jan 23 '13 at 3:17
  • Where are you going to put this tag? – developarvin Jan 24 '13 at 8:08
2

@juddlyon is correct. I personally prefer to use the the jQuery form plugin which kind of negates the need for the url tag.

Here's the code I used:

{preload_replace:template_group="your-template-group"}
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>
</head>
<body>
<script>
$(function() {

    var $pageWrap = $('.wrap');

    var options = {
        target: $pageWrap,
        beforeSubmit:  showRequest,
        success: showResponse
    };

    // Show loading message and submit form
    function showRequest(formData, jqForm, options) {
        $pageWrap.addClass("loading").prepend('<div class="search-load">Searching</div>');
        return true;
    }

    function showResponse() {
        $pageWrap.removeClass('loading');
    }

    // bind to the form's submit event
    $('#filter').submit(function() {
        $("#filter").ajaxSubmit(options);
        return false;
    });

});
</script>

    <div class="wrap">
        {exp:low_search:form
            form_id="filter" 
            collection="insert_your_collection" 
            result_page="/{template_group}/results"
            search_mode="any"
            encode="no"
        }
            <label for="keywords">Keywords</label>
            <input type="search" name="keywords" id="keywords" />
            <input type="submit" name="submit" value="Search" />
        {/exp:low_search:form}
    </div>

</body>
</html>
| improve this answer | |
  • I don't think this works since you are serializing the field values. Low search doesn't use POST to get the field values. It gets them from the query string – developarvin Jan 23 '13 at 3:16
  • Hey @arvinsim I'm not sure why you would think it matters if the field values are encrypted or not? The results tag on the results page will un-encrypt the query string for you automatically. If it is an issue for whatever reason the url tag mentioned by juddlyon will resolve that. I can assure you the above code does work, I've tested it. Where exactly are you getting stuck? – Andy Homan Jan 23 '13 at 6:39
  • Are you saying to put it in the ajax low search results page like "{exp:low_search:results query="{exp:low_search:url}" group_id="7" is_member_displayable="yes"}"? – developarvin Jan 24 '13 at 7:52
  • I tried using your serializeArray option and use my ajax code in the question to pass the values. The ajax call didn't return values as expected. It got redirected. I only found out later that it is because of ACT=31 – developarvin Jan 24 '13 at 8:13
  • Is this solution dependent on jQuery form plugin? If so, is there a solution that does not require that plugin(like what I did in my question) – developarvin Jan 25 '13 at 4:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.