Well, I have been creating a website and found a way to "popou" a modal window that would contain an FTS.
The credits of this procedure are not mine, these belong to
Mike Hibbert:
http://www.youtube.com/user/MickeySoFine1972
Kevin Lew: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
You can follow mikes tutorial to setup an FTS. I will do somethig similar adding the Lew's modal window.
I will start by creating the model window.
1. Add the code in a template where you cant to add the link that will call the model window:
<a href="#dialog_presenter" name="modal">Add presenter jquery</a>
#dialog presenter is the div name of the model window.
2. Add the corresponding div, might be at the top of your html.
<!-- #dialog is the id of a DIV defined in the code below -->
<div id="boxes">
<!-- #customize your modal window here -->
<div id="dialog_presenter" class="window">
<b>Select presenter to add </b>
<!-- close button is defined as close class -->
<a href="#" class="close">Close it</a>
</div>
<!-- Do not remove div#mask, because you'll need it to fill the whole screen -->
<div id="mask"></div>
</div>
Notice that so far had jkust been added "select presenter to Add" ... Nothing else in the model window.
3. Add some style:
<style>
/* Z-index of #mask must lower than #boxes .window */
#mask {
position:absolute;
z-index:9000;
background-color:#cccccc;
display:none;
}
#boxes .window {
position:fixed;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
/* Customize your modal window here, you can add background image too */
#boxes #dialog_presenter {
width:375px;
height:203px;
}
</style>
4. Add the javascript for a modal window:
<script>
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask, .window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
THAT IS IT FOR THE MODAL WINDOW
5. Now for FTS install whoosh and haysack:
pip install whoosh
pip install django-haystack
6. Add to your project settings.py:
WHOOSH_INDEX = os.path.join(PROJECT_DIRECTORY,'whoosh/')
HAYSTACK_CONNECTIONS = {
'default': {
'ENGINE': 'haystack.backends.whoosh_backend.WhooshEngine',
'PATH': WHOOSH_INDEX,
},
}
Also... add also to INSTALLED_APPS haytack and django
INSTALLED_APPS = (
'whoosh',
'haystack',
)
7. Now I would recommend to follow Mikes youtube's tutorial for FTS, it is clear and complete,
just keep in mind that your modal window div would be like:
<!-- #dialog is the id of a DIV defined in the code below -->
<div id="boxes">
<!-- #customize your modal window here -->
<div id="dialog_presenter" class="window">
<b>Select presenter to add </b>
<h3> search </h3>
{% csrf_token%}
<input type="text" id="search_presenter" name="search_presenter" />
<ul id="search-results-presenter">
</ul>
<!-- close button is defined as close class -->
<a href="#" class="close">Close it</a>
</div>
<!-- Do not remove div#mask, because you'll need it to fill the whole screen -->
<div id="mask"></div>
</div>
Notice that the search input is what the FTS uses as source textbox.
I will just remark the most important steps:
8.- As already said in 7, add the search input.
9.- on ajax.js (java script) add:
$(function(){
$('#search_presenter').keyup(function() {
$.ajax({
type: "POST",
url: "/ticwiapp/search_user_add_presenter_ajax/",
data: {
'search_text' : $('#search_presenter').val(),
'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val()
},
success: searchSuccessPresenter,
dataType: 'html'
});
});
});
function searchSuccessPresenter(data, textStatus, jqXHR)
{
$('#search-results-presenter').html(data);
}
Where search-results-presenter are the results shown in the <ul> of step 7.
10. on urls file addthe udr and view that will attend the javascript of step 9.
url(r'^search_user_add_presenter_ajax/$', 'myapp.views.search_user_add_presenter_ajax'),
11. on myapp views add myapp.views.search_user_add_presenter_ajax like:
def search_user_add_presenter_ajax(request):
args = {}
args.update(csrf(request))
args['user'] = request.user
# Follow create a haystack object instead a queryset
args['all_users'] = SearchQuerySet().autocomplete(content_auto=request.POST.get('search_text',''))
return render_to_response('search_user_add_presenter_ajax.html',args)
12. Create search_user_add_presenter_ajax.html template, this is specified in the return of step 11.
Follow is an example:
{% load static %}
{% if all_users.count > 0 %}
{% for one_user in all_users %}
<br> {{ one_user.object.first_name }} {{ one_user.object.last_name }}
<a href = "/ticwiapp/add_presenter_now/{{ event.id }}/{{ one_user.object.id }}/registered">Add presenter </a>
{% endfor %}
{% else %}
<p>No users in database!</p>
{% endif %}
There you are!! Enjoy!
P.D. Looks like Egyptians had invented
flags
