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.
Related
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.
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 have jquery syntax to consume json list from database.
here's the code
$(document).ready(function () {
//function to get the result from user-input
$("#btnsearch").click(function() {
$("#posting").html("");
//show the div section
$("#divContent").show("slow", function(){
//getting value from searchbox
valobj = $('#search_box').val();
//execute data from database.
$.getJSON("search.php", { q : valobj }, function(data,result){
//show result from database
$.each(data.content, function(index, value) {
var li = $("<li><h3></h3><p></p></li>");
$("#posting").append(li);
$("h3",li).text("<a href='post.php?id='>" + value.title + "</a>");
$("p",li).text(value.intro_text);
});
//end show result
}, JSON);
}); //end show div section
}); //end click function
As you can see above, i need to place anchor to post title, so when user click it, it will redirect to another page
$("h3",li).text("<a href='post.php?id='>" + value.title + "</a>");
But it is not working and shows a result to browser example: Test Post 100
how to properly insert anchor on the jquery function?
thanks in advance.
use .html()
$("h3",li).html("<a href='post.php?id='>" + value.title + "</a>");
From the API :
We need to be aware that this method (.text()) escapes the string provided as
necessary so that it will render correctly in HTML. To do so, it calls
the DOM method .createTextNode(), does not interpret the string as
HTML
http://api.jquery.com/text/
http://api.jquery.com/html/
See this form - http://schnell.dreamhosters.com/form.php
This form has a portion of it where you enter data and can choose to add more of the same data by clicking a button called 'Add A Site' and it will make another of that section to enter another site. This is the jQuery that performs the duplication...
$(function () {
var sites = 1;
var siteform = $("#site1").html();
$(".addsites").live("click", function(e) {
e.preventDefault();
sites++;
$("#events").append("<div id='site" + sites + "'>"
+ "<br /><hr><br />"
+ siteform
+ "<center><button class='removesites' title='site"
+ sites + "'>Remove This Site</button><br />"
+ "<button class='addsites'>Add Another Site</button>"
+ "</center></div>");
});
$(".removesites").live("click", function(e) {
e.preventDefault();
var id = $(this).attr("title");
$("#" + id).remove();
});
});
The duplication works perfectly, but one thing that's bugging me is that when I have to enter data for someone claiming a LOT of sites, it gets very annoying having to repeat same or similar parts of this section of the form (like every site is in the same city, on the same day, by the same person, etc.) So I had the idea that with each duplication, the values of the form elements would also carry over and I just edit what's not the same. The current implementation only duplicates the elements, not the data. I'm not sure how to easily copy the data into new sections, and I can't find any jQuery tools to do that.
PS - This part isn't as important, but I've also considered using this same form to load the data back in for viewing/editing, etc. The only problem with this is that the reprinting of the form means that there will be a form section with the id "Site7" or something, but jQuery starts its numbering at 1, always. I've thought about using selectors to find the highest number site and start off the variable 'sites' at that number, but I'm not sure how. Any advice how to do this, or a better system overall, would be much appreciated.
You want to itterate over the input fields in siteform and store them in an object using their name attribute as a key.
Then after the duplication of the object you made and look for the equivelant fields in the new duplicated form ans set their values.
Somthing like this (not tested, just the idea)
var obj = new Object();
$("#site1 input").each(function(){
obj[this.id] = this.value;
);
// Dupicate form
$.each(obj, function(key, value){
$('#newform input[name="'+key+'"]').value = value;
});
Mind you these two each() functions differ from each other.
http://api.jquery.com/jQuery.each/
http://api.jquery.com/each/
You could consider using cloneNode to truely clone the previous site-div and (by passing true to cloneNode) all of its descendants and their attributes. Just know that the clone will have the same id as the original, so you'll have to manually set its id afterwards
Try this in your click-function
var clone = $("#site" + sites).clone(true, true); // clone the last div
sites++; // increment the number of divs
clone.attr('id', "site" + sites); // give the clone a unique id
$("#events").append(clone); // append it to the container
As Scuzzy points out in a comment jQuery does have its own clone() method (I don't use jQuery much, so I didn't know, and I didn't bother to check before answering). Probably better to use jQuery's method than the built-in cloneNode DOM method, since you're already using jQuery for event listeners. I've updated the code
The query to transfer values is quite simple (please, check the selector for all the right types on the form):
$("#site1").find("input[checked], input:text, input:hidden, input:password, input:submit, option:selected, textarea")
//.filter(":disabled")
.each(function()
{
$('#site2 [name="'+this.name+'"]').val(this.value);
}
Ok I finally figured this out. It's, more or less, an expansion on Alex Pakka's answer.
sites++;
$("#events").append("<div id='site" + sites + "'>"
+ "<hr><br />"
+ siteform
+ "<center><button class='removesites' title='site"
+ sites + "'>Remove This Site</button><br />");
$("#site1").find("input:checked, input:text, textarea, select").each(function() {
var name = $(this).attr("name");
var val = $(this).val();
var checked = $(this).attr("checked");
var selected = $(this).attr("selectedIndex");
$('#site' + sites + ' [name="'+name+'"]').val(val);
$('#site' + sites + ' [name="'+name+'"]').attr("checked", checked);
$('#site' + sites + ' [name="'+name+'"]').attr("selectedIndex", selected);
});
I used extra vars for readability sake, but it should do just as fine if you didn't and used the methods directly.
Dont forget to create a function for registering the event! Its very important because when the DOM is loaded, all new attributes need to be registrated to the DOM.
Small example:
<script>
$(document).ready(function(){
$('#click-me').click(function(){
registerClickEvent();
})
function registerClickEvent(){
$('<input type="text" name="input_field_example[]">').appendTo('#the-div-you-want')
}
registerClickEvent();
})
</script>
This is a general question, I have two pages, a main and a backgound function one (file.php)
Main page loads file.php passing variables:
$(document).ready(function() {
var page = $('#page').attr('value');
var user = $('#user').attr('value');
$('#DIV').load('file.php?user=' + user + '&page=' + page);
});
File.php queries database, inserts variables into more jquery stuff..
echos result...
The result on the main page is the desired one. If I fixe the variables in file.php (and load through browser) the script is fully functionnal and interactive.
My problem is as follows:
The file.php part of the main page is not interacive, i.e. when I click on it nothing happens, yet the 2 work fine idependently, together variables are passed, but the result is static.
My question, is this due to the .load() function? Should I be using $.ajax() type GET ...
Thanks in advance.
It sounds like you have jQuery behaviours attached to the DOM that are not being applied to the new content. This is because the new content is loaded after the DOM is ready (ie, after the load event fires).
This can be solved by using the .live jQuery function to attach events to a selector that will be applied to all elements, regardless of when they're added. E.g, instead of:
$('#button').click(function() { alert('hi'); });
Use:
$('#button').live('click', function() { alert('hi'); });
Is #DIV referring to:
<div id="DIV"></div>
Perhaps you should try this:
$(document).ready(function() {
var page = $('#page').attr('value');
var user = $('#user').attr('value');
// see the DIV below with the ID = "myId"
$("#myId").load("file.php?user=' + user + '&page=' + page", function(response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
$("#error").html(msg + xhr.status + " " + xhr.statusText);
}
});
});
<!-- empty containers with ID attributes -->
<div id="myId"></div>
<div id="error"></div>
If there is an error in the returned data, this will also tell you what the error is. Also, what does your debugger tell you?