Category Archives: Javascript

jquery ui button same size

if you want to have buttons the same size and you not want to play with css, define

<input type="radio" id="button1" name="repeat" checked="checked" class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all"/><label for="button1" id="button1Label">button1</label>

<input type="radio" id="button2" name="repeat" checked="checked" class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all"/><label for="button2" id="button2Label">button2 is long</label>

and in javascript code:

var button1 = $('#button1').button();
var button2 = $('#button2').button();

$('#button1Label').width(200);
$('#button2Label').width(200);

Use dojo ValidationTextBox with Symfony2 and ajax

How use dojo ValidationTextBox with Symfony2 and ajax

In this post i show how i used symfony2, dojio and to validate a form loaded via ajax and how to change the size and other properties of ValidationTextBox.

This is a form loaded via ajax :

{% extends ‘::base.html.twig’ %}
{% block javascripts %}
{% endblock %}
{% block body %}

<form action=”{{ path(‘NdfExampleBundle_people’) }}” method=”post” {{ form_enctype(form) }} id=”forminsertpeople” dojoType=”dijit.form.Form”>

{{ form_widget(form.ci , { ‘attr’: {‘labelAttr’: ‘ci’,’labelType’:’html’,’dojoType’:’dijit.form.ValidationTextBox’,’maxLength’:’12’,
‘regExp’:’\\w{12}’,’invalidMessage’: ‘CI must to be 12 characters’} }) }}

<button dojoType=”dijit.form.Button” type=”submit” name=”submitButtonSave”
value=”Submit”>
Save
</button>

<img src=”404.gif” style=”position:absolute;width:0px;height:0px” onerror=”refreshPeople()”>
{% endblock %}

The main page mustĀ  contain refreshPeople()

function refreshPeople() {

  try {
    dijit.byId('forminsertpeople').destroy();
  }
  catch (ex) {
  }

  // Change Width

  var dum = dojo.byId('form_ci');
  dojo.style(dum, "width", "12em");

  dojo.parser.parse(dojo.byId('your_target'));

  // Change maxLength

  dum = dijit.byId('form_cognome');
  dum.set( "maxlength", 20);

  dojo.addOnLoad(function () {

  var connectForm = dojo.byId("forminsertpeople");
  dojo.connect(connectForm, "onsubmit", function (e) {
  // connect to, and disable the submit of this form
  e.preventDefault();
  // post the form with all it's defaults
  var mainForm = dijit.byId( "forminsertpeople" );
  dojo.stopEvent(event);
  if ( mainForm.validate() ) {

    var form = dojo.byId("forminsertpeople");
    dojo.xhrPost({
    form:form,
    load:function (data) {
      // set the form's HTML to be the response

      form.innerHTML = data;

     }
   });
  }
});
});
dojo.parser.parse(dojo.byId('forminsertpeople'));
}



Note how the style changes are made beforeĀ  dojo.parser.parse(dojo.byId(‘your_target’));
after instead the changes to the attributes of the validator.