Jump to content
Larry Ullman's Book Forums

Ajax On Yii2 For Fullcalendar


tsatsar
 Share

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
Link to comment
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. 

Link to comment
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
Link to comment
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 ?

Link to comment
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...

Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...