Access to HTML (apparently) generated in PHP

[sproutee]

Dear all,

 

I am in the process of creating an HTML5 template for use with my WHMCS installation. This includes a total rehaul of forms as they are laid out and styled in the default theme. This is where I've hit a snag.

 

It does not appear to be possible to manipulate the HTML that is used with Custom Client Fields in forms. The custom fields are inserted into the TPL as

 

{$customfield.input} {$customfield.required}

 

There is no HTML+Smarty in the TPL and no access to the PHP, so it is not possible to update the inline styles injected into the input or dynamically fill in the

for

attribute of a dynamically generated

label

element.

 

So, how can I proceed with my template building when not all of the HTML is available in the TPL (or JS) files, but, seemingly, also generated at the server side?

 

For reference I am working with v4.5.2. Have all such cases been resolved in version 5?

 

Any help is gratefully received.

[laszlof]

wrap them in a div and modify them with jQuery.

 

<div id="customfields">
{$customfield.input} {$customfield.required}
</div>

{literal}
<script>
$(document).ready(function() {
 var i=0;
 $('#customfields').find(':input').each(function() {
   // Do something with $(this)
   var type = $(this).attr('type');
   $(this).attr('id', 'customfield_'+i;
   if (type == 'text') {
     $(this).addClass('myCustomClass');
   }
   $(this).parent().append('<label for="customfield_'+i+'">My Label</label>');
   i++;
 });
});
</script>
{/literal}

 

This is obviously completely untested and probably wont even work, but will give you an idea on how to tackle the issue.

[sproutee]

Hi Frank,

 

Good call. I am familiar with manipulating the view with jQuery and in the absence of a fully MVC framework it looks as if this is the sort of methodology I'll need to adopt for the increasing number of server-side injected styles/HTML I'm coming across. It works, but is a lot of extra coding that *shouldn't* be necessary - ah well.

 

Thanks a lot for taking the time to write some sample code, very kind of you.

 

Best wishes,

Meg

[laszlof]

It works, but is a lot of extra coding that *shouldn't* be necessary - ah well.

 

I agree 100%. If they're going to use smarty and encoded PHP, everything should be modifiable in the templates. Little things like this make that difficult.

[sproutee]

Indeed, and to be fair the vast majority of the HTML is in the templates, but for a paid for product I would 100% full separation of tiers and failing that the choice to fiddle with the PHP/server side logic.

 

Thanks again for taking the time to give a detailed reply. Very helpful to know that I didn't miss something and that a frontend work around is the means to the end.

[sproutee]

Hi, have just finished my implementation of a work around and here's what I came up with. Help yourselves if it's useful to you.

 

For the label and layout I updated the relevant TPL files as follows:

 

<label for="customfield{$customfield.id}">{$customfield.name}</label>
{$customfield.input}
<p class="custom_desc">{$customfield.description}</p> 

 

In this way a label with the correct for attribute is generated and the description text positioned and styled as desired.

 

To deal with the inline style injected into the width of the input box I created a custom-field.js file with the following:

 

jQuery(document).ready(function(data) {
  jQuery("*[id^='customfield']").each(function () {
       jQuery(this).width(250);
   }); 
});

 

Using jQuery's attribute starts with selector, it is possible to go through all the custom input elements and update their width to my spec. I import this file where appropriate.

 

Hope this helps until such a work around is not longer required.