Symfony 1.4: enviar form con jQuery y sin refrescar la pagina

[juanm_la22]

Hola!

Hace un tiempo que vengo peleando con esto y no logro saber que es lo que pasa.

Mi idea es armar un widget que herede el comportamiento de sfWidgetFormPropelChoice y que le agregue al lado del select/radio/checkbox un boton para agregar un nuevo elemento para seleccionar. La idea es que al tocar el elemento se muestre el form para crear el elemento en cuestion dentro de un modal y que al enviarlo se refresque solo el select/radio/checkbox agregandole el nuevo elemento. El problema es que no logro que no se refresque la pagina, en cambio, al hacer click en guardar (dentro del modal) el nuevo elemento es guardado en la bs pero la pagina se refresca y me muestra el index del elemento creado.

Pongo algo de codigo para que vean:

Action.class del modulo ajax que cree para el widget

Código:

class jmAjaxActions extends sfActions
{
  public function executeGetPropelChoices(sfWebRequest $request)
  {

    //obtiene los nuevos valores del select para actualizar el componente.

    if (!$request->isXmlHttpRequest())
        return $this->renderText(json_encode(array('error'=>'Bad request.')));
 
    $model = $request->getParameter("model");
    $objects = call_user_func(array($model."Peer", "doSelect"), new Criteria());

    $choices = array();
    foreach ($objects as $object)
    {
      $choices[$object->getId()] = $object->__toString();
    }
    $this->getResponse()->setContentType('application/json; charset=utf-8');
    $this->getResponse()->setContent(json_encode($choices));
    return sfView::HEADERS_ONLY;  
  }

javascript para enviar el form y actualizar el elemento

Código:

function linkToNew(model, widget_id, url, sfAction, type, name)
{
    //esta funcion se ejecuta cuando presiono el boton "agregar elemento"
    //params: model (nombre del modelo del elemento)
   //params: widget_id (id del widget a actualizar)
 // params; url (url del new del modulo del elemento, normalmente modulo/new)
//prams: sfAction (url de la accion del modulo ajax para obtener los nuevos elementos)
//params: type tipo de widget (select, radio, checkbox)


    jQuery.ajax({
        url: url,
        context: document.body,
        success: function(data) {
                      prepareModal(data);}
        });
}

function prepareModal(data){
    var response_html = document.createElement('html');
    response_html.innerHTML = data;
  
    var div =  document.createElement("div");
    document.body.insertBefore(div, document.body.firstChild);

    div.setAttribute('id', 'modal-new-form');
    div.setAttribute('class', 'modal hide modal-filters fade in');
    div.setAttribute('aria-hidden', 'false');
    div.setAttribute('style', 'display: block;');
    
    var response_form = jQuery('form', response_html);
    
    var modal_form = document.createElement('form');
    modal_form.setAttribute('action', jQuery(response_form).attr('action'));
    modal_form.setAttribute('method', jQuery(response_form).attr('method'));
    modal_form.setAttribute('submit','(function( event ) {event.preventDefault();}');

    
    jQuery(jQuery('input[type=hidden]', response_html)).appendTo(modal_form);
    
    jQuery(modal_form).appendTo(div);
    
    var header = document.createElement("div");
    header.setAttribute('class', 'modal-header');
    
    var title = document.createElement("h3");
    jQuery(title).text(jQuery('h2', response_html).val());
    
    jQuery('<a class="close" data-dismiss="modal">×</a>').appendTo(header);
    jQuery(title).appendTo(header);
    
    jQuery(header).appendTo(modal_form);
    
    var body = document.createElement("div");
    body.setAttribute('class','modal-body');
    
    jQuery(jQuery('fieldset', response_html)).appendTo(body);
    
    jQuery(body).appendTo(modal_form);
    
    var footer = document.createElement('div');
    footer.setAttribute('class', 'modal-footer');
    
    jQuery('<a id="close-modal-filters" class="btn btn-info" data-dismiss="modal">Close window</a>').appendTo(footer);
    
    var input = document.createElement('button');
    input.setAttribute('onclick', 'submitFormAndUpdate()');  
    input.setAttribute('class', 'btn btn-primary mlm');
    jQuery(input).text(__('Save'));
    
    jQuery(input).appendTo(footer);

    jQuery(footer).appendTo(modal_form);

    jQuery('#modal-new-form').modal();
 
}

function update(data)
{
    //acá actualizo... esto nunca se ejecuta

     if (type == "select"){
                updateSelect(widget_id, name, data);
     } else if (type == "radio") {
                updateRadio(widget_id, name, data);
     } else if (type == "checkbox"){
                updateCheckbox(widget_id, name, data);
     }
}

function submitFormAndUpdate()
{
      var url = jQuery('#modal-new-form form').attr('action');  //la url del action del formulario
      var data = jQuery('#modal-new-form form').serialize(); // los datos del formulario
      jQuery.ajax({
             url: url,
             data: data,
             success: function (e) {update(e)}
      });
      return false;
}

Espero puedan orientarme!

Un abrazo,
JM