Category Archives: Javascript

featured-html5

html5 saz (baglama)

html5-saz
html5-saz

Being amazed by the website Jam With Chrome i’ve decided to try by my self the development of a virtual html5 instrument.

A few years ago i’ve purchased a turkish instrument called “Saz” (or Baglama) so why not try to use it as a reference !

after a few search on the internet, i’ve found what i need :

Here is the link for the Demo : html5-saz.

Source code can be found Here on Github.

Extjs, dynamic fieldsets with delete button

Extjs is powerful and flexible, fieldsets can be actually used to handle dynamic bloc fields ; such as publications for example which containing the same fields

here is a code example of what’s possible to do with fieldsets, in this case we add custom buttons for deletion

 

 

var form = new Ext.TabPanel({
        id: 'real-popin-edit-form-tab-id',
        border: false,
        labelWidth: 120,
        items: [
        new Ext.FormPanel({
            id: 'real-popin-edit-form-id',
            tbar : [{
                text: 'add fieldset',
                handler: fieldsetAdd,
                iconCls: 'new'
            }
            ],
            labelWidth: 120,
            title: " .. ",
            items: [

            ]
        });

var counter = 0;

fieldsetAdd = function()
{
    Ext.getCmp('real-popin-edit-form-id').add({
        xtype: 'fieldset',
        width: 500,
        labelWidth: 120,
        title: "Fieldset [ " + counter ++ + ' ]' ,
        defaults: {
            width: 350
        },
        defaultType: 'textfield',
        border: true,
        // for ie position pbs
        style: 'background-color: #F1F1F1; margin: 5px auto;position: relative;',
        iconCls: 'icon-properties',
        id : 'realisation-visuel-' + counter,
        items : [
        {
            width: 18,
            xtype: 'button',
            name: 'AddDirectAttr',
            style: 'position: absolute; top: ' +
              (Ext.isIE|| Ext.isChrome|| Ext.isGecko ? 0:-20) + 'px; right: 10px;',
            tooltip: {
                title:'',
                text: 'Delete fieldset.'
            },
            iconCls: 'delete',
            id : 'delete-' + counter,
            handler : function(t, e){
                Ext.MessageBox.confirm("Delete", "Are you sure ?" , function(btn){
                    if(btn == 'yes') {
                        currentId = t.getId();
                        temp = currentId.split('-');
                        Ext.getCmp('realisation-visuel-' + temp[1]).destroy();
                        Ext.getCmp('real-popin-edit-form-id').doLayout();
                    }
                });

            }

        },
        {
            xtype : 'textfield',
            name : 'position-' + counter,
            fieldLabel: 'Position'
        }, {
            xtype : 'textarea',
            name  : 'description-' + counter,
            fieldLabel: 'Description'
        }
        ]
    });

    Ext.getCmp('real-popin-edit-form-id').doLayout();

}

and here is the result

Enjoy !

JQuery, Duplicate form items with .clone()

Assuming that we have a dynamic form creation, where we need to add as many form items as we need, the problem is that when we duplicate items we’ll get the same input names ..

So this is my own solution to this problem but if you have other methods don’t hesitate to share ^^

This is out form element to duplicate :

<ul >
    <div class="toClone">
        <li id="li_1" >
            <label for="element_1">Name </label>
            <div>
                <input name="name" type="text" maxlength="255" value=""/>
            </div>
        </li>
        <li id="li_2" >
            <label for="element_2">Surname </label>
            <div>
                <input  name="surname" type="text" maxlength="255" value=""/>
            </div>
        </li>
    </div>
...

And this is the js, assuming that we have already set a button to add the cloned content :

counter = 0;
$('#addButton').live('click', function(){
  counter ++;
  cloned = $('.toClone').first().clone();
  cloned.find('input[type=text]').each(function(){
     name = $(this).attr('name').split('_');
     (this).attr('name', name[0] + '_' + counter);

   });
   // path to parent element.
   cloned.prependTo($(this).parent().parent() ... );
});