Differences

This shows you the differences between two versions of the page.

--- systems:yii2:using_ajax [2018/05/31 11:07]
smayr [Using JQuery $.get() or $.post()]
+++ systems:yii2:using_ajax [2018/05/31 11:16] (current)
smayr [Using JQuery $.get() or $.post()]
@@ Line 136: / Line 136: @@
 == Using JQuery $.get() or $.post() ==
-You can also get data without using AJAX by simply using this JQuery ''$.get()'' method attached to an event (such as ''OnChange'' event):
+You can also get data using a simplified AJAX call using JQuery ''$.get()'' or ''$.post()'' method attached to an event (such as ''OnChange'' event).
+Using GET method:
 <code php>
-<?= $form->field($model, 'product_name')->dropDownList(ArrayHelper::map(Products::find()->all(), 'id', 'name'),
+<?= $form->field($model, 'product_name')->dropDownList(ArrayHelper::map(Products::find()->all(), 'id', 'name'), [
-    ['prompt'=>'-Choose a Product-',
+    'prompt' => '-Choose a Product-',
-         'onchange'=>'
+    'onchange' => '
          //var aUrl = "index.php?r=suborders/listprice&id="+$(this).val();           // with enablePrettyUrl disabled (default)
          var aUrl = "'.Yii::$app->homeUrl.'suborders/listprice/id/"+$(this).val();   // with enablePrettyUrl enabled
@@ Line 146: / Line 148: @@
             $( "#suborders-product_price" ).val( data );
          });
-    ']);
+    ',
-?>
+]) ?>
 </code>
@@ Line 159: / Line 161: @@
          $.post({
             url: aUrl,
-            dataType: "json",
             data: {id: anId},
             success: function( data ) {
@@ Line 168: / Line 169: @@
                 console.log("Status: " + status );
                 console.dir( xhr );
-            }
+            },
+            dataType: "json"  // return data type
         });
      ',
@@ Line 211: / Line 213: @@
   $( "body" )
     .append( "Name: " + data.name )  // John
-    .append( "Time: " + data.time ); //  2pm
+    .append( "Time: " + data.time ); // 2pm
 }, "json" );
 </code>