Call:201-556-9090 or Write:
Our JQuery PlugIn is powered by a lightweight JavaScript engine, thus our seating chart product is fully compatible with all iPhone & iPad devices.
The plugin turns selected elements into a highly customizable ticket list and seating chart UI for powering exchanges, broker websites and major e-commerce sites.
For broker powered websites, our JQuery PlugIn has the built-in intelligence to automatically retrieve the appropriate Ticket Utils seating chart by passing in the mapId from your current provider. Our mapping service supports the following providers: Ticket Technology, Ticket Network and Ticket Evolution.
For interactive maps, our JQuery PlugIn automatically interacts with the TicketList and caters to many different section name conventions to ensure the widest possible inventory support when highlighting each section zone. Advanced filtering logic has been adopted for the proper identification of "Parking", 'Suites" and "Standing Room Only" inventory. Section names that cannot be mapped are pushed to the 'Unmapped' section.| Venue Name | Chart Name | MapId |
|---|---|---|
| Dallas Cowboys Stadium | NFL | 41acdad6-87f6-4fc6-a679-96a95438b49f |
| PNC Park | Baseball | 91658d8c-fb3a-43f9-b5a5-4b8395209d81 |
| Ralph Wilson Stadium | Football | 476cfb92-2ba2-4d1c-8cca-62da3cc5a42f |
| Staples Center | Basketball | b1b2c871-05a1-4e53-b8e2-e09f837ea363 |
| United Center | Basketball | 13350e0f-6178-4c60-93ba-695dff371ac1 |
1) What is the versioning strategy of the jQuery plugin?
Our jQuery Plugin sends all requests to the seating chart service with a version number attribute. This allow us to maintain backward compatibility in order to provide clients with sufficient time to upgrade their jQuery Plugin version accordingly.
For meaningful upgrade events, we will attempt to notify clients via email using the email account on record for your TicketUtils seating chart account.
2) How do I check for an updated jQuery Plugin and can this be automated?
All jQuery Plugin upgrade are well documented on the TicketUtils Seating Chart Plugin Developer Documentation page found at the following URL http://www.ticketutils.com/Resources/jQueryAPI. We suggest for all clients to periodically check this page for release updates and new functionality announcements.
Unfortunately, there is no mechanism to auto-update your jQuery Plugin version at this time.
3) Do you have sample code available to assist with the integration of the jQuery Plugin for Seating Charts to my website?
Yes, we have provided various online Demos in order to illustrate the functionality and flexibility of our jQuery Plugin and Seating Chart Framework. Further, we have also included the source code used to power our online Demos within the Developer Integration Kit. All of the code samples are enabled and preconfigured to run in a development environment using the 'localhost' hostname.
The online Demos can be found at the following URL http://chart.demo.ticketutils.com
4) How do I decide which sample code is right for me?
We recommend using the sample code from Demo #1, unless your requirements warrant pursuing one of the other demos.
5) What is the difference between using the Standard Plugin Generated Ticket List and maintaining an External List?
In a Standard Plugin Generated Ticket List, the developer is responsible for passing the tickets array and container into the Plugin. In return, the Plugin will automatically generate and maintain the List generation, sorting and filtration functions. In addition, the UI for a Standard Plugin Generated Ticket List can be further customized through the use of Formatters.
A developer will choose to use an External Ticket List when they want further control over the List generation and sorting. There are two common design approaches for interacting with External Lists, as outlined below:
Approach #1) If you want Plugin to manage the Filtration, this can be achieved by
setting the appropriate Selectors (e.g. Row, Section, Quantity, Price).
Approach #2) If you prefer to manage the Filtration, this can be achieved by making
proper use of OnClick, OnMouseover Plugin Events by implementing the necessary supporting
code.
6) What is the difference between maintaining an External List (Demo #3) and an External List which maintains no connection to the Plugin (Demo #4)?
Answer provided in #5
Latest version:2.1.1
Common
Options for Plugin Generated List
Options for Interaction with External List
$("Selector").tuMap({
ServiceUrl: "https://imap.ticketutils.com"
});
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
});
$("Selector").tuMap({
MapType:"Static"
});
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
, MapSet: "tu"
});
$("Selector").tuMap({
EventId: "1234"
, MapSet: "tt"
});
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
, ColorScheme: 2
});
$("Selector").tuMap({
AutoSwitchToStatic: false
});
$("Selector").tuMap({
,EventId:"1234"
,MapSet:"tt"
SeatingChartAutoCorrect: false
});
$("Selector").tuMap({
FailoverMapUrl: "Url Here";
});
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
, ZoomLevel: 2
});
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
, GroupsContainer: "#GroupsList"
});
| Property | Type | |
|---|---|---|
| id | String | A Unique Identifier for each Ticket. This will be passed back in Ticket Select callback. |
| section | String | Section Value e.g. "101", "Lower 101", "l101", "101l" |
| row | String | Row Value |
| quantity | Numeric / Array | Can be a Numeric value e.g. 2 or Array of Quantity Splits available e.g. [4,2].
If Quantity Array is passed, Plugin will render a Dropdown List in the Tickets List. |
| price | Numeric / String | Price can be numeric e.g. 300 or may also include the Currency Symbol e.g. $300 |
| notes | String | |
| preferred | Boolean | True, if Ticket is to be Marked and Filtered as Preferred Ticket |
| eticket | Boolean | True, if E-Ticket |
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
, Tickets:[
{ id:"1", section: "101", row: "A", quantity: [1,2,4]
, price: "$100", notes: "Some Notes"},
{ id:"2", section: "l101", row: "B", quantity: 2
, price: "$110", preferred:true},
{ id:"3", section: "Lower 101", row: "C", quantity: 3
, price: "$140", eticket:true}
]
});
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
, TicketsFilter: {
MinPrice: 20
, MaxPrice: 100
, Quantity: "2+"
}
});
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
, TicketsFilter: {
MinPrice: 20
, MaxPrice: 100
, Quantity: "1-3"
}
});
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
, TicketsFilter: {
eTicket: true
}
});
| Callback Parameter | Type | |
|---|---|---|
| Section | String | Section Name |
| Mappings | Array | Array of Section Names in the Ticket Inventory which are Mapped to this Section. |
| Quantity | Numeric | Quantity of Tickets available in the Section |
| MinPrice | String | Minimum Price of the Ticket in that Section |
| MaxPrice | String | Maximum Price of the Ticket in that Section |
| Group | Object | Group Object with Name and Group Name Alias Array |
| Active | Boolean | True if Section is having Tickets |
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
, TooltipFormatter:function(Data){
var Code = "";
Code += 'Section ' + Data.Section + '';
if (Data.Active) {
Code += '' + Data.Quantity + '';
Code += ' ticket(s) available from ';
Code += Data.MinPrice;
}
else {
Code += 'No Tickets currently available for this Section';
}
return Code;
}
});
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
, SectionViewContainer:"#SectionViewContainer"
});
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
, SectionViewTrigger:"click"
});
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
, TooltipSectionViewSize:500
});
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
, EnableTooltipSectionView:false
});
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
, AlwaysShowTooltip:true
});
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
, ResetButtonText:"Reset Map"
});
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
, ControlsPosition:"Outside"
});
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
, TicketsListContainer: "#TicketsList"
});
| Column Properties | Type | |
|---|---|---|
| Title | String | Display Title of the Column |
| Sortable | Boolean | Define if the Column is Sortable or Not |
| SortType | String | Set Sort type of Column as "numeric" or "string" |
| Visible | Boolean | Set Column Display State Visible or Invisible (default: true) |
| Width | Numeric | Set Column Width |
| CSSClass | String | Set CSS Class for Column. Used in each Table Cell of the List |
| Align | String | Set Alignment of the Cell to "left", "center", "right" |
| Formatter | Function | Define Custom Formatter form a Cell Value for this Column Formatter Parameters:
|
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
, TicketsListContainer: "#TicketsList"
, Columns: {
"section": {
Title: "Section"
, Sortable:true
, SortType:"string"
, Visible:true
, CSSClass:"SectionCssClass"
}
, "row": {
Title: "Row"
, Sortable:true
, SortType:"string"
, Visible:true
}
, "quantity": {
Title: "Quantity"
, Sortable:true
, SortType:"numeric"
, Visible:true}
, "price": {
Title: "Price"
, Sortable:true
, SortType:"numeric"
, Visible:true
, Align:"right"
}
, "notes": {
Title: ""
, Sortable:false
, Visible:true
, Width:25
}
, "action": {
Title: ""
, Sortable:false
, Visible:true
, Formatter:function(RowData, Key, CellValue){
var Link='<a class="BuyLink" href="javascript:void(0);"';
Link += ' lang="' + RowData.id+ '">Buy</a>';
return Link;
}
}
}
});
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
, TicketsSort:{
Column: "price"
, Order: "ASC"
, SortType: "numeric"
}
});
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
, PreferredFirst: true
});
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
, DisplayListHeader: false
});
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
, PreferredText: "Show Preferred Results on the Top"
});
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
, BuyButtonText: "Buy"
});
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
, NoResultsFormatter:function(){
return "No Results Found";
}
});
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
, RowSelector: ".TicketRow"
});
$("Selector").tuMap("Refresh","ProcessTickets")
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
, RowSelector: ".TicketRow"
, SectionSelector: ".Section"
});
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
, RowSelector: ".TicketRow"
, PriceSelector: ".Price"
});
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
, RowSelector: ".TicketRow"
, QuantitySelector: ".Quantity"
});
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
, RowSelector: ".TicketRow"
, eTicketSelector: ".eTicket"
});
$("Selector").tuMap({
MapId: "101921b7-d508-4fed-bd90-139015c042b2"
, OnInit:function(e,MapType){
//Write Code Here
}
});
| Callback Parameter | Type | |
|---|---|---|
| ErrorCode | Numeric |
0 - Access Denied 1 - Chart Not Found 2 - Interactive Chart Not Available -1 - Unknown Error |
| Error | String | Error Message Returned |
$("Selector").tuMap({
OnError:function(e,Error){
alert(Error.Code + " - " + Error.Message);
}
});
| Callback Parameter | Type | |
|---|---|---|
| Active | Boolean | True if Section has Tickets |
| Selected | Boolean | True if Section is selected |
| Key | String | Unique Identifier of the Section |
| Name | String | |
| Mappings | Array | Array of Section Names in the Ticket Inventory which are Mapped to this Section. |
| Alias | Array | |
| Group | Object | Object containing Id, Name, Alias (Array) of the Group |
| SectionViewAvailable | Boolean | True if Section View Images are available for the Section. |
| SectionViewUrl | String | Url of Large Section View Image |
| SectionViewThumbnailUrl | String | Url of Thumbnail Section View Image |
$("Selector").tuMap({
OnMouseover:function(e,Section){
if(Section.Active) {
alert("Section " + Section.Name
+" in Group "
+ Section.Group.Name);
}
}
});
| Callback Parameter | Type | |
|---|---|---|
| Active | Boolean | True if Section has Tickets |
| Selected | Boolean | True if Section is selected |
| Key | String | Unique Identifier of the Section |
| Name | String | |
| Mappings | Array | Array of Section Names in the Ticket Inventory which are Mapped to this Section. |
| Alias | Array | |
| Group | Object | Object containing Id, Name, Alias (Array) of the Group |
| SectionViewAvailable | Boolean | True if Section View Images are available for the Section. |
| SectionViewUrl | String | Url of Large Section View Image |
| SectionViewThumbnailUrl | String | Url of Thumbnail Section View Image |
$("Selector").tuMap({
OnMouseout:function(e,Section){
if(Section.Active) {
alert("Section " + Section.Name
+" in Group "
+ Section.Group.Name);
}
}
});
| Callback Parameter | Type | |
|---|---|---|
| Active | Boolean | True if Section has Tickets |
| Selected | Boolean | True if Section is selected |
| Key | String | Unique Identifier of the Section |
| Name | String | |
| Mappings | Array | Array of Section Names in the Ticket Inventory which are Mapped to this Section. |
| Alias | Array | |
| Group | Object | Object containing Id, Name, Alias (Array) of the Group |
| SectionViewAvailable | Boolean | True if Section View Images are available for the Section. |
| SectionViewUrl | String | Url of Large Section View Image |
| SectionViewThumbnailUrl | String | Url of Thumbnail Section View Image |
$("Selector").tuMap({
OnClick:function(e,Section){
if(Section.Active && Section.Selected) {
alert("Selected Section "
+ Section.Name
+" in Group "
+ Section.Group.Name);
}
}
});
| Callback Parameter | Type | |
|---|---|---|
| Name | Button Text | Returns Out of the Map Section Name (Button Text) |
| Selected | Boolean | True if Button is selected |
| Mappings | Array | Array of Sections Mapped on the Button |
$("Selector").tuMap({
OnControlClick:function(e,Data){
if(Section.Selected) {
alert("Selected Button " + Data.Name);
}
}
});
| Callback Parameter | Type | |
|---|---|---|
| Name | String | Name of the Section Group |
| Selected | Boolean | True if Section Group is selected |
| Sections | Object Array | Array of Section Objects having Name and Active Status |
$("Selector").tuMap({
OnGroupClick:function(e,Group){
if(Group.Selected) {
alert("Selected Group " + Group.Name);
}
}
});
| Callback Parameter | Type | |
|---|---|---|
| Id | String | Ticket Id Passed in Tickets List |
| Quantity | Numeric | Selected Quantity |
$("Selector").tuMap({
OnTicketSelected:function(e,Ticket){
alert("TicketId:" + Ticket.Id +", Quantity:" + Ticket.Quantity);
}
});
$("Selector").tuMap({
OnReset:function(e){
//Write Code Here
}
});
$("Selector").tuMap("HighlightSection",SectionName);
$("Selector").tuMap("ResetSection",SectionName);
$("Selector").tuMap("ToggleSelection",SectionName);
$("Selector").tuMap("ToggleAll");
var Sections=$("Selector").tuMap("GetSelectedSections",
{
OnlyUnique:true
, IncludeGroupName:true
});
$("Selector").tuMap("SetOptions",{
ZoomLevel:1
,TicketsFilter: {
Quantity:3
}
});
$("Selector").tuMap("Refresh");
Force Full Reset:
$("Selector").tuMap("Refresh","Reset");
$("Selector").tuMap("FilterTickets","Parking",true);
$("Selector").tuMap("AddMapControl","My Button Name",function(Selected){
if(Selected)
{
alert("Selected");
}
else
{
alert("Deselected");
}
});
$("Selector").tuMap("RemoveMapControl","Parking");
