PHP Table inline editing - Javascript Function - javascript

I am trying to create an inline edit function on my table, the user should be able to retype the values, and click the 'Save' button to update the database record.
I've hit a problem with the javascript function, its not reverting me to the next page as per 'window.location.href', which would be the php update qry page, that reverts me back to the original page to view the changes made.
The javascript function is meant to get the old id , and all of the possibly new td's within the record, which the user may have inline edited.
I had this working for the id itself, but with the addition of all the new values, ive messed up either on the js function or the action but (may the 'this'?) not exactly sure. I know mysql is rubbish and so on, im focusing on functionality at the time being.
JS FUNCTION
function edit_user(id,a,b,c,d,e,f,g,h,i,j,k) {
var tr = a.parentNode.parentNode;
var awb = String(tr.querySelector(".a").innerHTML);
var tb = b.parentNode.parentNode;
var del = String(tb.querySelector(".b").innerHTML);
var tc = c.parentNode.parentNode;
var vsl = String(tc.querySelector(".c").innerHTML);
var td = d.parentNode.parentNode;
var cli = String(td.querySelector(".d").innerHTML);
var te = e.parentNode.parentNode;
var pcs = String(te.querySelector(".e").innerHTML);
var tf = f.parentNode.parentNode;
var wgt = String(tf.querySelector(".f").innerHTML);
var tg = g.parentNode.parentNode;
var car = String(tg.querySelector(".g").innerHTML);
var th = h.parentNode.parentNode;
var snd = String(th.querySelector(".h").innerHTML);
var ti = i.parentNode.parentNode;
var stt = String(ti.querySelector(".i").innerHTML);
var tj = j.parentNode.parentNode;
var ard = String(tj.querySelector(".j").innerHTML);
var tk = k.parentNode.parentNode;
var ctm = String(tk.querySelector(".k").innerHTML);
// run query on server:
window.location.href = 'http://at-web2.comp.glam.ac.uk/students/14075377/14075377/php/edit-livedashboard-import.php?id='+id+'&newawb='+awbno+'&newvsl='+vsl+'&newcli='+cli+'&newpcs='+pcs+'&newwgt='+wgt+'&newcar='+car+'&newsnd='+snd+'&newstt='+stt+'&neward='+ard;;
return false;}
TABLE ACTION BUTTON
$awb = $get_info["AwbNo"];
echo "<a href='' onclick='return edit_user($awb,here,here,here,here,here,here,here,here,here);'>&nbspSave&nbsp</a>";
PHP UPDATE
include("../dbinfo.inc.php");
$comm=#mysql_connect(localhost,$username,$password);
$rs=#mysql_select_db($database) or die( "Unable to select database");
$id = $_GET['id'];
$newawb = $_GET['awbno'];
$newvsl = $_GET['vsl'];
$newcli = $_GET['cli'];
$newpcs = $_GET['pcs'];
$newwgt = $_GET['wgt'];
$newcar = $_GET['car'];
$newsnd = $_GET['snd'];
$newstt = $_GET['stt'];
$neward = $_GET['ard'];
$sql = "UPDATE tbl_import SET AwbNo='$newawb',ClientCode='$newcli',VesselName='$newvsl',Pieces='$newpcs',Weight='$newwgt',Carrier='$newcar',Sender='$newsnd',Status='$newstt',ArrivalDate='$neward',WHERE AwbNo='$id';";
echo ("id=$id,awb=$newawb,vsl=$newvsl,cli=$newcli,pcs=$newpcs,wgt=$newwgt,car=$newcar,send=$newsnd, status=$newstt, date=$neward .\n\n\n");
mysql_query($sql)or die("Update Error: ".mysql_error());
mysql_close();
//commented header so can see echoed vals sent from js
//header("Location: ../livedashboard.php"); //redirect to relevant page

First thing try to print:
console.log('php/edit-livedashboard-import.php?id='+id+awb+del+vsl+cli+pcs+wgt+car+snd+stt+ard+ctm);
it should be like this:
'php/edit-livedashboard-import.php?id='+id+ '&awb='+awd+'&del='+del...etc;
Second thing:
Add full url instead of dir :
window.location.href = 'php/edit-livedashboard-import.php?id='+id+aw...;
ex.
window.location.href = 'http://example.com/php/edit-livedashboard-import.php?id=...';

Related

Haw to clear all data that my template set to #comments-list from API response

var showResults = function (title, overview,picture,pictureBack) {
var $template = $('#comment-template').html();
$template = $($template);
$template.find('h4').text(title);
$template.find('p').text(overview);
$template.find('#pic').append(picture);
$template.find('#picBack').append(pictureBack);
var $commentsList = $("#comments-list");
$commentsList.append($template);
}
I want to reset the template by clicking the button which make research

pass angular scope to jquery

anyone has any case like me ? i have to connect another service to my system. the problem is that service is unsupported on JS front-end (im using angularJS). to show form for service i need to complete jQuery form like this :
<script type="text/javascript">
$(function() {
var data = new Object();
data.req_merchant_code = '1';
data.req_chain_merchant = 'NA';
data.req_payment_channel = '15'; // ‘15’ = credit card
data.req_transaction_id = '<?php echo $invoice ?>';
data.req_currency = '<?php echo $currency ?>';
data.req_amount = '<?php echo $amount ?>';
data.req_words = '<?php echo $words ?>';
data.req_form_type = 'full';
getForm(data);
});
</script>
like you see that PHP variable on there with echo, can anyone help me to pass scope variable to that jQuery. i set that variable like this
$scope.dokuPayment = function(){
topUpFactory.createwordsDoku().then(function(data){
console.log(data.data);
var req = data.data;
$scope.invoice = req.invoice;
$scope.words = req.words;
$scope.currency = req.currency;
$scope.amount = req.amount;
console.log(invoice);
$("#doku-modal").modal('show');
});
}
i try to put that scope to parametes like this
<script type="text/javascript">
console.log("form doku");
$(function() {
var data = new Object();
data.req_merchant_code = '3279';
data.req_chain_merchant = 'NA';
data.req_payment_channel = '15'; // ‘15’ = credit card
data.req_transaction_id = {{invoice}};
data.req_currency = {{currency}};
data.req_amount = {{amount}};
data.req_words = {{words}};
data.req_form_type = 'full';
getForm(data);
});
</script>
but doesn't work.. i try to set upperstroup ("") still doesn't work. anyone can help. . thanks
When using AngularJS, try avoiding using jQuery in that way.
$("#doku-modal").modal('show'); - not a good idea to do that in this framework.
This article may give some guidance: http://www.dwmkerr.com/the-only-angularjs-modal-service-youll-ever-need/
In $scope.dokuPayment you can potentially do the same thing what getForm(data) does as long as it does not manipulate the DOM directly.
As a result, you do not have to pass any data to the view as the entire JS logic should be in your Angular services or controllers.
There is simple hack, not sure if it is good practice or not! You can make use of $window scope.
All you need to do is, make angular variables to global variables using $window.{variable name} and access them from outside using window.{variable name}.
See here:
$scope.dokuPayment = function(){
topUpFactory.createwordsDoku().then(function(data){
console.log(data.data);
var req = data.data;
$window.invoice = req.invoice;
$window.words = req.words;
$window.currency = req.currency;
$window.amount = req.amount;
console.log(invoice);
$("#doku-modal").modal('show');
});
}
Outside AngularJS:
console.log("form doku");
$(function() {
var data = new Object();
data.req_merchant_code = '3279';
data.req_chain_merchant = 'NA';
data.req_payment_channel = '15'; // ‘15’ = credit card
data.req_transaction_id = window.invoice;
data.req_currency = window.currency;
data.req_amount = window.amount;
data.req_words = window.words;
data.req_form_type = 'full';
getForm(data);
});
This worked for me. Hope this helps :)

Getting data from jQuery ajax

I am trying to make an AJAX filter for car list and I got stuck in the last stage. I have two files, index.php and filter.php.
In index.php I have form with drop-down lists and sliders. Code for sending the form is as follows:
$(document).ready(function(){
$("#send").click(function(){
var salon=$("#salon-list").val();
var make=$("#make-list").val();
var model=$("#model-list").val();
var cenaLow=$("#cenaLow").val();
var cenaHigh=$("#cenaHigh").val();
var tachometrLow=$("#tachometrLow").val();
var tachometrHigh=$("#tachometrHigh").val();
var palivo=$("#palivo-list").val();
var karoserie=$("#karoserie-list").val();
var prevodovka=$("#prevodovka-list").val();
var pohon=$("#pohon-list").val();
var barva=$("#barva-list").val();
var dvere=$("#dvere-list").val();
var objem=$("#objem-list").val();
var stav=$("#stav-list").val();
$.ajax({
type:"post",
url:"filter.php",
data:"salon="+salon+"&make="+make+"&model="+model+"&cenaLow="+cenaLow+"&cenaHigh="+cenaHigh
+"&tachometrLow="+tachometrLow+"&tachometrHigh="+tachometrHigh+"&palivo="+palivo+"&karoserie" +
"="+karoserie+"&prevodovka="+prevodovka+"&pohon="+pohon+"&barva="+barva+"&dveře="+dvere+"&objem" +
"="+objem+"&stav="+stav,
success:function(data){
$("#result").html(data);
}
});
});
});
In the filter.php file I get the data from $_POST and then I search through database. After that I want to echo results into #result div but it does not work. Any echo statement doesn't work, variables I want to list aren't empty, I checked.
echo 'iAmHere'; /*just checking*/
$post["salon"] = htmlspecialchars($_POST["salon"]);
$post["make"] = htmlspecialchars($_POST["make"]);
$post["model"] = htmlspecialchars($_POST["model"]);
$post["cenaLow"] = htmlspecialchars($_POST["cenaLow"]);
$post["cenaHigh"] = htmlspecialchars($_POST["cenaHigh"]);
$post["rokLow"] = htmlspecialchars($_POST["rokLow"]);
$post["rokHigh"] = htmlspecialchars($_POST["rokHigh"]);
$post["tachometrLow"] = htmlspecialchars($_POST["tachometrLow"]);
$post["tachometrHigh"] = htmlspecialchars($_POST["tachometrHigh"]);
$post["palivo"] = htmlspecialchars($_POST["palivo"]);
$post["karoserie"] = htmlspecialchars($_POST["karoserie"]);
$post["prevodovka"] = htmlspecialchars($_POST["prevodovka"]);
$post["pohon"] = htmlspecialchars($_POST["pohon"]);
$post["barva"] = htmlspecialchars($_POST["barva"]);
$post["dvere"] = htmlspecialchars($_POST["dvere"]);
$post["objem"] = htmlspecialchars($_POST["objem"]);
$post["stav"] = htmlspecialchars($_POST["stav"]);
echo '<p class="make">'.$post["make"].'</p>'; /*does not work*/
echo "<script>window.alert('".$_POST["make"]."');</script>"; /*another checking, this works*/
Thanks for any help.
Try this :
$(document).ready(function(){
$("#send").click(function(){
var salon=$("#salon-list").val();
var make=$("#make-list").val();
var model=$("#model-list").val();
var cenaLow=$("#cenaLow").val();
var cenaHigh=$("#cenaHigh").val();
var tachometrLow=$("#tachometrLow").val();
var tachometrHigh=$("#tachometrHigh").val();
var palivo=$("#palivo-list").val();
var karoserie=$("#karoserie-list").val();
var prevodovka=$("#prevodovka-list").val();
var pohon=$("#pohon-list").val();
var barva=$("#barva-list").val();
var dvere=$("#dvere-list").val();
var objem=$("#objem-list").val();
var stav=$("#stav-list").val();
var data= {
make: make,
model: model,
cenaLow: cenaLow,
cenaHigh: cenaHigh,
tachometrLow: tachometrLow,
tachometrHigh: tachometrHigh,
palivo: palivo,
karoserie: karoserie,
prevodovka: prevodovka,
pohon: pohon,
barva: barva,
objem: objem,
stav : stav
};
$.ajax({
type:"post",
url:"filter.php",
data:data,
success:function(data){
$("#result").html(data);
}
});
});
});
From here:
JavaScript inserted as DOM text will not execute.
And this says:
You have to use eval() to execute any script code that you've
inserted as DOM text.
So you can try an alternate approach to test your code (though I've not tested).
In filter.php:
<?php
$post["salon"] = htmlspecialchars($_POST["salon"]);
$post["make"] = htmlspecialchars($_POST["make"]);
$post["model"] = htmlspecialchars($_POST["model"]);
$post["cenaLow"] = htmlspecialchars($_POST["cenaLow"]);
$post["cenaHigh"] = htmlspecialchars($_POST["cenaHigh"]);
$post["rokLow"] = htmlspecialchars($_POST["rokLow"]);
$post["rokHigh"] = htmlspecialchars($_POST["rokHigh"]);
$post["tachometrLow"] = htmlspecialchars($_POST["tachometrLow"]);
$post["tachometrHigh"] = htmlspecialchars($_POST["tachometrHigh"]);
$post["palivo"] = htmlspecialchars($_POST["palivo"]);
$post["karoserie"] = htmlspecialchars($_POST["karoserie"]);
$post["prevodovka"] = htmlspecialchars($_POST["prevodovka"]);
$post["pohon"] = htmlspecialchars($_POST["pohon"]);
$post["barva"] = htmlspecialchars($_POST["barva"]);
$post["dvere"] = htmlspecialchars($_POST["dvere"]);
$post["objem"] = htmlspecialchars($_POST["objem"]);
$post["stav"] = htmlspecialchars($_POST["stav"]);
echo $post["make"];
In index.php:
$.ajax({
...
success:function(res){
$("#result").html(res);
alert(res);
}
});
Try this:
die('<p class="make">'.$post["make"].'</p>');
or
echo '<p class="make">'.$post["make"].'</p>';exit;
instead of
echo '<p class="make">'.$post["make"].'</p>'; /*does not work*/
echo "<script>window.alert('".$_POST["make"]."');</script>"; /*another checking, this works*/
It does not work without an exit. I do not know why but it should do the trick. Also, your code has a lot of room for improvement. Do keep looking for better ways to enhance your skills!! Enjoy!!

Converting a html table into a json object and sending it to a php page ,the table has a input field

i have got a html table which is dynamically created by php code taking db data.
the table's last field is a input field for entering a number.
the data from the table has to be sent to another php page for sql insert.
i am new to xml and ajax pls help me out with the above javascript code.
<script>
$(document).ready("enter").click(function(event){
event.preventDefault();
var elementTable = document.getElementById("form_table");
var jObject = [];
for (var i = 0; i < elementTable.rows.length; i++)
{
jObject[i] = [];
jObject[i][0] = elementTable.rows[i].cells[1].innerHTML;
jObject[i][1] = elementTable.rows[i].cells[2].innerHTML;//data from input field
}
console.log(jObject);
var JSONObject = encodeURIComponent(
JSON.stringify(jObject));//GETTING ERROR HERE
var url = "submit.php";
var requestData = "&dtable=" + JSONObject;
var XMLHttpRequestObj = FileResort.Utils.createRequest();
XMLHttpRequestObj.open("POST", url, true);
XMLHttpRequestObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
XMLHttpRequestObj.send(requestData);
});
</script>
as long as you are using JQuery, adapt this jsfiddle example
$("button").click(function(event){
event.preventDefault();
var tableArray = [];
$("table tbody tr:has(td)").each(function(index,element){
tableArray.push([
$(this).find("td:eq(1)").html(),
$(this).find("td:eq(2)").html()
]);
});
console.log(tableArray);
$("div").text(encodeURIComponent(
JSON.stringify(tableArray)
));
return false;
});
which is mostly what you want for the table serialization minus the ajax call ( which I think should be a POST, but that is my personal opinion )

Open Jquery dialog from inside Ajax request?

I have a problem with my current javascript/ajax request. I'm trying to open a Jquery dialog from inside my .append my code follows:
for (var i in rows)
{
var row = rows[i];
var id = row[0];
var NewEdit = row[0];
var PreviousEdit = row[1];
var FunctionName = row[2];
var FunctionID = row[2]
function ShowInfo()
{
dialog('Original: <br>'+PreviousEdit+'<br><br> New: <br>' +NewEdit);
}
$('#RecentEdits').append("<br>Page: "+FunctionName+" - <a href='#' OnClick='ShowInfo()'>Info</a>");
}
I have only pasted relivant code, if required I can post the entire function.
I know for a fact, my variables are correctly set due to them being printed out.
How can I open up a Dialog box showing more information from inside a Javascript function?
Solution:
As there is no correct replies. I have used OQJF's example and produced this:
<script>
function ShowInfo(a,b)
{
alert('Original: \n'+unescape(a)+'\n\n New: \n'+unescape(b));
};
</script>
<script>
//window.setInterval(function()
//{
$(function ()
{
$.ajax({
url: 'RecentUpdates.php', data: "", dataType: 'json', success: function(rows)
{
$('#RecentEdits').empty();
for (var i in rows)
{
var row = rows[i];
var id = row[0];
var NewEdit = row[0];
var PreviousEdit = row[1];
var FunctionName = row[2];
var FunctionID = row[3];
$('#RecentEdits')
.append("<br>Page: <a href='Page.php?ID="+FunctionID+"'>"+FunctionName+"</a> - ");
$('#RecentEdits').append("<input type='button' onClick=ShowInfo('"+escape(PreviousEdit)+"','"+escape(NewEdit)+"'); value='Show'>");
}
}
});
});
// }, 1000);
</script>
which has enabled me to access the function from my Javascript printout.
I had troubles with the quotes wrapped around my html so i have decided to make two appends. And this seems to work just fine!
While firstly I think you should set the function showInfo outside of the loop and set 2 parameter for it. Below is the sample code that I didn't test but It should be almost like this.
function ShowInfo(orginVal,newVal)
{
var msg =('Original: <br>'+orginVal+'<br><br> New: <br>' +newVal);
$(<div>msg</div>).appendTo('body).dialog();//maybe you can add some options for dialog
}
below part seems be in another function.
for (var i in rows)
{
var row = rows[i];
var id = row[0];
var NewEdit = row[0];
var PreviousEdit = row[1];
var FunctionName = row[2];
var FunctionID = row[2]
$('#RecentEdits').append("<br>Page: "+FunctionName+" - <a href='#' OnClick='ShowInfo(/*add your 2 parameters here*/)'>Info</a>");
} s

Categories