Ajax On Yii2 For Fullcalendar

tsatsar · October 28, 2016

Hello,

I'm using Fullcalendar for Yii2 (https://github.com/philippfrenzel/yii2fullcalendar-demo) and I want to save with Ajax the event when I click on a date. The datas commes from the dropdownlist.

It seems that my code couldn't find the function in my controller, maybe it's the Url ?

My view with JS and the link to my funstion Ajax on my controller :

 <?php 
        $form = ActiveForm::begin(); 
    ?>

    <div class="row">
        <div class="col-md-4">
            <?= $form->field($feuille_de_jour_responsable, 'ID_Categorie')->dropDownList(CategorieFdj::find()->select(['Nom', 'ID_Categorie'])->indexBy('ID_Categorie')->column(), ['id'=>'catId']); ?>
        </div>
        <div class="col-md-4">
            <?= $form->field($feuille_de_jour_responsable, 'ID_Poste_FDJ')->dropDownList(PosteFdj::find()->select(['Nom_Poste_FDJ', 'ID_Poste_FDJ'])->indexBy('ID_Poste_FDJ')->column(), ['id'=>'postId']); ?>
        </div>
        <div class="col-md-4">
            <?= $form->field($feuille_de_jour_responsable, 'Code_Personnel')->dropDownList(Personnel::find()->select(['Nom_Personnel', 'Code_Personnel'])->indexBy('Code_Personnel')->column(), ['id'=>'codePers']); ?>
        </div>
    </div>


    <?php ActiveForm::end();?>



<?php 



    $JSCode = <<<EOF

    function(start,end) {
        //alert ($("select[id=catid] option:selected").text());
        var title = $("select[id=codePers] option:selected");
        var codePersonnel = $("select[id=codePers] option:selected").val();
        var posteId = $("select[id=postId] option:selected").val();
        var categorieID = $("select[id=catId] option:selected").val();
        //alert($('#catid').val());
        var eventData;

        $.ajax({
            url : '/site/Ajax',
            dataType: 'json',
            data: {
                codePersonnel : codePersonnel
                //dateCalendaire : start.format(),
                //posteId : posteID,
                //categorieID : categorieID

               // end: thedate1
            },
            success: function (data, response, event, date) {
                alert("success here");
                /*$('#calendar').fullCalendar('renderEvent',
                {
                    title: title,
                    start: start.format()
                    //end: thedate1
                }, true);*/
                eventData = {
                    title: title,
                    start: start.format(),
                    end: start.format(),
                };
                $('#calendar').fullCalendar('renderEvent', eventData, true);
            },
            error: function () {
                alert("Oops! Something didn't work");
            }
        });


    }

EOF;

$JSEventClick = <<<EOF
function(calEvent, jsEvent, view) {
    alert('Event: ' + calEvent.title);
    alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
    alert('View: ' + view.name);
    // change the border color just for fun
    //$(this).css('border-color', 'red');
}
EOF;


?>

    <?= yii2fullcalendar\yii2fullcalendar::widget([
        'id' => 'calendar',
        'clientOptions' => [
            'height' => 650,
           // 'language' => 'fa',
            //'eventLimit' => TRUE,
            'selectable' => true,
            'selectHelper' => true,
            'droppable' => true,
            'editable' => true,
//          'theme'=>true,
            'fixedWeekCount' => false,
            'defaultDate' => date('Y-m-d'),
            'eventClick' => new JsExpression($JSEventClick),
            'select'=>new JsExpression($JSCode)
        ],            

    ]);
?>

    <?= Html::encode($JSCode); ?> 

    <?= Html::encode($JSEventClick); ?>

And the function on my controller (SiteController)

 public function actionAjax(){

     if(isset(Yii::$app->request->post())){
        $codePersonnel = "Ajax Worked!";
        echo $codePersonnel;
    }else{
        $codePersonnel = "Ajax failed";
        echo $codePersonnel;
    }

    // return Json    
    return \yii\helpers\Json::encode($codePersonnel);

  }

Thank you for help =)

Sarah

Edited October 28, 2016 by tsatsar

Larry · November 5, 2016

When you say "It seems that my code couldn't find the function in my controller, maybe it's the Url ?", what's your thinking there? Is there an error message? What actually happens when you click a date?

tsatsar · November 6, 2016

There are no error and just nothing happens, so I thing it's maybe the Url...

But I don't undertand

Larry · November 6, 2016

This is really hard to debug without an actual problem. Are there any errors in the browser console? Also look in your browser's developer tools to see if an Ajax request is being made? If so, of what URL, what content is included in the request, and what the response looks like.

tsatsar · November 9, 2016

I began to use firebug (I didn't know it, it's wonderfull ! ).

And I progress a little bit :

My view JS-Ajax :

	<div class="row">
        <div class="col-md-4">
            <?= $form->field($feuille_de_jour_responsable, 'ID_Categorie')->dropDownList(CategorieFdj::find()->select(['Nom', 'ID_Categorie'])->indexBy('ID_Categorie')->column(), ['id'=>'catId']); ?>
		</div>
		<div class="col-md-4">
            <?= $form->field($feuille_de_jour_responsable, 'ID_Poste_FDJ')->dropDownList(PosteFdj::find()->select(['Nom_Poste_FDJ', 'ID_Poste_FDJ'])->indexBy('ID_Poste_FDJ')->column(), ['id'=>'postId']); ?>
		</div>
		<div class="col-md-4">
			<?= $form->field($feuille_de_jour_responsable, 'Code_Personnel')->dropDownList(Personnel::find()->select(['Nom_Personnel', 'Code_Personnel'])->indexBy('Code_Personnel')->column(), ['id'=>'codePers']); ?>
        </div>
    </div>

	
	
	<?php ActiveForm::end();?>
	
	
	
<!--<?php 
	
	
	
	$JSCode = <<<EOF
	
	function(start,end) {
		//alert ($("select[id=catid] option:selected").text());
		var title = $("select[id=codePers] option:selected");
		var codePersonnel = $("select[id=codePers] option:selected").val();
		var posteId = $("select[id=postId] option:selected").val();
		var categorieId = $("select[id=catId] option:selected").val();
		//alert($('#catid').val());
		var eventData; 
		var test = "this is an ajax test";
		
		var obj = { 
                Date_Calendaire : start.format(),
				ID_Poste_FDJ : posteId,
				ID_Categorie : categorieId,
				Code_Personnel : codePersonnel
				};
		
		$.ajax({
			url : 'index.php?r=feuille-de-jour-responsable/create' ,
			dataType: 'json',
            data: obj,
            success: function (data, response, event, date) {
				alert("success here");
				/*$('#calendar').fullCalendar('renderEvent',
				{
					title: title,
					start: start.format()
					//end: thedate1
				}, true);
				eventData = {
					title: title,
					start: start.format(),
					end: start.format(),
				};
			$('#calendar').fullCalendar('renderEvent', eventData, true);
			*/
            },
            error: function () {
				//alert(test);
                //alert("Oops! Something didn't work");
				alert("exception");
            }
        });
		
		
		/*if (title) {
			
			var i=start;
			var fin=end;
			//alert(fin);
			for (i;i<fin;i.add(1,'days'))
			{
				eventData = {
					title: title,
					start: start.format(),
					end: start.format(),
				};
				$('#calendar').fullCalendar('renderEvent', eventData, true);
				
				//alert(eventData.title);
				//alert(eventData.start);
				//alert(eventData.end);
			}
			
		}*/
		//$('#calendar').fullCalendar('unselect');
		
	}
	
EOF;

$JSEventClick = <<<EOF
function(calEvent, jsEvent, view) {
    alert('Event: ' + calEvent.title);
    alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
    alert('View: ' + view.name);
    // change the border color just for fun
    //$(this).css('border-color', 'red');
}
EOF;


?>-->
	
	<?= yii2fullcalendar\yii2fullcalendar::widget([
		'id' => 'calendar',
        'clientOptions' => [
			'height' => 650,
            //'language' => 'fa',
            //'eventLimit' => TRUE,
			'selectable' => true,
            'selectHelper' => true,
            'droppable' => true,
            'editable' => true,
            //'theme'=>true,
            'fixedWeekCount' => false,
			'defaultDate' => date('Y-m-d'),
			'eventClick' => new JsExpression($JSEventClick),
            'select'=>new JsExpression($JSCode)
        ],

        //'ajaxEvents' => Url::to(['/site/jsoncalendar']),              
	
	]);
?>

	<?= Html::encode($JSCode); ?> 

	<?= Html::encode($JSEventClick); ?>

And my function on my controller :

public function actionCreate()
    {
$feuille_de_jour_responsable = new FeuilleDeJourResponsable();
		
        if ($feuille_de_jour_responsable->load(Yii::$app->request->post()) && $feuille_de_jour_responsable->save()) {
			\Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
			//return $this->redirect(['view', 'Date_Calendaire' => $feuille_de_jour_responsable->Date_Calendaire, 'ID_Poste_FDJ' => $feuille_de_jour_responsable->ID_Poste_FDJ, 'ID_Categorie' => $feuille_de_jour_responsable->ID_Categorie, 'Code_Personnel' => $feuille_de_jour_responsable->Code_Personnel]);
			return ['success' => $feuille_de_jour_responsable->save()];
		} else {
            return $this->render('create', [
                'feuille_de_jour_responsable' => $feuille_de_jour_responsable,
            ]);
        }
}

It's like the basic function create.

When I click on a day, I have the "exception alert" from my Ajax function and next, nothing.
I don't understand why because the URL I can see with firebug is the same that a "normal" URL with a form...

Picture :

http://www.hostingpics.net/viewer.php?id=419210838.png

Edited November 9, 2016 by tsatsar

Larry · November 13, 2016

Yeah, Firebug is very helpful! Sorry, what's the exception alert you're seeing?

tsatsar · November 13, 2016

Whit the function I put previously, I got just "Exception", It just did'nt work

I try with this function :

error: function(xhr, status, error) {
				alert(xhr.responseText);
			}

And I get just my code ...

http://www.hostingpics.net/viewer.php?id=952703fds.png

tsatsar · November 13, 2016

Sorry for double post, I don't have the permission for edit.

With this :

error: function(xhr, status, error) {
				alert(error);
			}

I have :

href="http://www.hostingpics.net/viewer.php?id=831486wfvc.png

Larry · November 14, 2016

Ah, okay. It looks like your xhr.responseText includes a complete HTML page, which means the method being called is executing a complete, rendered view instead of just returning more specific content.

tsatsar · November 18, 2016

I understand.

But I don't understand why and how to do what I want

tsatsar · November 18, 2016

Without set a datatype, it says "success here" but nothing is save.

I test, it work with datatype to "text" but the same.

I don't understand because in firebug, I have url "GET index.php?r=feuille-de-jour-responsable/create&Date_Calendai‌re=2016-11-10&ID_Pos‌te_FDJ=1&ID_Categori‌e=1&Code_Personnel=4‌901"

but with the "$feuille_de_jour_responsable->load(Yii::$app->request->post‌())" It will be saved, isn't it ?

tsatsar · November 18, 2016

*Can't edit previous post*

I understand the url, it's my return on my else.

Now I'm trying this :

$feuille_de_jour_responsable = new FeuilleDeJourResponsable();
		
		if (Yii::$app->request->isAjax) 
		{
			
			Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
			$data = Yii::$app->request->post();
			return $data;
		}
		else 
		{
           // return ['success' => false];
			return $this->render('create', [
                'feuille_de_jour_responsable' => $feuille_de_jour_responsable,
            ]);
        }

And the alert(data); on my function succes from ajax :

$.ajax({
			url : 'index.php?r=feuille-de-jour-responsable/create' ,
			dataType: 'json',
            data: obj,
            success: function (data, response, event, date) {
				alert("succes");
				alert(data);
            },
            error: function(xhr, status, error) {
				alert(error);
			}
        });

But the alert is empty...

Larry · December 3, 2016

Why is the controller just returning the posted data? That's not necessary. Are you just testing that or...?

Ajax On Yii2 For Fullcalendar

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites