I'm building a website with Yii framework 1.1 and i'm implementing a portion wherein i have a like button associated with each post.i want to update the content of the like buttons text everytime i click on it without refreshing the page?please help?
EDIT
i did this
`id;
$foo = $data->likes;
echo CHtml::ajaxbutton($foo.' '.'Likes',
array('post/like/'.$id),
array(
'type'=>'POST',
'success'=>'js:function(data){ $.fn.yiiAjaxButton.update("label");}')
);
?>`
still doesnt work
Your View should be like bellow
<?php
$postId = 1; //Your post id
echo CHtml::Button('SUBMIT', array('onclick' => 'getComments(this);', 'data-value' => $postId, 'value' => 'Get Comments'));
?>
And Write your Ajax call some thing like
<script type="text/javascript">
function getComments(obj)
{
$PostID = $(obj).data('value');
$.get('Controller/YourMethod', {id:$PostID}, function(dataJSON)
{
//Get data in JSON formate
},'JSON');
}
</script>
EDIT
If you want to add Ajax call directly to your button, you can do as
<?php
$postId = 1;
echo CHtml::Button('SUBMIT', array('value' => 'Get Comments','onclick' => ''
. '$.get("Controller/YourMethod", {id:'.$postId.'}, function(dataJSON)
{
//Do what ever you want here
},"JSON");'));
?>
Related
I use the following select2 Yii widget in my view to populate a drop-down list. Since the data necessary for the preparation of the select list consists of more than 2K records I use select2 with minimumInputLength parameter and an ajax query to generate partial result of the list based on user input. If I create a new record I have no problem at all. It populates everything fine and I can save data to my database. However I don't know how to load saved data back to this drop-down during my update action. I read somewhere that initselection intended for this purpose but I couldn't figure out how to use it.
Can someone help me out on this?
My view:
$this->widget('ext.select2.ESelect2', array(
'selector' => '#EtelOsszerendeles_osszetevo_id',
'options' => array(
'allowClear'=>true,
'placeholder'=>'Kérem válasszon összetevőt!',
'minimumInputLength' => 3,
'ajax' => array(
'url' => Yii::app()->createUrl('etelOsszerendeles/filterOsszetevo'),
'dataType' => 'json',
'quietMillis'=> 100,
'data' => 'js: function(text,page) {
return {
q: text,
page_limit: 10,
page: page,
};
}',
'results'=>'js:function(data,page) { var more = (page * 10) < data.total; return {results: data, more:more }; }',
),
),
));?>
My controller's action filter:
public function actionFilterOsszetevo()
{
$list = EtelOsszetevo::model()->findAll('nev like :osszetevo_neve',array(':osszetevo_neve'=>"%".$_GET['q']."%"));
$result = array();
foreach ($list as $item){
$result[] = array(
'id'=>$item->id,
'text'=>$item->nev,
);
}
echo CJSON::encode($result);
}
I use initSelection to load existing record for update in this way (I replaced some of your view code with ... to focus in main changes). Tested with Yii 1.1.14. Essentially, I use two different ajax calls:
View:
<?php
$this->widget('ext.select2.ESelect2', array(
'selector' => '#EtelOsszerendeles_osszetevo_id',
'options' => array(
...
...
'ajax' => array(
'url' => Yii::app()->createUrl('client/searchByQuery'),
...
...
'data' => 'js: function(text,page) {
return {
q: text,
...
};
}',
...
),
'initSelection'=>'js:function(element,callback) {
var id=$(element).val(); // read #selector value
if ( id !== "" ) {
$.ajax("'.Yii::app()->createUrl('client/searchById').'", {
data: { id: id },
dataType: "json"
}).done(function(data,textStatus, jqXHR) { callback(data[0]); });
}
}',
),
));
?>
Now in your controller you should receive parameters for ajax processing: query (q), as string, when inserting; id (id) as int when updating. Parameter names must be same as ajax data parameters (in this sample insert q; in update id) when read in $_GET. Code is not refactored/optimized:
Controller:
public function actionSearchByQuery(){
$data = Client::model()->searchByQuery( (string)$_GET['q'] );
$result = array();
foreach($data as $item):
$result[] = array(
'id' => $item->id,
'text' => $item->name,
);
endforeach;
header('Content-type: application/json');
echo CJSON::encode( $result );
Yii::app()->end();
}
public function actionSearchById(){
$data = Client::model()->findByPk( (int) $_GET['id'] );
$result = array();
foreach($data as $item):
$result[] = array(
'id' => $item->id,
'text' => $item->name,
);
endforeach;
header('Content-type: application/json');
echo CJSON::encode( $result );
Yii::app()->end();
}
Model - custom query and a little of order / security / clean :)
public function searchByQuery( $query='' ) {
$criteria = new CDbCriteria;
$criteria->select = 'id, ssn, full_name';
$criteria->condition = "ssn LIKE :ssn OR full_name LIKE :full_name";
$criteria->params = array (
':ssn' => '%'. $query .'%',
':full_name' => '%'. $query .'%',
);
$criteria->limit = 10;
return $this->findAll( $criteria );
}
EDIT:
It works out of box when update is preloaded with traditional HTTP Post (synchronous, for example with Yii generated forms). For async/Ajax updates, for example with JQuery:
Event / Trigger:
$('#button').on("click", function(e) {
...
... your update logic, ajax request, read values, etc
...
$('#select2_element').select2('val', id_to_load );
});
With this, initSelection will run again in async way with new id_to_load value, reloading record by id.
In your case and for your needs, initSelection could be complete different to avoid load record from db or you can use formatResult and formatSelection custom functions (are described in Load Remote Data sample source code). Reading documentation, I understand that initSelection's callback need JSON data with id and text elements to load properly or you could try to combine both concepts (this initSelection with your custom JS event/trigger call) (not tested):
'initSelection'=>'js:function(element,callback) {
// here your code to load and build your values,
// this is very basic sample
var id='myId';
var text='myValue';
data = {
"id": id,
"text": text
}
callback(data);
}',
Or directly on Trigger call:
$('#button').on("click", function(e) {
...
... ...
$("#select2_element").select2("data", {id: "myId", text: "MyVal"});
});
Hope that helps.
I tried doing that way, but couldn't do it
the solution I came up to get my record filled and selected was:
In case of the attribute having some data(in update mode or default value), I wrote some javascript that after document ready event, would fill the select with my data (just selected it ind pushed html in it), and made it selected, and then I rest( or update) the select to show my work.
I am new to CakePHP and I am trying to figure you how to make an asynchronous call from a CakePHP view to a function in the controller. I would like the controller function to return a string and have the view display this string. I would also like to to do this without using helpers. I have been trying to find examples on the web but have been unable to do so. Does anyone have a simple example? I am also using jQuery.
Thanks
CakePHP has a built-in JS Helper to help write aJax functions. The only catch is to include jquery in your head or cake will throw jQuery errors. Heres more information http://book.cakephp.org/2.0/en/core-libraries/helpers/js.html
Your Form:
<?php
echo $this->Form->create('User', array('default'=>false, 'id'=>'YourForm'));
echo $this->Form->input('username');
echo $this->Form->submit('Check Username');
echo $this->Form->end();
?>
The Ajax Function: ('update'=>'#na') is the id of the element you want to update in your view.
<?php
$data = $this->Js->get('#YourForm')->serializeForm(array('isForm' => true, 'inline' => true));
$this->Js->get('#YourForm')->event(
'submit',
$this->Js->request(
array('action' => 'checkUsername', 'controller' => 'user'),
array(
'update' => '#na',
'data' => $data,
'async' => true,
'dataExpression'=>true,
'method' => 'POST'
)
)
);
echo $this->Js->writeBuffer();
?>
The Function in User Controller
function checkUsername(){
$this->autoRender = false;
$username = $this->User->find('first', array('conditions'=>array('User.username'=>$this->request->data['User']['username'])));
if ( $username == true )
echo 'Username is taken';
else
echo 'Username is not taken';
}
EDIT**
*If you want to use jQuery to do this and not the CakePHP Helper you can use aJax to call an action, then update your element like below*
$('#element').on('click', function() {
$.ajax({
url : '/controller/action',
type: 'POST',
success : function(response){
$('#elementToUpdate').html(response);
}
});
}
});
In your Controller Action you can return the "string" you would like to show in the view
function action(){
$string = 'Show this in the view';
return $string;
}
The above example would be executed when you "Click" an element with an id of "element" then upon "Success" would change element with id of "elementToUpdate" to the String "Show this in the view" Since it was returned from the controller action.
I want to update a div contents automatically with refresh whole page. So i did Ajax renderPartial in YII. Now I implement using AJAX button onclick
My code as follows
<?php
echo CHtml::ajaxButton ("Update data",
CController::createUrl("blog/UpdateAjax?url=$url"),
array('update' => '#inrscrn'));
?>
Now I want to render with in a time limit please help
Your question is not very clear. I suppose you want to setup an automatical & periodical refresh of the content within a div instead of clicking on the button.
This is the JavaScript you need on your page:
<script type="text/javascript">
timeout = 60 * 1000; // in Milliseconds -> multiply with 1000 to use seconds
function refresh() {
<?php
echo CHtml::ajax(array(
'url'=> CController::createUrl("blog/UpdateAjax?url=".$url),
'type'=>'post',
'update'=> '#inrscrn',
))
?>
}
window.setInterval("refresh()", timeout);
</script>
But it is not a good approach to send an URL to your controler, rather make a direct request to to make a special AJAX return of a controler which needs to return the correspondent data.
<?php
public function actionTest(){
if (isset($_REQUEST['AJAX']) || Yii::app()->getRequest()->getIsAjaxRequest()) {
$this->renderPartial(
'test',
array('model' => $model),
false,
true
);
} else {
$this->render(
'test',
array('model' => $model),
);
}
}
?>
I would really need some help from to AJAX Guru master overthere to help me building my update cart function on my website in AJAX.
So basically, what I would like to do is, when I modify one of my product in one input_dropdown, my 'update_cart' function is automaticaly called and my prices are updated as well as my input
EDIT : I rewrite my question since I made some progress thanks to Matei
Here is my view :
<?php
$options = array(
'0' => '0',
'1' => '1',
'2' => '2',
'3' => '3',
'4' => '4',
'5' => '5',
'6' => '6',
'7' => '7',
);
if($product['quantity']==0){
$value[$product['title']] = set_value('quantity'.$product['title']);
}else{
$value[$product['title']] = $product['quantity'];
}
$data0 = 'class="quantSelect" value="'.$value[$product['title']].'" id="quant'.$product['title'].'"';
echo form_dropdown('quantity'.$product['title'], $options, $value[$product['title']],$data0);
?>
</td>
<td>
<?php echo $product['price'] ?>
</td>
<td id="<?php echo 'price'.$product['title']?>">
$<?php echo $total[$product['title']] ?>
</td>[/code]
Well, everything is in a foreach loop but I think that here, it doesn't matter.
Then I tried to set up the Matei AJAX function :
$(".quantSelect").click(function(){
$.POST("<?php echo base_url().'main/update_cart';?>",
{product_id:$('<?php echo $product['quantity']; ?>').val(),quantity:$('<?php echo 'quantity'.$product['title'] ?>').val()},
function(data){
if(data.success) {
$("<?php echo 'price'.$product['title']?>").val(data.some_returned_value); // update value of an text input or textarea (view more info about jQuery selectors)
$("#totalPriceWithTaxes").html(data.some_other_returned_value); // update value of a paragraph
}
}, 'json');
});
And at last the update cart function :
function update_cart(){
$success = false;
if(!empty($_POST['product_id']) && !empty($_POST['quantity']) && is_numeric($_POST['quantity'])) {
// I get all the information i need here in order to calcul the final price
//We calcul the final price with taxes, shipping and everything.
$data['totalPriceWithTaxes'] = $data['tax'] + $data['totalPrice'] + $data['Shipping']->shipping;
$this->session->set_userdata('totalPriceWithTaxes', $data ['totalPriceWithTaxes']);
$success = true;
$some_returned_value = 69;
$some_other_returned_value = $data['totalPriceWithTaxes']; // the final price
}
echo json_encode(array("success" => $success,
"some_returned_value" => $some_returned_value,
"some_other_returned_value" => $some_other_returned_value));
}
Here we are, so I can't see any update. If someone could help me to figure out how to set up that AJAX Function, I would deeply appreciate :)
I recommend you to take a look at jQuery.post() method of jQuery library.
Let's see the following example:
Javascript code:
$("#submit-button").click(function(){
$.POST("/PATH_TO/update_cart.php",
{product_id:$('#product-id').val(),quantity:$('#quntity').val()},
function(data){
if(data.success) {
$("#form-field-id").val(data.some_returned_value); // update value of an text input or textarea (view more info about jQuery selectors)
$("p#form-p-id").html(data.some_other_returned_value); // update value of a paragraph
}
}, 'json');
});
For more info about jQuery Selectors please check this
PHP code:
<?php
$success = false;
if(loged()) { // verify if the user is loged (if it's needed)
if(!empty($_POST['product_id']) && is_numeric($_POST['product_id']) && !empty($_POST['quantity']) && is_numeric($_POST['quantity'])) {
// use here your additional code
// update database
// if every condition is applied then confirm that the fields are updated
$success = true;
$some_returned_value = "data has been successfully updated";
$some_other_returned_value = 45.3; // the final price
}
}
echo json_encode(array("success" => $success,
"some_returned_value" => $some_returned_value,
"some_other_returned_value" => $some_other_returned_value));
?>
This is a simple example about how you can use jQuery POST method and PHP for updating data you want. I didn't use any of your code, but you can try to update your cart like this. jQuery is a powerfull library, so I'll recommend you to take a look at it.
I have a CJUIDialog where i load the content of another form using renderPartial. In that form there is an ajax button where it loads another form. That form contains another ajax button where i need to load the previous form inside the dialog itself. I have tried doing it like this. But it doesnt work.
In my controller i have two methods that prints out the two forms like this.
public function actionNewRecipients(){
$customer = new Customer;
$address = new Address;
$content = $this->renderPartial('_form_new',array('customer'=>$customer,'address'=>$address,'guest'=>true),true);
echo $content;
}
public function actionAddRecipients()
{ $content = $this->renderPartial('_form_inner',array(),true);
echo $content;}
And then in one form i have the ajax button like,
echo CHtml::ajaxSubmitButton(Yii::t('New','New Recipient'),CHtml::normalizeUrl(array('customer/newRecipients')),array('success'=>'js: function(data) {
alert("new");
$("#dialog_gift").html(data);
$("#dialog_gift").dialog("option","title","Select Recipient");
}'));
and in the other form i have the ajax button like,
echo CHtml::ajaxSubmitButton(Yii::t('New','New Recipient'),CHtml::normalizeUrl(array('customer/addRecipients')),array('success'=>'js: function(data) {
alert("select");
$("#dialog_gift").html(data);
$("#dialog_gift").dialog("option","title","Select Recipient");
//$("customer-form_inner").attr("action","'.CHtml::normalizeUrl(array('customer/newRecipients')).'")
}'));
And the CJUIDialog looks like,
$this->beginWidget('zii.widgets.jui.CJuiDialog', array(
'id'=>'dialog_gift',
// additional javascript options for the dialog plugin
'options'=>array(
'title'=>$title,
'autoOpen'=>false,
'modal'=>true,
'scrolling'=>'no',
'resizable'=>false,
'scrollable'=>false,
'closeOnEscape' => true,
),
));
echo '<div class="span-24">';
echo $content;
echo '</div>';
$this->endWidget('zii.widgets.jui.CJuiDialog');
Ill be initially loading one forms content.
The first transition happens properly. But after i replace the html content the second transition to load the other view does not happen.
Please let me know if anyone can help.
Thanks
Try setting the 4th parameter of the renderPartial(string $view, array $data=NULL, boolean $return=false, boolean $processOutput=false)-function. By setting $processOutput to true, all necessary scripts (including those to enable ajax-button-functionality) will be included and executed.