Jump to content
Larry Ullman's Book Forums
tsatsar

Ajax On Yii2 For Fullcalendar

Recommended Posts

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 by tsatsar

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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 by tsatsar

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites

*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...

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...