creating many little html forms

2 Views

I am building a wordpress feedback plugin so a page owner can place div’s over any section on any page that need attention, and have a growing number of forms that pop up for editing various properties.

I am building the forms in jquery, like so:

Read More
$('#myplugin').append('<div class="controls"></div>');
$('#myplugin .controls').append('<button type="button" id="tntb_shoot" class="btn btn-default"> <span class="glyphicon glyphicon-camera"></span> </button>')
$('#myplugin .controls').append('<button type="button" id="tntb_picture" class="btn btn-default"> <span class="glyphicon glyphicon-picture"></span> </button>')
$('#myplugin .controls').append('<button type="button" id="tntb_add" class="btn btn-default"> <span class="glyphicon glyphicon-plus"></span> </button>')
$('#myplugin .controls').append('<button type="button" id="tntb_list" class="btn btn-default"> <span class="glyphicon glyphicon-list"></span> </button>')

…and it feels awful doing one element at a time

I feel like I should be writing them in normal html somewhere else, and then importing them? I should be using ajax to a flat html file? or is this where I would use a templating thing?

I am ready for your wisdom!

Update – adeneo gave me a nice answer for how I could sort out sets of buttons, but then I have text areas, text fields, radios, which all fit in a to do list…

Post Views: 2

Related posts

Leave a Reply

3 comments

  1. If you can use a template, in a file or otherwise, that’s one way to go, but there’s nothing wrong with doing it the way you’re doing, but it could probably be done a little more logically, where it’s easier to create elements etc.

    something like 

    function getButton(id, icon) {
    var span = $('<span />',   {'class': 'glyphicon glyphicon-'+icon});
    var btn  = $('<button />', {'class': 'btn btn-default', id : 'tntb_'+id });

    return btn.append(span);
}

var controls = $('<div />', {'class' : 'controls'});

$('#myplugin').append(
    controls.append(
        getButton('shoot', 'camera'),
        getButton('picture', 'picture'),
        getButton('add', 'plus'),
        getButton('list', 'list')
    )
);

  3. I’ve personally done what you’re doing above as well as had an ajax call to the server to bring back the data pre-rendered.

    It’s probably better to use something like angular.js or backbone.js. However, a simpler solution in your case would be to create a php file that will render html (header should be text/html).

    Then, call that file/controller/action via ajax to insert it into your page.