pass angular scope to jquery - javascript

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 :)

Related

Using Auth function in script tag (Laravel)

guys, I am trying to use the Auth function in my script tag which is inside a blade file but it seems like I am getting a yellow warning when I checked their source in google. Is it possible to use the Auth function in a script tag or is there an alternative approach for this? Anyone able to help? thanks in advance.
Here my snippets of code in the script tag
<script type="text/javascript">
$('button').click(function(){
//CONST DATA
const prefix = "QATS";
const url = "http://qr5.dev.ificonsultancy.net/api/sendData";
//Extract Data
var lecturer_id = Auth::user()->id; //HERE IS THE ERROR
var faculty_code = $( "#Faculty" ).val();
var programme_code = $( "#Programme" ).val();
var class_code = $("#Class").val();
//Location Coordinates
var gps_school_lng = "101.5597904";
var gps_school_lat = "3.0923526";
//URL Concatenation
var urlContent = prefix.concat("|",url,"|",lecturer_id,"|",faculty_code,"|",programme_code,"|",class_code,"|",gps_school_lat,"|",gps_school_lng);
//Add src to #qrImg
$("img#qrImg").attr('src',"https://chart.googleapis.com/chart?chs=300x300&cht=qr&chl="+urlContent+"&choe=UTF-8");
console.log("pass");
});
</script>
Yes, just use the mustache syntax:
var lecturer_id = '{{ Auth::user()->id; }}'

What does datatable.columns().search().draw() requests or posts in server-side php?

$(document).ready(function() {
var taskList = $("#tasklist").DataTable({
"bProcessing" : true,
"bServerSide" : true,
"sAjaxSource" : 'response.php'
});
$(".search-select").on('change', function() {
var i = $(this).attr('data-column');
var f = $(this).val();
taskList.columns(i).search(f).draw();
});
$(".search-text").on('keyup', function() {
var i = $(this).attr('data-column');
var f = $(this).val();
taskList.columns(i).search(f).draw();
});
});
this is the script i have written and except filtering everything is working.
I don't know in which variable or object I can get the searched row and value.
I have tried : $_REQUEST['columns'][0]['search']['value']
but it is not in the $_REQUEST object.
What should I try now?
If you have Chrome / FF or other browsers developer tools, go to the Network tab and inspect the requests! It could not be more easy. You will see something like
response.php
?sEcho=1
&iColumns=6
&sColumns=%2C%2C%2C%2C%2C
&iDisplayStart=0
&iDisplayLength=10
//>> this section repeats itself for every column, mDataProp_1, mDataProp_2 etc
&mDataProp_0=0
&sSearch_0=
&bRegex_0=false
&bSearchable_0=true
&bSortable_0=true
//<<<
&sSearch=
&bRegex=false
&iSortCol_0=0
&sSortDir_0=asc
&iSortingCols=1
&_=1513773711430
So you get the search term for a columns(i).search(f).draw() serverside by
$columnCount = $_GET['iColumns'];
$searchColumn = -1;
$searchTerm = '';
for ($i=0; $<$columnCount; $i++) {
if (isset($_GET['sSearch_'.$i]) && $_GET['sSearch_'.$i] != '') {
$searchColumn = $i; //i
$searchTerm = $_GET['sSearch_'.$i]; //f
}
}
Try the following code
$searchValue = $_REQUEST['search']['value']

PHP Table inline editing - Javascript Function

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=...';

How to pass value from PHP to JS?

After
$this->view->headScript()->appendFile($this->_request->getBaseUrl() . '/public/scripts/czassesji.js', 'text/javascript');
is called script
jQuery(document).ready(function() {
var licznik = 0;
var aktywny = true;
window.onblur = function(){aktywny = false;};
window.onfocus = function(){aktywny = true; licznik = 0;};
var id = setInterval(function(){wyslijImpuls()},60000);
function wyslijImpuls() {
if(aktywny == false) {
licznik++; //żeby nie tracić czasu spędzonego na stronie (np: 30 sekund), gdy uzytkownik przelączy okno/zakładkę przeglądarki
}
if(licznik < 2) {
$.post(baseUrl+'Zapiszczas/', {'ile': 1});
}
}
$.post(baseUrl+'Zapiszczas/', {'ile': 1});
console.log(baseUrl);
});
and I revieved error
ReferenceError: baseUrl is not defined $.post(baseUrl+'Zapiszczas/',
{'ile': 1});
My question is how to pass baseUrl value to js? I'd like to mentioned that baseUrl is defined in config.ini and accessible in php Zend controller.
You have to save that baseURL in some input hidden or in a global var in javascript, when php send the rended page , javascript can't access to php variables, one is executed in server side and the other is exectued in the client side.
<script>
baseURL = this->view->headScript()->appendFile($this->_request->getBaseUrl() . '/public/scripts/czassesji.js', 'text/javascript');
</scrip>
And then call in your next javascript script.
At the very Top of your ViewScript where you added $this->view->headScript()
//VIEW FILE
<?php
$this->view->headScript()->appendFile($this->_request->getBaseUrl() . '/public/scripts/czassesji.js', 'text/javascript');
//TRY ADDING THIS:
$this->inlineScript()->captureStart();
echo "var baseURL = '" . $baseUrl . "';";
$this->inlineScript()->captureEnd();
//.... MORE CODES...
?>
<?php
// IN YOUR CONTROLLER: SINCE YOU HAVE ACCESS TO THE $baseUrl VARIABLE HERE
// TRY THIS IN THE APPROPRIATE ACTION:
public function showAction(){
//...HANDLE YOUR BUSINESS LOGIC
$arrViewModel = array();
$arrViewModel['baseUrl'] = $pointerToBaseURL;
$viewModel = new ViewModel($arrViewModel);
//IF $viewModel ALREADY EXIST BEFORE THIS POINT:
// YOU MAY JUST ADD THE baseUrl KEY LIKE SO
// $viewModel->setVariable('baseUrl', '$pointerToBaseURL');
return $viewModel;
}
?>
// IN YOUR JQUERY... $baseUrl SHOULD NOW BE AVAILABLE
// SINCE IT IS NOW GLOBALLY SCOPED FROM YOUR VIEW:
jQuery(document).ready(function() {
var licznik = 0;
var aktywny = true;
window.onblur = function(){aktywny = false;};
window.onfocus = function(){aktywny = true; licznik = 0;};
var id = setInterval(function(){wyslijImpuls()},60000);
function wyslijImpuls() {
if(aktywny == false) {
licznik++; //żeby nie tracić czasu spędzonego na stronie (np: 30 sekund), gdy uzytkownik przelączy okno/zakładkę przeglądarki
}
if(licznik < 2) {
$.post(baseUrl+'Zapiszczas/', {'ile': 1});
}
}
$.post(baseUrl+'Zapiszczas/', {'ile': 1});
console.log(baseUrl);
});
I hope this helps a bit...

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!!

Categories