Jump to content
tron1000

PageTable Field and Frontend Editing Layout

Recommended Posts

Hello! I use PW 3.0.98 and I have frontend editing enabled for a PageTable Field. Somehow, when I double click the field in the frontend, the iframe in wich the content is displayed is very small (see screenshot). I couldn't find out if thats some CSS conflict or another problem. Any suggestions? Thanks, Andrej

 

Bildschirmfoto 2018-08-24 um 18.58.07.png

Share this post


Link to post
Share on other sites

I tried with <edit fields="table">test table field</edit>    and can't replicate. maybe you should try with the latest PW version?

  • Thanks 1

Share this post


Link to post
Share on other sites

Hi matjazp! Thanks for your reply! I tried both (the «edit» part and PW 3.0.111 DEV) but it looks the same. So maybe this issue is specific to my setup … I use Zurb Foundation too, maybe there is some conflict there …

Although I disabled all CSS and it still looked the same (Safari, Firefox and Chrome).

Edited by tron1000

Share this post


Link to post
Share on other sites

Try to find the culprit in the inspector: Is a CSS-rule overriding another one? Which CSS causes this?

If you see inline-styles:

a) look at the rendered source via inspector (CTRL + SHIFT + C)

b) compare it to the raw HTML source-code, as it is being delivered by the server, i.e. before any JS had a chance to manipulate the DOM (before any window.load or document.ready has been applied). In Chrome, the keyboard shortcut is CTRL + U.

If you don't see any inline-styles in b), it means some JS is triggered to alter the iFrame styles (or something near there). CTRL + SHIFT + J

And of course, check the console for JS errors or warnings.

Edited by dragan
added keyboard shortcuts
  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

Hi dragan! Thanks a lot for your help! Ich checked the source code and found inline styles setting the iframe's width to «auto»:

<iframe class="pw-modal-window ui-dialog-content ui-widget-content" frameborder="0" src="/preview/backend/page/edit/?id=1044&amp;fields=events&amp;modal=1" id="pw-modal-window-1" style="width: auto; min-height: 0px; max-height: none; height: 813.03125px;"></iframe>

I realized that the only thing that prevents the error is to remove jquery.js from the head section:

<script src="<?php echo $config->urls->templates?>node_modules/jquery/dist/jquery.js"></script>

I have no idea how / why this happens. The version of the linked jquery is 3.3.1.

Edit: here is the complete source code with all js and stylesheets removed except for the mentioned jquery link. This still produces the bad layout:

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zimoun</title>
    <script src="<?php echo $config->urls->templates?>node_modules/jquery/dist/jquery.js"></script>
  </head>
  
  <body>
    
    <a id="button"><i class="fas fa-arrow-up fa-lg"></i></a>
    
    <a href="#" class="menu-button" id="menuButton" data-toggle="offCanvasRightSplit2"><span class="burger-icon"></span></a>
    
    <div class="grid-x">
      <div class="cell">
        <h1 id="logotype"><a href="<?php echo $pages->get("/")->url; ?>">Zimoun</a></h1>
      </div>
    </div>
    
    <div class="grid-x">
      <div class="cell content">
        <edit fields="events">
        <h1>Current and upcoming</h1>
        <?php
        $today = time();
        
        foreach($page->children("include=hidden")->find("date_to>$today") as $event) {
          
          if($event->event_url) {
          
          $website = "<br><a class='event_website' href='{$event->event_url}' target='_blank'>Website</a>";
          
          }
          
          else $website = "";
                     
          
          if($event->date_from != $event->date_to) {
            
            echo "<p>$event->title<br>$event->event_type, {$event->date_from}–{$event->date_to}$website</p>";
            
          }
          
          else
          
          echo  "<p>$event->title<br>$event->event_type, {$event->date_to}$website</p>";
        
        }
        ?>
        <div class="disclaimer_events">All information based on current knowledge and subject to change.</div>
        </edit>
      </div>
    </div>
    
    <div class="off-canvas position-right" id="offCanvasRightSplit2" data-off-canvas data-close-on-click="true">
      <?php include "nav.inc"; ?>
    </div>
    
    
  </body>
</html>

 

Share this post


Link to post
Share on other sites

Well, it's definitely a problem with jquery 3.3.1. I replaced it with version 2.2.4 via CND and now everything looks good. I use Zurb Foundation, but since the error still occurs even after removing all styles and scripts except for jquery, it can't be related to Foundation, right? Thank you all for helping!

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Mobiletrooper
      Hey Ryan, hey friends,
      we, Mobile Trooper a digital agency based in Germany, use ProcessWire for an Enterprise-grade Intranet publishing portal which is under heavy development for over 3 years now. Over the years not only the user base grew but also the platform in general. We introduced lots and lots of features thanks to ProcessWire's absurd flexibility. We came along many CMS (or CMFs for that matter) that don't even come close to ProcessWire. Closest we came across was Locomotive (Rails-based) and Pimcore (PHP based).
      So this is not your typical ProcessWire installation in terms of size.
      Currently we count:
      140 Templates (Some have 1 page, some have >6000 pages)
      313 Fields
      ~ 15k Users (For an intranet portal? That's heavy.)
      ~ 195 431 Pages (At least that's the current AUTOINCREMENT)
       
      I think we came to a point where ProcessWire isn't as scalable anymore as it used to be. Our latest research measured over 20 seconds of load time (the time PHP spent scambling the HTML together). That's unacceptable unfortunately. We've implemented common performance strategies like:
      We're running on fat machines (DB server has 32 gigs RAM, Prod Web server has 32gigs as well. Both are running on quadcores (xeons) hosted by Azure.
      We have load balancing in place, but still, a single server needs up to 20 sec to respond to a single request averaging at around about 12 sec.
      In our research we came across pages that sent over 1000 SQL queries with lots of JOINs. This is obviously needed because of PWs architecture (a field a table) but does this slow mySQL down much? For the start page we need to get somewhere around 60-80 pages, each page needs to be queried for ~12 fields to be displayed correctly, is this too much? There are many different fields involved like multiple Page-fields which hold tags, categories etc.
      We installed Profiler Pro but it does not seem to show us the real bottleneck, it just says that everything is kinda slow and sums up to the grand total we mentioned above.
      ProCache does not help us because every user is seeing something different, so we can cache some fragments but they usually measure at around 10ms. We can't spend time optimising if we can't expect an affordable benefit. Therefore we opted against ProCache and used our own module which generates these cache fragments lazily. 
      That speeds up the whole page rendering to ~7 sec, this is acceptable compared to 20sec but still ridiculously long.
      Our page consists of mainly dynamic parts changing every 2-5 minutes. It's different across multiple users based on their location, language and other preferences.
      We also have about 120 people working on the processwire backend the whole day concurrently.
       
      What do you guys think?
      Here are my questions, hopefully we can collect these in a wiki or something because I'm sure more and more people will hit that break sooner than they hoped they would:
       
      - Should we opt for optimising the database? Since >2k per request is a lot even for a mysql server, webserver cpu is basically idling at that time.
      - Do you think at this point it makes sense to use ProcessWire as a simple REST API?
      - In your experience, what fieldtypes are expensive? Page? RepeaterMatrix?
      - Ryan, what do you consider as the primary bottleneck of processwire?
      - Is the amount of fields too much? Would it be better if we would try to reuse fields as much as possible?
      - Is there an option to hook onto ProcessWires SQL builder? So we can write custom SQL for some selectors?
       
      Thanks and lots of wishes,
      Pascal from Mobile Trooper
       
       
    • By Noel Boss
      I use a PageTable field to make edits to children of pages more intuitive…
      To register the hooks, insert the following Snippet inside your init function in your module (or add it to your init.php file):
      /** * Initialize the module. * * ProcessWire calls this when the module is loaded. For 'autoload' modules, this will be called * when ProcessWire's API is ready. As a result, this is a good place to attach hooks. */ public function init() { // Prefill pageTable field $this->wire()->addHookBefore('InputfieldPageTable::render', $this, 'addChildrenToPageTableFieldsHook'); $this->wire()->addHookBefore('InputfieldPageTableAjax::checkAjax', $this, 'addChildrenToPageTableFieldsHook'); } Then, add this hook method:
      /** * Fill pagetable fields with children before editing…. * * @param HookEvent $event */ public function addChildrenToPageTableFieldsHook(HookEvent $event) { $field = $event->object; // on ajax, the first hook has no fieldname if (!$field->name) { return; } // get the edited backend page $editID = $this->wire('input')->get->int('id'); if (!$editID && $this->wire('process') instanceof WirePageEditor) { $editID = $this->wire('process')->getPage()->id; } $page = wire('pages')->get($editID); // disable output formating – without this, the ajax request will not populate the field $page->of(false); // you could also insert a check to only do this with sepcific field names… // $page->set($field->name, $page->children('template=DesiredTemplate')); // just specific templates $page->set($field->name, $page->children); } Now whenever there is a page-table field on your page, it gets populated with the children
    • By pppws
      Hey there,
      i've set up a page wich uses pageTable and it works like a charm.
      for my home page i get several pages. they are sperated in two types:
      a) page has the module 'featured_img'
      b) page doesn't have the 'featured_img'
       
      my pageTable field is called add_modules. so i was wondering if something like 
      <?php foreach ($featured as $child): ?> <?php if ($child->add_modules->module_featuredimg): ?> // show image <?php else: ?> // show text <?php endif; ?> <?php endforeach; ?> is possible?
       
      thanks for your input!
    • By carrdesigns
      In the admin, I am trying to access data from a page that contains an inputfieldand autofill that data into the modal edit window for a new entry.
      For instance, I have a template which contains a PageTable field. When I add a new entry to the PageTable, I want to capture the ID from the originating admin page and add it to a field in the edit modal as a way of linking the new entry back to the originating page. The new PageTable entries are NOT children of the originating page, and cannot be for structural reasons. I have attached an image which I hope will help to clarify the basic result I want to achieve.
      Is there a practical means of accomplishing this? I've been able to achieve something similar with the ConnectPageFields module, but it does not work with PageTable fields. Any input would be much appreciated.

    • By Lenz
      Hello all,
      i have a question regarding the following scenario:
      My customer wants to edit a menu card of a restaurant website directly in the frontend.
      Each dish / menu is displayed in a row with 4 simple textfields (position nmbr, name, quantity (optional, for drinks) , price).
      My customer preferably not only wishes to edit/update existing fields/rows, but also add a new one, delete one, or move an existing one up or down to a new position in the card.
      Would these actions be possible per default in the frontend edit mode, if i'd have e.g. a table profield storing the 4 textfields per dish? Or is this only functional in the backend?
      In a demo video of a Profield (-> fieldtype table) i saw the requested edit functionality (edit or add a row of fields, drag a row up/down, delete a row, safe) in the backend...
      Btw., regarding this concrete use case of a menu card: Would i have to use at all a Profield like table or could i accomplish the task also with a Repeater Field or a Pagetable fieldtype?
      In any case at least i don't want to let my customer mess around with a richtext field / inserting a table within CKEditor in the backend...
      Maybe there are better approaches than the above mentioned.
       
      Edit: I should add, that the site is a static one, equipped with an meanwhile dysfunctional inline frontend editor (that had the capabilitiy of editing, moving, deleting such rows directly inline in the frontend).  Now i want to replace this editor with processwire.

      Thanks in advance
×
×
  • Create New...