Request: AJAX- specify content to use in Modaal

alexborton commented 8 years ago

When calling content to the Modaal via AJAX, it would be really beneficial to specify a content area to use, rather than using the whole page and having to manually remove unnecessary markup.

jQuery supports this kind of function through it's .load function (a shorthand of .ajax)

$( "#result" ).load( "ajax/test.html #container" );

This allows the targeted page to be a 'complete' page, so if javascript fails or is disabled, or even if you wanted to disable the functionality of mobile for example, the user could still go to a legit page with regular markup (headers and footers etc...).

Love the Modaal by the way.

alexborton commented 8 years ago

Here is a little quick and dirty solution i added in the fetch_ajax function;

                    // content fetch is successful so push it into markup
                    var target = $('#' + self.scope.id).find('.modaal-content-container');
                    if ( target.length > 0){

                        var content = data;

                        //see if there is a containing section to pull the content from, rather than the whole page
                        var contentArea = $(data).find('.modaal-ajax-content-area');

                        if(contentArea.length > 0) {
                            content = contentArea;
                        }

                        target.removeClass( self.options.loading_class );
                        target.html( content );

                        self.options.ajax_success.call(self, target);
                    }

Then all the user needs to do is wrap the content of the page being requested in a class, modaal-ajax-content-area and the AJAX function will pull that out, rather than the content of the entire page. Totally optional.

danhumaan commented 8 years ago

hey @alexborton, thanks for opening the ticket, and the comment re Modaal, we're glad we can provide something useful to other developers!

Am I understanding correctly that what you're proposing is we evolve the fetch_ajax function so that we're only returning a section of the overall file?

Example: my_file.php has the following markup

<html>
<head>
... head stuff here..
</head>
<body>

<div id="element-1">Element 1 content</div>
<div id="element-2">Element 2 content</div>
<div id="element-3">Element 3 content</div>

</body>
</html>

And you'd like to only ajax in the content for #element-2 into your Modaal instance?

If so, I can absolutely see the value in this and would be worth the investment to provide a flexible ajax option.

alexborton commented 8 years ago

Yep, exactly that!

Whilst this is (probably) possible from the available events with the plugin, i feel it would be beneficial to have this built into the core.

The code i posted in my previous comment works correctly based on a pre-defined class to search for, if that class does not exist, it returns the whole document as it does/did by default. It probably requires some refinement to make sure multiple classes are not found, for example.

danhumaan commented 8 years ago

Ok awesome, thanks @alexborton, we'll put it down for something to investigate and address as I agree and think it's a pretty valuable use case.

bootsified commented 8 years ago

+++1 on this one. I've had to modify the script in the past, like @alexborton did.

nassdonald commented 7 years ago

+1 👍

BMCwebdev commented 7 years ago

Hey there @alexborton have you attempted to use your fix outside of editing the modaal.js file itself? I was trying to work out a way to extend it, but running into a wall.

lbsonley commented 7 years ago

I realized that the ajax_success event was never getting called. My only thought is that $.ajax stops executing when you set .html()... but that is just a guess.

Because we are talking about modifying data, I added data to the parameters passed to ajax_success and moved the call to ajax_success up before target.html( data ); and set data equal to the value returned by ajax_success. like this:

var target = $('#' + self.scope.id).find('.modaal-content-container');
if ( target.length > 0){
    target.removeClass( self.options.loading_class );

    data = self.options.ajax_success.call(self, target, data);

    target.html( data );
}

then in my configuration object I do this:

ajax_success: function(target, data) {
    return $(data).find('.selector');
}

Then I modified the default value of ajax_success to:

ajax_success : function(target, data){ return data; },

So we don't lose the data returned in the AJAX response if we don't use a custom ajax_success method.

I'm happy to open a pull request with these changes if you would like @danhumaan

L5eoneill commented 5 years ago

@danhumaan You marked this as assigned to yourself almost a year ago. Any plan on it making it to a release anytime soon? v0.4.5 shows 0% complete, which makes us sad

humaan / Modaal

Request: AJAX- specify content to use in Modaal #59