9 years ago
Topic

Hi,

In the "Search Form" of a "List & Search Type" that I have created I use "Calendar" elements to filter the instances of my content type by date and other parameters within the content type. All this works well.

However I have an issue when reseting the "Search Form" ( clicking "Reset" next to the submit button).

Whereas all visible fields get emptied as expected, it looks like Seblod creates some extra "Calendar" elements which are

hidden ( I didn't create these additional calendar elements) and match the values that are given to my calendar elements.

When submiting the form, the values of these extra calendar elements can be seen in the URL when passed among the other values to the database for the search. That's fine, however when reseting the form these additional calendar fields do not get reset and keep the previous value which creates a problem with future searches since the previous calendar values get picked up again when the user does not select a time range in his second search ( in other words, the results of the second search after having reset the form include the calendar values of the first search).

Any direction about how this could be resolved would be much appreciated.

Many thanks.

Get a Book for SEBLOD
572 Posts
_jrmo
9 years ago
0
Level 1

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

9 years ago
0
Level 1

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?

310 Posts
ricco
9 years ago
1
Level 1

Hi,

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

search_date_from_hidden

and

search_date_from

Regards

9 years ago
0
Level 2

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 :-)

310 Posts
ricco
9 years ago
0
Level 1

Hi,

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

9 years ago
1
Level 1

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)

<pre>



</pre>

9 years ago
0
Level 2

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">
310 Posts
ricco
9 years ago
0
Level 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.

9 years ago
1
Level 1

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

Anyone?

46 Posts
Castor
9 years ago
0
Level 2

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; }); });
9 years ago
2
Level 1

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

46 Posts
Castor
9 years ago
1
Level 2

Hi Sabroso,

your fields are not referenced properly:

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);

try this:

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);

9 years ago
0
Level 3

Brilliant! that solved the problem, thank you Castor!

310 Posts
ricco
9 years ago
2
Level 1

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

9 years ago
1
Level 2

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!

9 years ago
0
Level 3

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

310 Posts
ricco
9 years ago
0
Level 1

Great, thank you.

Get a Book for SEBLOD