I have a several tables delivered via PHP loop to my page. At the end of each PHP loop an if statement is run (which is evaluating true) like this:
if ($ssstatus[0] == 'F'){
echo "<script>";
//echo "alert('We are in this loop');";
echo "flagfinished(".$gameID.");";
echo "</script>";
}
My flagfinished function is this:
function flagfinished(tableid){
//alert("Made it to the function!");
var myid = "table"+tableid;
//alert(myid);
var testel = document.getElementById(myid);
testel.setAttribute("border-style","solid");
};
I'm not sure why this isn't working. I can say that my id attribute on the table is properly set and matches the variable myid. I've even tried just putting in the text of a single id attribute instead of myid and still no luck. I've also manually added the "border-style" attribute to my css and it works. Maybe I am going about this in the wrong way entirely. Or maybe I am overlooking something obvious. I've been working on this for hours! Thanks for any ideas or help!
testel.style.borderStyle = "solid";
The border-style that you are trying to define is not an element attribute. The attribute would be style. And border-style would be a value of the style attribute.
So, in your line of thinking:
var testel = document.getElementById(myid);
testel.setAttribute("style", "border-style: solid");
But, Javascript DOM already takes care of the style attribute for you, so you can go:
var testel = document.getElementById(myid);
testel.style.bordeStyle = "solid";
Follows MDN HtmlElement.style docs
Why are u trying to call flagFinished with javascript anyway? You could do the same with php. Add a css class to the table before sending it to the browser ( echoing / printing out ) and then let css do it's magic? Then you wouldn't have to send all these extra tags to client, which makes the page load faster, and would be a better solution to use.
you could do something like:
<?php
$tables = [
['data' => [
['id' => 1, 'content' => 'sample content'],
['id' => 2, 'content' => 'sample content jabadabaduuu...'],
['id' => 3, 'content' => 'test 1123123123'],
['id' => 4, 'content' => 'sample content']
],
'status' => 'F'
],
['data' => [
['id' => 1, 'content' => 'sample content'],
['id' => 2, 'content' => 'sample content jabadabaduuu...'],
['id' => 3, 'content' => 'test 1123123123'],
['id' => 4, 'content' => 'sample content']
],
'status' => 'S'
],
['data' => [
['id' => 1, 'content' => 'sample content'],
['id' => 2, 'content' => 'sample content jabadabaduuu...'],
['id' => 3, 'content' => 'test 1123123123'],
['id' => 4, 'content' => 'sample content']
],
'status' => 'F'
]
];
foreach ($tables as $table) {
?>
<table id="<?= myUniqueTableIdGeneratorFunction() ?>"
class="<?= ($table['status']) == 'F' ? 'class-with-border' : null ?>" ><?php
foreach ($table['data'] as $row) {
?>
<tr>
<td><?= $row['id'] ?></td>
<td><?= $row['content'] ?></td>
</tr>
<?php
}
?></table><?php
}
?>
I havent test this, just wrote this from the top of my head quickly.
Related
I'm trying to put a value from javascript into a form action in Yii2
is it possible?
More specifically I need to make a URL change for each option that is selected in a dropdownList.
form in views/site.php
$form = ActiveForm::begin([
'id' => 'form',
'method' => 'POST',
'action' => Url::to(['programas/'.Tours::findOne(['pk' => ])->programa]),
]);
<?= $form->field(new \app\models\Tours(), 'nombre')->dropDownList([],
[
'prompt' => 'Programa',
'id' => 'child1_child2',
'onchange' => 'updateValue(this.value)',
]
)->label(false); ?>
Js file
function updateValue(val){
x = document.getElementById("test").value;
// document.getElementById("form").action = "programas/";
}
So, I rescue the value from the selected option with JS but I need to put it in here 'pk' => 'value'
where value is the #child1_child2 selected option value.
'action' => Url::to(['programas/'.Tours::findOne(['pk' => ])->programa])
Thanks for the help.
You can use one of the following approach with some modification:
//pk => programa
$data = [
1 => 'programa1',
2 => 'programa2',
3 => 'programa3',
];
1) Use JS
<?= $form->field(new \app\models\Tours(), 'nombre')->dropDownList($data, ['prompt' => 'Programa'])->label(false); ?>
JS
$this->registerJs('
$("#dropdownID").change(function() {
var text = $("#dropdownID option:selected").text();
$("#formID").attr("action", "/pathtoproject/programas/" + text);
});
', \yii\web\View::POS_END);
2) Use Ajax Call
<?= $form->field(new \app\models\Tours(), 'nombre')->dropDownList($data, [
'prompt' => 'Programa',
'onchange'=> '$.get( "'.Url::toRoute('get-action').'", { id: $(this).val() } )
.done(function( data ) {
$("#formID").attr("action", data);
}
);'
])->label(false); ?>
Controller
public function actionGetAction($id)
{
$name = Tours::findOne(['pk' => $id])->programa];
echo \yii\helpers\Url::to(['programas/'.$name]);
}
I have an h4 tag and a button. The button opens a modal with a GridView whose action column contains a button in order to select the row.
What I need the row button to do is closing the modal and populate the h4 tag with "Row 3 was selected", for instance. But I don't want the page to be reladed.
This is the parent page tag and button:
<h4>*</h4>
<?
echo Html::button('Explotación', [
'value' => Url::to('/explotaciones/seleccionar'),
'class' => 'btn btn-primary',
'id' => 'modalButton'
]);
Modal::begin([
'header' => 'Seleccionar Explotación',
'id' => 'modal',
'size' => 'modal-md'
]);
echo "<div id= 'modalContent'></div>";
Modal::end();
?>
The action column in the modal:
[
'class' => 'yii\grid\ActionColumn',
'template' => '{seleccionado}',
'buttons' => [
'seleccionado' => function ($url, $model) {
return Html::a('<span class="glyphicon glyphicon-chevron-right"></span>', '#', [
'id' => 'seleccionado_' . $model->exp_id,
'class' => 'seleccionado',
'data-fila' => $model->exp_id
]);
}
]
]
Registering the javascript in the modal:
<?
$assets_js = Yii::$app->assetManager->publish(__DIR__ . '/js');
$this->registerJsFile($assets_js[1] . '/seleccion.js', [
'depends' => [
'app\assets\AppAsset'
]
]);
?>
And the javascript itself:
(function($){
$(document).ready(function() {
$('.seleccionado').click(function(evento) {
var value = 'HELLO';
alert(value);
value = $(this).data("fila");
alert(value);
$('h4').html(value);
$('#modal').modal('hide');
});
});
})(jQuery);
The code prints the HELLO alert but it does not print the second one nor poupulates the h4 tag nor closes the modal.
Which is the right way to make this work?
Erasing the cache in order to reload javascript changes correctly did the trick. Thanks anyway.
Ok, So I am trying to implement sort of a livesearch using the cake's Js Helper. The user will select a criteria to search by, using a drop down, and then tyoe in his search in an input text field. So far, this is what I have.
echo $this->Form->create(false,array('type'=>'post','default'=>false));
echo $this->Form->input('criteria',array(
'label'=>'Search Criteria',
'options' => array(
'id'=> 'By ID',
'name' => 'By Name',
'blood' => 'By Blood Type',
'type' => 'By Donor Type',
'age' => 'By Age',
'gender' => 'By Gender'
)
));
?>
Here is the input:
<?php echo $this->Form->input('query', array('type' => 'text', 'id' => 'query', 'name' => 'query', 'label' => false, 'placeholder' => 'Search')); ?>
<div id="loading" style="display: none; ">
<?php echo $this->Html->image('ajax_clock.gif');?>
</div>
And this is my Js code generated using the helper!
<script type="text/javascript">
<?php
echo $this->Js->get('#query')->event('keyup',$this->Js->request(
array('controller' => 'donors', 'action' => 'search'),
array('update'=>'#results','async' => true,'dataExpression' => true,'method' => 'post','data'=>'$(\'#query,#criteria\').serializeArray()')
),false);
?>
</script>
The above Js should grab the values of the criteria drop down aswell as the value inside the input field , on the keyup event. That said, I thought it was better to encode the data, and found the serializeArray method in the doc, which should do just that (I think..)
Now, my problem is I do not know how to retrieve that serialized data from the action receiving the request. So far I have this
function search() {
if($this->request->is('post')){
$data = $this->request->input('json_decode');
}
}
So basically, I want to know how to access the data from the search action, as well as, I tried to echo the $data variable, and die($data), but I do not know where the debugging info is displayed. Any help regarding both my questions would be MUCH appreciated! thanks!
I'm trying to do 3 selects in cakePhp + jQuery first one with provinces, second - localities, third - schools in that place. Here is my cake code (so far):
echo $this->Form->input('proviences', array(
'type' => 'select',
'empty' => true,
'options' => $proviences,
'label' => 'Province',
'class' => 'proviences',
'before' => '<div style="float:left;width:180px"',
'after' => "</div>"
));
echo $this->Form->input('localities', array(
'type' => 'select',
'empty' => true,
'options' => $localities,
'label' => 'City',
'class' => 'localities',
'before' => '<div style="float:left;width:180px"',
'after' => "</div>"
));
$schoolList = array();
foreach($schools as $value) {
$schoolsList[]=$value['name'];
}
echo $this->Form->input('school_id', array(
'label' => 'Szkoła',
'options' => $schoolsList,
'empty' => true,
'before' => '<div style="float:left;width:240px"',
'after' => "</div>",
'onchange' => "submit();",
));
In $schools i have a list looking this way
array(
id1 => array(
'name' => 'some_name',
'province' => 'some_province',
'locality' => 'some_city'
)
)
and using this to get lists of provinces,localities and school names
I was trying to use this but couldn't get it working ;/
Filter three select boxes based on previous selections
Is there a way of doing it in jQuery without ajax?
you can do it without using ajax, but for that you would need the schools array on client side, and create/edit options based on that on the client side, too.
here is a working fiddle. (hastily thrown together, but you get the idea). You need to get the schools array into js, though. you could either use AJAX for that or, pass it as json on the page:
echo 'var schools = JSON.parse('.json_encode($schools).');
You have to think about where to place that, too, so that the variable doesn't leak into the global scope. you could put it in the jQuery closure, for example:
echo '(function($){';
echo 'var schools = JSON.parse('.json_encode($schools).');
// now the javascript from the fiddle...
echo '}(jQuery))';
Image link in the cakephp is not working
$this->Html->link(
$this->Html->image('image',array('class' => $class,
'id' =>'img_id' )), somelink, array('onclick' =>'jQuery(this).modal({width:600,height:400,left:120,top:100}).open(); return false;'),
array(),
array('escape'=>false));
it will output
<a href='link' onclick='jQuery(this).modal({width:600,height:400}).open(); return false;'> < img src='image_path' >
it is not escaping < and > even if i mention escape=>false, but i am not getting where i am missing?
You have too many arguements. Try this:
echo $this->Html->link(
$this->Html->image('image',array('class' => $class,
'id' =>'img_id' )), 'foo', array('escape'=>false, 'onclick' =>'jQuery(this).modal({width:600,height:400,left:120,top:100}).open(); return false;')
);
echo $this->Html->link(
$this->Html->image('image',array('class' => $class,
'id' =>'img_id' )), '#', array('escape'=>false, 'onclick' => 'jQuery(this).modal({width:600,height:400,left:120,top:100}).open(); return false;','class'=>'linkclass'));