jquery plugin click event
I have written successfully a few jQuery plugins. However this plugin is the one I am having difficulty with.
Now the plugin works and does what it is supposed to, but only the first time it is run.
I would like to run it again with updated data, but it won't work if I run it twice.
eg if I run this like this
- $('#phonedate_admin').dateRange({ url: 'database/phonelog/tables/phone_table.php',sender:{PAGE:vPage(),USER_ID:"",SEARCH: "harley"}});
- $('#phonedate_admin').dateRange({ url: 'database/phonelog/tables/phone_table.php',sender:{PAGE:vPage(),USER_ID:"",SEARCH: "angel"}});
SEARCH will always have harley in it, and not angel. Running it twice does not seem to over write the variables. Really if I run it twice like this Harley should never show.
I have also some key click events. I am using $(document).on('click' as they have to be dynamic. Basically Sender is an object which I use to post my variables to php.
I have been writing jQuery for a while, but I am new at plugins.
I wonder if anyone can see where I am going wrong. I will paste my plugin here.
- ;(function($) {
- "use strict";
- $.fn.dateRange = function(options) {
- var settings =$.extend(true, {},{
- 'url':null,
- 'myid':null,
- 'sender':{}
- },options);
- var base=this;
-
- var dateName = $.trim(this.attr('id'));
-
- dateName="#"+dateName;
- var dp_start= dateName+"_start";
- var dp_end= dateName+"_end";
- var startDate=dateName+"_startDate";
- var endDate=dateName+"_endDate";
- var url=settings['url'];
-
- base.init= function() {
- base.clicker();
- base.range_datepicker();
- };
-
- base.update_search= function(sendin){
- settings.sender = $.extend(settings.sender,sendin);
- };
-
- base.clicker= function() {
- $(document).on('click',dp_start, function()
- {
- $(startDate).datepicker('show');
- });
- $(document).on('click',dp_end, function()
- {
- $(endDate).datepicker('show');
- });
- };
-
- base.check_height= function(){
- if($(dp_start).height()>=$(dp_end).height()) $(dp_end).height($(dp_end).height($(dp_start).height()));
- if($(dp_end).height()>=$(dp_start).height()) $(dp_start).height($(dp_start).height($(dp_end).height()));
- }
-
- base.range_datepicker= function() {
- $(startDate).datepicker({
- showAnim: 'slideDown',
- numberOfMonths:3,
- changeMonth: true,
- changeYear: true,
- dateFormat: 'dd/mm/yy',
- onClose: function (selectedDate){
- $(endDate).datepicker("option","minDate",selectedDate);
- base.filterDate();
- }
- });
- $(endDate).datepicker({
- showAnim: 'slideDown',
- numberOfMonths:3,
- changeMonth: true,
- changeYear: true,
- dateFormat: 'dd/mm/yy',
- onClose: function (selectedDate){
- $(startDate).datepicker("option","maxDate",selectedDate);
- base.filterDate();
- }
- });
- };
-
- base.filterDate= function() {
- base.insert_squaredate(startDate,"Start");
- base.insert_squaredate(endDate,"End");
- var send = {STARTDATE: $(startDate).val(),ENDDATE: $(endDate).val(),};
- send = $.extend(send,settings.sender);
-
- alert(send.toSource());
-
- $("#table_form").load(url, send, function() {
- table_resize('table.scroll');
- });
- };
-
- base.insert_squaredate= function(mydiv,text){
- var date = $(mydiv).datepicker('getDate');
- if(date===null)
- {
- $(mydiv+"1").text(text);
- $(mydiv+"2").html('<span class="calendar_datepicker"></span>');
- $(mydiv+"3").text("");
- }
- else
- {
- var month=$.datepicker.formatDate('M',date);
- var mydate=$.datepicker.formatDate('d',date);
- var year=$.datepicker.formatDate('yy',date);
- $(mydiv+"1").text(month);
- $(mydiv+"2").text(mydate);
- $(mydiv+"3").text(year);
- }
- base.check_height();
- };
- base.reset_date= function(){
- base.reset(startDate,"Start");
- base.reset(endDate,"End");
- }
- base.reset= function(mydiv,text){
- $(mydiv).val('');
- $(mydiv+"1").text(text);
- $(mydiv+"2").html('<span class="calendar_datepicker"></span>');
- $(mydiv+"3").text("");
- }
-
- base.init();
- return base;
- }
- })(jQuery);