i'm in the nth hour of trying the following: i'd like to add text/html snippets before the title of an event as displayed in the fullcalendar (i.e. inside of <div class="fc-event-title">). These snippets would be one of the following:
<span class="info">registration needed</span>
<span class="cancelled">course cancelled</span>
<span class="ok">held as planned</span>
blank value/no additional text
I tried to copy wp-fullcalendar.php into my theme's directory hoping to be able to edit the function but couldn't accomplish to overwrite the original file - anyplace i tried to put it.
I then tried working in the source file, for a test i did (line 199 in original wp-fullcalendar.php):
$title = 'LLL' . $post->post_title; which did nothing to the output in the calendar.
After a while i completely removed the function 'function ajax()' from wp-fullcalendar.php and the calendar still displays just fine. Seems to be the wrong place (which it is anyway as it's a source file, i know).
I was hoping to find a quick way to accomplish my task but as you can see i'm stuck.
Any help on the matter would be highly appreciated. Thank you,
Frank
Update:
i added a custom attribute 'Kurstyp' to each Event.
possible values for it are: empty string (ie no extra span), 'please register', 'event cancelled', 'held as planned'
i would like all non empty values to appear within <div class="fc-event-title">
best each wrapped in a span with an individual class for styling purposes
this is what i added to wp-fullcalendar.php:
add_action('wp_ajax_wpfc_custominfo',array('WP_FullCalendar','custominfo') );
add_action('wp_ajax_nopriv_wpfc_custominfo', array('WP_FullCalendar','custominfo') );
// and further down
function custominfo() {
if( !empty($_REQUEST['post_id']) ){
$return = get_post_meta($_REQUEST['post_id'], 'Kurstyp', true);
}
echo apply_filters('wpfc_custominfo', $return);
die();
}
// then, inside the event.render part within fullcalendar_args
if(event.post_id > 0) {
alert('event.title (1st): ' + event.title);
var custominfo = {action: 'wpfc_custominfo', post_id: event.post_id};
var extra = $.ajax({
url: WPFC.ajaxurl,
type: "POST",
data: custominfo
});
extra.done(function(addtxt) {
event.title = addtxt + event.title;
alert('event.title (2nd): ' + event.title);
});
}
alert('event.title (3rd): ' + event.title);
addtxt delivers the correct value but my 3rd alert fires before the 2nd one, so event.title remains unchanged
all of this takes place in the original source, i'd want to change this even if it worked
also, even if it worked: how to style the different messages accordingly?
might the attribute className of the Event Object be helpful and if so, how?
The Texts used would be german, tried to use english here for better reading.
Thanks for your help, Frank
Related
I've been googling for hours but surprisingly I didn't find any topic on that subject.
I have the following Form
class propertyType extends AbstractType
{
public function buildForm(FormBuilder $builder, array $options)
{
$builder
->add('city')
->add('district', 'entity', array('class'=>'FlatShanghaidefaultBundle:district',
'property'=>'name',
'query_builder' => function ($repository) {
$qb = $repository->createQueryBuilder('district');
$qb->add('where', 'city = :city');
$qb->setParameter('city', 1);
return $qb;
}
public function getName()
{
return 'property';
}
}
When the user choose a City in the form, I want the options of district to be dynamically updated and limited to that city. With Ajax or JS?
What would be the best practice? Do you know a tutorial on that topic?
If someone can put me on the right tracks, that would help a lot..
Thanks!
The query builder will not solve your problem, you can remove it altogether.
That query is run when the form gets built, once you have it on your browser you need to use javascript to populate the options.
You can have the options stored in a javascript variable, or pull them from the server as needed with ajax (you will need a controller to handle these ajax requests).
You will probably want to use some jquery plugin to handle the cascading logic between the select elements, there are a couple available:
I use this one, but it seems to be offline: http://devlicio.us/blogs/mike_nichols/archive/2008/05/25/jquery-cascade-cascading-values-from-forms.aspx
And there is this one, which I never used really: http://code.google.com/p/jquery-cascade/
There is also at least this Bundle I know of: https://github.com/genemu/GenemuFormBundle, which has ajax field types available for several jquery plugins. This may save you writing the ajax part to handle the data, as it comes built in (it's probably easier to implement the controller your self anyway). I haven't tried this one, and I don't know if it has cascading support.
Jbm is right about the query builder. And his approach is perfecly valid.
Another option could be to dispense the cascade select in favor of an autocomplete field.
Assuming that you save the countries, cities and districts as entities and have a relation between them, you do not even need to save what city/country has been selected because you can just call:
$district->getCity()->getCountry();
I have implemented a similar thing for country/city selection and will link here to the the main involved files.
First, create a custom form type to encapsulate all form stuff, it contains a hidden field to store the selected id and a text field to serve as input for the autocomplete logic:
https://github.com/roomthirteen/Room13GeoBundle/blob/master/Form/LocationFieldType.php
Then theme the form type:
https://github.com/roomthirteen/Room13GeoBundle/blob/master/Resources/views/Form/fields.html.twig
The url of the autocomplete source is passed as data attribute so no JS will be smutching the html code.
Last but not least, the JS functions have to be implemented:
https://github.com/roomthirteen/Room13GeoBundle/blob/master/Resources/public/jquery.ui.location-autocomplete.js
The result can be seen in the image below, see that for clarity the country name will be displayed in braces behind the city name:
--
I favor this solution much more that using cascade selects because the actual value can be selected in one step.
cheers
I'm doing this myself on a form.
I change a field (a product) and the units in which the quantity can be measured are updated.
I am using a macro with parameters to adapt it more easily.
The macro :
{% macro javascript_filter_unit(event, selector) %}
<script>
$(function(){
$('#usersection')
.on('{{ event }}', '{{ selector }}', function(e){
e.preventDefault();
if (!$(this).val()) return;
$.ajax({
$parent: $(this).closest('.child_collection'),
url: $(this).attr('data-url'),
type: "get",
dataType: "json",
data: {'id' : $(this).val(), 'repo': $(this).attr('data-repo'), parameter: $(this).attr('data-parameter')},
success: function (result) {
if (result['success'])
{
var units = result['units'];
this.$parent.find('.unit').eq(0).html(units);
}
}
});
})
});
</script>
{% endmacro %}
The ajax returns an array : array('success' => $value, 'units' => $html). You use the $html code and put it in place of the select you want to change.
Of course the javascript code of the ajax call need to be modfied to match your fields.
You call the macro like you would normally do:
{% import ':Model/Macros:_macros.html.twig' as macros %}
{{ macros.javascript_filter_unit('change', '.unitTrigger') }}
So I have two arguments : the event, often a change of a select. and a selector, the one whose change triggers the ajax call.
I hope that helps.
Well, I have been looking everywhere for hours and hours and it seems like there's so many ways to do this, since I have never used Ajax before and have little knowledge of havascript, its become too hard for me.
I have the loop on my front page (index) or wordpress and I want to have a filter, a dropdown menu with different categories, that when clicked, the only posts showing in that same screen are the ones from that category. I need the loop to be refreshed with ajax, so the whole page is still left intact while you use the filter.
this is what i have on my Index file:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2.6")</script>
<script type="text/javascript">
$(function(){
$('#main_cat').change(function(){
var $mainCat=$('#main_cat').val();
$("#sub_cat").empty();
// call ajax
$.ajax({
url:"<?php bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",
type:'POST',
data:'action=my_special_ajax_call&main_catid=' + $mainCat,
success:function(results)
{
// alert(results);
$('#sub_cat *').fadeOut(500);
$('#sub_cat + p').fadeOut(500);
$("#sub_cat").append(results);
$('#sub_cat').load('http://localhost:8888/public_html/wp-content/themes/twentyten-child/templateloop.php');
$('#sub_cat + p').fadeIn(1);
}
});
}
);
});
The dropdown with the categories goes like this:
<?php
wp_dropdown_categories('show_count=0&selected=-1&hierarchical=1&depth=1&hide_empty=0&exclude=1&show_option_none=Main Categories&name=main_cat');
?>
So, the dropdown works, and it's supposed to ajax load a wp template file with a query filtering only one category (grabbed from the wp_dropdown_categories). And the loading works fine if I have a dummy text in the templateloop.php file, but when I have the wp query, nothing happens. the #sub_cat div, which is where the loop is located and was supposed to be switched by the template file just dissapears with all the post listing and im left only with the top half of the page (until where the #sub_cat div used to be).
There has been so much trial and error, ive tried with the query call in the template file, in the index file, in the functions, i never seem to get any result.
on my functions.php file ive got this:
function implement_ajax() {
if(isset($_POST['main_catid']))
{
echo '<?php $paged = (get_query_var("paged")) ? get_query_var("paged") : 1; query_posts("cat='.$_GET['maincatid'].'&paged=$paged"); ?>';
die();
} // end if
}
add_action('wp_ajax_my_special_ajax_call', 'implement_ajax');
add_action('wp_ajax_nopriv_my_special_ajax_call', 'implement_ajax');//for users that are not logged in.
and the query line i used to use before all this, in the index file is:
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts("cat=1,2,3,4,5&paged=$paged"); ?>
i've tried using the wp_query but it's just going nowhere, i really need guidance. Any help is appreciated. thank you.
That is more complicated than it needs to be. You shouldn't need additional queries or AJAX at all. If you theme is using the post_class() function as it should be, your posts all have classes associated with your categories. These classes are the category name prepended with 'category-'-- 'category-uncategorized', for example. All you really need to do is show and hide posts based on those classes.
I haven't written anything specifically for your circumstance but I have done this with some very large search results-- sometimes 400 or more per page-- and it works quite well. Here is the idea: Use jQuery to watch your select menu. You want change. When the select changes, parse the information to work out the category (I don't know off hand what information wp_dropdown_categories() includes in its markup.), show() the selected category and hide() everything else.
I have a div id="comments"
in this i am displaying 10 comments at a time.
when user want to view next comments, i have provided one button that will collect next 10 comments. for this next comment i have created partial view to display remaining 10 comments into another div morecomments.
My problem is when i am displaying next 10 comments its showing me all 20 comments but whole comments div is getting refreshed, how to prevent loading whole comment div.
My code is here:
<div id="comments">
// Display Comments
<div id="moreButton">
<input type="submit" id="more" class="morerecords" value="More Post" />
</div>
</div>
<div id="morecomments">
</div>
Jquery::
$('.morerecords').livequery("click", function (e) {
// alert("Showing more records...");
var next = 10;
var url = '#Url.Action("ViewMore", "Home")'
var data = { nextrecord: next};
$.ajax({
type: "POST",
url: url,
data: data,
success: function (result) {
$("#morecomments").html(result);
}
});
});
In above code i am getting 10 comments first time and when user click on More Post button it will show me above 10 comments plus next 10 comments. but whole div is getting refreshed.
What changes i have to do so that i can get user comments without affecting previous showing comments?
Suppose user having 50-60 post in his section then all comments should be display 10+ on More Post button click and so on...
How can i do that?
You need to filter your records and put it in comment div... Your code should like this:
$('.morerecords').livequery("click", function (e) {
var next = 10;
var url = '#Url.Action("ViewMore", "Home")'
var data = { nextrecord: next};
var older_records = $("#morecomments").text();
$.("comments").append(older_records); //When you will get next record data, older data will be filled in comment div.
$.ajax({
type: "POST",
url: url,
data: data,
success: function (result) {
$("#morecomments").html(result);
}
});
});
The error is in:
$("#morecomments").html(result);
.html("somevalue") deletes the content, then fills it with whatever parameter you supplied.
Try doing this:
$("#morecomments").html($("#morecomments").html() + result);
or even easier:
$("#morecomments").append(result);
I know this works if you're passing strings, and a partial view is basically a html string. I don't know if there will be any conflict issues with the tags brought along by partial views.
Either way, this is the easiest way to add to an element rather than write over it.
If you are using Entity Framework (which you do), you need to use something like below:
public JsonResult Get(
//this is basically giving how many times you get the comments before
//for example, if you get only one portion of the comments, this should be 1
//if this is the first time, this should be 0
int pageIndex,
//how many entiries you are getting
int pageSize) {
IEnumerable<Foo> list = _context.Foos;
list.Skip(PageIndex * PageSize).Take(pageSize);
if(list.Count() < 1) {
//do something here, there is no source
}
return Json(list);
}
This is returning Json though but you will get the idea. you can modify this based on your needs.
You can use this way for pagination as well. Here is a helper for that:
https://bitbucket.org/tugberk/tugberkug.mvc/src/69ef9e1f1670/TugberkUg.MVC/Helpers/PaginatedList.cs
My issue is for some strange reason it seems stuck in the page controller so instead of getting out and going into the ajax controller I have it trying to go down that route in the page controller
1st try
http://localhost:2185/Alpha/Ajax/GetBlah_Name/?lname=Ge&fname=He
2nd try
http://localhost:2185/Patient/~/Ajax/GetBlah_Name/?lname=Ge&fname=He
Objective
http://localhost:2185/Ajax/GetBlah_Name/?lname=Ge&fname=He
Page button to call jquery
<a style="margin-left: 310px;" href="javascript:void(0)" onclick="getBlah()"
class="button"><span>Lookup</span></a>
Jquery code
1st try
{
$.getJSON(callbackURL + 'Ajax/GetBlah_Name/?lname=' + $('#Surname').val() + '&fname=' + $('#FirstName').val(), null, GetResults)
}
2nd try
{
$.getJSON(callbackURL + '~/Ajax/GetBlah_Name/?lname=' + $('#Surname').val() + '&fname=' + $('#FirstName').val(), null, GetResults)
}
In summary I don't know why it won't break out of the controller and go into the Ajax controller like it has done so in all the other projects I've done this in using the 1st try solution.
It seems you want to cal a controller at ~/Ajax. Is it? If yes, you should use this code:
$.getJSON(callbackURL + '/Ajax/GetBlah_Name/?lname=' + $('#Surname').val() + '&fname=' + $('#FirstName').val(), null, GetResults)
UPDATE:
This will work for your Q, but the complete solution is #Darin Dimitrov's answer. I suggest you to use that also.
UPDATE2
~ is a special character that just ASP.NET works with it! So http doesn't understand it. and if you start your url with a word -such as Ajax-, the url will be referenced from where are you now (my english is not good and I can't explain good, see example plz). For example, you are here:
http://localhost:2222/SomeController/SomeAction
when you create a link in this page, with this href:
href="Ajax/SomeAction"
that will be rendered as
http://localhost:2222/SomeController/Ajax/SomeAction
But, when url starts with /, you are referring it to root of site:
href="/Ajax/SomeAction"
will be:
http://localhost:2222/Ajax/SomeAction
Regards
There are a couple of issues with your AJAX call:
You are hardcoding routes
You are not encoding query string parameters
Here's how I would recommend you to improve your code:
// Always use url helpers when dealing with urls in an ASP.NET MVC application
var url = '#Url.Action("GetBlah_Name", "Ajax")';
// Always make sure that your values are properly encoded by using the data hash.
var data = { lname: $('#Surname').val(), fname: $('#FirstName').val() };
$.getJSON(url, data, GetResults);
Or even better. Replace your hardcoded anchor with one which will already contain the lookup url in its href property (which would of course be generated by an url helper):
<a id="lookup" href="Url.Action("GetBlah_Name", "Ajax")" class="button">
<span>Lookup</span>
</a>
and then in a separate javascript file unobtrusively AJAXify it:
$(function() {
$('#lookup').click(function() {
var data = { lname: $('#Surname').val(), fname: $('#FirstName').val() };
$.getJSON(this.href, data, GetResults);
return false;
});
});
Now how your urls will look like will totally depend on how you setup your routes in the Application_Start method. Your views and javascripts are now totally agnostic and if you decide to change your route patterns you won't need to touch jaavscript or views.
I have this piece of code, but can't seem to get it working.
success: function(){
$('.like').find('.like'+like_id).attr("src", "/img/icons/checked.gif");
...etc.
.like is the class for all the images. OnClick I would like to have the img + id changed. It keeps changing all the images with class .like.
Even when using this, it is passing the right ID, but still changing all the .like images instead of the one with the right id:
var value = $(this).attr ( "id" );
Any help is highly appreciated!
Your problem is that with find('.like'+like_id) you are finding every item that has the class like10 (for like_id 10). what you want is $('#'+like_id).attr();. What you want to consider is that an id must be unique within the whole html element, so using only the unqiue_id as id is not the best way. A better way would be <img src="" class="like" id="like1"> and then using $('#like'+like_id).attr();
So, you're code could look like this:
success: function(){
$('#like' + like_id).attr("src", "/img/icons/checked.gif");
...
}
<img src"" class="like" id="like{unique nr}">