Views Submission app formatting issue

CTCKA

Asked on May 13, 2016 at 9:19 AM

Hi

We use JotForm View (http://views.jotform.io/) to display JotForm data on live pages. The formatting on the page has changed recently - possibly today or yesterday - where it now displays what looks like 4 sets of 'blank' data before it then disaplys the data itself - see http://www.ctckingshurst.academy/learning-and-teaching/curriculum/extra-curricular/music-lessons-peripatetic/

I've tried re-creating the view - on the 'create list view' preview it displays correctly, then after clicking 'Next' from the 'create submission view' page, the preview displays with the blank data at the top (see screenshot - I've scrolled down a bit so you can see the start of where the data does appear).

Has anything changed with the JotForm Views? Not sure how to fix.

Thanks in advance, Mark

Page URL: http://www.ctckingshurst.academy/learning-and-teaching/curriculum/extra-curricular/music-lessons-peripatetic/
Huberson

Replied on May 13, 2016 at 10:56 AM

This might be caused by extra code added when you edit the views. You can change the editor mode to 'Source' to check for those empty tables and paragraphs in the source code.

Please, do let us know if that solves the problem or not.
CTCKA

Replied on May 16, 2016 at 3:57 AM

Thanks Huberson

I've looked at the source, and apart from lots of duplicate font tags, I can't see any extra code to generate what is being outputted. On the 'Create list view' page, if I click 'Preview', it all looks fine. It's just after you've gone through the 'Create submission view' page, that the blank areas appear. The full html on my 'Create list view page' is:

{$notices}

-------------------------------------------

 

{$heading}

<table cellpadding="1" cellspacing="1" style="width: 100%;">

<tbody>

<tr>

<td width="45%">{$1_teacher_name}: {$1_instrument}</td>

<td width="10%"> </td>

<td width="45%">{$2_teacher_name}: {$2_instrument}</td>

</tr>

<tr>

<td width="45%">{$1_daydate}</td>

<td width="10%"> </td>

<td width="45%">{$2_daydate}</td>

</tr>

<tr>

<td valign="top" width="45%">{$1_student_times}</td>

<td width="10%"> </td>

<td valign="top" width="45%">{$2_student_times}</td>

</tr>

</tbody>

</table>

 

<table cellpadding="1" cellspacing="1" style="width: 100%;">

<tbody>

<tr>

<td width="45%">{$3_teacher_name}: {$3_instrument}</td>

<td width="10%"> </td>

<td width="45%">{$4_teacher_name}: {$4_instrument}</td>

</tr>

<tr>

<td width="45%">{$3_daydate}</td>

<td width="10%"> </td>

<td width="45%">{$4_daydate}</td>

</tr>

<tr>

<td valign="top" width="45%">{$3_student_times}</td>

<td width="10%"> </td>

<td valign="top" width="45%">{$4_student_times}</td>

</tr>

</tbody>

</table>

<table cellpadding="1" cellspacing="1" style="width: 100%;">

<tbody>

<tr>

<td width="45%">{$5_teacher_name}: {$5_instrument}</td>

<td width="10%"> </td>

<td width="45%">{$6_teacher_name}: {$6_instrument}</td>

</tr>

<tr>

<td width="45%">{$5_daydate}</td>

<td width="10%"> </td>

<td width="45%">  'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;">{$6_daydate}</td>

</tr>

<tr>

<td valign="top" width="45%">{$5_student_times}</td>

<td width="10%"> </td>

<td valign="top" width="45%">{$6_student_times}</td>

</tr>

</tbody>

</table>

 

<table cellpadding="1" cellspacing="1" style="width: 100%;">

<tbody>

<tr>

<td width="45%">{$7_teacher_name}: {$7_instrument}</td>

<td width="10%"> </td>

<td width="45%">{$8_teacher_name}: {$8_instrument}</td>

</tr>

<tr>

<td width="45%">{$7_daydate}</td>

<td width="10%"> </td>

<td width="45%">{$8_daydate}</td>

</tr>

<tr>

<td valign="top" width="45%">{$7_student_times}</td>

<td width="10%"> </td>

<td valign="top" width="45%">{$8_student_times}</td>

</tr>

</tbody>

</table>

 

<table cellpadding="1" cellspacing="1" style="width: 100%;">

<tbody>

<tr>

<td width="45%">{$9_teacher_name}: {$9_instrument}</td>

<td width="10%"> </td>

<td width="45%"> </td>

</tr>

<tr>

<td width="45%">{$9_daydate}</td>

<td width="10%"> </td>

<td width="45%"> </td>

</tr>

<tr>

<td valign="top" width="45%">{$9_student_times}</td>

<td width="10%"> </td>

<td valign="top" width="45%"> </td>

</tr>

</tbody>

</table>
Nik_C

Replied on May 16, 2016 at 6:01 AM

I noticed that you have a lot of extra cell padding elements in your page, so as soon as I removed all of those everything was fine:

So please try to remove all those elements in your HTML editor and see how that will work for you. Let us know if you have any additional questions.

Thank you!
CTCKA

Replied on May 16, 2016 at 7:50 AM

Hi Nik

Thanks for your reply, but the extra cell elements are being generated by JotForm, not by me. I just have the embedded JotForm View code on my html page within an iFrame:

<iframe src='//views.jotform.io/list.php?id=52944779102966' onDISABLEDload='window.parent.scrollTo(0,0)' allowtransparency='true' id='viewFrame' frameborder='0' scrolling='no' style='width:100%;height:0;'> </iframe><script type='text/javascript' src='//views.jotform.io/js/iframehandler.js' ></script>

It's being added by JotForm View - if you go to http://views.jotform.io/ you can see the spaces in the preview before I add anything to my site.

Thanks, Mark
Nik_C

Replied on May 16, 2016 at 9:27 AM

My apologies, thank you for more information, Mark.

I'll do some tests and try to locate the cause of this problem.

Will get back to you here.

Thank you!
CTCKA

Replied on May 16, 2016 at 10:04 AM

Thanks for looking into this Nic.

Mark
Nik_C

Replied on May 16, 2016 at 11:46 AM

Mark, I'm still unable to replicate this problem, unfortunately.

You are right this extra space doesn't appear in the source code of the iFrame for submission view, so it is creating it after.

Can you give me more information of the workflow you do, I'm sorry if I'm repeating, but any information helps. So, when you paste this iFrame code in your website's code, it generates that extra space automatically?

Thank you!
CTCKA

Replied on May 16, 2016 at 12:11 PM

No problem

I go to http://views.jotform.io/

Click add to website, then select the form I'm using. Then on the create list view page I have the code from above (on May 16, 2016 at 03:57 AM). If I click preview at this stage, I don't get any extra spacing, although the data isn't populated, it's the form field names that appear. On the create submission view I just click next. I don't think I use this! Then when I click next again, I get another preview, but this time with all the extra spacing. I do get an error on this page - 'Cannot read property of 'RemoveClass' of undefined at line 104 of http://views.jotform.io/js/views/createList.js?v=1.9.639. When I click next again, I get the iFrame snippet code - this code has not changed since this was first set up. This has been working fine up to last week. Nothing has changed our end. In the snippet, it loads http://views.jotform.io/js/iframehandler.js Has anything changed with this file that you are aware of?

The view itself, http://views.jotform.io/list.php?id=52944779102966, also have the extra spacing. This page duplicates the view 4 times, with the fourth one populated with data - the other 3 with nothing.

Hope this helps.

Mark
David JotForm Support

Replied on May 16, 2016 at 1:36 PM

As far as I know, this application has not been updated recently. My colleague responded to your other thread:

https://www.jotform.com/answers/838505-Views-Submission-app-formatting-issue

The extra space may be due to empty submissions.
CTCKA

Replied on May 16, 2016 at 2:36 PM

Oh thank you so much! I didn't even see that post - I think I may have submitted the question twice and not realised.

That has worked!

Thanks again, Mark
David JotForm Support

Replied on May 16, 2016 at 2:42 PM

No worries at all, glad to hear that resolved the spacing issue. If there is anything else we can help with, just let us know.