jquery.tipTip displays tooltip text randomly
scheduler.config.details_on_create = true;
scheduler.config.details_on_dblclick = true;
scheduler.config.drag_move = false;
scheduler.config.xml_date = '%Y-%m-%d %H:%i';
scheduler.config.full_day = true;
scheduler.config.drag_resize = false;
scheduler.config.drag_create = false;
scheduler.keys.edit_save = -1;
scheduler.xy.bar_height = 21;
scheduler.createTimelineView({
name: 'AssessorsScheduler',
x_unit: 'day',
x_date: '%D %M %d',
x_step: 1,
x_size: 14,
y_unit: scheduler.serverList('MyList', AssessorsArray),
y_property: 'UserID',
event_dy: 'full',
render: 'bar',
dx: 160
});
scheduler.locale.labels.section_Assessor = 'Assessors Scheduler'; // This is a section in a lightbox
scheduler.form_blocks["my_editor"]={
render:function(sns){
return "<div id='AssessorLightboxDiv' class='dhx_cal_ltext' style='height:440px;'> <table width='630px' cellspacing='1'> <tbody> <tr> <td class='LightBoxHeadingCell'> Location : </td> <td class='LightBoxNormalCell'> <select name='AssessorsLocationDropDown' id='AssessorsLocationDropDown' onchange='AssessorsLocationDropDownOnChange();'> <option selected = '' value='Evaluators Office'>Evaluators Office</option> <option value='Clinic'>Clinic</option> <option value='N/A'>N/A</option> </select> </td> <td class='LightBoxHeadingCell' id='ClinicAssociationTD' style='display:none;'> <span title='Required' class='Required'>* </span>Association : </td> <td class='LightBoxNormalCell' id='ClinicAssociationListTD' style='display:none;'> <select name='ClinicAssociationDropDown' id='ClinicAssociationDropDown'> <option selected = '' value=''></option> </select> </td> </tr> <tr id='ReasonRow' style='display:none;'> <td class='LightBoxHeadingCell'> <span title='Required' class='Required'>* </span>Reason : </td> <td class='LightBoxNormalCell'> <select name='ReasonDropDown' id='ReasonDropDown'> <option selected = '' value=''></option> <option value='Personal Leave'>Personal Leave</option> <option value='Sick'>Sick</option> <option value='Stat Holiday'>Stat Holiday</option> <option value='Training'>Training</option> <option value='Vacation'>Vacation</option> </select> </td> <td class='LightBoxHeadingCell' style='display:none;'> Event ID : </td> <td class='LightBoxNormalCell'> <input type='text' id='AssessorEventID' disabled style='display:none;width:150px; background-color: #E2EFFF;'> </td> </tr> <tr id='ReserveRow'> <td class='LightBoxHeadingCell'> <span title='Required' class='Required'>* </span>Reserve Type : </td> <td class='LightBoxNormalCell'> <select id='ReserveTypeDropDown' name='ReserveTypeDropDown'> <option value=''></option> <option selected = '' value='Regular'>Regular</option> <option value='All Call'>All Call</option> </select> </td> <td class='LightBoxHeadingCell'> <span title='Required' class='Required'>* </span>Reserved For : </td> <td class='LightBoxNormalCell'> <select id='ReservedForDropDown' name='ReservedForDropDown'> <option value=''></option> <option selected = '' value='Any'>Any</option> <option value='CAT Only'>CAT Only</option> <option value='In-Person Only'>In-Person Only</option> </select> </td> </tr> <tr id='DatesRow'> <td class='LightBoxHeadingCell' id='StartDateHeadingTD'> <span title='Required' class='Required'>* </span>Start Date : </td> <td id='AssessorsStartDateCalendarTD'> <input type='text' id='AssessorsStartDateCalendar' disabled style='width:150px; background-color: #E2EFFF;'> </td> <td class='LightBoxHeadingCell' id='EndDateHeadingTD'> <span title='Required' class='Required'>* </span>End Date : </td> <td class='LightBoxNormalCell' id='AssessorsEndDateCalendarTD'> <input type='text' id='AssessorsEndDateCalendar' style='width:150px; background-color: #E2EFFF;'> </td> </tr> <tr id='AvailableTimesRow'> <td colspan='4'> <table width='620px' cellspacing='5' style='height: 150px;margin-top: 1px;border: 1px solid black; background-color: #E2EFFF;' id='AvailableTimesTable'> <tbody> <tr> <td colspan='4'> <table width='100%' border='0'> <tr> <td class='LightBoxHeadingCell'>Available Times : </td> <td class='LightBoxHeadingCell'> </td> <td class='LightBoxHeadingCell'><a class='LightBoxHeadingCell' href='javascript:CheckAllCheckBoxes()'><span class='LightBoxHeadingCell'>Check All</span></a></td> <td class='LightBoxHeadingCell'><a class='LightBoxHeadingCell' href='javascript:UncheckAllCheckBoxes()'><span class='LightBoxHeadingCell'>Uncheck All</span></a></td> </tr> </table> </td> </tr> <tr> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='08:00 AM - 08:30 AM;'>08:00 AM - 08:30 AM </td> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='08:30 AM - 09:00 AM;'>08:30 AM - 09:00 AM </td> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='09:00 AM - 09:30 AM;'>09:00 AM - 09:30 AM </td> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='09:30 AM - 10:00 AM;'>09:30 AM - 10:00 AM </td> </tr> <tr> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='10:00 AM - 10:30 AM;'>10:00 AM - 10:30 AM </td> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='10:30 AM - 11:00 AM;'>10:30 AM - 11:00 AM </td> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='11:00 AM - 11:30 AM;'>11:00 AM - 11:30 AM </td> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='11:30 AM - 12:00 PM;'>11:30 AM - 12:00 PM </td> </tr> <tr> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='12:00 PM - 12:30 PM;'>12:00 PM - 12:30 PM </td> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='12:30 PM - 01:00 PM;'>12:30 PM - 01:00 PM </td> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='01:00 PM - 01:30 PM;'>01:00 PM - 01:30 PM </td> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='01:30 PM - 02:00 PM;'>01:30 PM - 02:00 PM </td> </tr> <tr> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='02:00 PM - 02:30 PM;'>02:00 PM - 02:30 PM </td> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='02:30 PM - 03:00 PM;'>02:30 PM - 03:00 PM </td> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='03:00 PM - 03:30 PM;'>03:00 PM - 03:30 PM </td> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='03:30 PM - 04:00 PM;'>03:30 PM - 04:00 PM </td> </tr> <tr> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='04:00 PM - 04:30 PM;'>04:00 PM - 04:30 PM </td> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='04:30 PM - 05:00 PM;'>04:30 PM - 05:00 PM </td> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='05:00 PM - 05:30 PM;'>05:00 PM - 05:30 PM </td> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='05:30 PM - 06:00 PM;'>05:30 PM - 06:00 PM </td> </tr> <tr> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='06:00 PM - 06:30 PM;'>06:00 PM - 06:30 PM </td> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='06:30 PM - 07:00 PM;'>06:30 PM - 07:00 PM </td> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='07:00 PM - 07:30 PM;'>07:00 PM - 07:30 PM </td> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='07:30 PM - 08:00 PM;'>07:30 PM - 08:00 PM </td> </tr> <tr> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='08:00 PM - 08:30 PM;'>08:00 PM - 08:30 PM </td> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='08:30 PM - 09:00 PM;'>08:30 PM - 09:00 PM </td> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='09:00 PM - 09:30 PM;'>09:00 PM - 09:30 PM </td> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='09:30 PM - 10:00 PM;'>09:30 PM - 10:00 PM </td> </tr> </tbody> </table> </td> </tr> <tr id='AssessorNotesRow'> <td valign='top' class='LightBoxHeadingCell'> Assessor Notes : </td> <td colspan='3'> <textarea name='AssessorNotes' style='font-size: 11px;border: solid 1px #CCC; width:465px; height:50px; background-color: #E2EFFF;' id='AssessorNotes'> </textarea> </td> </tr> <tr id='BookingNotesRow'> <td valign='top' class='LightBoxHeadingCell'> Booking Notes : </td> <td colspan='3'> <textarea name='BookingNotes' style='font-size: 11px;border: solid 1px #CCC; width:465px; height:50px; background-color: #E2EFFF;' id='BookingNotes'> </textarea> </td> </tr> <tr id='AssessmentsImageRow' style='display:none;'> <td valign='top' class='LightBoxHeadingCell'> Assessments : </td> <td colspan='3'> <img id='ToolTipImage' class='tooltip' src='/files/404048/93171/Info-32.png' height='15' width='15' title='' /> <div id='AssessmentsGrid' style='width:10px;display:none;'> </div> </td> </tr> </tbody> </table> </div>";
},
set_value:function(node,value,ev){
$('#AssessorEventID').val(ev.EventID || '');
$('#ReasonDropDown').val(ev.Reason || '');
$('#ReserveTypeDropDown').val(ev.ReserveType || 'Regular');
$('#ReservedForDropDown').val(ev.ReservedFor || 'Any');
$('#AssessorsStartDateCalendar').val(ev.StartDate || '');
$('#AssessorsEndDateCalendar').val(ev.EndDate || '');
$('#AssessorNotes').val(ev.AssessorNotes || '');
$('#BookingNotes').val(ev.BookingNotes || '');
},
get_value:function(node,ev){
ev.EventID = $('#AssessorEventID').val();
ev.LocationType = $('#AssessorsLocationDropDown option:selected').text();
if($('#AssessorsLocationDropDown option:selected').text() != 'Clinic' && $('#AssessorsLocationDropDown option:selected').text() != 'N/A')
{
if($('#AvailableTimesTable input[type=checkbox]:checked').length > 0)
{
var GetCurrentAvailableTimes = '';
$('#AvailableTimesTable input[type=checkbox]:checked').each(function (){
GetCurrentAvailableTimes += $(this).val();
});
ev.AvailableTimes = GetCurrentAvailableTimes.substring(0,GetCurrentAvailableTimes.length-1);
}
else
ev.AvailableTimes = '';
if($('#AssessorsLocationDropDown option:selected').text() == 'Evaluators Office')
{
ev.AssociationCompanyID = '';
ev.AssociationCompanyName = '';
}
else
{
ev.AssociationCompanyID = $('#AssessorsLocationDropDown').val();
ev.AssociationCompanyName = $('#AssessorsLocationDropDown option:selected').text();
}
ev.Reason = '';
ev.ReserveType = $('#ReserveTypeDropDown').val();
ev.ReservedFor = $('#ReservedForDropDown').val();
}
else if($('#AssessorsLocationDropDown option:selected').text() == 'Clinic')
{
ev.Reason = '';
ev.ReserveType = '';
ev.ReservedFor = '';
ev.AssociationCompanyID = $('#ClinicAssociationDropDown').val();
ev.AssociationCompanyName = $('#ClinicAssociationDropDown option:selected').text();
ev.AvailableTimes = 'N/A';
}
else
{
ev.Reason = $('#ReasonDropDown').val();
ev.ReserveType = '';
ev.ReservedFor = '';
ev.AssociationCompanyID = '';
ev.AssociationCompanyName = '';
ev.AvailableTimes = 'N/A';
}
ev.StartDate = $('#AssessorsStartDateCalendar').val();
ev.EndDate = $('#AssessorsEndDateCalendar').val();
ev.AssessorNotes = $('#AssessorNotes').val();
ev.BookingNotes = $('#BookingNotes').val();
},
focus:function(node){
node.getElementsByTagName('select')[0].focus();
}
}
//===============
//Data loading
//===============
scheduler.config.lightbox.sections = [{name:'Assessor', height:130, map_to:'text', type:'my_editor'}]
scheduler.templates.tooltip_text = function(start, end, event){
if(event.LocationType == 'Clinic')
return "<b>Date:</b> <span style='font-weight:bold;color:black;'>" + event.StartDate + "</span><br/><b>Explanations:</b> <span style='font-weight:bold;color:black;'>" + event.Status + "</span><br/><b>Location:</b> <span style='font-weight:bold;color:black;'>" + event.LocationType + "</span><br/><b>Available Times:</b> <span style='font-weight:bold;color:black;'>N/A" + "</span><br/><b>Assessor Notes:</b> <span style='font-weight:bold;color:black;'>" + event.AssessorNotes + "</span> <br/>";
else if(event.LocationType == 'N/A')
return "<b>Date:</b> <span style='font-weight:bold;color:black;'>" + event.StartDate + "</span><br/><b>Explanations:</b> <span style='font-weight:bold;color:black;'>" + event.Status + "</span><br/><b>Location:</b> <span style='font-weight:bold;color:black;'>N/A" + "</span><br/><b>Reason:</b> <span style='font-weight:bold;color:black;'>" + event.Reason + "</span><br/><b>Available Times:</b> <span style='font-weight:bold;color:black;'>N/A" + "</span><br/><b>Assessor Notes:</b> <span style='font-weight:bold;color:black;'>" + event.AssessorNotes + "</span> <br/>";
else
{
if(event.LocationType == 'Evaluators Office')
return "<b>Date:</b> <span style='font-weight:bold;color:black;'>" + event.StartDate + "</span><br/><b>Explanations:</b> <span style='font-weight:bold;color:black;'>" + event.Status + "</span><br/><b>Location:</b> <span style='font-weight:bold;color:black;'>" + event.LocationType + "</span><br/><b>Available Times:</b> <br/><span style='font-weight:bold;color:black;'>" + event.AvailableTimes.replace(/;/g, '<br/>') + "</span><br/><b>Assessor Notes:</b> <span style='font-weight:bold;color:black;'>" + event.AssessorNotes + "</span> <br/>";
else
return "<b>Date:</b> <span style='font-weight:bold;color:black;'>" + event.StartDate + "</span><br/><b>Explanations:</b> <span style='font-weight:bold;color:black;'>" + event.Status + "</span><br/><b>Location:</b> <span style='font-weight:bold;color:black;'>" + event.AssociationCompanyName + "</span><br/><b>Available Times:</b> <br/><span style='font-weight:bold;color:black;'>" + event.AvailableTimes.replace(/;/g, '<br/>') + "</span><br/><b>Assessor Notes:</b> <span style='font-weight:bold;color:black;'>" + event.AssessorNotes + "</span> <br/>";
}
};<div id="tiptip_content">
<div style="width: 100%; height: 25px; overflow: hidden; position: relative;" class="xhdr">
<img style="display: none; position: absolute;" src="https://s3.amazonaws.com/media.centrichealth.ca/jsfiles/dhtmlx/dhtmlxGrid/codebase/imgs/sort_desc.gif">
<table cellspacing="0" cellpadding="0" style="width: 100%; table-layout: fixed; margin-right: 20px; padding-right: 20px;" class="hdr">
<tbody>
<tr style="height: auto;">
<th style="height: 0px;"></th>
<th style="height: 0px;"></th>
<th style="height: 0px;"></th>
<th style="height: 0px;"></th>
</tr>
<tr>
<td style="color: black; font-size: 9px; vertical-align: top; font-weight: bold;">
<div class="hdrcell">Ax Name</div>
</td>
<td style="color: black; font-size: 9px; vertical-align: top; font-weight: bold;">
<div class="hdrcell">Claimant</div>
</td>
<td style="color: black; font-size: 9px; vertical-align: top; font-weight: bold;">
<div class="hdrcell">Ax Times</div>
</td>
<td style="color: black; font-size: 9px; vertical-align: top; font-weight: bold;">
<div class="hdrcell">Ax Address</div>
</td>
</tr>
</tbody>
</table>
</div>
<div style="width: 100%; overflow-x: auto; overflow-y: hidden;" class="objbox">
<table cellspacing="0" cellpadding="0" style="width: 100%; table-layout: fixed;" class="obj">
<tbody>
<tr style="height: auto;">
<th style="height: 0px;"></th>
<th style="height: 0px;"></th>
<th style="height: 0px;"></th>
<th style="height: 0px;"></th>
</tr>
<tr class=" ev_dhx_skyblue">
<td valign="middle" align="left">Functional Abilities Evaluation</td>
<td valign="middle" align="left">Peter Palancai</td>
<td valign="middle" align="left">01:00 PM - 04:30 PM</td>
<td valign="middle" align="left">LifeMark Health (Sunnyside) - Tecumseh - 13311 Tecumseh Rd. E -, Tecumseh, Ontario, N8N 3T4</td>
</tr>
<tr class=" odd_dhx_skyblue">
<td valign="middle" align="left">Functional Abilities Evaluation</td>
<td valign="middle" align="left">Danuta Roznawski</td>
<td valign="middle" align="left">09:00 AM - 01:00 PM</td>
<td valign="middle" align="left">LifeMark Health (Sunnyside) - Tecumseh - 13311 Tecumseh Rd. E -, Tecumseh, Ontario, N8N 3T4</td>
</tr>
</tbody>
</table>
</div>
</div>
1 个答案:
答案 0 :(得分：0)
Are you including the css file in your html? Have you tried wrapping in in a function like this:
$(function(){
$('.tooltip').tipTip({maxWidth: 'auto', edgeOffset: 5, defaultPosition: 'top', keepAlive: false, activation: "hover"});
});
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？