Simulate double click on single click 1

[tyutghf]

I am using a calendar system (pinpoint) on a website however the website users are no understanding the process of the calendar.

A user selects a date and is then presented with a list of times for that date.

The user can only select one time, however pinpoint requires them to click a start and end time. As the start and end time is the same time, they effectively have to double click their chosen time.

Despite adding descriptive text highlighting this, the users are getting muddled and fail to double click their time.

I have tried to force a double click using javascript, however it is not working

<script type='text/javascript'>
$('.DOPBSPCalendar-hour').click(function() {
  $('.DOPBSPCalendar-hour').dblclick();
});
</script>

The hours popup looks like this

<div class="DOPBSPCalendar-hours" id="2_2017-01_hours" style="display: block;">
   <div class="DOPBSPCalendar-hour dopbsp-available dopbsp-selected" id="2_17:30">    
      <div class="dopbsp-bind-top">
         <div class="dopbsp-hour">&nbsp;</div>
      </div>    
      <div class="dopbsp-bind-middle dopbsp-group0">        
         <div class="dopbsp-hour">17:30 - 18:15</div>        
         <div class="dopbsp-price">£5</div>        
         <div class="dopbsp-available">18 available</div>        
         <div class="dopbsp-info" id="2_17:30_info"></div>    
      </div>    
      <div class="dopbsp-bind-bottom">
         <div class="dopbsp-hour">&nbsp;</div>
      </div>
   </div>
</div>

And here is a video showing the double click requirement

https://www.dropbox.com/s/sntf1882kmd1rhv/doubleclick.mov?dl=0

Have I missed something?

Thanks

 

[feherke]

Hi

According to my experience, just calling the [tt].dblclick()[/tt] method only forwards the calls to an event handler you assigned earlier.

To properly simulate an event you have to instantiate it and dispatch it :

document[teal].[/teal][COLOR=orange]getElementsByClassName[/color][teal]([/teal][i][green]'DOPBSPCalendar-hour'[/green][/i][teal])[[/teal][purple]0[/purple][teal]].[/teal][COLOR=orange]dispatchEvent[/color][teal]([/teal][b]new[/b] [COLOR=orange]MouseEvent[/color][teal]([/teal][i][green]'dblclick'[/green][/i][teal], {[/teal][i][green]'bubbles'[/green][/i][teal]:[/teal] [b]true[/b][teal]}))[/teal]

No idea how portable is. ( Only tried on FireFox. ) No idea how to achieve the same with jQuery. With the bubbles option also works if the event listener is bound to a parent of the dispatcher element.

Feherke.
feherke.ga

 

[tyutghf]

Thanks feherke, getting closer, I found this fiddle doing something similar by instantiating and dispatching it.

http://jsfiddle.net/7s45s/

Can't quite seem to get it to double click itself

 

[feherke]

Hi

Yepp, essentially the same. Mozilla Developer Network calls it "the old-fashioned way".

Sorry, at this point I can not imagine what exactly is in the code. For further hints on debugging this I would need to see that code running. :-(


Feherke.
feherke.ga

 

[tyutghf]

Thanks Feherke

http://bit.ly/2iWIzS8

 

[feherke]

Hi

But I see no code there that would handle a dblclick event.

Anyway, I would say it is just matter of configuration. Somewhere in the middle of HTML there is the JavaScript call that initializes the calendar :

[COLOR=silver gray]159[/color] [b]<script[/b] [maroon]type[/maroon][teal]=[/teal][i][green]"text/JavaScript"[/green][/i][b]>[/b]
[COLOR=silver gray]160[/color]     [COLOR=orange]jQuery[/color][teal]([/teal]document[teal]).[/teal][COLOR=orange]ready[/color][teal]([/teal][b]function[/b][teal](){[/teal]
[COLOR=silver gray]161[/color]         [COLOR=orange]jQuery[/color][teal]([/teal][i][green]"#DOPBSPCalendar2"[/green][/i][teal]).[/teal][COLOR=orange]DOPBSPCalendar[/color][teal]({[/teal][gray]/*...*/[/gray][teal]});[/teal]
[COLOR=silver gray]162[/color]     [teal]});[/teal]
[COLOR=silver gray]163[/color] [b]</script>[/b]

In that huge line there is a fragment where you can change multipleSelect to false :

[gray]// before[/gray]
[i][green]"hours"[/green][/i][teal]:{[/teal][i][green]"data"[/green][/i][teal]:{[/teal][i][green]"addLastHourToTotalPrice"[/green][/i][teal]:[/teal][b]false[/b][teal],[/teal][i][green]"ampm"[/green][/i][teal]:[/teal][b]false[/b][teal],[/teal][i][green]"definitions"[/green][/i][teal]:[{[/teal][i][green]"value"[/green][/i][teal]:[/teal][i][green]"00:00"[/green][/i][teal]}],[/teal][i][green]"enabled"[/green][/i][teal]:[/teal][b]true[/b][teal],[/teal][i][green]"info"[/green][/i][teal]:[/teal][b]true[/b][teal],[/teal][i][green]"interval"[/green][/i][teal]:[/teal][b]true[/b][teal],[/teal][i][green]"multipleSelect"[/green][/i][teal]:[/teal][highlight #fcc][b]true[/b][/highlight][teal]},[/teal][i][green]"text"[/green][/i][teal]:[]}[/teal]
[gray]// after[/gray]
[i][green]"hours"[/green][/i][teal]:{[/teal][i][green]"data"[/green][/i][teal]:{[/teal][i][green]"addLastHourToTotalPrice"[/green][/i][teal]:[/teal][b]false[/b][teal],[/teal][i][green]"ampm"[/green][/i][teal]:[/teal][b]false[/b][teal],[/teal][i][green]"definitions"[/green][/i][teal]:[{[/teal][i][green]"value"[/green][/i][teal]:[/teal][i][green]"00:00"[/green][/i][teal]}],[/teal][i][green]"enabled"[/green][/i][teal]:[/teal][b]true[/b][teal],[/teal][i][green]"info"[/green][/i][teal]:[/teal][b]true[/b][teal],[/teal][i][green]"interval"[/green][/i][teal]:[/teal][b]true[/b][teal],[/teal][i][green]"multipleSelect"[/green][/i][teal]:[/teal][highlight #cfc][b]false[/b][/highlight][teal]},[/teal][i][green]"text"[/green][/i][teal]:[]}[/teal]

That seems to instruct the script to do what you want.


Feherke.
feherke.ga

 

[tyutghf]

Aha, initially I contacted the plugin authors who said that due to the way the plugin is coded it is not possible to facilitate one click without much modification. Shouldn't have taken their word for it. Thanks Feherke, with your help I managed to find the file and line deep in their file structure that added this setting.