Question

I am new to the Yii PHP Framework so bear with me.

I need to make a cross-domain JSONP request(from a non-yii app) to create a record in the Yii apps DB. Upon creating it should return Application/json content via getVisit

The Controllers:

public function actionGetVisit($id)
{
  header('Content-type: application/json');

  $visit = Visit::model()->findByPK((int)$id);

  echo CJSON::encode($visit);

  Yii::app()->end();
}
/**
 * Creates a new model.
 * If creation is successful, the browser will be redirected to the 'view' page.
 */
public function actionCreate()
{
    $model=new Visit;

    // Uncomment the following line if AJAX validation is needed
    // $this->performAjaxValidation($model);

    if(isset($_POST['Visit']))
    {
        $model->attributes=$_POST['Visit'];
        if($model->save())
            $this->redirect(array('getVisit','id'=>$model->id));
    }

    $this->render('create',array(
        'model'=>$model,
    ));
}

The Form:

<form id="visit-form" action="http://host/index.php?r=visit/create" method="post">
            <p class="note">Fields with <span class="required">*</span> are required.</p>


            <div class="row">
                <label for="Visit_rvc_id" class="required">Rvc <span class="required">*</span></label>      <input name="Visit[rvc_id]" id="Visit_rvc_id" type="text" value="1">            </div>

            <div class="row">
                <label for="Visit_zone" class="required">Zone <span class="required">*</span></label>       <input name="Visit[zone]" id="Visit_zone" type="text" value="1">            </div>

            <div class="row">
                <label for="Visit_table" class="required">Table <span class="required">*</span></label>     <input name="Visit[table]" id="Visit_table" type="text" value="1">          </div>

            <div class="row">
                <label for="Visit_seat" class="required">Seat <span class="required">*</span></label>       <input name="Visit[seat]" id="Visit_seat" type="text" value="1">            </div>

            <div class="row">
                <label for="Visit_user_id" class="required">User <span class="required">*</span></label>        <input name="Visit[user_id]" id="Visit_user_id" type="text" value="1">          </div>

            <div class="row">
                <label for="Visit_guest_name" class="required">Guest Name <span class="required">*</span></label>       <input size="60" maxlength="256" name="Visit[guest_name]" id="Visit_guest_name" type="text"  value="1">         </div>

            <div class="row">
                <label for="Visit_created" class="required">Created <span class="required">*</span></label>     <input name="Visit[created]" id="Visit_created" type="text" value="1">          </div>

            <div class="row buttons">
                <input type="submit" name="yt0" value="Create"> </div>

        </form>

The JS:

$('#visit-form').submit(function(event)
        {
            alert('submit');
            event.preventDefault();
            var $form = $(this);
            $.ajax({
                url: $(this).attr('action'),
                dataType: 'jsonp',
                type: 'POST',
                data : $form.serialize()+'&ajax='+$form.attr('id'),
                success: function(data, textStatus, XMLHttpRequest)
                {
                    alert('success');
                    if (data != null && typeof data == 'object'){
                        $.each(data, function(key, value){
                            $('#error').append(value);
                        });
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown)
                {
                        alert(errorThrown);
                        alert('error');
                }
            });
            return false;
        });

Upon Submission:
It looks like its not erroring or hitting success. The response says:

GET http://host/index.php?r=visit/create&callback=jQuery15102636089683510363_1317230765087&Visit%5Brvc_id%5D=1&Visit%5Bzone%5D=1&Visit%5Btable%5D=1&Visit%5Bseat%5D=1&Visit%5Buser_id%5D=1&Visit%5Bguest_name%5D=1&Visit%5Bcreated%5D=1&_=1317230785272 The URL can’t be shown

The response is set to output text/

Does anyone know what this error means? The form submits perfectly without the js. But I just cant seem to get the ajax request working. I set it to ‘jsonp’ so cross-domain issues would go away. But I’m not sure if the Yii backend can handle the data sent as jsonp. Any help is appreciated!

Answer 1

It’s not really a Yii question, more of a JSONP issue; here’s what your GetVisit function should look like:

public function actionGetVisit($id)
{
  header('Content-type: application/json');

  $visit = Visit::model()->findByPK((int)$id);

  $json = CJSON::encode($visit);
  echo $_GET['callback'] . ' (' . $json . ');';

  Yii::app()->end();
}

jQuery attaches a global temporary function to the window object that is called when the script is inserted during a JSONP request. jQuery replaces the ? with a generated function name (ie jsonp1232617941775) that calls the inline function. You are passing that function to the window object.

Hope that helps, apologize if it’s not correctly explained as I am working on a project.