Add XHR to a Javascript Function - javascript

When I execute the following code, a GET message appears in the Firebug Console however the variable is undefined, and I think that is due to the scope of the variable being limited to the function only.
My goal is to be able to click the table row, and upon clicking the table row, fetch some data from the server related to the record in the table, and then populate part (not all) of a web form, which I will then add more data to, and then submit the form (see image).
Here is the Javascript function which defines a variable called $id as the given rows' data-attribute ('recordID') which itself was been passed into the <tr> tag when the table was generated.
Javascript:
$(document).on('click', 'tr', function() {
//Get the ID from the row clicked
var $id = $(this).data('recordId');
//short-hand
$('#section2').load('data_entry_form.php?id='+id);
});
PHP snippet that includes the data-attribute:
<table = "all_aifs">
<tr>
<th><b>Document ID</b></th>
<th><b>Pubco Name</b></th>
<th><b>Filing Date</b></th>
<th><b>PDF</b></th>
</tr>
<?php foreach($result as $index => $row) : ?>
<tr data-recordId="<?=$row[fee_source_id];?>"
class="<?=$row["match"] ? "match" : "";?>">
<td><?php echo $row[fee_source_id]; ?></td>
<td><?php echo $row[company_name_per_sedar]; ?></td>
<td><?php echo $row[document_filing_date]; ?></td>
<td></td>
</tr>
<? endforeach;?>
</table>
Question: How can I have my web form contain some data related to the row I clicked? I think I need to use AJAX. Also, why is the variable "undefined" in the Console? I think I need it to be defined as the $id variable (which is the recordId).

The variable id is undefined because you never have defined it.
You only defined $id not id.

Related

how to get the td id in JavaScript

<table class="table" style="margin-bottom:0px!important">
<b>
<? if(!empty($channelBase['rep_ids']))
{
$s_id=$channelBase['id'];
$i=0;
$temp='';
$reps_channl=explode(",",$channelBase['rep_ids']);
foreach($reps_channl as $k)
{
$added_reps = $rep_names[$k];
if($i==0){
$temp.='<tr style="border-top:none;">';
}
$temp.="<td id='".$s_id."_".$k."' class='repclicked' style='border-top:none;'>$added_reps <a href='#' class='btn btn-xs btn-icon btn-circle ' onclick='delete_repid($k,$s_id);'><i class='fa fa-close'></i></a>
</td>";
$i++;
if($i==5)
{
$temp.='</tr>';
$i=0;
}
}
echo $temp;
}
?>
</b>
</table>
Here I have a td id with a number value. here I am getting confusion on how to get the td id in javascript. can anyone please help me.
Here is how you can get Ids of td inside table
for (let row of mytab1.rows)
{
for(let cell of row.cells)
{
console.log(cell.id)
}
}
<div id="myTabDiv">
<table name="mytab" id="mytab1">
<tr>
<td id="id_1">col1 Val1</td>
<td id="id_2">col2 Val2</td>
</tr>
<tr>
<td id="id_3">col1 Val3</td>
<td id="id_4">col2 Val4</td>
</tr>
</table>
</div>
Try this,
"<td id='".$s_id."_".$k."' onclick='alert(this.id);'></td>"
You are trying to mix PHP and javascript, which you can not do. Everything in PHP is separate from javascript and the two do not have access to identifiers from each other.
The reason is this:
PHP code is completely run BEFORE the page is loaded. Once the page is loaded completely in PHP, it is then sent to the browser where the javascript acts upon whatever the result of the PHP code was.
Try this:
on a page enter:
<pre>
<?php
$a = "1";
$b = "2";
print_r($a);
print_r($b);
?>
</pre>
Now load the page and right click on the page and go to "inspect " or "view source"
you will see that the source of the page has no php code and is only
<pre>12</pre>
This is because all PHP code is processed BEFORE the page is loaded, whereas javascript is processed AFTER the page is sent to the browser.
You have to do everything involving PHP Ids first and completely separate from javascript, and likewise javascript must be completely separate from PHP.
For your case you must make a separate request in order to modify an array in PHP and then either reload the page or use AJAX to load the updated data.
The type of action you are trying to accomplish is impossible the way you are trying to do it.

Writing the code correctly - Javascript [duplicate]

I came across a problem which I can't solve on my own!
I have a Table which is populated using PHP/MySQL something like
foreach($users as $user){
?> <tr id="<?php echo $user['fName'].
"-".$user['lName'];?>">
<td> <?php
echo $user['fName']." ".$user['lName'];
?> </td>
<?php
for ($i = 0; $i<$count+3; $i++){
?> <td><input class="accessCheck" id="<?php
echo $user['lName']."-".$pagesArray[$i];
?>" type="checkbox"></td>
<?php } ?>
</tr> <?php
}
As you can see table would look something like
fName lName | checkbox | checkbox | checkbox | mainCheckbox
What I need to do is to check/uncheck all checkboxes with mainCheckbox, is there a way to select all rows just from checking this mainCheckbox?
EDIT: How to find class when you select something like input, is there a way of finding a class for this? For example
$("input").click(function(){
});
Is there a way to find a class for this input?
Tyr this:
$('#all').on('click', function(){
$(':checkbox').prop("checked",$(this).is(':checked'));
});
http://jsfiddle.net/Dfzdh/
I think you would need to use jQuery
Look at the sibblings method.
Here is a question close to yours.
OnClick change all sibling table rows jQuery
I havent heard about any "onChange"-equivalent function in PHP yet

How I create a Read More button inside a table?

<?php $counter = 0 ?>
<table>
<?php foreach($attributes as $a): ?>
<tr>
<td><?php $a['name']?></td>
<td><?php $a['Price']?></td>
</tr>
<?php $counter++;
if ($counter > 3) ?> <!-- What to do here? -->
<?php endforeach; ?>
</table>
In a PHP Block like this, I would like to got a Read More button after three tr elements, and when I click the button show all the rest of elements...
Something to do with PHP?
No, it has nothing to do with php. You need JavaScript to implement this if you don't want to reload the whole page.
In PHP you could print the short and the long version into separate divs and then use the following JS-Code on the View-More-Button:
document.getElementById("shortId").style.display = "none";
document.getElementById("longId").style.display = "block";

function is not working if I put this into js folder

I have a add.ctp file, where I can add a multiple rows, and if I put addNumber function to app/webroot/js, then its not working, why?
My view file (add.ctp)
<table id="mytable">
<tr id="number0" style="display:none;">
<td><?php echo $this->Form->button(' - ',array('type'=>'button','title'=>'Click Here to remove this number')); ?></td>
<td><?php echo $this->Form->input('lisanumbrid', array ('name'=>'data[Kontaktid][lisanumbrid][0]')) ?></td>
</tr>
<tr id="trAdd"><td> <?php echo $this->Form->button('+',array('type'=>'button','title'=>'Click Here to add another number','onclick'=>'addNumber()')); ?> </td><td></td><td></td><td></td><td></td></tr>
</table>
<?php
echo $this->Form->end('Lisa');
?>
Adding multiple rows function(addNumber.js) is here app/webroot/js:
var lastRow=0;
function addNumber() {
$("#mytable tbody>tr#number0").clone(true).attr('id','lisanumbrid'+lastRow).removeAttr('style').insertBefore("#mytable tbody>tr#trAdd");
$("#lisanumbrid"+lastRow+" button").attr('onclick','removeNumber('+lastRow+')');
$("#lisanumbrid"+lastRow+" input:first").attr('numbrid','data[Lisanumbrid]['+lastRow+'][lisanumbrid]').attr({'id':'numbridlisaNumber'+lastRow,'name': 'data[Kontaktid][lisanumbrid]['+ lastRow +']'});
lastRow++;
}
function removeNumber(x) {
$("#lisanumbrid"+x).remove();
}
Jquery file is in the same folder like a function, and its echoed in C:\wamp\www\cakephp-2.5.6\app\View\Layouts\default.ctp
echo $this->Html->script('jquery-2.1.1.min.js');
If I put this addNumber function into add.ctp file and put into add.ctp
<?php echo $this->Html->script(array('jquery-2.1.1.min.js'));?>
then its working nice, put I dont want these into add.ctp file.
Thanks for helping !
Solution
Added <?php echo $this->Html->script('addNumber'); ?> in to add.ctp file, after </table>
Are you calling addNumber.js in your add.ctp?
You could call this js file in app\View\Layouts\default.ctp and then
echo $this->Html->script(addNumber.js);
or you can create a script tag inside add.ctp calling it:
$.getScript('/epedidos/app/webroot/js/addNumber.js');
By the way, check in your console on firebug (pressing F12 on your keyboard) if the error calling this function is not defined.
You have to add all javascript's files used in your view in the working order using script method of Html object in your header section or at the end of your ctp file.
For example:
I will suppose that you have not added jquery and your addnumber before, so at the end of your ctp file:
<?php echo $this->Html->script(array('jquery','addNumber')); ?>
Regard the order, i.e jquery must be before addNumber and both of them must be in webroot/js/

inserting popup window command in sql

I'm assigning popup window on my links but it doesn't work sorry i'm still learning about mysqli and javascript.
while($row = mysqli_fetch_array($result))
{
$id = $row['BapID'];
echo "<tr>";
echo "<th>" . "<a href=bapview.php?BapID=$id onlick='pop_up(this);'>View Full Info</a>" .
" | " .
"<a href=bapupdate.php?BapID=$id onlick='pop_up(this);'>Edit</a>" . "</th>";
My script
function pop_up(url){
window.open(url,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=1076,height=768,directories=no,location=no') }
The url that you want the pop-up window to point should be put as the parameter to your function call in your onclick handlers:
<a onclick="pop_up('bapupdate.php?<?php echo $id; ?>');">Edit</a>
As you can see at
https://developer.mozilla.org/en-US/docs/Web/API/Window.open
the first parameter to the window.open method is a string value for the url you want the opening window to point to. Your code was attempting to provide as that argument the actual reference to the link element on your page (that's what this will refer to in that context).
A couple of suggestions:
Don't be afraid to 'exit' (?>) PHP half way through a script. This will make it easier to read later on and allows you to write in pure HTML.
It looks like your missing you quotation marks around your href parameter. This likely won't cause issues but you never know. I would also recommend using the full url in your href and also as your pop_up() parameter (as suggested by #myesain)
<?php
while($row = mysqli_fetch_array($result)){
$id = $row['BapID']; ?>
<tr>
<th>
<a href=# onclick='pop_up("http://fullurl.com/bapview.php?BapID=<?php echo $id; ?>");'>View Full Info</a>
|
<a href=# onclick='pop_up"http://fullurl.com/bapupdate.php?BapID=<?php echo $id; ?>");'>Edit</a>
</th>
</tr>
<?php
//Rest of code
?>

Categories