+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Forms within modals using AJAX calls

Forms within modals using AJAX calls

8 posts, 0 answered
  1. Beth
    Beth avatar
    29 posts
    Registered:
    30 Oct 2013
    21 Jul 2014
    Link to this post
    First, let me say I’m new to .NET and Sitefinity, but not
    new to web development. I’ve been building websites since the 90s, but am used
    to working in a text editor and doing all my coding (html, php, css, js) by
    hand. So, right now, I’m feeling very lost with how to get things done in this
    new environment. (Add on to that I can’t install Sitefinity locally since it
    requires admin rights – not allowed in my work environment. Any changes I make
    have to be done on the live server and that’s a bit scary.)



    We are currently in the process of transitioning our website from hand-coded
    php to Sitefinity. I have some pages that use a form within a modal and can’t
    figure out how to get them to work within the Sitefinity framework. Currently,
    the user clicks on a button that fires a modal window to reveal a div that
    contains a form. The user fills out the form and then presses submit which does
    an AJAX call to a php file that processes the form (error checking, generates
    email, etc) and then sends a results message to display on the page. This is
    dead simple (for me) to do outside of Sitefinity with html/css/js/php.

    At first, I thought I’d just create a blank template, put
    the existing html/js/css within it and things should work fine once I translate
    the form processing bit from php to .NET. However, when I click on the modal to
    reveal the mail-to form, the form seems to auto submit and the modal
    disappears. I think this is tied to the whole webpage being considered a
    webform in Sitefinity (a concept I don’t get at all: page != form).

    Next, I thought I’d take my form tags out of the page and
    use Sitefinity’s standard form builder to create the form. This won’t work,
    however, since the form needs to be surrounded by the divs needed for the
    modal. (I tried opening the div in a content block before the form and then
    closing it in a block after the form, but Sitefinity feels the need to “fix” my
    html and close the div tags in the first content block.) It also doesn’t seem
    to support submitting the form via AJAX so that things stay within the modal.

    Does anyone have any suggestions on how to make something
    like this work in Sitefinity? Suggestions that will make sense to someone as
    green to this type of webdev as myself? Would I need a custom form
    widget/template?

    (BTW, per the licensing screen, we are running Sitefinity 6.1.4700.0 Professional Edition)

  2. Nikola Zagorchev
    Nikola Zagorchev avatar
    424 posts
    Registered:
    08 Dec 2016
    24 Jul 2014
    Link to this post
    Hi Beth,

    If you want to use submit buttons for your form or for opening the modal dialog, you should handle them clientside with javascript for instance. The submit button by default will make a postback making the whole page refresh. If you want to stop the automatic postback on the button click you should make its on click action "return false;" which will actually prevent the click to make a call to the server and handle a server side event. This way you can freely make any calls to services or other actions, or actually fire a Button_Click event only on the modal 'form' to submit and read the asp net controls input on the server.

    Regards,
    Nikola Zagorchev
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  3. Beth
    Beth avatar
    29 posts
    Registered:
    30 Oct 2013
    25 Jul 2014 in reply to Nikola Zagorchev
    Link to this post

    Thanks for the reply and the help. If I wanted to use the built-in form processor, would I need to make a custom form template? 

  4. Nikola Zagorchev
    Nikola Zagorchev avatar
    424 posts
    Registered:
    08 Dec 2016
    30 Jul 2014
    Link to this post
    Hello,

    As far as I understand, you ask about the built-in Forms module. The form widget displays a certain form on the front-end and handles its actions. However, the form itslef is built using form field controls. There are several one built-in which are the mostly used as textboxes, dropdowns, captcha, file upload, etc. You can also implement custom form field controls as shown here.
    If you want to use a modal dialog to open a form, built-in with the forms module, you could rather customize the Forms Widget template - the control showing a chosen form on the front end, and make it with a JavaScript handled button, for instance, to open a dialog with the form fields in it. The control to override is Telerik.Sitefinity.Modules.Forms.Web.UI.FormsControl. You can change only its template used to meet your needs.

    Regards,
    Nikola Zagorchev
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  5. Beth
    Beth avatar
    29 posts
    Registered:
    30 Oct 2013
    31 Jul 2014 in reply to Nikola Zagorchev
    Link to this post

    I really appreciate you trying to help, but I'm still lost. 

    I found this page in the guide: 

    http://www.sitefinity.com/documentation/documentationarticles/implementing-the-form-widget-class

    but don't even know where to start with this since I don't know where to go to create these files or write this code, it's not much of a help. (Yes, I'm that lost.)

    Do I have to be an admin to even open a SiteFinity project file in VisualStudio? When I try to open C:\Program Files (x86)\Telerik\Sitefinity 6.3\Projects\Default\SitefinityWebApp.csproj in Visual Studio, I get the message in the first attached screen grab. If I click 'ignore', I'm taking to a web browser with the info in the second screen grab.  Is this even the file I'm supposed to open in Visual Studio? My IT department just did a standard install of Sitefinity on my PC.

    So, then I went to this page: 

    http://www.sitefinity.com/documentation/documentationarticles/designer-s-guide/widget-templates/using-the-widget-templates-editor/creating-and-editing-widget-templates

    thinking it would be easier working within the admin screens to do this and ran into step 10 which tells me to find code for an existing similar widget to get the right declarations. But there are no forms widgets listed in the available widget templates...

    Edited: 

    I cannot seem to attached files - I keep getting server errors. So here they are:

    https://www.dropbox.com/s/jgcxegihpqkss57/7-31-2014%2012-16-04%20PM.png

    https://www.dropbox.com/s/xwtnb8yb42gru09/7-31-2014%2012-24-20%20PM.png

     

  6. Nikola Zagorchev
    Nikola Zagorchev avatar
    424 posts
    Registered:
    08 Dec 2016
    05 Aug 2014
    Link to this post
    Hello,

    It seems that you do not have permissions to write in the Sitefinity directory - when trying to create a backup at _EmptyProject folder. You can either open the Sitefinity project from the .csproj file or through the Sitefinity Project Manager - right click - Edit in Visual Studio. The SitefinityWebApp is just a .NET web application.
    I also recommend you to install Sitefinity Thunder for VS. More information could be found here. Thunder helps create easily custom controls and register them in the Sitefinity application, as well.
    The declarations in the article you refer to, are for the necessary namespaces and assemblies the controls you will add to the template use. For instance, if you want to use the RadControls, you should register the Telerik.Web.UI assembly and namespace. All controls added in the template will use the defined prefix:
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
     
    <telerik:ControlIwantToUseFromTelerikWebUI runat="server" ID="rad-control" />
    Hope this shed some light.

    Regards,
    Nikola Zagorchev
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  7. Beth
    Beth avatar
    29 posts
    Registered:
    30 Oct 2013
    05 Aug 2014 in reply to Nikola Zagorchev
    Link to this post

    Sadly, one also needs elevated privileges to open Sitefinity Project Manager. I'll have to go back to my IT department again (after a month, they will probably say no again).

  8. Nikola Zagorchev
    Nikola Zagorchev avatar
    424 posts
    Registered:
    08 Dec 2016
    06 Aug 2014
    Link to this post
    Hello,

    You will also need admin credentials if you are going to debug the project against local IIS. Write back to us if we can provide further assistance.

    Regards,
    Nikola Zagorchev
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
8 posts, 0 answered