Hi Sabroso,

Welcome to SEBLOD. 

Can you link an example of these variables that are being included in your URL? or some screenshots please?

Thanks,

_jrmo

Hi,

Sorry, working from localhost at the moment but I'll try to provide more detail:

In the mentioned Search Form I have the following elements:

- CCK ( Select _ Dynamic)

- Event_Category ( select – Simple)

- Event_Country ( Text)

- Search_Date_From ( Calendar)

- Search_Date_To ( Calendar)

- Event_Number_Participants ( Select – Simple)

- Event_Submit_Button ( Button – Submit)

As you can see, leaving CCK and Event_Submit_Button to the side, there are 5 elements the user can manipulate to submit a search.

However, when submitting the form, the search URL looks like this:

http://localhost/Joomla2/index.php/busca-blog?cck=evento&event_category=&event_country=&search_date_from_hidden=&search_date_from=&search_date_to_hidden=&search_date_to=&event_number_participants=&search=busca_blog&task=search

As you can see there are two extra variables being used in the database lookup that do not correspond to the elements that I included in the Search form. These are: search_date_from_hidden and search_date_to_hidden.

Whenever a user selects a date range by picking data on the Calendar Elements ( Search_Date_From and Search_Date_To), these additional variables inherit the values selected. As follows:

http://localhost/Joomla2/index.php/busca-blog?cck=evento&event_category=&event_country=&search_date_from_hidden=2015-02-04&search_date_from=2015-02-04+13%3A40%3A00&search_date_to_hidden=2015-02-27&search_date_to=2015-02-27+13%3A40%3A00&event_number_participants=&search=busca_blog&task=search

Then when the user presses reset on the Search Form ( at the link next to the Submit Button) and re-submits the form, the URL looks like this:

http://localhost/Joomla2/index.php/busca-blog?cck=evento&event_category=&event_country=&search_date_from_hidden=&search_date_from=2015-02-04+13%3A40%3A00&search_date_to_hidden=&search_date_to=2015-02-27+13%3A40%3A00&event_number_participants=&search=busca_blog&task=search

As you can see, the Calendar Elements are not cleaned so the search results does not offer all the possible search results as you would expect after having reset the search form and still keep filtering the results by the date range selected in the previous search before having reset.

Is it clearer now?

Hi,

May be you have duplicate fields, hidden and not nidden? E. g.:

search_date_from_hidden

and

search_date_from

Regards

Hi Ricco,

I think you're right. What I did is assign the search form to a module position while leaving the search results of the “List and Search” in the main content area. And then, to avoid having two search forms I hid the Search Form in the main content area.

However, it is funny that only the Calendar elements have a duplicate “hidden” version that is used in the URL. And the other elements (not the calendar ones) in the Search form seam to reset correctly regardless of whether they are duplicated or not.

So, what would be the best way to control the position of the Search Form in relation to the Search Results and at the same time being able to control de appearance of the Search Form independently from the Search Results? And avoid duplication :-)

Hi,

instead button reset you can use a free text field which links to the URL of your search results.

mmmm...now I don't think it is a duplication issue. I just went for a standard List & Search with the standard Search Form above the search results and still the same issue ( no Search module now).

Looking at the source code of the Search Form, it looks like SEBLOD uses some Javascript for the Calendar Elements where the “hidden” variables are defined and then used in the database query. However when reseting the Form, it seems that these “hidden” variable do not help reseting the calendar elements. Could this be what is happening?

(sorry not sure how to show HTML code - just pasting the code, you'll need to check teh source code to see the JS)

This is the source code for the Search Form:

</div></div><div id="cck2r_event_country" class="cck_forms cck_search cck_text cck_event_country"><div id="cck2r_label_event_country" class="cck_label cck_label_text"><label for="event_country">Country</label></div><div id="cck2r_form_event_country" class="cck_form cck_form_text"><input type="text" id="event_country" name="event_country" value="" class="inputbox text" size="16" maxlength="255" /></div></div><div id="cck2r_search_date_from" class="cck_forms cck_search cck_calendar cck_search_date_from"><div id="cck2r_label_search_date_from" class="cck_label cck_label_calendar"><label for="search_date_from">From:</label></div><div id="cck2r_form_search_date_from" class="cck_form cck_form_calendar input-append"><input type="text" id="search_date_from_hidden" name="search_date_from_hidden" value="2015-02-05" class="inputbox text" size="27" readonly="readonly" maxlength="255" /><input class="inputbox" type="hidden" id="search_date_from" name="search_date_from" value="2015-02-05 13:50:00" /><button class="btn" id="search_date_from_hidden-trigger"><span class="icon-calendar"></span></button>
				<script type="text/javascript">
					var cal = Calendar.setup({trigger	: "search_date_from_hidden-trigger",inputField	: "search_date_from_hidden",dateFormat	: "%Y-%m-%d",
				weekNumbers	: false,
				timePos		: "right",date	: 20150205,	showTime	: 12,	onSelect	: function(cal) { 
								var sel_date = this.selection.get();
								var hours	=	cal.getHours();
								var minutes	=	cal.getMinutes();
								var sel_date = Calendar.intToDate(sel_date);
								sel_date.setHours(hours);
								sel_date.setMinutes(minutes);var Jdate = Calendar.printDate(sel_date, "%Y-%m-%d %H:%M:00");jQuery("#search_date_from").val(Jdate) ;this.hide(); jQuery("#search_date_from").trigger("change"); }});</script>
				</div></div><div id="cck2r_search_date_to" class="cck_forms cck_search cck_calendar cck_search_date_to"><div id="cck2r_label_search_date_to" class="cck_label cck_label_calendar"><label for="search_date_to">To:</label></div><div id="cck2r_form_search_date_to" class="cck_form cck_form_calendar input-append"><input type="text" id="search_date_to_hidden" name="search_date_to_hidden" value="2015-02-28" class="inputbox text" size="27" readonly="readonly" maxlength="255" /><input class="inputbox" type="hidden" id="search_date_to" name="search_date_to" value="2015-02-28 13:50:00" /><button class="btn" id="search_date_to_hidden-trigger"><span class="icon-calendar"></span></button>
				<script type="text/javascript">
					var cal = Calendar.setup({trigger	: "search_date_to_hidden-trigger",inputField	: "search_date_to_hidden",dateFormat	: "%Y-%m-%d",
				weekNumbers	: false,
				timePos		: "right",date	: 20150228,	showTime	: 12,	onSelect	: function(cal) { 
								var sel_date = this.selection.get();
								var hours	=	cal.getHours();
								var minutes	=	cal.getMinutes();
								var sel_date = Calendar.intToDate(sel_date);
								sel_date.setHours(hours);
								sel_date.setMinutes(minutes);var Jdate = Calendar.printDate(sel_date, "%Y-%m-%d %H:%M:00");jQuery("#search_date_to").val(Jdate) ;this.hide(); jQuery("#search_date_to").trigger("change"); }});</script>
				</div></div><div id="cck2r_event_number_participants" class="cck_forms cck_search cck_select_simple cck_event_number_participants"><div id="cck2r_label_event_number_participants" class="cck_label cck_label_select_simple"><label for="event_number_participants">Number of Participants</label></div><div id="cck2r_form_event_number_participants" class="cck_form cck_form_select_simple"><select id="event_number_participants" name="event_number_participants" class="inputbox select form-control" size="1">

Its an interesting question really. How do we reset a calendar field? You are right, I have calendar field in my form and once I select a date there is no way of clearing it.

Agrred, That's the bottomline question, how to reset a Calendar Element within a form?

Anyone?

Hi all,

you have to reset always two fields for one calendar-field.

$(document).ready(function(){
   $("#your_reset_button").click(function(){
     var defaultText = null;

     $("#your_calendar_field").val(defaultText);
     $("#your_calendar_field_hidden").val(defaultText);
     return false;
   });
});

Thanks for the suggestion.

I adapted your suggested code as follows:

<pre>

jQuery(document).ready(function(){

jQuery("#reset_search_form").click(function(){

var defaultText = null;

jQuery("#cck6r_search_date_from").val(defaultText);

jQuery("#cck6r_search_date_from_hidden").val(defaultText);

jQuery("#cck6r_search_date_to").val(defaultText);

jQuery("#cck6r_search_date_to_hidden").val(defaultText);

alert("Hello World");

return false;

});

});

</pre>

The alert displays fine when pressing the reset button, however the Search Form keeps behaving exactly in the same way as before. After pressing the reset button all the fields seem empty however if I press the Submit button right after pressing the Reset Button the Search URL still includes Date information ( http://localhost/Joomla2/index.php/busca-blog?cck=evento&event_category=&event_country=&search_date_from_hidden=&search_date_from=2015-02-06+13%3A55%3A00&search_date_to_hidden=&search_date_to=2015-02-28+13%3A55%3A00&event_number_participants=&search=busca_blog&task=search ) and the search results keep being filtered by the date range previously selected.

I implemented the Date Range Search following this manual in case this is of help

https://drive.google.com/file/d/0B8W23DlA_u_GVFN1WUhkTVZ0Qlk/view?usp=sharing

Thanks

Brilliant! that solved the problem, thank you Castor!

Hi Sabroso,

We see the code, but could you explain where it goes and how did you manage to reset the calender field? Step by step please, images would be even better, or even best why don't you make your first tutorial.

Thank you,

Kind regards,

ricco

Hi Ricco,

This is how I solved the problem thanks to Castor's code.

1. I downloaded the “Reset Button” plugin

2. I created a new “Reset Button” field which I added to the form where I had the calendar fields

3. I had two calendar fields in my form called search_date_from and search_date_to, so I adapted Castor's code as follows:

<pre>

jQuery(document).ready(function(){

jQuery("#reset_search_form").click(function(){

var defaultText = null;

jQuery("#search_date_from").val(defaultText);

jQuery("#search_date_from_hidden").val(defaultText);

jQuery("#search_date_to").val(defaultText);

jQuery("#search_date_to_hidden").val(defaultText);

alert("Hello World");

return false;

});

});

</pre>

4. I edited the Reset Button field and in the bottom right hand corner there is an orange arrow you can click on to open the section called Stuff. Here you can give a CSS class to your button ( btn-primary, etc if your using a Bootstrap 3 template) and also insert some JavaScript in the JS section → that's where I pasted the code

I hope this helps!

Ah! don't use the <pre> tags, only the JavaScript code in between

Great, thank you.