How to implement javascript into php file - javascript

I have this code and i want to implement the java script below into this php code, I need to excute javascript even this php called from index.php
any help please
<script type = "text/javascript">
$('.estudent_id').click(function(){
$student_id = $(this).attr('name');
$('#edit_query').load('load_edit1.php?student_id=' + $student_id);
});
});
</script>
Check_data.php
<table id = "table" class = "table table-bordered">
<?php
$dtpickerdate = isset($_POST['dtpickerdate']) ? $_POST['dtpickerdate'] : NULL;
$q_customer = $conn->query
("SELECT * from orders inner JOIN customer_order on customer_order.order_no =orders.order_no and orders.date like'$dtpickerdate' inner join driver_order on driver_order.order_no=orders.order_no LEFT JOIN customer on customer.phone=customer_order.phone order by k_time,time desc" )
or die(mysqli_error());
$k_time = '';
while($f_customer = $q_customer->fetch_array()){
$s=mysqli_num_rows($q_customer);
?>
<tr>
<?php
if($k_time == '' || $k_time != $f_customer['k_time']){
$k_time = $f_customer['k_time'];
echo '<td align="center" > <span style=" font-weight:bold;">'
.$f_customer['k_time']. '</td>';
} else{
echo "<td td style=' border: none;'> </td>";
}
echo "<td style='background-color: #5f5d5d; ' align='center' span style='font-weight:bold;'> <a href = '#' style='color:#ececec;font-weight:bold;' data-toggle = 'modal' data-target = '#action'>".$f_customer['order_no']."</a></td>";
echo "<td style='background-color: #5f5d5d;color:#ececec;'>" .$f_customer['first_name']."</td>";
echo "<td style='background-color: #5f5d5d;color:#ececec;'>".
}

Just add script outside php as you do in html.
For Ex. in your code put something like this .
This might be helpful...
<script type = "text/javascript">
$('.estudent_id').click(function(){
$student_id = $(this).attr('name');
$('#edit_query').load('load_edit1.php?student_id=' + $student_id);
});
</script>
<table id = "table" class = "table table-bordered">
<?php
$dtpickerdate = isset($_POST['dtpickerdate']) ? $_POST['dtpickerdate'] : NULL;
$q_customer = $conn->query
("SELECT * from orders inner JOIN customer_order on customer_order.order_no =orders.order_no and orders.date like'$dtpickerdate' inner join driver_order on driver_order.order_no=orders.order_no LEFT JOIN customer on customer.phone=customer_order.phone order by k_time,time desc" )
or die(mysqli_error());
$k_time = '';
while($f_customer = $q_customer->fetch_array()){
$s=mysqli_num_rows($q_customer);
?>
<tr>
<?php
if($k_time == '' || $k_time != $f_customer['k_time']){
$k_time = $f_customer['k_time'];
echo '<td align="center" > <span style=" font-weight:bold;">'
.$f_customer['k_time']. '</td>';
} else{
echo "<td td style=' border: none;'> </td>";
}
echo "<td style='background-color: #5f5d5d; ' align='center' span style='font-weight:bold;'> <a href = '#' style='color:#ececec;font-weight:bold;' data-toggle = 'modal' data-target = '#action'>".$f_customer['order_no']."</a></td>";
echo "<td style='background-color: #5f5d5d;color:#ececec;'>" .$f_customer['first_name']."</td>";
echo "<td style='background-color: #5f5d5d;color:#ececec;'>".
}

You can echo the JS like:
<?php echo "<script type='text/javascript'>$('.estudent_id').click(function() {$student_id = $(this).attr('name');$('#edit_query').load('load_edit1.php?student_id=' + $student_id);});});</script>"; ?>

Echoing the javascript at the right place in your PHP file(s) should work:
<?php echo "<script type = 'text/javascript'>$('.estudent_id').click(function(){$student_id = $(this).attr('name');$('#edit_query').load('load_edit1.php?student_id=' + $student_id);});</script>"; ?>
If you want this javascript in multiple files, you could save the contents above as a PHP file, for example myscript.php and then include it in every file where you want the code to appear and run using this:
<?php include('myscript.php'); ?>

Related

How to implement javascript into non direct php page

I wish anybody help me here, its very big problem for me.. I want to implement javascript into check_data.php but this is can't be done maybe becuase this page doesn't appear in the browser, index.php display table from check_data.php but for some reasons i need to implement javascript into check_data.php any help?
index.php:
<input type= "text" name= "datepicker" id="datepicker" class="form-control" />
</div>
<script>
$('#datepicker').change(function () {
$.post('check_data.php', {
dtpickerdate : $(this).val()
}, function (response) {
$('table').html(response);
});
});
$("#datepicker").datepicker({dateFormat: "mm-dd-yy",})
.datepicker("setDate", new Date()).change();
</script>
Check_data.php
<table id = "table" class = "table table-bordered">
<thead class = "alert-info">
<tr>
<th>Kitchen Time</th>
<th>Order#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
<th>Driver#</th>
<th>Delivery Time</th>
<th># of People</th>
<th>Miles</th>
</tr> </thead><tbody>
<?php
$dtpickerdate = isset($_POST['dtpickerdate']) ?
$_POST['dtpickerdate'] : NULL;
$q_customer = $conn->query("SELECT * from orders inner
JOIN customer_order on
customer_order.order_no =orders.order_no
and orders.date like'$dtpickerdate' inner join
driver_order on
driver_order.order_no=orders.order_no
LEFT JOIN customer on
customer.phone=customer_order.phone
order by k_time,time desc" )
or die(mysqli_error());
$k_time = '';
while($f_customer = $q_customer->fetch_array()){
$s=mysqli_num_rows($q_customer);
?>
<tr>
<?php
if($k_time == '' || $k_time != $f_customer['k_time']){
$k_time = $f_customer['k_time'];
echo '<td align="center" > <span style=" font-weight:bold;">'
.$f_customer['k_time']. '</td>';
} else{
echo "<td td style=' border: none;'> </td>";
}
echo "<td style='background-color: #5f5d5d; ' align='center' span style='font-weight:bold;'> <a href = '#' style='color:#ececec;font-weight:bold;' data-toggle = 'modal' data-target = '#action'>".$f_customer['order_no']."</a></td>";
echo "<td style='background-color: #5f5d5d;color:#ececec;'>" .$f_customer['first_name']."</td>";
echo "<td style='background-color: #5f5d5d;color:#ececec;'>". $f_customer['last_name']."</td>";
echo "<td style='background-color: #5f5d5d;color:#ececec;'>". $f_customer['address']."</td>";
echo "<td style='background-color: #5f5d5d;color:#ececec;'>". $f_customer['driver_no']."</td>";
echo "<td style='background-color: #5f5d5d;color:#ececec;'>". $f_customer['d_time']."</td>";
echo "<td style='background-color: #5f5d5d;color:#ececec;'>". $f_customer['no_ofppl']."</td>";
}
Looks like you are trying to load the HTML into the page via ajax.
You can try jQuery.load():
page.php
$('table').load('check_data.php');
Edit: It seems like you are confused about the difference between JavaScript and PHP, and when/how to use each. However, to answer your question, you could put additional JavaScript into another file, and load that as well.
page.php
$('table').load('check_data.php', function() {
$.getScript('alert.js');
});
alert.js
alert('hi');

How can i Hide and Show Submit button when one is button is clicked

i am retrieving some data from database and show them in a html table.but right now i am struggling with the following scenario.
if user clicks disable button it should be hide and enable button should be show.if user clicks on enable button it should be hide and disable button should be show.
Here is my code
<html>
<title></title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$('input:submit').click(function(){
$('input:submit').attr("disabled", true);
});
</script>
</head>
<body>
<?php
echo "<table border='1' align='center' width='100%'>
<tr>
<th>ID</th>
<th>Image</th>
<th>Modified Date</th>
<th>URL</th>
<th>Clicks</th>
<th>Status</th>
<th>Action</th>
</tr>";
while($row = mysqli_fetch_array($query))
{
$id = $row['img_id'];
echo "<tr>";
echo "<td align='center'>" . $row['img_id'] . "</td>";
echo "<td align='center' width='500px'>" . '<img width = 200px; height=100px; src=" '. ($row['img_path']) . '"/>'. "</td>";
echo "<td align='center' width='350px'>" . $row['date'] . "</td>";
echo "<td align='center'>" . $row['url'] . "</td>";
echo "<td align='center'>" . $row['clicks'] . "</td>";
echo "<td align='center'>" . $row['status'] . "</td>";
echo "<td align='center'><a href='image_update.php?id=$id'><button>Update</button></a>
<form method='post' >
<input type='hidden' name='tid' value='$id'/>
<input type='submit' name='disable' id='disable' value='Disable'>
<input type='submit' name='enable' id='enable' value='Enable'>
</form>
</td>";
$id = $_POST['tid'];
if($_SERVER['REQUEST_METHOD']=='POST') {
$sql = "UPDATE advertisementnew SET status = 'Disabled' WHERE img_id='$id'";
mysqli_query($con, $sql);
}
echo "</tr>";
}
echo "</table>";
try this js:
$('#enable').css("display", "none");
$('#disable').click(function(){
$('#enable').css("display", "block");
$('#disable').css("display", "none");
});
instead of:
$('input:submit').click(function(){
$('input:submit').attr("disabled", true);
});
can you try this hope this is works
<script type = "text/javascript" >
$('input:submit').click(function () {
var check = $(this).attr('id');
if (check == 'disable') {
$('#enable').show();
$('#disable').hide();
}
if (check == 'enable') {
$('#disable').show();
$('#enable').hide();
}
});
</script>
You can have class
.hide-show{
display : none;
}
HTML :
<input type='submit' name='disable' id='disable' value='Disable' class="enable-disable-btn">
<input type='submit' name='enable' id='enable' value='Enable' class="enable-disable-btn hide-show">
Initially put the hide-show class on the button which should be need to hide.
Add class enable-disable-btn to both button enabled/disbaled
JS:
You can use jQuery#toggleClass
$(".enable-disable-btn").on('click',function(){
$(".enable-disable-btn").toggleClass('hide-show')
})
You need to add unique id dynamically created in while loop in your case id is not unique
for this
changes in php replace these two lines
<input type='submit' onclick='doEnableDesable(this)' name='disable' id='disable".$id."' value='Disable'>
<input type='submit' onclick='doEnableDesable(this)' name='enable' id='enable".$id."' value='Enable'>
And in javascript define function for dynamic Id
function doEnableDesable(params)
{
if (params.value == 'disable') {
$('#'+params.id).show();
$('#'+params.id).hide();
}
if (params.value == 'enable') {
$('#'+params.id).show();
$('#'+params.id).hide();
}
}

Bootstrap contextual table based off certain variable

I set up a table that grabs information from a Mysql database and displays it quit nicely. However i would like the table "row" to change colors based off the aging of the account? Any simple easy ways of achieving this?
Home.php
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-striped table-responsive">
<tr class="header">
<td>Rep</td>
<td>Date</td>
<td>Name</td>
<td>P_O</td>
<td>Due Date</td>
<td>Terms</td>
<td>Aging</td>
<td>Open Balance</td>
</tr>
<?php
while($row = mysql_fetch_array($query)) {
$className ="";
if ($row['Aging'] >= 45)
{
$className="clsRedRow";
}
else if($row['Aging'] >= 25 && $row['Aging'] <= 44)
{
$className="clsYellowRow";
}
echo "<tr class='$className'>";
echo "<td>".$row[Rep]."</td>";
echo "<td>".$row[Date]."</td>";
echo "<td>".$row[Name]."</td>";
echo "<td>".$row[P_O]."</td>";
echo "<td>".$row[Due_Date]."</td>";
echo "<td>".$row[Terms]."</td>";
echo "<td>".$row[Aging]."</td>";
echo "<td>".$row[Open_Balance]."</td>";
}
?>
</table>
</div>
</div>
Try adding a class inline to the <tr> elements. Something like this:
<?php
while ($row = mysql_fetch_array($query))
{
$className = "";
if ($row['Aging'] < 50)
{
$className = "clsRedRow";
}
else
{
$className = "clsGreenRow";
}
echo "<tr class='$className'>";
echo "<td>" . $row[Rep] . "</td>";
echo "<td>" . $row[Date] . "</td>";
echo "<td>" . $row[Name] . "</td>";
echo "<td>" . $row[P_O] . "</td>";
echo "<td>" . $row[Due_Date] . "</td>";
echo "<td>" . $row[Terms] . "</td>";
echo "<td>" . $row[Aging] . "</td>";
echo "<td>" . $row[Open_Balance] . "</td>";
}
?>
Then, you'd need to have the proper styles set up in the HTML document (above the PHP script, not sure where the rest of your styles are set):
<style>
.clsRedRow{ background-color: red; }
.clsGreenRow{ background-color: green; }
</style>
I would probably add a class to the aging cells, and then iterate over them and check the value in a jQuery function to apply your styling based on the range the number falls in.
$("#some-table .aging").each(function() {
var age = $(this).html();
if (age <= 2) {
$(this).parent().css({"background-color" : "blue"});
} else if (age <= 5) {
$(this).parent().css({"background-color" : "yellow"});
} else if (age <= 8) {
$(this).parent().css({"background-color" : "red"});
}
});
Like this: http://codepen.io/jonathanrbowman/pen/epVBox

Calling a JavaScript function with argument from html form

I am trying to pass an argument to a JavaScript function getConfirmation() and my code is as follows. The call to function is not executed at all. So I guess I am going wrong with calling it. Please help.
<html>
<head>
<script type="text/javascript">
<!--
function getConfirmation(var value1)
{
var retVal = confirm("Pop Code:" + value1 + "\n" + "Amount:" + "" + "\n" + "Updated Balance:" + "" + "\nPlease confirm!");
if( retVal == true )
{
alert("User wants to continue!");
return true;
}else{
alert("User does not want to continue!");
return false;
}
}
//-->
</script>
<body>
<div align="center" style="width:100%; margin: 0px auto;">
<div align="center" style="width:100%; margin: 0px auto; background-color:f0f0f0">
<div id="child" style=" align="center" style="width:100%; margin:0px auto;" >
<div style=" right:5%; top:5%; z-index: 100; position:absolute;">
</div>
<img src = "images/header.png" width ="100%" />
</div>
</div>
<div align="center">
<?php
require 'config.php';
mysql_connect ($dbhost, $dbusername, $dbuserpass);
mysql_select_db($dbname) or die('Cannot select database');
$query = "SELECT * FROM cust_info;";
$result = mysql_query($query) or die(mysql_error());
echo "</br>";
echo "<table border='1'>
<tr>
<th>Pop Code</th>
<th>Open_Date</th>
<th>Maturity_Date</th>
<th>Amount</th>
<th>Balance</th>
<th>Col Amount</th>
</tr>";
while($row1 = mysql_fetch_array($result))
{
if ($row1['status'] == 'DONE')
{
continue;
}
echo "<div class=\"addform\"><form method='post' action=\"txn.php\">\n";
echo "<tr>";
echo "<td><input type='hidden' name='pop_code' value='".$row1['pop_code']."'>" . $row1['pop_code'] . "</td>";
echo "<td><input type='hidden' name='open_date' value='".$row1['open_date']."'>" . $row1['open_date'] . "</td>";
echo "<td><input type='hidden' name='mat_date' value='".$row1['mat_date']."'>" . $row1['mat_date'] . "</td>";
echo "<td><input type='hidden' name='depoamt' value='".$row1['depoamt']."'>" . $row1['depoamt'] . "</td>";
echo "<td><input type='hidden' name='balance' value='".$row1['balance']."'>" . $row1['balance'] . "</td>";
echo "<td>" . " <input type=\"text\" name=\"amount\"/>\n" . "</td>";
//echo "<td>" . "<input type=\"button\" value=\"Make Entry\" onclick=\"getConfirmation();\"" . "</td>";
echo "<td>" . " <input type=\"image\" src=\"images/update.png\" onclick=\"getConfirmation(".$row1['pop_code'].");\" alt=\"Update Row\" class=\"update\" title=\"Update Row\">\n" . "</td>";
echo "</tr>";
echo "</form></div>";
}
echo "</table>";
?>
<div align="center" style="width:100%; margin: 0px auto;">
<img src="images/footer.png" style="width:100%;"/>
</div>
</div>
</body>
</html>
It should be:
function getConfirmation(value1){
and form:
echo "<div class=\"addform\"><form method='post' action=\"txn.php\" onsubmit=\"return getConfirmation('".$row1['pop_code']."');\">";
and you can leave the submit image alone without any javascript calls.
Final code:
echo "<div class=\"addform\"><form method='post' action=\"txn.php\" onsubmit=\"return getConfirmation('".$row1['pop_code']."',this,'".$row1['balance']."');\">\n";
echo "<tr>";
echo "<td><input type='hidden' name='pop_code' value='".$row1['pop_code']."'>" . $row1['pop_code'] . "</td>";
echo "<td><input type='hidden' name='open_date' value='".$row1['open_date']."'>" . $row1['open_date'] . "</td>";
echo "<td><input type='hidden' name='mat_date' value='".$row1['mat_date']."'>" . $row1['mat_date'] . "</td>";
echo "<td><input type='hidden' name='depoamt' value='".$row1['depoamt']."'>" . $row1['depoamt'] . "</td>";
echo "<td><input type='hidden' name='balance' value='".$row1['balance']."'>" . $row1['balance'] . "</td>";
echo "<td><input type=\"text\" name=\"amount\"/>\n</td>";
echo "<td><input type=\"image\" src=\"images/update.png\" alt=\"Update Row\" class=\"update\" title=\"Update Row\">\n</td>";
echo "</tr>";
echo "</form></div>";
and javascript:
<script type="text/javascript">
<!--
function getConfirmation(value1,form,balance)
{
var retVal = confirm("Pop Code:" + value1 + "\n" + "Amount:" + form.amount.value + "\n" + "Updated Balance:" + balance + "\nPlease confirm!");
if( retVal == true )
{
alert("User wants to continue!");
return true;
}else{
alert("User does not want to continue!");
return false;
}
}
//-->
</script>
try changing
function getConfirmation(var value1)
to
function getConfirmation(value1)
You cannot use the var keyword as a function parameter.
try this
function getConfirmation(value1){
//Your function
}
first call the function from your button code just like this
echo "<td><input type="image" src="images/update.png" onclick="getConfirmation('".$row1['pop_code']."');" alt="Update Row" class="update" title="Update Row"></td>";
when we define the function parameter the there is no need to declare
variable as using var keyword so after that replace your javascript
function declaration
<script type="text/javascript">
function getConfirmation(value1)
{
var retVal = confirm("Pop Code:" + value1 + "\n" + "Amount:" + "" + "\n" + "Updated Balance:" + "" + "\nPlease confirm!");
if( retVal == true )
{
alert("User wants to continue!");
return true;
}else{
alert("User does not want to continue!");
return false;
}
}
</script>
I think there is 2 issues with the code.
Remove the var from the function
function getConfirmation(value1)
The code onclick=\"getConfirmation(".$row1['pop_code'].");\" will create proper code on integer values for $row1['pop_code') ie getConfirmation(10), but when the code is text it will be incorrect getConfirmation(test). So you have to add quote the values.
ie onclick=\"getConfirmation('".$row1['pop_code']."');\"

select p text jquery

I'm retrieving data from mysql like this structure =>
echo "<table id='postI" . $chat_row['id'] . "'>";
echo "<tr>";
echo "<td><p class='post_author'>" . $chat_row['user_name'] . "</p><a href='javascript: void(0)' class='edit_post_a'><div class='edit_post'></div></a></td>";
echo "</tr>";
echo "<tr>";
echo "<td><p class='posted_on'>" . $chat_row['posted_on'] . "</p></td>";
echo "</tr>";
echo "<tr>";
echo "<td><br></td>";
echo "</tr>";
echo "<tr>";
echo "<td><p class='posted_msg'>" . $chat_row['message'] . "</p></td>";
echo "</tr>";
echo "</table>";
and I can get the table id with this expression =>
$(".edit_post_a").bind("click",function(){
var tb_id = $(this).closest("table").attr("id"); // works , gets the id of the table
alert($(tb_id + ".posted_msg").text()); // don't work, gets nothing , just alert box
});
My problem is that want to know text of the third p, what I've tried =>
alert($("#" +tb_id + ".posted_msg").text());
alert($("#" +tb_id).find("p").last().text());
alert($("#" +tb_id + " p:nth-child(3)").text());
nothing works , get empty alert box , I've no idea whats wrong ? how can I fix it ? thanks
HTML code =>
<table id='postI245'>
<tr>
<td><p class='post_author'>USER</p><a href='javascript: void(0)' class='edit_post_a'><div class='edit_post'></div></a>
</td>
</tr>
<tr>
<td><p class='posted_on'>DATE</p></td>
</tr>
<tr>
<td><br></td>
</tr>
<tr>
<td><p class='posted_msg'>MSG</p></td>
</tr>
</table>
and so on ...
Your selector selects nothing, you should add # for selecting an element by id.
var txt = $('#'+tb_id + " .posted_msg").text();
or:
var txt = $(this).closest("table").find("p:eq(2)").text()

Categories

Resources