How to update content (show/hide) with renderPartial Yii - javascript

How do I can update the content within the block "div" which is currently selected combo box?
I've created an action like this :
public function actionDetail()
{
$sql = "
SELECT
tbl_quotation_order.id_quo
, tbl_quotation_order.no_quo
, tbl_produk.nama_produk
, tbl_detail_quo.qty
, tbl_detail_quo.harga_indo_after
, tbl_detail_quo.harga_dolar_after
, tbl_pemasok.nama_pemasok
FROM
tbl_quotation_order
INNER JOIN tbl_detail_quo
ON (tbl_quotation_order.id_detil_quo = tbl_detail_quo.id_quo_fk)
INNER JOIN tbl_produk
ON (tbl_detail_quo.id_produk = tbl_produk.id_produk)
INNER JOIN tbl_pemasok
ON (tbl_produk.id_pemasok = tbl_pemasok.id_pemasok)
WHERE tbl_quotation_order.id_quo='20'";
$dataProvider=new CSqlDataProvider($sql);
$this->render('_detail',array(
'dataProvider'=>$dataProvider,
));
}
When accessed will result in the display :
I want to display a data table containing the data within :
<div id="detailQuo" style="display:none;">
</div>
My jQuery :
$(document).ready(function(){
$("#SelesOrder_id_quo").change(function() {
//Call controller and show the table
$("#detailQuo").show();
});
});
I need a solution to update a different view inside my div on a click event.
Thanks

HTML -
<div id="detailQuo" style="display:none;">
<?php $this->renderPartial('//<controllername>/_detail',array('pageload'=>true)); ?>
</div>
Controller function ->
public function actionDetail()
{
$sql = "
SELECT
tbl_quotation_order.id_quo
, tbl_quotation_order.no_quo
, tbl_produk.nama_produk
, tbl_detail_quo.qty
, tbl_detail_quo.harga_indo_after
, tbl_detail_quo.harga_dolar_after
, tbl_pemasok.nama_pemasok
FROM
tbl_quotation_order
INNER JOIN tbl_detail_quo
ON (tbl_quotation_order.id_detil_quo = tbl_detail_quo.id_quo_fk)
INNER JOIN tbl_produk
ON (tbl_detail_quo.id_produk = tbl_produk.id_produk)
INNER JOIN tbl_pemasok
ON (tbl_produk.id_pemasok = tbl_pemasok.id_pemasok)
WHERE tbl_quotation_order.id_quo='20'";
$dataProvider=new CSqlDataProvider($sql);
$this->renderPartial('_detail',array(
'dataProvider'=>$dataProvider,
));
}
_detail.php
detect page load on $pageload=true and load nothing - while load the stuff you need via ajax in the else case

Related

Multiple Delete/Update using php- Codeigniter Ajax

The console.log(response) returns the code of whole page in console when I inspect it in ajax . I have created a codeigniter project with MySQL as back end database . I have fetched content from table from database into table. Now I want to give option to user of mulitple delete. Please take it into account that I am not actually deleting value from table I am just turning status of of that row to inactive. It goes as :
If status= 0 : the row's data will be visible in table.
If status= 1:the row's data will not be visible in table.
I have given checkbox option in the table to select multiple checkbox.
Here is my javascript:
To check all the check boxes:-
<script language="JavaScript">
function selectAll(source) {
checkboxes = document.getElementsByName('sport');
for(var i in checkboxes)
checkboxes[i].checked = source.checked;
}
</script>
javascript to get value's from the checkboxes and send it to controller:
<script type="text/javascript">
function okay(){
var favorite = [];
$.each($("input[name='sport']:checked"), function(){
favorite.push($(this).val());
var txt=$(this).val();
});
for (var i = 0;i<favorite.length;i++) {
$.ajax({
url:('<?=base_url()?>/Repots/supervisor_muldel'),
type:'POST',
data:{'value_id':favorite[i]},
success:function(response)
{
console.log(response);
},
error:function(response)
{
console.log('nahi gaya');
},
});
//console.log(favorite[i]);
}
//alert("My favourite sports are: " + favorite.join(", "));
}
</script>
every check box is associate with particular values.
here the html button to call the fucntion:
<button onclick="okay();">Delete Selected</button>
Controller:Reports/supervisor_muldel:
//multiple delete supervisor
public function supervisor_muldel() {
$value_id = $this->input->post('value_id');
$selected_supervisor = array('supervisor_id' =>$value_id);
$staus=array('status'=>1);
$this->load->model('Entry_model');
$result = $this->Entry_model->supervisor_muldel($staus,$selected_supervisor);
}
Entry_model/supervisor_muldel:
//delete multiple supervisor
public function supervisor_muldel($staus,$condition)
{
$this->db->trans_start();
$this->db->where($condition)
->update('tbl_supervisor',$staus);
$this->db->trans_complete();
}
The console.log returns the code of whole page in console.I am stuck here.
You have put wrong ajax request URL.
Change
url:('<?=base_url()?>/Repots/supervisor_muldel'),
to
url:('<?=base_url()?>/Reports/supervisor_muldel'),
Look at the controller name in URL.

Automatic scrolling when clicking my submit button

So on my custom module that I've created, there's a submit button (form defined in php) but it already acquires an action where it calls a callback function to trigger the display of some information regarding a certain barcode right below it.
All I want to do is add some code that will allow my submit button to also trigger an automatic scroll down without a link/anchor (because I want the SUBMIT BUTTON to acquire that action, not another link) so that the user doesn't have to scroll down to view the information.
The reason I'm avoiding the link/anchor option is because I just dont want to have a separate entity that needs to be clicked in order to scroll down. I want the scroll to happen right when i click my submit button. Unless a link can be combined with a button? Thanks!
My PHP submit button form:
//submit button that uses ajax (to display whats in callback)
$form['submit_button'] = array(
'#type'=> 'submit',
'#value'=> t('Submit'),
'#ajax' => array( //no need to refresh the page bc ajax
'callback' => '_ibbr_inv_after_callback', //callback
),
'#suffix' => "<div id='after_div'><br></div>
<div id='after_status'></div>",
);
return $form;
My PHP callback function:
//function for submit button callback
function _ibbr_inv_after_callback($form, $form_state) {
$selector = '#after_div';
$commands = array();
$query = new EntityFieldQuery();
$entities = $query->entityCondition('entity_type', 'node')
->propertyCondition('type', 'eq')
->propertyCondition('title', $form_state['input']['barcode'])
->propertyCondition('status', 1)
->range(0,1)
->execute();
//If this barcode is found in database
if (!empty($entities['node'])) {
$node = node_load(array_shift(array_keys($entities['node'])));
//Load fields from returned equipment item
$room = taxonomy_term_load($node->field_eq_room['und'][0]['tid']);
$desc = $node->field_eq_description['und'][0]['value'];
$manu = $node->field_eq_mfr['und'][0]['value'];
$model = $node->field_eq_modelno['und'][0]['value'];
$serial = $node->field_eq_serial['und'][0]['value'];
//displaying all the components of the specific barcode
$info = "<div id='after_div'><b>Title</b>: $node->title<br>
<b>Description</b>: $desc<br>
<b>Manufacturer</b>: $manu<br>
<b>Room</b>: $room->name<br>
<b>Model Number:</b> $model<br>
<b>Serial Number:</b> $serial<br></div>";
//Displaying the Confirm and Flag buttons
$commands[] = ajax_command_replace($selector, $info);
$commands[] = ajax_command_replace("#after_status", "<div id='after_status'> <button id = 'confirm' type = 'submit' name = 'Confirm' value = 'Confirm'> Confirm</button><button id = 'Flag' type = 'submit' name = 'flag' value = 'flag'>Flag </button> </div>");
//$commands[] = ajax_command_invoke("#after_div", 'animate', array("{scrollTop: top}",1000));
//If this barcode is not found in the database
}else {
//Displaying the Add button and "Item not found" ONLY IF this entity is empty (meaning barcode was not found in database)
$commands[] = ajax_command_replace($selector, "<div id = 'after_div'>Item not found.</div>");
$commands[] = ajax_command_replace("#after_status", "<div id='after_status'><button id = 'add' type = 'submit' name = 'Add' value = 'Add'>Add new item</button></div>");
}
return array('#type' => 'ajax', '#commands' => $commands);
}//end _ibbr_inv_after_callback
With javascript you can make your submit button to jump to any HTML element on the page, without link/anchor. Next example has two buttons, when clicked, buttons will scroll down to different points of the page :
<html>
<head>
<script type="text/javascript">
function godown ()
{ document.getElementById("down").scrollIntoView(); // JUMP TO DIV "DOWN".
}
function gobottom ()
{ document.getElementById("bottom").scrollIntoView(); // JUMP TO DIV "BOTTOM".
}
</script>
</head>
<body>
<button onclick="godown()">Click to go down</button>
<button onclick="gobottom()">Click to go bottom</button>
<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0<br/>
<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0<br/>
<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0<br/>
<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0<br/>
<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0<br/>
<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0<br/>
<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0<br/>
<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0<br/>
<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0<br/>
<div id="down">You are down!</div>
<br/>a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>i<br/>j<br/>
<br/>a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>i<br/>j<br/>
<br/>a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>i<br/>j<br/>
<br/>a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>i<br/>j<br/>
<br/>a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>i<br/>j<br/>
<br/>a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>i<br/>j<br/>
<br/>a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>i<br/>j<br/>
<br/>a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>i<br/>j<br/>
<br/>a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>i<br/>j<br/>
<div id="bottom">You are at the bottom!</div>
</body>
</html>
You just insert your information inside a <div> (or a table, or anything you want), give it an "id", and you will be able to scroll down to it with javascript method ".scrollIntoView()".
Copy/paste previous code in a file and save it as HTML, then open it in your browser.
Edit #1 : add some javascript code with PHP right after you fill "after_div" :
$info = "<div id='after_div'><b>Title</b>: $node->title<br>
<b>Description</b>: $desc<br>
<b>Manufacturer</b>: $manu<br>
<b>Room</b>: $room->name<br>
<b>Model Number:</b> $model<br>
<b>Serial Number:</b> $serial<br></div>" .
"<script type='text/javascript'>" .
"document.getElementById('after_div').scrollIntoView();" .
"</script>";
Edit #2 : replace this line :
$commands[] = ajax_command_replace($selector, "<div id = 'after_div'>Item not found.</div>");
by this next one :
$body = "<div id = 'after_div'>Item not found.</div>" .
"<script type='text/javascript'>" .
"document.getElementById('after_div').scrollIntoView();" .
"</script>";
$commands[] = ajax_command_replace($selector, $body);

radio button list with text option cakephp

I am new to CakePHP. I need to make a form with radio buttons and the last one is "other" where the user can type in an answer in a text box.
Is there any way FormHelper can do this that's built in?
One way I was going to do was create a radio list and a text field. When "other" is selected Javascript will show the text field. For this I don't understand how to use any other variables besides the fields in the database. How does one create a variable from a model that can be accessed from a view and the value returned for processing?
For the model I have:
class User extends AppModel {
/**
* Display field
*
* #var string
*/
public $displayField = 'title';
var $sourceOther = ' ';
var $passwordRepeat = ' ';
public function beforeSave($options = array()) {
if (isset($this->data[$this->alias]['password'])) {
$this->data[$this->alias]['password'] = sha1(
$this->data[$this->alias]['password']);
}
// $this->data[$this->alias]['created']= CakeTime::gmt();
// $this->data[$this->alias]['updated']= CakeTime::gmt();
$this->data[$this->alias]['username']= $this->data[$this->alias]['email'];
return true;
In the view I have
echo $this->Form->input('mobilePhone',array(
'label'=>'Mobile or fixed phone with no spaces'));
echo $this->Form->input('alternatePhone');
echo $this->Form->input('leadSource', array(
'options'=>array('Google'=>'Google','OnlineAd'=>'Online Ad',
'Printed Media'=>'Printed Media','LetterDrop'=>'Letter Drop',
'Other'=>'Other (specify text)'),
'empty'=>'(choose one)'));
echo $this->Form->input($this->sourceOther);
...but it doesn't like sourceOther, the variable in the model. How do I get data from the view (the text box) into the user model so beforeSave can do something with it?
Thanks.
Thanks.
Sorted it out after reading "Cake PHP Application Development". It works for Cake 2.x and 1.2 (as used in the book).
In your view put:
echo $this->Form->input('sourceOther');
Then in the model you can access your variable with:
$this->data['User']['sourceOther'];
For example, use it to save "other" text field in beforesave:
public function beforeSave($options = array()) {
if (isset($this->data[$this->alias]['password'])) {
$this->data[$this->alias]['password'] = sha1(
$this->data[$this->alias]['password']);
}
$this->data[$this->alias]['username'] = $this->data[$this->alias]['email'];
$this->data[$this->alias]['activation'] = md5(uniqid(rand(), true));
if ($this->data[$this->alias]['leadSource'] == 'Other') {
$this->data[$this->alias]['leadSource'] =
$this->data['User']['sourceOther'];
}
return true;
}

Get Select option value via JS & Set Array Index

I have a select element which I need to retrieve the value of selected option and then set an array's index to that value. I need this to happen on page load and whenever select is updated.
It looks something like:
{{ Form::select('marketplace_id', $donation_options, '', array('data-smart-select', 'required', 'id' => 'marketplace_id')) }}
<span id="market_hint" class="help-block">{{ $marketplaces[0]['example'] }}</span>
The select ID is marketplace_id
The array is $marketplaces and it's a multi-dimension array with the second value always being ['example'] but the first value being the value of the select which is always a number such as 0,1,2,3,etc.
By current javascript can retrieve the value of the select:
$( "#marketplace_id" ).val();
But I am not sure how to proceed to update the array inside the market_hint span tag. Is there a simple method with jQuery?
If you want to go the route of putting the whole array into javascript when php renders the page
?>
<script>
$(function(){
var myData = <?php echo json_encode( $marketplaces ); ?>
$("#marketplace_id").change(function(){
var value = $(this).val();
$("#market_hint").html(myData[value]["example"]);
});
//do a call here to do an initial setting of the span
$("#marketplace_id").change();
});
</script>
Otherwise you will have to do an ajax request to a script that will give you the data
$(function(){
$("#marketplace_id").change(function(){
var value = $(this).val();
$.get("someScript.php?theIndex="+value)
.done(function(response){
$("#market_hint").innerHTML = response;
});
});
});
someScript.php
<?php
$index = isset($_GET["theIndex"]) ? intval($_GET["theIndex"]) : 0;
//do some processing to get the needed data
//...
echo $data;
die;
Of course tailor it to fit in with your laravel framework, just used plain php as I do not overly know laravel

Codeigniter ajax call does not work properly

For example if I click 'vote up' button it successfully adds vote for the first post and displays the result in span element with class="rate_votes", but it also displays the same result in all the span elements with same class because of the following line:
$(".rate_votes").text(rate); //
How can I avoid that?
If I use
$(this).text(rate); //
it will not work properly because it does not know which span element to select. Could you help me please.
Here is my view:
<div>
<?php
foreach($results as $row){
$id = $row['id'];
$rate = $row['rate'];
?>
<div>
<?php
$data = array(
'name' => $id,
'class' => 'rate',
'content' => 'Vote Up'
);
echo form_button($data);
?>
<span class="rate_votes" >
<?php echo $rate; ?>
</span>
</div>
</div>
Here is my JS file:
$(document).ready(function() {
$(".rate").click(function(){
var self = this;
$(self).attr("disabled", true);
var id_like = $(self).attr("name");
$.post('filter/get_rate', { id_like: id_like }, function (data) {
var my_obj = data;
$.each(my_obj, function (i) {
var rate = my_obj[i].rate;
$(".rate_votes").text(rate); //
$(self).text("Voted!");
});
}, "json");
});
});
This has nothing to do with codeigniter :)
You bind the click event to an ID, #rate but that ID appears multiple times.
$data = array(
'name' => $id,
'id' => 'rate',
'content' => 'Vote Up'
);
echo form_button($data);
use a class instead.
When you select an ID that appears multiple times, only the first one is selected, thus only the first button works.
EDIT
Your comment sounds a bit strange, Given this code for example :
HTML:
<div class="foo">Foo</div>
<div class="foo">Foo</div>
<div class="foo">Foo</div>
<div class="foo">Foo</div>
Javascript/Jquery
$('.foo').click(function() { $(this).remove() });
The above code only removes the specific div being clicked, That is the event is only fired once and for that element only.
Doublecheck your javascript.
You have used:
$("#rate").click(function(){...})
Here "#rate" is an id and an id must be unique, use class like .rate. If you have multiple elements with same id on the page then only the first element of the page will be counted. So the following code is registering the click handler only on the first element with id rate:
$("#rate").click(function(){
//...
});
Give your elements a class instead, for example:
<button class='rate'>Rate</button>
<button class='rate'>Rate</button>
So this code will work on every button click:
$(".rate").click(function(){
var id_like = $(this).attr("name");
$(this).attr("disabled", true); // disables the current button
$('.rate').attr("disabled", true); // disable all the buttons with class rate
//...
});

Categories