jQuery Mobile extension...

[Borck]

Hello!

First, thanks a lot for this amazing plugin!

I would love to be able to use dform to generate jquery mobile forms.

Would someone be kind enough to show me how to do it ?

Thanks !

[Daff]

What exactly are you having problems with? Basically the plugin allows
you to create any HTML markup with an emphasis on forms.
Here is the field container example from the jQuery mobile
documentation (http://jquerymobile.com/test/docs/forms/docs-
forms.html):

{
"type" : "div",
"data-role" : "fieldcontain",
"elements" : [
{
"type" : "text",
"name" : "name",
"id" : "name",
"caption" : "Text input:"
}
]
}

Which should generate:

<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</div>

The plugin should also work with the features provided in jQuery
mobile.

[Borck]

Hi!

Thanks for your answer...

This makes sense, but I guess I was looking for a way to avoid the declaration of div and fieldcontain...

I would like to be able to just use this kind of JSON description:

{ 

                        "type" : "text", 
                        "name" : "name", 
                        "id" : "name", 
                        "caption" : "Text input:"

} 


Is there a way to generate automatically the div around the various form elements ?

Thanks!

[Daff]

Read up on the extension chapter: http://neyeon.com/p/jquery.dform/doc/files/dform-extensions-js.html

Basically you can create your own types and subscribers very easily
and then just let these generate
the markup you need (you can run the plugin, too):

$.dform.addType('mobile-text', function(options) {
return $('<div>').attr('data-role', 'fieldcontain');
});

Or something like that (and then use it as "type" : "mobile-text").

You can also chain existing types and add stuff to it e.g. for the
text type:

$.dform.addType('text', function(options) {
return $(this).wrap('<div>').attr('data-role',
'fieldcontain').parent();
});

On Mar 3, 1:48 pm, Borck <pborckm...@gmail.com> wrote:
> Hi!
> Thanks for your answer...
>
> This makes sense, but I guess I was looking for a way to avoid the
> declaration of div and fieldcontain...
>
> I would like to be able to just use this kind of JSON description:
>
> {
>                         "type" : "text",
>                         "name" : "name",
>                         "id" : "name",
>                         "caption" : "Text input:"
>
> }
>
> Is there a way to generate automatically the div around the various form
> elements ?
>
> Thanks!
>
> Le samedi 3 mars 2012 21:32:50 UTC+1, Daff a écrit :
>
>
>
>
>
>
>
>
>
> > What exactly are you having problems with? Basically the plugin allows
> > you to create any HTML markup with an emphasis on forms.
> > Here is the field container example from the jQuery mobile
> > documentation (http://jquerymobile.com/test/docs/forms/docs-

> > forms.html <http://jquerymobile.com/test/docs/forms/docs-forms.html>):

[Jonas Bolin]

Hi, 

I'm attempting something similar:

Trying to get this radiogroup to look nice in jQuery Mobile.

dForm generated HTML looks like:

<label for="5066549580791808" class="ui-dform-label">Important question</label>

<div id="5066549580791808" class="ui-dform-radiobuttons">

<div class="ui-radio">

<input type="radio" class="ui-dform-radio" value="test1" name="5066549580791808">

</div>

<label class="ui-dform-label">Test1</label>

<div class="ui-radio">

<input type="radio" class="ui-dform-radio" value="test2" name="5066549580791808">

</div>

<label class="ui-dform-label">Test2</label>

</div>

And I would like it to turn out to:

<div data-role="fieldcontain">

    <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">

        <legend>

            Important question

        </legend>

        <input id="radio10" name="test1" value="1" type="radio">

        <label for="radio10">

            Test1

        </label>

        <input id="radio11" name="test" value="2" type="radio">

        <label for="radio11">

            Test2

        </label>

    </fieldset>

</div>

My first problem is that when I try to do something akin to what you suggest earlier,

        $.dform.addType('radiobuttons', function(options) { 

            return $(this).wrap('<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">').parent(); 

        }); 

        $.dform.addType('radiobuttons', function(options) { 

            return $(this).wrap('<div data-role="fieldcontain">').parent(); 

        }); 

These two end wrapping around each before the radio-group even starts. So how can I get the end tags </fieldset> and </div> to come after the radio group?

Second question, dForm automatically adds a <div class="ui-radio"> around every radio element. Is it possible to get rid of this somehow? I've poked around in the dForm source but haven't found a way to do so.

Any input towards this would be greatly appreciated.

[Daff]

For your first problem you should probably first try to create the HTML structure without any special types (like radiobuttons):

{

    type: 'div',

    "data-role": 'fieldcontain'

    html: {

        type: 'fieldset',

        legend: 'Important question',

        html: [

            {

                type: 'radio',

                name: 'test1'

            }

        ]

    }

}

...

Second: Are you sure? This might be due to the type: 'radiobuttons', something like type: 'radio' definitely doesn't add any wrapper.

[Jonas Bolin]

Thanks, finally got it working! It was jQuery Mobile which added the extra classes, not dForm :)

--
You received this message because you are subscribed to a topic in the Google Groups "jQuery dForm" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jquery-dform/nr0nNm0Z0Eg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jquery-dform...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.