How to pass content of variable to jquery function

Question

I want to built a calendar that displays events which have are stored in a database. To do this I loop thru a set of records at the beginning of my script and build a string in a variable vEvents that ultimately contains this:

{ 
   title: 'new appointment', 
   start: '12-OCT-2011 14:00' 
}, 
{ 
   title: 'next appointment', 
   start: '12-OCT-2011 15:00' 
}

and so on. So each event is built by information that resides in the DB, the final number of events entries (between the two curly brackets) is unknown and can change dynamically for every call of the calendar.

I'm using a jQuery calendar plug-in (http://arshaw.com/fullcalendar) which builds the calendar using a jQuery call that goes like this:

$('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay',
            },
            editable: false,
            height: 370,
            firstDay: 1,
            weekMode: 'liquid',
            minTime: 8,
            maxTime: 22,
            weekends: false,
            //and now on to the event creation
            events: [
                {
                 title: 'this is a standard event',
                 start: '11-OCT-2011 16:00'
                },
                {
                 title: ' yet another demonstration event',
                 start: '11-OCT-2011 17:00'
                }]
});

What I would like to do is to replace anything between the edgy brackets [] in that call by the content of the previously built variable, so something like

//and now on to the event creation
events: [
   $(vEvents) // or some other unknown syntax, or an evaluation function etc. that
              // replaces the varibale with it's content at that place
]

I have not been able to get that replacement done, I tried the eval() function and some other approaches but then jQuery always complains about improper syntax. So is this possible to do overall and if positive how do I do this?

Jasper · Accepted Answer · 2011-11-16 19:03:40Z

3

It appears as though the fullCalendar plugin requires an array of objects. So if vEvents looks like this:

var vEvents = [//this bracket starts an array
    {//this bracket starts an object
        title: 'new appointment',//this line defines the `title` property of the object it's in
        start: '12-OCT-2011 14:00'//this line defines the `start` property of the object it's in
    },//this ends the current object and the comma separates the two objects as items in an array
    { 
        title: 'next appointment', 
        start: '12-OCT-2011 15:00' 
    }
    //note that there is not a comma here, it's important that commas are only between objects and there is no trailing comma at the end of the list of objects
];//this bracket ends the array

Then you should be able to just set the events option to the vEvents variable like this:

$('#calendar').fullCalendar({
    ...
    //and now on to the event creation
    events: vEvents
});

--UPDATE--

//first, create an empty array
var myEvents = [];

//then iterate through your data
for (var rowIx = 0; rowIx < this.Data.Rows.length; rowIx++) {

    //and add an object, notice the `{` and `}` (brackets) that note the beginning and ending of an object definition
    myEvents.push({title : this.Data.Rows[rowIx][2].text, start : this.Data.Rows[rowIx][5].text;);
}

.push() adds a value onto the end of an array, so here we .push() an object onto an array. title : this.Data.Rows[rowIx][2].text adds the title property to the new object and maps the value you want to that property.

edited Nov 16, 2011 at 19:03

answered Nov 16, 2011 at 17:20

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Didier Ghys Over a year ago

He's building a string variable. It needs to be json-parsed first.

Jasper Over a year ago

I added some comments in my answer about building an array of objects. If he is building the data himself he might as well be doing it correctly right off rather than building it one way and then using another language to fix it.

Stefan Over a year ago

Thank you Jasper, but how do I then get the array to be build dynamically? That's why I approached if with a string that "grows" until the loop over the records has finished...Again, I'm new to JavaScript so my questions may seem foolish, I know :-( So for example a var myEvents :[ title: this.Data.Rows[rowIx][2].text, start: this.Data.Rows[rowIx][5].text ]; does not seem to work

Jasper Over a year ago

Exactly how you do it depends on the server-side language you're using. In PHP I would iterate through the database records and add the title/start-time to an array, then at the end of the loop I would use json_encode() to create my array of objects: $output = array(); while ($row = mysql_fetch_assoc($query)) {$output[] = $row;} echo json_encode($output); This can also be done without json_encode() by just following the guidelines I noted above for creating an array and for creating objects in JavaScript.

Stefan Over a year ago

so I tried the follwoing, supposedly creating an array of objects (I thought) var myEvents = new Array(); var Event = new Array(); for (var rowIx = 0; rowIx < this.Data.Rows.length; rowIx++) { myEvents[rowIx] = Event(); myEvents.title = this.Data.Rows[rowIx][2].text; myEvents.start = this.Data.Rows[rowIx][5].text;} Question: is this the correct way of doing it in JavaScript? It doesn't seem to work though :-(

|

Tim Rogers · Accepted Answer · 2011-11-16 17:20:22Z

Here's your previously built variable. It's an array, as denoted by square brackets.

var myEvents = [
            {
             title: 'this is a standard event',
             start: '11-OCT-2011 16:00'
            },
            {
             title: ' yet another demonstration event',
             start: '11-OCT-2011 17:00'
            }];

Here's your calendar setup.

$('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay',
        },
        editable: false,
        height: 370,
        firstDay: 1,
        weekMode: 'liquid',
        minTime: 8,
        maxTime: 22,
        weekends: false,
        events: myEvents
});

neo · Accepted Answer · 2011-11-16 17:27:57Z

0

A simple variable is all you need there. So to test it first do this

var vEvents = [
                {
                 title: 'this is a standard event',
                 start: '11-OCT-2011 16:00'
                },
                {
                 title: ' yet another demonstration event',
                 start: '11-OCT-2011 17:00'
                }
              ];

// Calendar code
  ...
  maxTime: 22,
  weekends: false,
  //and now on to the event creation
  events: vEvents });

Once you know that works then you can populate the vEvents array dynamically with the data you read from the DB by simply adding it to the array.

answered Nov 16, 2011 at 17:27

neo

111 bronze badge

1 Comment

Didier Ghys Over a year ago

He's building a string variable. It needs to be json-parsed first.

Bertrand Marron · Accepted Answer · 2011-11-16 18:34:23Z

0

To do this I loop thru a set of records at the beginning of my script and build a string in a variable vEvents

Instead of building a string, could you build a JavaScript object?

If not, generate a valid JSON formatted string, and then use jQuery.parseJSON() to get a JavaScript object from it.

Keep in mind that vEvents should be an array of objects.

Then just use

$('#calendar').fullCalendar({
    events: vEvents
});

edited Nov 16, 2011 at 18:34

answered Nov 16, 2011 at 17:26

Bertrand Marron

22.3k8 gold badges63 silver badges95 bronze badges

Collectives™ on Stack Overflow

How to pass content of variable to jquery function

4 Answers 4

8 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related