Best way to call HTML structure from different pages

Question

I was wondering what's the best way to call an HTML structure from different pages in a consistent manner.

I've got a webapp in which I call from different pages the same type of structure.

For example, I have a page to manage media, in which a list of the media uploaded is shown and some buttons to perform some actions (delete, download, upload, and so). However, this same view should be shown if, inside another page, a "select media" button is shown.

What I'd like to do is - jQuery accepted - call this structure into a dialog, and also being able to have an HTML page with this same view. Changing only once this structure, should be replied to all pages in which it's shown.

Actually, I'm doing so by calling jQuery function load().dialog(), but I was wondering if there's another better way, like creating a class "MediaManagementView()" in Javascript with a render function in it, or something like that.

The only ways I know to do that are the explained before, but I think that with your opinions and solutions I'll get a better point of view rather than using only mine.

Thanks for your time and your answers!

score 1 · Answer 1 · answered Nov 12 '13 at 09:58

Are you looking for something like this?

You'll need jQuery + jQuery UI

html:

<div id="dialog">
    <iframe id="myIframe" src=""></iframe>
</div>
<button id="dialogBtn">Open Media Manager</button>

javascript:

$(document).ready(function()
{
    $('#dialogBtn').click(function()
    {
        $("#dialog").dialog({
            autoOpen: false,
            modal: true,
            height: 600,
            open: function(ev, ui){
                     $('#myIframe').attr('src','http://www.google.com');
                  }
        });
        $('#dialog').dialog('open');
    });
});

You can easily change this into a function pass the iframe src/url as a param.

Thanks for the reply! In fact, I see this is the same as I posted in my question, with load() (which in stead of an iFrame, it loads the HTML content, but it's the same concept). However, the webapp can have some of this type of content, so I would prefer not to create in every page a dozen of iFrames just in case I need use them. Thanks for your time, anyway! — Unapedra, Nov 12 '13 at 15:46

score 0 · Accepted Answer · edited May 23 '17 at 12:05

Viewing it's hard for this question to get more answers, I'll write what I've done for anyone searching for possible ways to achieve that.

The solution I've used

Finally, I've used JQuery load() function to load an external HTML page in which there's only the part I want to show.

Also, I've not used anymore the JQuery dialog() function as this gets the JQuery CSS styles, and I needed it to be completely integrated in my CSS scheme. Also, I wanted more control over the buttons. So what I've done is use the following custom function:

function show_user_control(target_control, parameters){
    // target_control = the url we want to get the code from
    // parameters = the parameters passed to the url, in a JSON format

    /* 
      If we want to call this function and add event to its elements, perform some kind of actions when it finishes loading or call a function created within the external HTML, we will call it this way:
      $.when(show_user_control("URL_TO_LOAD")).done(function(element){ --HERE GOES THE ACTIONS TO EXECUTE-- })
    */

    return $.Deferred(function(){
        var self = this
        if(parameters === undefined) parameters = '';

        var user_control
        var parameters_url = "?"

        if(parameters != ''){
            parameters = JSON.parse(parameters)

            $.each(parameters, function(key,par){
                parameters_url += key+"="+par+"&"
            })
        }

        parameters_url = parameters_url.substring(0, parameters_url.length-1)

        $("body").append(
            $('<div class="user_control_lock"></div>').append(
                $('<div class="user_control"></div>').load(target_control + parameters_url, function(){
                    user_control = $(this)
                    user_control.center(true)

                    user_control.on(myDown, ".xlogout", function(){ // Add a global event, common to all the dialogs (if a span.xlogout is clicked, it's closed)
                        remove_user_control()
                    })

                    self.resolve(user_control)

                })
            )
        )
    })
}

function remove_user_control(target){
    // target = the JQuery object reference to the User_Control we want to remove
    if(target === undefined){
        $(".user_control_lock").last().empty()
        $(".user_control_lock").last().remove()
    }else{
        target.empty()
        target.remove()
    }
}

If anyone is interested too, the CSS applied to the general divs is the following:

.user_control_lock{
    background: rgba(24,24,24,0.8);
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:9999;
}

.user_control{
    z-index: 9999;
    position:absolute;
}

The .user_control div is centered via JQuery plugin center() JsFiddle sample.

Hope it helps someone. Also, corrections are accepted!

Kind regards.

Best way to call HTML structure from different pages

2 Answers2