Comments (9)
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.
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.
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.
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.
+++1 on this one. I've had to modify the script in the past, like @alexborton did.
from modaal.
+1 👍
from modaal.
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.
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.
@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)
- Change of source image within content-source conflict HOT 2
- Focus management (focus trap) HOT 1
- Option to loop through the gallery
- How To: Inserting modal content further up the page HOT 3
- Back tab focus not working
- Opening a image gallery from multiple sources
- How to open modal not user button? HOT 5
- How to close the modal?? HOT 1
- Question: is it possible to somehow autoplay the gallery images, so that no user interactive is needed?
- Close button first focusable element.
- Multiple instances of modaal issue HOT 3
- Getting clicked element's attributes HOT 9
- Modaal window background color
- should_open option doesn't work as data attribute
- Support ES6 loading
- Modal content outside ARIA landmark HOT 2
- How can I make this work with keyboard shortcuts.
- Animation options
- How to close in iframe/ajax?
- MP4 video not start in Mac Safari
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from modaal.