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

Forums / General Discussions / MVC Widget, jquery and popup content block

MVC Widget, jquery and popup content block

4 posts, 0 answered
  1. Richard
    Richard avatar
    49 posts
    Registered:
    13 Jul 2010
    31 Aug 2012
    Link to this post
    Hello all.

    Here's my scenario.

    I currently have an MVC web app that I am bringing under SF. At present I have the following markup:

    <script type="text/javascript">
     
        $(document).ready(function () {
            SetupPopupHelpDiv(new Array(
                {
                    source: 'popup1', target: 'PopupContent1', height: 100
                } ));
        });
     
    </script>
     
    @using (Html.BeginFormSitefinity())
    {
        <div class="popupHelp">
            </div>
         
        <ul class="areaHighlight">
            <li>
                <div class="editor-label">
                    <label for="NuisanceSolutions">
                        Have appropriate <span class="PopupHighlight popup1">noise abatement solutions
                        </span>been implemented?</label>
                </div>
          
            </li>
        </ul>
         
    }
     
    <div class="PopupContent1" style="display: none">
        <h1>Helper here</h1>
        <h2>Content To Go Here
     
        </h2>
    </div>

    With the following jquery:

    //Popup help div support.
    function SetupPopupHelpDiv(links) {
        //Insert the inner section of the popup help div, just the placeholder required in the page itself.
        var template = ['<div class="popupHelp-Outer">',
                            '<div class="popupHelp-Close"></div>',
                            '<p class="PopupHelp-Title">Popup window title</p>',
                            '<div class="popupHelp-Inner">',
                                '<p class="popupHelp-Content">Content to go here</p>',
                            '</div>',
                        '</div>'].join('');
     
        $('.popupHelp').html(template);
        $('.popupHelp-Close').click(function () { $('.popupHelp').hide("fast"); });
     
        $.each(links, function (index, value) {
          // alert(index + "  " + value.source + " : " + value.target);
            var showFunc = function () {
                $('.PopupHelp-Title').html($('.' + value.target + ' H1').html());
                $('.popupHelp-Content').html($('.' + value.target + ' H2').html());
                $('.popupHelp-Inner').css('height', value.height);
                $('.popupHelp').show("fast");
            };
     
            $('.' + value.source).hoverIntent(showFunc, HidePopup);
        });
    }
     
    function HidePopup() {
        //Do nothing, hoverIntent requires an 'out' function to be provided.
    }

    Now I can use this within SF and it works as normal.

    What I would like to do is extend this further.

    Rather than a div held within the widget itself, the aim is for sitefinity users to be able to add and amend this content themselves.

    As such, my thinking would be to have a 75/25 layout, the 75% being the MVC widget, the 25% the a content block that SF users can change accordingly.

    However, I don't seem to be able to get his to work.

    Any ideas how I can achieve this? I have tried the follwing

    <script type="text/javascript">
     
        $(document).ready(function () {
            SetupPopupHelpDiv(new Array(
                {
                    source: 'popup1', target: 'PopupContent1', height: 100
                },
                {
                    source: 'popup1', target: 'PopupContent2', height: 100
                }));
        });
     
    </script>

    And then  setting up a div class="PopupContent2" in SF but it doesn't seem to want to play ball.

    Any ideas anyone?


  2. Richard
    Richard avatar
    49 posts
    Registered:
    13 Jul 2010
    31 Aug 2012
    Link to this post
    I was being a tool.

    Just needed the following 

    <div class="popupHelp"></div>
    <p style="display: none;">SHOW ME&nbsp; SHOW ME!!! </p>

    Where the content block CSSClass is PopupContent1
  3. Dan Sorensen
    Dan Sorensen avatar
    256 posts
    Registered:
    13 Aug 2010
    04 Sep 2012
    Link to this post
    Rather than using the 75/25 layout, it might be better to place the editable popup widget part under the rest. That way, it wouldn't take up any layout space when the popup is closed, it should just collapse. Yet, it would remain editable.
  4. Richard
    Richard avatar
    49 posts
    Registered:
    13 Jul 2010
    05 Sep 2012
    Link to this post
    Hi Dan.
    We're actually running with that idea. Works well and looks really good.

4 posts, 0 answered