[ic] Admin UI code issue

Mike Heins mike at perusion.com
Tue Dec 9 02:09:42 UTC 2008


Quoting Thomas J.M. Burton (tom at globalfocusdm.com):
> >
> > Quoting Thomas J.M. Burton (tom at globalfocusdm.com <http://www.icdevgroup.org/mailman/listinfo/interchange-users>):
> > >/ Hi ICers,
> > />/ 
> > />/ I'm working on some additions to a catalog's Admin UI using jQuery and 
> > />/ have encountered a problem. When the form fields are manipulated through 
> > />/ the DOM, newly added fields are not posting. After looking into possible 
> > />/ causes, it appears that the source of the problem is the <form> tag 
> > />/ being placed inbetween </tr> and <tr> tags (outside of the table's 
> > />/ structure). This is preventing altered fields from being sent in the 
> > />/ POST request.
> > />/ 
> > />/ For proper syntax, the <form> tag should be outside of a table's 
> > />/ structure rather than in-between row tags.
> > />/ 
> > />/ The page I'm working on manipulating is flex_editor.html, though this 
> > />/ seems to be an issue with other form pages in the UI as well. There are 
> > />/ so many layers to the admin UI source code, I'm having trouble finding 
> > />/ what files I need to edit in order to correct this issue.
> > />/ 
> > />/ Where do I make changes so that I can get the <form> tag into the 
> > />/ table's structure?
> > />/ 
> > />/ I'm running IC v5.4.2
> > /
> > You essentially cannot. 
> >
> > But I have yet to see just where you suggest the <form> and </form> be
> > put....do you have place in mind?
> >
> > -- 
> > Mike Heins
> > Perusion -- Expert Interchange Consulting    http://www.perusion.com/
> > phone +1.765.328.4479  tollfree 800-949-1889 <mike at perusion.com <http://www.icdevgroup.org/mailman/listinfo/interchange-users>>
> >
> > Find the grain of truth in criticism, chew it, and swallow
> > it. -- anonymous
> Hi Mike,
> 
> Thanks for the response. I hadn't seen your reply until now as I had 
> list delivery switched off and forgot to turn it back on.
> 
> In regard to where I'd suggest the <form> and </form> be put, it needs 
> to be located either around the <table></table> tags or within a table 
> cell in order to function properly.

Yes of course. What I mean't was in the context of the page
lib/UI/pages/admin/flex_editor.html.

The problem, of course, is that we want to put buttons in the page outline. In
order to do that, we need to send parts of the table editor to places that
are not in the containing area. In other words, it isn't just spitting
out a blob of HTML that takes the place of the [table-editor ...] tag.

> In a typical flex_editor.html page, 
> the form in question is coded like so:

> 
> ... page head, interface tabs, etc. ...
>                         </td>
>                      </tr>
> <form method="POST" action="http://stg2.gfdm.net/admin/flex_editor" 
> name="flex_editor">
> ... various hidden fields ...
>                      <tr>
>                         <td width=1 class=lightshade><img 
> src="/interchange-5/en_US/bg.gif" width=1 height=1></td>
>                         <td width="100%" class=block3inner>
>                            <table width="100%" border=0 cellspacing=0 
> cellpadding=1>
>                               <!-- TABLE TITLE ROW -->
> ... form fields and table tags ...
> 
>                            </table>
>                         </td>
>                         <td width="1" class="darkshade"><img 
> src="/interchange-5/en_US/bg.gif" width="1" height="1"></td>
>                      </tr>
> </form>
>                      <tr>
> 
> ... rest of interface HTML ...
> 
> 
> 
> If the <form> and hidden inputs were moved down a few lines to between 
> the td with class block3inner and the following <table> tag, and the 
> </form> moved up a few lines to follow the </table> tag, that would most 
> likely solve this issue.

But that's the problem. We have to figure out where in the page we can
stick those things, and how we can delineate it so that the buttons
and form entries we want to use will work. 

The other problem is working with the DOM for the tabbed display. If
I recall, the form was stuck in between table rows for a very specific
reason having to do with managing that.

> So then you'd have:
> 
> ... page head, interface tabs, etc. ...
>                         </td>
>                      </tr>
>                      <tr>
>                         <td width=1 class=lightshade><img 
> src="/interchange-5/en_US/bg.gif" width=1 height=1></td>
>                         <td width="100%" class=block3inner>
> <form method="POST" action="http://stg2.gfdm.net/admin/flex_editor" 
> name="flex_editor">
> ... various hidden fields ...
>                            <table width="100%" border=0 cellspacing=0 
> cellpadding=1>
>                               <!-- TABLE TITLE ROW -->
> ... form fields and table tags ...
> 
>                            </table>
> </form>
>                         </td>
>                         <td width="1" class="darkshade"><img 
> src="/interchange-5/en_US/bg.gif" width="1" height="1"></td>
>                      </tr>
>                      <tr>
> 
> ... rest of interface HTML ...
> 
> 
> With the way the page is assembled via its various code chunks, I'm not 
> sure if this can be done. You'd be the man with the answer, I'd assume. :)
> 

In short, if we did this it would probably break multiple other things. The
current setup was the product of hundreds of hours of skull sweat trying
to get things to work on MSIE, Firefox, and everything else. I don't think
we can just move things up and down casually. I know that no one besides
me ever volunteered to do work of that nature, and quite frankly I don't
blame them. I won't be doing it again, I know. 8-)

I suppose the DOM might have been cleaned up to the extent that you could
just redo all this easily. I kind of doubt it though...

That being said, you could try supplying an overall_template option in
the call to the table-editor, i.e. a custom pages/admin/flex_editor. Something
like:

    [table-editor
	    cgi=1
	    form_name=flex_editor
	    keep-errors=1
    ]
	{TOP_OF_FORM}
	{HIDDEN_FIELDS}
	<table>
	<tr><td colspan="$span">{TOP_BUTTONS}</td></tr>
	<tr>
	    <td colspan="$span">
		    {:REST}
	    </td>
	</tr>
	<tr><td colspan="$span">{BOTTOM_BUTTONS}</td></tr>
	</table>
	{BOTTOM_OF_FORM}
    [/table-editor]

It has been a long time, so I can't be sure that is correct. You would have
to refer to the source in all likelihood to completely nail it down.

-- 
Mike Heins
Perusion -- Expert Interchange Consulting    http://www.perusion.com/
phone +1.765.328.4479  tollfree 800-949-1889 <mike at perusion.com>

Find the grain of truth in criticism, chew it, and swallow
it. -- anonymous



More information about the interchange-users mailing list