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?

Improve this question

2 Answers 2

Reset to default
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
2
  • Can you show me how this would work with AJAX?
    – developarvin
    Jan 23, 2013 at 3:17
  • Where are you going to put this tag?
    – developarvin
    Jan 24, 2013 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
7
  • 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, 2013 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, 2013 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, 2013 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, 2013 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, 2013 at 4:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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