EE search submit via AJAX
Development and Programming
Hi
I have a site where I am getting results via ajax and loading them.
I am using the {exp:search:search_results} tag, and I know the template is working fine because if I do a full POST the results are there
I’m using javascript to intercept the form submit, serialize the fields and submit the form via AJAX, but the result data is always an empty string
I’m guessing there is some parsing issue or something with how the built in search works. Can someone shed some light on why I can’t use the search this way, and if not possible a solution outside of the Super Search module by Solspace?
I read something about modules using ACT’s and how they don’t parse the templates or something along those lines…..I’m open to using php to hack a solution, but one thing to note is the search results template is already using php parsing on output, so I might be limited if the solution requires input parsing(which I would assume)
are you serializing hidden form fields also with ajax post?
and also please check with Firefox console for the ajax request and response.
I actually just figured this out and thought I’d post it here for anyone in a similar situation.
I haven’t build any modules for EE so I’m not overly familiar with ACT’s, but it appears once I send the search, it then gets redirected to another place for the results with a hash in the URL
The ajax response send back this of note:
Refresh:0;url=http://removed/projects/keyword_results/cf63be82ffb9e43a711d9cc60384d2bb/
So I extract the Refresh property from the response object, parse the URL out, then make another ajax request with the URL there and bam, there is my results which I then load. If all ACT’s work in this fashion, this might be useful for any modules using them as a way to call them asynchronously.
Anyways, enjoy and thanks for the response
total ajax noob here. Could you give an example of how you did this?
Sure I can help you
Let’s assume the form has an id of ‘keyword’ We’ll assume the URL you want to request is the action attribute of the form I’ve taken a couple things out like checking that the keyword is not blank etc for simplicity
$('#keyword').submit(function(e){
if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; }
var keyword = $(this).find("input[type='text']").val();
var values = $(this).serialize();
var postURL = $(this).attr('action');
$.ajax({
url: postURL,
type: "POST",
data: values,
success: function(data, textStatus, jqXHR){
//Below gets the refresh object with the redirect URL where the results will be
var refreshObject = jqXHR.getResponseHeader('Refresh');
//I then use the substring method to slice out the URL I want to retrieve the data from, and pass it to a second function
getKeywordResults(refreshObject.substr(6));
}
});
});
//This is the second function, where I simply take the URL I sliced out and on success pass the data to my function named 'showResults' to display it on the page
function getKeywordResults(url){
$.ajax({
url: url,
type: "POST",
success: function(data, textStatus, jqXHR){
showResults(data);
}
});
}How do I get the results to show up in a target div of my choosing on the same page? It keeps just going to my search results template.
I was thinking I could set up the results template and then pull that info back into my original search page. I feel like I’m super close to making this work, but I’m just missing something.
Thanks for your help!
In the second function, where I am calling showResults(data), I am just passing the data to something that puts the data in the right place
Let’s assume your div has an id of results
Instead of showResults(data), you would just do
$(‘#results’).html(data);
I guess I’m just missing something incredibly obvious, because it’s just not working for me. Since four eyes are better than two, I’ll let you take a look and tell me what I’m doing wrong.
Here’s my template code. This shows a member directory with a search field to search for specific members. When I submit my search form, it just takes me to the search_results template instead of loading it back into the #memberResults div.
{exp:search:simple_form weblog="member_directory" id="memberSearch" result_page="members/search_results" results="10"}
<label for="keywords">Search:</label>
<input type="text" name="keywords" id="keywords" value="" size="18" maxlength="100">
<input type="submit" value="submit" class="submit"></p>
{/exp:search:simple_form}
<div id="memberResults"></div>
<div id="memberContainer">
{exp:weblog:entries weblog="member_directory" limit="10" disable="trackbacks|categories|member_data" sort="asc" orderby="{member_last_name}"}
<div class="memberInfo">
{if member_photo}
{exp:ed_imageresizer image="{photo_url}" forceWidth="yes" maxWidth="115" forceHeight="yes" maxHeight="145" cropratio="115:145" alt="{screen_name}'s avatar"}
{if:else}
{site_url}assets/images/no_photo.jpg
{/if}
<span class="memberSort">{member_last_name}</span>
{member_first_name} {member_last_name}
<em>{member_company}</em>
{member_address}{if member_address_2}, {member_address_2}{/if}
{member_city}, {member_state} {member_zip}
Wk: {member_work_phone}
{if member_cell_phone}Cell: {member_cell_phone}
{/if}
{if member_fax}Fax: {member_fax}
{/if}
{if member_website}{member_website}
{/if}
{member_email}
</div>
{paginate}
<div id="memberPaginate">
Page {current_page} of {total_pages} pages
{pagination_links}
</div>
{/paginate}
{/exp:weblog:entries}
</div>I have your js code in a file called ajaxSearch.js
$('#memberSearch').submit(function(e){
if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; }
var keyword = $(this).find("input[type='text']").val();
var values = $(this).serialize();
var postURL = $(this).attr('action');
$.ajax({
url: postURL,
type: "POST",
data: values,
success: function(data, textStatus, jqXHR){
//Below gets the refresh object with the redirect URL where the results will be
var refreshObject = jqXHR.getResponseHeader('Refresh');
//I then use the substring method to slice out the URL I want to retrieve the data from, and pass it to a second function
getKeywordResults(refreshObject.substr(6));
}
});
});
//This is the second function, where I simply take the URL I sliced out and on success pass the data to my function named 'showResults' to display it on the page
function getKeywordResults(url){
$.ajax({
url: url,
type: "POST",
success: function(data, textStatus, jqXHR){
$('#memberResults').html(data);
}
});
}To me it looks like you’re not initializing the form submit and that’s why the form is submitting normally.
Wrap the first function in a document ready call. The file should now look like this
$(document).ready(function(){
$('#memberSearch').submit(function(e){
if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; }
var keyword = $(this).find("input[type='text']").val();
var values = $(this).serialize();
var postURL = $(this).attr('action');
$.ajax({
url: postURL,
type: "POST",
data: values,
success: function(data, textStatus, jqXHR){
//Below gets the refresh object with the redirect URL where the results will be
var refreshObject = jqXHR.getResponseHeader('Refresh');
//I then use the substring method to slice out the URL I want to retrieve the data from, and pass it to a second function
getKeywordResults(refreshObject.substr(6));
}
});
});
});
//This is the second function, where I simply take the URL I sliced out and on success pass the data to my function named 'showResults' to display it on the page
function getKeywordResults(url){
$.ajax({
url: url,
type: "POST",
success: function(data, textStatus, jqXHR){
$('#memberResults').html(data);
}
});
}Thanks for your patience and hanging in there with me on this! It’s getting closer.
Now it stays on the page, but doesn’t retrieve the data from the search_results template. It just acts as if nothing is happening.
EDIT: When I check it in Firebug, it says “refreshObject is null”
Perhaps because you are searching the members it behaves differently.
Is there somewhere online that I can access this to take a look or no?
I’m using a weblog for the members’ information, though, so I’m not sure why it would be. Pm’d you with the link.
Hey! Did you get this to work? I`m trying to just do a search in the news section of my page. I´m also trying to get the search when i am typing. Any clever way to solve that?
I’d also be interested in the solution to this as I’m experiencing the same problem.
When I check it in Firebug, it says “refreshObject is null”[/quote] refreshObject returns “null” …. How to get the result from this code.