Hello
I create an app that uses intercooler.js for making page loads and updates dynamically. All data processing on the server uses CouchCMS. It works like a charm, but when I try to add a securefile editable, problems occur. I have no idea how to get my app working with file uploads.
The following code is a excerpt of my approach which uses intercooler.js to load all form data synamically. Probably I have not adapted all elements 100% properly in the shown code since my application is more complex and I'm trying to show only the relevant parts to get an idea how it works (except securefiles):
The page (simple placeholder page) "kontaktdaten.php":
The data template storing the data, "data.php":
The web app (routable template handling the data stuff together with intercooler.js) "app.php":
The form snippet with the load/save logic (mainly data_bound_form) "kontaktdaten.html":
I would be happy if someone has a solution to add securefile upload while maintaining the intercooler.js ajax-approach.
When I am finished developing the application I will probably share the intercooler.js approach for others since it allows ajaxifying a CouchCMS frontend in an easy way making fully one page web apps.
Thanks,
Olliwalli
I create an app that uses intercooler.js for making page loads and updates dynamically. All data processing on the server uses CouchCMS. It works like a charm, but when I try to add a securefile editable, problems occur. I have no idea how to get my app working with file uploads.
The following code is a excerpt of my approach which uses intercooler.js to load all form data synamically. Probably I have not adapted all elements 100% properly in the shown code since my application is more complex and I'm trying to show only the relevant parts to get an idea how it works (except securefiles):
The page (simple placeholder page) "kontaktdaten.php":
- Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Kontaktdaten' executable='1' clonable='0' hidden='0' ></cms:template>
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<div class="wrapper">
<section class="content" id="section-content">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-9">
<div id="content-block"
ic-get-from="<cms:link masterpage='app.php' />kontaktdaten/"
ic-trigger-on="load"
>
<div class="box box-solid" id="box-kontaktdaten">
<div id="spinner-refresh-content-block" class="overlay" style="min-height: 528px;">
<i class="fa fa-spinner fa-pulse"></i>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- REQUIRED JS SCRIPTS -->
<!-- jQuery 2.2.3 -->
<script src="<cms:show k_site_link />template/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="<cms:show k_site_link />template/bootstrap/js/bootstrap.min.js"></script>
<!-- intercooler.js -->
<script src="<cms:show k_site_link />template/plugins/intercooler/intercooler-1.1.2.js"></script>
</body>
</html>
<?php COUCH::invoke(); ?>
The data template storing the data, "data.php":
- Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Contact data' executable='0' clonable='0' hidden='0' >
<cms:editable order='1' type='text' name='name' label='Firmenname' required='0' />
<cms:editable order='2' type='text' name='website' label='Webseite' required='0' />
<cms:editable order='3' type='text' name='address' label='Adresse' required='0' />
<cms:editable order='4' type='text' name='zip' label='PLZ' required='0' />
<cms:editable order='5' type='text' name='city' label='Ort' required='0' />
<cms:editable order='0' type='securefile' name='logo' label='Firmenlogo'
allowed_ext='jpg, jpeg, png, gif'
max_size='128000000'
width='600'
height='600'
crop='0'
enforce_max='1'
quality='100'
show_preview='1'
preview_width='50'
preview_height='50'
thumb_width='300'
thumb_height='300'
thumb_enforce_max='1'
thumb_quality='100'
use_thumb_for_preview='1'
/>
</cms:template>
<?php COUCH::invoke(); ?>
The web app (routable template handling the data stuff together with intercooler.js) "app.php":
- Code: Select all
<?require_once( 'couch/cms.php' ); ?>
<cms:template title='Web App' executable='1' clonable='0' hidden='0' routable='1' >
<!-- Kontaktdaten -->
<cms:route
path='kontaktdaten/'
name='kontaktdaten.html'
filters='is_ajax'
>
</cms:route>
</cms:template>
<cms:match_route debug='0' is_404='1' />
<cms:embed "<cms:show k_matched_route />" />
<?php COUCH::invoke( K_IGNORE_CONTEXT ); ?>
The form snippet with the load/save logic (mainly data_bound_form) "kontaktdaten.html":
- Code: Select all
<cms:pages masterpage='data.php'>
<div class="box box-solid">
<div class="box-header with-border">
<h3 class="box-title">Kontaktdaten</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<cms:set submit_success="<cms:get_flash 'submit_success' />" />
<cms:if submit_success >
<cms:php>
header("X-IC-Script:$.notify({icon: 'fa fa-check fa-lg',title: '<b>Gespeichert:</b>',message: 'Die Kontaktdaten wurden gespeichert.',},{type: 'success'});");
</cms:php>
</cms:if>
<cms:form
_invalidate_cache='0'
masterpage='data.php'
mode='edit'
enctype='multipart/form-data'
method='post'
id='kontaktdatenForm'
>
<cms:if k_success>
<cms:db_persist_form
_invalidate_cache='0'
/>
<cms:if "<cms:not k_persist_error />">
<cms:set_flash name='submit_success' value='1' />
<cms:redirect "<cms:link masterpage='app.php' />kontaktdaten/" />
<cms:else/>
<cms:php>
header("X-IC-Script:$.notify({icon: 'fa fa-ban fa-lg',title: '<b>Datenbank-Fehler:</b>',message: '<ul><cms:each k_persist_error><li><cms:show item /></li></cms:each></ul>',},{type: 'danger', delay: '10000'});");
</cms:php>
</cms:if>
</cms:if>
<cms:if k_error>
<cms:php>
header("X-IC-Script:$.notify({icon: 'fa fa-ban fa-lg',title: '<b>Fehler beim Speichern:</b>',message: '<ul><cms:each k_error><li><cms:show item /></li></cms:each></ul>',},{type: 'danger', delay: '10000'});");
</cms:php>
</cms:if>
<div class="row">
<div class="col-xs-12 col-md-6">
<h3>Firmenanschrift</h3>
<div class="row">
<div class="col-xs-12">
<div class="form-group form-group-sm<cms:if k_error_name> has-error</cms:if>">
<label class="control-label">Firmenname *</label>
<cms:input type="bound" name="name" class="form-control" />
<span class="help-block" id="nameMessage"><cms:if k_error_name><cms:show k_error_name /></cms:if></span>
</div>
</div>
<div class="col-xs-12">
<div class="form-group form-group-sm<cms:if k_error_website> has-error</cms:if>">
<label class="control-label">Webseite * <span style="font-weight: normal;" class="text-muted" >(vollständige URL inkl. http:// oder https://)</span></label>
<cms:input type="bound" name="website" class="form-control" />
<span class="help-block"><cms:if k_error_website><cms:show k_error_website /></cms:if></span>
</div>
</div>
<div class="col-xs-12 col-md-12">
<div class="form-group form-group-sm<cms:if k_error_address> has-error</cms:if>">
<label>Adresse *</label>
<cms:input type="bound" name="address" class="form-control" />
<span class="help-block"><cms:if k_error_address><cms:show k_error_address /></cms:if></span>
</div>
</div>
<div class="col-xs-4">
<div class="form-group form-group-sm<cms:if k_error_zip> has-error</cms:if>">
<label>PLZ *</label>
<cms:input type="bound" name="zip" class="form-control" />
<span class="help-block"><cms:if k_error_zip><cms:show k_error_zip /></cms:if></span>
</div>
</div>
<div class="col-xs-8">
<div class="form-group form-group-sm<cms:if k_error_city> has-error</cms:if>">
<label>Ort *</label>
<cms:input type="bound" name="city" class="form-control" />
<span class="help-block"><cms:if k_error_city><cms:show k_error_city /></cms:if></span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<hr/>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-3 col-md-3 col-lg-2 pull-right">
<button id="button-save-kontaktdaten"
ic-post-to="<cms:link masterpage='app.php' />kontaktdaten/"
ic-target="#content-block"
ic-replace-target="false"
ic-on-beforeTrigger="return $('#kontaktdatenForm').valid();"
ic-indicator="#spinner-refresh-content-block"
type="submit" class="btn btn-primary btn-block">
Speichern <i id="edit-spinner" class="fa fa-spinner fa-spin" style="display:none"></i>
</button>
</div>
</div>
</cms:form>
</div>
<!-- /.box-body -->
<div id="spinner-refresh-content-block" class="overlay" style="display:none;">
<i class="fa fa-spinner fa-spin"></i>
</div>
</div>
<!-- /.box -->
</cms:pages>
I would be happy if someone has a solution to add securefile upload while maintaining the intercooler.js ajax-approach.
When I am finished developing the application I will probably share the intercooler.js approach for others since it allows ajaxifying a CouchCMS frontend in an easy way making fully one page web apps.
Thanks,
Olliwalli