i am using fullCalender and i want to add loader on fullCalender's header button gets click, header part is in image.
so, i put loader on viewRender function and remove it on eventRender function like,
eventRender: function(event, element) {
element.find(".fc-event-title").remove();
var new_description = '';
new_description = '<strong>'+ event.start_time +' - '+ event.end_time +'</strong><br/>'
+'<strong>Name : </strong>' + event.display_name + '<br/>'
+ '<strong>Branch : </strong>' + event.customer_branch + '<br/>'
+ '<strong>Event by: </strong>' + event.event_by + '<br/>'
+ '<strong>Show as: </strong>' + event.show_as + '<br/>'
+ '<strong>Date:</strong>' + event.date + '<br/>';
element.append(new_description);
$(".loader").fadeOut();
},
viewRender: function(view, element){
$(".loader").fadeIn();
},
it is working all right for most cases but when i click on week button(right most in image). it will only fade in loader, it will not fade out loader. please help me with this bug or give me if it has other method to do this in fullCalender.
How many events have you got? Fading out the loader every time you render an event is repetitive and inefficient if you have more than one event visible. Also what if there are no events in the current date range? Then it will never fade out - this may be the cause of your issue.
You should use "eventAfterAllRender" for this instead. It will always run once, even if there are no events in the current date range.
eventAfterAllRender: function(view) {
$(".loader").fadeOut();
}
See http://jsfiddle.net/sbxpv25p/611/ for a minimalist demonstration.
See https://fullcalendar.io/docs/eventAfterAllRender for documentation.
Related
I have had a search but not finding anything that is helping me solve my little issue. It would be nice if I was throwing some kind of error but the following code executes partially perfectly.
In essense, I have a list of train departure at a station (returned in JSON format by a custom API departures.php), but as I am looping through this returned array, I want to call a second custom API which brings up details of the service (based on a variable pulled from the first API which is the unique identifier) using service.php.
Here is an example of the service unique ID
Y5G8DkxFcxw7+xmbbBNM1g==
However the second getJSON returns nothing at all.. its as though it doesn't exist.. though the php API functionality perfectly if used on its own
Here is the code, any pointers greatly appreciated. PLease note I have stripped out a lot of the HTML that generates the view from departure.php returned data and just left the bare basics in.
NOTE : this is purely an experiment, and not a commercial product.
var $crs = GetURLParameter('crs');
$.getJSON('departures.php?crs='+$crs, function (data) {
var headertemplate = '<div class="col-md-6"><h2>Departure from ' + data.GetStationBoardResult.locationName + '</h2></div>';
var date = new Date(data.GetStationBoardResult.generatedAt);
var dateString = date.getFullYear() + '-' + ("0" + (date.getMonth() + 1)).substr(-2) + '-' + ("0" + date.getDate()).substr(-2);
var timeString = ("0" + date.getHours()).substr(-2) + ':' + ("0" + date.getMinutes()).substr(-2);
headertemplate += '<div class="col-md-6 text-right"><h2>Last updated: ' + timeString + ' </h2></div>';
$("#headerArea").html(headertemplate);
var template = '<table class="table">';
template += '<tbody>';
for (var i in data.GetStationBoardResult.trainServices.service) {
template += '<tr>';
template += '<td colspan="4">Calling at ';
$service = data.GetStationBoardResult.trainServices.service[i].serviceID;
$.getJSON('servicedetails.php?service='+$service, function (data2) {
for (var j in data2.GetServiceDetailsResult.subsequentCallingPoints.callingPointList.callingPoint) {
template += data2.GetServiceDetailsResult.subsequentCallingPoints.callingPointList.callingPoint[j].locationName;
template += ', ';
}
});
template += '</tr>';
}
template += '</tbody>';
template += '</table>';
$("#dataArea").html(template);
});
Just to follow this through, the URL sends a three letter string which is used to pull off the station departure which is an array.
The script generates the station information and returns into the div with id header.
The script then loops through all the departures, building up the template which it then injects into the div with id dataArea.
In each departure, the script pulls off the details of each service to list where the train will be calling at - THIS is the bit that is totally ignored.
Currently, I am using this for server monitoring :
http://bl.ocks.org/d3noob/9692795
The problem is, I am not getting how to add buttons (start, stop) in a tooltip.
I have gone through d3js tooltip doc:
http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html
But not able to do this. Can anyone help me please.
Current Code:
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")"; })
.on("click", click)
// add tool tip for ps -eo pid,ppid,pcpu,size,comm,ruser,s
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div .html(
"PID: " + d.name + "<br/>" +
"Command: " + d.COMMAND + "<br/>" +
"User: " + d.RUSER + "<br/>" +
"%CPU: " + d.CPU + "<br/>" +
"Memory: " + d.SIZE
)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
The problem is that the tooltip doesn't respond to mouse events (pointer-events: none; in the CSS). This is done to avoid triggering the mouseout event on the node as soon as the tooltip appears above it. (Normally, the element on top would capture the mouse event, by turning off pointer-events the mouse movements are passed through to the elements underneath).
If you want the tooltip to be interactive, with buttons or links, you'll need to remove that CSS line and figure out a different way of closing/hiding the tooltip. For example, you could hide the tooltip when the tooltip <div> is moused-out, or you could add a dedicated close button on the tooltip.
I've been wrestling with a problem that I just cannot seem to solve. I've got a web form that is built from a MySQL query that's run from PHP and returned to JQuery that displays a gallery of movies that the user can give a numeric rating. I'm wanting to send the form back to PHP for processing and writing to the database.
function loadGallery()
{
$('content').append('<form id="movieRatings" action="../php/saveRatings.php" method="post">).html();
$.get('../php/getMovies.php')
.done(function(data) {
var query = $.parseJSON(data);
for (var i = 0, len = query.length; i < len; i++) {
var galleryMovies = '<div class="movContainer">' +
'<div class="movie">' +
'<a title="' + query[i].mov_title + '" href="../' + query[i].mov_title + '.html">' +
'<h3>' + query[i].mov_title + '</h3>' +
'<img src="../imgs/' + query[i].poster_path + '" /></a>' +
'<input type="number" name="' + query[i].mov_title + '" >' +
'</div>' +
'</div>';
$('#content').append(galleryMovies).html();
}
$('#content').append('<input type="submit" value="Submit"></form>');
})
.fail(function() {
$('#content').html("Epic Fail!") ;
});
}
The form displays without any issues, but clicking the submit button doesn't even send the request for the "saveRatings" PHP file. I'm sure I'm missing something simple, I just can't seem to figure out what that is. My first thought was that it was because the gallery isn't part of the actual html, but from what I've read that shouldn't have anything to do with it.
And pointers/sugestions/insight would be appreciated.
instead of
$('#ID').click(function(){
// do something here
});
switch to
$(document).on("click", "#ID", function(){
// do smth here
});
Your first assumption was true, if the element is not part of the initial html, then any events bound to it won't work unless you go with my second approach. You can find more about this behavior in the jquery documentation.
L.E: same goes for the submit action, in case i was not clear with the click example:
$(document).on("submit", 'form#formID',function(){
// do smth here...
});
I have jquery function that calls a php script some data from my mysql database, the jquery function is called as below :
$(document).ready(function(){
getTopFiveDeals();
When this runs it gets the data fine and builds some HTML and inserts it into the webpage. As shown below:
$('ul.special-list').append("<li><a href='#' class=restaurantItem restaurant= '" + item.estName + "' adddress='" + item.estAddr + "'><img src= " + item.img_link +
" width='60' height='60' alt='" + item.estName + "'><div class='img-det'><strong class='title'> " + item.title + " </strong><p> " + item.desc_short +
" <br>Expires: " + item.expiry_date + " </p><em class='price'>" + item.price + "</em></div></a><a href='dealDetail.html?id=" + item.id +
"' class='det-link'>Detail</a>");
The problem starts when i have a simple jquery function below. The function is not called instead the page reloads to index.html#
$("a.restaurantItem").click(function (event) {
alert('Hello');
}
Any help and or advice would be much appreciated.
Many Thanks
$("a.restaurantItem") is called once. It doesn't look for new elements. You need to use the event delegation syntax of .on() to match those dynamically created elements:
$('ul.special-list').on('click', 'a.restaurantItem', function(e) {
e.preventDefault(); // To stop the link from redirecting the browser
});
You'll need delegated event handlers for dynanic elements, and to prevent the default action on anchors (to avoid scrolling to top or following the href)
$('ul.special-list').on('click', 'a.restaurantItem', function(event) {
event.preventDefault();
alert('Hello');
});
use .on() this way
$(document).on('click',"a.restaurantItem",function (event){
event.preventDefault();
alert('Hello');
});
I have been trying to make the FullCalendar events use Facebox to pop up with information when they are clicked. I have no problem putting the events on the calendar or getting the information that needs to be displayed it is just getting the pop up box to work.
I have tried adding rel="facebox" to both the "span" and the "a" that wraps the event title but neither seem to affect it.
If anyone has tried this before or knows a possible solution I look forward to hearing from you.
I copied and expanded the example from the fullCalendar eventClick document page:
$('#calendar').fullCalendar({
eventClick: function( calEvent, jsEvent, view ) {
var txt = 'Event: ' + calEvent.title + '<br>' +
'Event Start: ' + calEvent.start + '<br>' +
'Event End: ' + calEvent.end + '<br>' +
'Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY + '<br>' +
'View: ' + view.name;
// for an image use: jQuery.facebox({ image: 'dude.jpg' })
// for ajax page use: jQuery.facebox({ ajax: 'remote.html' })
jQuery.facebox(txt);
}
});
Oh, and if you want to get any of the other calEvent objects, look at the fullCalendar event object page. There could be more if you are using the google calendar extension, including description and location
It might have something to do with the way facebox works. I think it might only run on the initial load of the page - so when you add these to new elements the facebox code has already run and the new elements are not recognized.
If you are using this to initiate facebox:
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
Then that is the case. You should add something to the eventRender method so that as events are rendered you call the facebox method on then, which instantiates them as facebox elements.
From http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/:
eventRender: function(event, element) {
element.qtip({
content: event.description
});
}
But instead of "element.qTip" you would use "element.facebox" with the proper arguments. You may need to set an href too.