Contents tagged with "JavaScript"

  • Custom Code Widget Orchard CMS

    In an Orchard CMS Website the CSS and JavaScript files are inside your Theme.

    But there are cases that you need to load a CSS or a JavaScript code in a specific page only. Or maybe you need to make a quick fix in a production website.

    These cases can be solved with this Custom Code Widget created by Constantinos Gatis.


    Enable Import Export Module

    Enable Razor Templates Module

    Import CustomCodeWidget.xml

    If the installation of the Widget is successful, in your Template …

    Read More 
  • Recent Blog Posts with jQuery

    Recent Blog Posts widget of Orchard CMS works really good and the layout customization of a blog post is a piece of cake with But maybe you need to have different layouts for recent blog posts widgets or maybe you want to share your blog posts to other sites. With this jQuery script, you can do it!

    First of all, you need jQuery installed to your site or to the site that you will share your blog posts. I didn’t write any CSS so if you want to see the same results as me, you need …

    Read More 
  • Convert Orchard messages to Toastr notifications with JavaScript

    Orchard messages appear as text messages in the Messages Zone. But sometimes we need something fancier than a simple text.

    In this example, I will use Toastr non-blocking notifications.  

    First, we will hide the messages, you can do it with CSS, but in this example, I will use only JavaScript. 

    $('.zone-messages .message').css('display', 'none');

    After this, we will get all the messages and we will appear the correct type of Toastr notification. 

    var messageElement;$('.zone-messages . …

    Read More 
  • Export Form Submissions to CSV with JavaScript

    Orchard 1.10 gives you the opportunity to export Contents and Form Submissions to XML with the built-in module Import Export. If you want to change this functionality, you have to create a module that will export to CSV. But there is a quicker way with my best friend JavaScript. 

    First, we will create an export button that will appear only in the Form Submissions Page:

    var url = window.location.href.toString().toLowerCase(); if (url.indexOf('submissionadmin') > -1) {    $('<a/>', {        id: …

    Read More 
  • Disable Submit Button on Form Submit

    When a form is being submitted, sometimes, as the users are waiting, they might click more than once the submit button. This may cause duplicates submissions. 

    First, we will disable the submit button when the form is valid.

    $('form').submit(function () {    if ($(this).valid()) {        $(this).find('button[type="submit"]').prop('disabled', true);    }});

    We can make it more beautiful if we add a loader as the user is waiting. For the loader in this example, I used FontAwesome Fonts. 

    $(' …

    Read More