Integrate Small Calendar (datepicker) and Timeline with fullCalendar [closed] - jquery-plugins

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 months ago.
Improve this question
I want to implement two features apart from the ones in Basic View of FullCalendar. The inspiration is Google calendar. Here is what I want:
Although I couldn't find these two features in FullCalendar documentation I'd still like to confirm if FullCalendar supports these features.
If not, please feel free to share any suggestions on how I should implement them.

You can accomplish the time line with the code here, and you can use date picker and link it with fullcalendar to create the small calendar on the left. Here is how to implement it...
$(document).ready(function() {
$('#datepicker').datepicker({
inline: true,
onSelect: function(dateText, inst) {
var d = new Date(dateText);
$('#calendar').fullCalendar('gotoDate', d);
}
});
}
This will force fullCalendar to go to what ever date is selected in the jquery date picker.

Also now, you can omit the need of minor datepicker just for the sake of navigating to some specific date by using navigation links feature of FullCalendar. with that, you can navigate to any date from month view e.g
<FullCalendar
...
navLinks={true}
>

Related

Laravel: what is the best practice to show errors in a modal when save a form? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
In my Laravel application (Bootstrap 4, jQuery and Axios) I have a page with multiple forms. Some forms are in a modal, but not all forms.
<form method="post">
<div class="modal">
// show errors
// form fields
</div>
</form>
I will not use ajax for posting this form. What is the best practice to show errors in a modal, when post a form when there are many others forms on the same page?
The problem now is: when a user posts a form with a field error, Laravel redirects the user back to the page, with the modal closed. When the user opens the modal, he shees the error in the modal.
What is the best practice to prevent this?
One way I have dealt with this in the past is to wrap some JS that executes on load inside some PHP conditional.
For example:
#if($errors->has('field-in-modal'))
$('#my-modal').modal('show');
#endif
In laravel > 5.8.13:
#error('field-in-modal')
$('#my-modal').modal('show');
#enderror
Then when you are redirected back with errors, you can open your modal immediately.
In the case where you have many fields under validation and checking each one is not a realistic option, I would suggest using a FormRequest or manually creating the validator and using an after hook to add an error you might use as the flag:
$validator->after(function ($validator) {
if ($validator->fails()) {
$validator->errors()->add('show-modal', 'use as a flag to show modal on pageload');
}
});

How to ajax next & previous post on single page in Wordpress [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
On my single.php template page I have nav links to the next and previous post. Currently when you click on the nav it takes you to the url page of the next or prev post. Instead I would like to load the next or prev post via Ajax into the current page, is this possible?
You need to target your nav links with custom selectors, let's say both links are in div #post_nav_links.
Using Javascript, you can easily the post using Ajax
Here is a simple code ( i've used jQuery, Wordpress default class for post content is 'post' )
$("#post_nav_links a").click(function(){
var url = $(this).attr("href");
$('.post').load(url + ' .post');
return false;
})

WebGrid Paging/Sorting AJAX is extending the querystring [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a WebGrid in a cshtml view and i'm using the ajaxUpdateContainerId parameter to page/sort it using AJAX. But, each time i click on a link to page/sort the WebGrid, the href is changing and the querystring add a "__swhg" parameter.
Please refer the attached image
And the querystring just keep growing like this each time I click on the sort/pager, the "__swhg" parameter keep growing because "href" attributes in the WebGrid are adding this to the simple "?sort=&sortdir=" or "?page=".!
This parameter represents an unique timestamp and is added to each url on purpose. Since the AJAX requests are using GET verb, those requests might be cached by the browser. This means that when the user clicks on the links, your server might never be reached. The parameter ensures that the responses are not cached, because each time you get an unique url. Currently this is hardcoded in the WebGrid and there's no way to disable it.
Of course if for some reason you want to shoot yourself in the foot and remove this parameter one possibility is to subscribe to a custom AJAX callback:
var grid = new WebGrid(
Model,
ajaxUpdateContainerId: "grid",
ajaxUpdateCallback: "callback"
);
in which you could replace all links and remove the __swhg parameter:
function callback() {
$('a[data-swhglnk="true"]').attr('href', function () {
return this.href.replace(/&__swhg=[0-9]{13}/, '');
});
}

Knockout and downloading csv/pdf [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am using ASP.NET MVC and knockout.
I have a form to gather information.
The last field in the form, is the output type:
which can be HTML/CSV/PDF.
I have difficulties to output the result into CSV or PDF.
As knockout submit the form using ajax and ajax cannot save
the result into CSV or PDF.
If you have any idea, could you please let me know.
Thanks.
you cannot use knockout to create pdf. post your data to the server via ajax, and make asp.net create the pdf via C# from the server, and once the pdf is created, you can make it available to download.
Use a form to post the data parameters to the server.
If you need to use parameters that are KO Observables or js variables, you can append them to the form using a js function like this:
function downloadFile(idForm, parameters) {
var id = '#' + idForm;
$(id).submit(function () { //listen for submit event
$(id + ' input').empty().remove();
$.each(parameters, function (i, item) {
$('<input />').attr('type', 'hidden')
.attr('name', item.name)
.attr('value', item.value)
.appendTo(id);
});
return true;
});
$(id).submit();
};
You could pass an extra parameter indicating if you want to download a HTML, CSV or PDF file.

Can we change the content of the page without using AJAX [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I mainly use AJAX to update parts of a web page, without reloading the whole page.
can i do it without using AJAX
Please refer, Refresh content of a div without ajax
If something is to be done in server side without refresh you should be using AJAX. Else you can simply use javascript codes.
For show/hide content(if nothing to be done in server side), you can just simply use javascript codes or jquery.
eg.
simple javascript
document.getElementById('myContent').display = 'none';
document.getElementById('myContent').display = 'block';
jquery
$('#myContent').hide();
$('#myContent').show();
where myContent is the content element id
If you don't need any new information from the server, just use JavaScript to manipulate the DOM. Add event handlers to your HTML elements to trigger your JavaScript code.
One example to get new information from the server and feed it to your JavaScript: add <script src="..."> node to the DOM.
If you want to change images only, then change the .src attribute of a DOM image, or create a new Image from JavaScript and add it to the DOM.
If you want to draw something onto a rectangle, create a <canvas> element and draw to it using JavaScript.
Possibly there are many other ways.
Yes. I have often done this e.g. using a tabbed menu therefore the header, footer and menu stay the same but the content changes. I did this by wrapping a class around both pieces of content, I then displayed:none; on one of the classes which causes it to hide. Then on click of your choice, using a jquery function within a javascript function, you can then toggle between the two classes which effectively gives you a content change. It works perfect for me see what you think. Here is the code:
function doSlide()
{
$('#sidepanel').toggleClass("hidesidepanel showsidepanel", 1000);
$('#maincontent').toggleClass("show maincontent hidemaincontent", 1000);
$('#openmenu').toggleClass("openmenuleft openmenuright", 1000);
}

Resources