Trying to use inside Ajax loaded html

[nimeso]

More of a feature maybe ;)

I'm trying to get this working if I'm requesting HTML via ajax.
I've Required all the needed js and css files inside my Page_Controller but still no luck.
I'm not the best with ajax so I might be missing something?

Thanks bro! Love the module

[nimeso]

Hmmm any help would be awesome! Happy to pay for your time :)
So far I have:
in my page controller

Requirements::javascript('dropzone/javascript/dropzone.js');
Requirements::javascript('dropzone/javascript/file_attachment_field.js');
Requirements::css('dropzone/css/file_attachment_field.css');

in my JS 'after' html loaded via Ajax

var filejson = JSON.parse(jQuery('#ImageDropzone').attr("data-config"));
jQuery('#ImageDropzone').dropzone({url: filejson.url});

This is 'kinda' working but I'm getting 404 errors from:
Object2DForm/field/Image/upload even when I add 'Object2DForm' to my allowed actions etc

the error is:
ERROR [Warning]: mysqli::real_escape_string() expects parameter 1 to be string, object given IN POST /home/Object2DForm/field/Image/upload Line 982 in D:\wamp\www\platter-cms\framework\model\MySQLDatabase.php Source ====== 973: if(isset($values[$type])) 974: return $values[$type]; 975: else return ''; 976: } 977: 978: /* 979: * This will return text which has been escaped in a database-friendly manner. 980: / 981: public function addslashes($value){ * 982: return $this->dbConn->real_escape_string($value); 983: } 984: 985: / 986: * This changes the index name depending on database requirements. 987: * MySQL doesn't need any changes. 988: / Trace ===== mysqli->real_escape_string(SS_HTTPRequest) MySQLDatabase.php:982 MySQLDatabase->addslashes(SS_HTTPRequest) Convert.php:122 Convert::raw2sql(SS_HTTPRequest) ExactMatchFilter.php:37 ExactMatchFilter->applyOne(DataQuery) SearchFilter.php:222 SearchFilter->apply(DataQuery,DataList) call_user_func(Array,DataQuery,DataList) DataList.php:131 DataList->alterDataQuery(Array) DataList.php:486 DataList->applyFilterContext(ID,,Array,SS_HTTPRequest) DataList.php:340 DataList->addFilter(Array) DataList.php:326 DataList->filter(Array) ObjectEditor.php:109 ObjectEditor_Controller->Object2DForm(SS_HTTPRequest) call_user_func_array(Array,Array) Object.php:729 Object->__call(Object2DForm,Array) RequestHandler.php:288 Home_Controller->Object2DForm(SS_HTTPRequest) RequestHandler.php:288 RequestHandler->handleAction(SS_HTTPRequest,Object2DForm) Controller.php:194 Controller->handleAction(SS_HTTPRequest,Object2DForm) RequestHandler.php:200 RequestHandler->handleRequest(SS_HTTPRequest,DataModel) Controller.php:153 Controller->handleRequest(SS_HTTPRequest,DataModel) ContentController.php:202 ContentController->handleRequest(SS_HTTPRequest,DataModel) ModelAsController.php:78 ModelAsController->handleRequest(SS_HTTPRequest,DataModel) Director.php:366 Director::handleRequest(SS_HTTPRequest,Session,DataModel) Director.php:152 Director::direct(/home/Object2DForm/field/Image/upload,DataModel) main.php:189 ERROR [User Warning]: popCurrent called on ModelAsController controller, but it wasn't at the top of the stack IN POST /home/Object2DForm/field/Image/upload Line 455 in D:\wamp\www\platter-cms\framework\control\Controller.php Source ====== 446: 447: /* 448: * Pop this controller off the top of the stack. 449: / 450: public function popCurrent() { 451: if($this === self::$controller_stack[0]) { 452: array_shift(self::$controller_stack); 453: } else { 454: user_error("popCurrent called on $this->class controller, but it wasn't at the top of the stack", * 455: E_USER_WARNING); 456: } 457: } 458: 459: /* 460: * Redirect to the given URL. 461: * Trace ===== user_error(popCurrent called on ModelAsController controller, but it wasn't at the top of the stack,512) Controller.php:455 Controller->popCurrent() ModelAsController.php:87 ModelAsController->handleRequest(SS_HTTPRequest,DataModel) Director.php:366 Director::handleRequest(SS_HTTPRequest,Session,DataModel) Director.php:152 Director::direct(/home/Object2DForm/field/Image/upload,DataModel) main.php:189

[nimeso]

I just ended up using iFrames to load the form in :( oh well. Have a great weekend

[unclecheese]

Sorry I didn't see this. I had an email issue that wasn't allowing me to get notifications from Github for 6 months. I have a lot to catch up on!

Glad you got it sorted. There is a cleaner way to do this if you're still interested, but otherwise, we can let it lie.

[colinburns]

@unclecheese sorry to reply to this closed issue, but I'm wondering if you might be able to assist. I'm wanting to do exactly the same thing as @nimeso. How should I go about this?

I've loaded the HTML in and done the same as @nimeso above...

Would you mind letting me know the right way of getting FileAttachmentField to work after it's been loaded in via AJAX.

Thanks Colin

[unclecheese]

So the tricky part about this is finding a way to fire an event when a specific DOM node enters the tree. Entwine is quite good at this:

$('.FileAttachmentField').entwine({
    onmatch () {
        // do stuff
    }
});

In the old days we used livequery. Not sure what tools are available for this now. Worst case, you create a custom function to fire in your Ajax response handler that loads the dropzones.

If you look at the bottom of file_attachment_field.js, you'll see there is some bootstrap code you need to run.

           var upload = new UploadInterface(node, Dropzone);
            // *** The code below is only necessary if you want to expose the public API of the dropzone. Not commonly needed ** //
            // If jQuery exists, use its data() method
            if(typeof jQuery === 'function') {
                jQuery(node).data('dropzoneInterface', upload);
            }
            // Otherwise, inject a browser global
            else {
                if(!window.dropzones) window.dropzones = {};
                window.dropzones[node.id] = upload;
            }

So a way to do this in your Ajax response handler would be:

$('.fileattachmentfield').each(function() {
    var upload = new UploadInterface(this, Dropzone);
});

[colinburns]

Hi @unclecheese,

Thanks for this help... I'm not sure what I am doing wrong ATM but I'm getting an error message in my javascript

Uncaught ReferenceError: UploadInterface is not defined

Below is a link to the outputted HTML...
http://sspaste.com/paste/show/5718d5682f8cc

And this is the JS that I am including in the AJAX response handler.

$('.dropzone-holder').each(function() {
        var upload = new UploadInterface(this, Dropzone);
});

I'm not sure what element I should be targeting with the JS call... I assume that
.fileattachmentfield
from your example was just an example but I've tried a bunch of different classes/id's from the HTML but none seem to work so I assume it's more to do with the new UploadInterface(this, Dropzone); or perhaps the way I am including the other requirements...

When I first load the base page I require the following

Requirements::javascript(DROPZONE_DIR.'/javascript/dropzone.js');
Requirements::javascript(DROPZONE_DIR.'/javascript/file_attachment_field.js');
Requirements::css(DROPZONE_DIR.'/css/file_attachment_field.css'); 

And they all included just before the closing body tag... Not sure what I am doing wrong...

As before if I load the form in the base template it works without problem.

Thanks for your help.

Cheers,
Colin

[unclecheese]

This should be resolved in 97f3255

[colinburns]

@unclecheese Thank-you it's now working :) I appreciate the help!