Please Log-in or Register to get full access to the forums.


Post Reply 
 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Single Qtip2 with multiple content PLEASE HELP
17th March, 10:47
Post: #1
Single Qtip2 with multiple content PLEASE HELP
Hi everyone, I'm new here.Can anyone tell me how to use the qtip2 to display the difference content of an events object? In this case is carevents and roomevent. I want to display the variable[/code] of carevents and roomevent that i push to the qtips2.
or
There is the way to do this properly please give me some advice, please.



JS Code
<!DOCTYPE html>
<html>
 
<head>
    <metacharset='utf-8' />
    <link href='/css/fullcalendar.min.css' rel='stylesheet' />
    <link href='/css/jquery.qtip.min.css' rel='stylesheet' />
    <link href='/css/fullcalendar.print.min.css' rel='stylesheet' media='print' />
    <script src='/js/lib/moment.min.js'></script>
    <script src='/js/lib/jquery.min.js'></script>
    <script src='/js/fullcalendar.min.js'></script>
    <script src='/js/jquery.qtip.min.js'></script>
    <script src='/js/locale/th.js'></script>
    <script>
 
        $(document).ready(function() {
            // ajax request roomtasks
            $.ajax({
                url: "/calendarroomdata",
            })
            .done(function( data ) {
                // declare variables
                var carevents= [];
                var roomevents = [];
 
                // ajax request cartasks
                $.ajax({
                    url: "/calendarcardata",
                })
                .done(function (cardata) {
 
                    // loop for keep roomtasks
 
                    for(var j =0; j < cardata.length; j++)
                    {
 
 
                        carevents.push( {
                            title: cardata[j].description,
                            start: cardata[j].start_at,
                            end: cardata[j].finish_at,
                            purpose:cardata[j].purpose,
                            backgroundColor: '#777'
                        })
                    }
 
                    // loop for keep cartasks
 
                    for(var i =0; i < data.length; i++)
                    {
 
 
 
                        roomevents.push( {
                            title: data[i].topic,
                            start: data[i].start_at,
                            end: data[i].finish_at,
                            capacity: data[i].capacity,
                            name:data[i].user.name,
                            role:data[i].user.roles.name,
                            sub_role:data[i].user.subroles.name,
                            description: data[i].description,
                            hours:data[i].hours,
                            room_id:data[i].roomlist.roomname,
                            eventColor: '#378006',
 
                        })
 
                    }
                     //combine the carevent and roomevent
                    var combine = roomevents.concat(carevents);
                    // display
 
                    $('#calendar').fullCalendar({
 
 
                        editable: false,
                        lang:'th',
                        navLinks: true, // can click day/week names to navigate views
                        eventLimit: true, // allow "more" link when too many events
                        header:
                        {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'month,agendaWeek,agendaDay,listMonth'
                        },
 
                        events: combine,
 
 
 
                    eventRender: function(event, element)
                    {
 
                        element.qtip({
 
                            style:{
                                classes: 'myStyle',
                                height: 150,
                                width: 300,
                                textAlign: 'center',
                            },
 
                            content: {
                                title: event.room_id,
 
                                text:
                                "content: "+event.description+""
                                +"amount: "+event.capacity+""
                                +"book name: "+event.name+""
                                +"role: "+event.role+""
                                +"subrole: "+event.sub_role+""+
                                "hours: "+event.hours+""
 
 
 
                            }
 
                        })
                    }
 
                    });
 
                });
            });
        });
 
    </script>
 
    <style>
 
        body {
            margin: 40px 10px;
            padding: 0;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            font-size: 14px;
        }
 
        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }
 
    </style>
</head>
<body>
 
<div id='calendar'></div>
 
 
</body>
<style>
    .myStyle{
        font-size: 12px;
    }
</style>
</html>


   
How i can display the content of the cartask ??
   
Find all posts by this user
Quote this message in a reply
Post Reply 


Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  [Solved] How to update tooltip content from anonymous content function? Abrasive 11 6,791 31st October 12:49
Last Post: Anbert
  qtip2 last release on github and qtip2 website qtip201603 1 760 3rd May 10:13
Last Post: qtip201603
  Multiple elements - tooltip 'smart' position joryl 1 771 4th April 08:44
Last Post: joryl
  Refresh qTip2 content derekc 0 530 31st March 03:41
Last Post: derekc
  multiple qtip's on one target nestor49 2 1,101 25th February 10:13
Last Post: nestor49
  WordPress adds superfluous </p> to qtip2 content. Cause Unexpected token ILLEGAL Elad_R 0 947 28th January 12:51
Last Post: Elad_R
  Multiple links in a tooltip dianasumera 0 874 26th January 01:35
Last Post: dianasumera
  Multiple links in a tooltip dianasumera 0 814 14th January 06:53
Last Post: dianasumera
  Loading Div on multiple links not working correctly? niabi 1 1,290 21st November 17:13
Last Post: niabi
  Destroy tip on single dom bedos 1 1,036 3rd October 15:23
Last Post: bedos



User(s) browsing this thread: 1 Guest(s)