Git Product home page Git Product logo

Comments (9)

alexborton avatar alexborton commented on May 24, 2024

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.

from modaal.

danhumaan avatar danhumaan commented on May 24, 2024

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.

from modaal.

alexborton avatar alexborton commented on May 24, 2024

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.

from modaal.

danhumaan avatar danhumaan commented on May 24, 2024

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.

from modaal.

bootsified avatar bootsified commented on May 24, 2024

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

from modaal.

nassdonald avatar nassdonald commented on May 24, 2024

+1 👍

from modaal.

BMCwebdev avatar BMCwebdev commented on May 24, 2024

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.

from modaal.

lbsonley avatar lbsonley commented on May 24, 2024

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

from modaal.

L5eoneill avatar L5eoneill commented on May 24, 2024

@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

from modaal.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.