auto reload 'php' in javascript - javascript

I am developing my laravel app. I have this function in javascript-
function abc(){
var x = '<?php ($user && ($user->first_name == "" || $user->number == "")) ?>';
}
Now, when the page is loaded, the variable 'x' is loaded with either '1' or '0'. I want the php to be rendered everytime I call the function abc(). So, for instance, at time of page load 'x' is '1' but if the function is called after 20 secs of page load, I want the php to be rendered, so that the value of 'x' can change based on the changes happening on server in those 20 secs.
Btw, I am aware of ajax. I am asking if there is some simpler solution.

function abc(){
$.ajax({url:"phpfile.php",success:function(result){
$("div").html(result);
}});
}
setTimeout(function(){ abc(); },20000);
Try this using ajax

This isn't possible without AJAX because the JavaScript code is static once loaded on the client browser. The values do not change unless additional script executes to override those values asynchronously.

As you're using Laravel, take a look at setting up a route to return the value you're looking for. There are plenty of examples here: http://laravel.com/docs/routing . As your example is referring to users, take a look at this doc on RESTful controllers, as the example there is specifically a UserController. http://laravel.com/docs/controllers#restful-controllers
Something like this would let you grab the data you need on the PHP-side (I'm assuming you're checking if the user's initialized):
class UserController extends BaseController {
/* other controller logic above here.. */
public function getInitStatus($id)
{
$user = /* Whatever code you get the user with based on ID */
return Response::json($user && ($user->first_name == "" || $user->number == "");
}
}
Then setup a route like:
Route::controller('users', 'UserController');
Now that you're set on the server-side, there are plenty of ways to just call it in JS (e.g. http://api.jquery.com/jquery.getjson/ ).
function abc() {
$.getJSON( "/users/" + userID, function( x ) { /* do whatever you were going to do with x */ });
}

Ajax is the way to go. Please take a look into other answers.
This is answer is not a general good approach, but it answers what you exactly ask. Im just posting this cause i don't know what you have in mind so it may be usefull for you.
start by putting your js function in onload of body and change the name a bit
<body onload="original_abc()">
then change your js function name accordingly
function original_abc(){
var x = '<?php ($user && ($user->first_name == "" || $user->number == "")) ?>';
}
now use this with the name of your original function
function abc()
{
location.reload();
}
as a result, everytime you call abc() the page will reload, and the function original_abc will execute.
may be useful in some very specific cases, but in general, use ajax.

Related

Understanding Ajax requests to update page content when SQL Query Response changes

I am writing a page update which works with PHP to read a SQL database the page echo's the contents in a div section 'track_data'. yet it doesn't do this update idk
I have JavaScript script which I dont really fully understand and hopeful someone could explain its principally the check response section I think is failing ? :
in my PHP page :
<script type="text/javascript">
function InitReload() {
new Ajax.PeriodicalUpdater('track_data', 'fetch_sql.php', {
method: 'get', frequency: 60, decay: 1});
}
</script>
Thanks for looking and hopefully someone undersstands this and can put a smile on my face for the second time today :)
Steps to fix
Thanks for the suggestions of syntax errors. I haven't really got very far with this here are the changes you suggested which I have changed but I still think there is something wrong with last function as it doesn't update div section.
Code in JS file
// Start Clock refresh
// uses new new Ajax.PeriodicalUpdater(
// in main fetch file to trigger the auto update of the page.
// Written by Denise Rose
var gUpdateDiv;
var gContentURL;
var gcheckInterval;
var gcheckURL = "";
var gCurrentCheck ="";
_fetchUpdater('track_data','/fetch_sql.php','/fetch_sql.php',8000);
function _fetchUpdater(updateDiv,contentURL,checkURL,checkInterval)
{
gUpdateDiv = updateDiv;
gContentURL = contentURL;
gcheckInterval = checkInterval;
gcheckURL = checkURL;
setTimeout('check();',gCheckInterval);
}
//Called by _fetchUpdater every (n) seconds determins if content should be updated.
function check()
{
new Ajax.Request(gContentUrl,{method:'get', onSuccess:'checkResponse'});
setTimeout('check();',gCheckInterval);
}
// looks for the response and determines if the div should be updated.
function checkResponse(transport)
{
var content = transport.response.Text;
if(gCurrentCheck != content) {
gCurrentCheck = content;
new Ajax.Request(gContentUrl, {method: 'get',onSuccess:function t() {
$(gUpdateDiv).innerHTML = t.responseText; /*t.response.json()*/}
});
}
}
This is the bit I dont understand
function checkResponse(transport)
{
var content = transport.response.Text;
if(gCurrentCheck != content) {
gCurrentCheck = content;
new Ajax.Request(gContentUrl, {method: 'get',onSuccess:function t() {
$(gUpdateDiv).innerHTML = t.response.json();/*t.responseText;*/}
});
}
}
Method and Issues
What is transport here and what is t? if it stores the contents of the body text from the second in gCurrentCheck and compares to transport version content then why doesn't it update if its different please which it is if the SQL has created a different page?
I did find this https://api.jquery.com/jquery.ajaxtransport/
First Answer not using Ajax
I was given a neat and JS version as an answer, which is not really what I was looking for. I was hopeful to get the one working with one with Ajax but I appreciate your efforts is very kind. I just really wanted to send a refresh to the div area so that the PHP rebuilt the page from the SQL.
I might have been missing the MIT javascript http://www.prototypejs.org/ lol but I dont think it was.
Just to help:
AJAX stands for Asynchronous JavaScript And XML. In a nutshell, it is the use of the XMLHttpRequest object to communicate with servers. It can send and receive information in various formats, including JSON, XML, HTML, and text files. ... Make requests to the server without reloading the page.
Researching
I found this Update div with the result of an Ajax-call but it did not really explain as the OP was using PHP like me not HTML. The answer was given:
$.ajax({
url: 'http://dowmian.com/xs1/getcam.php',
type: 'GET',
data: {id: <?php echo $cam_id; ?>},
success: function(responseText){
$('#update-div').html(responseText);
},
error: function(responseText){
}
});
I dont think above it answered posters question or mine as ajax is a server based push how is this relevant? as if its PHP driven the needs a refresh at server to refresh the contents not to provide new html. It is this refresh I am not interested in to re-copy PHP code elsewhere in JS as its already in my PHP. Does that make more sense?
Update
I did find a bracket missing and a set of single quotes inserted by editor. Which I have updated above but there was no significant change.
Cheers Nicolas . I am still hopeful that someone knows about Ajax as it sits underneath these technologies. I have a server side PHP file that I was hoping to use AJAX to pull just the PHP from the section it was pointing to an gUpdateDiv . As its derived from the server and created on the fly from SQL. I dont see how your answer would help push this data back in to the from the server . The $(gUpdateDiv).innerHTML was supposed to be acted upon not the whole page . What I am unsure of is how a trigger from this can update timer just this $(gUpdateDiv).innerHTML . I am also not aware if a server based refresh would do this or if the transport id provided from the file would be able to deliver just that . I think I am missing something a vital part that I dont have or have grasped yet. The reason there is two timers is effectively it checks the same file at a different point in time as its created by PHP it might be different from the first if it is i.e. the SQL data has changed, I want this to update this $(gUpdateDiv).innerHTML with the data which it compared it to the second 'Get' in the second request. It sounds, simple in practice but have got stuck comparing two versions and insuring second version gets used .
Further update placing an alert in the Javascript file did not pop up like it does here https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_alert however the same alert in the initiating PHP worked fine and created the alert. called the same function from the main PHP nd the alert occurred so the JavaScript is running next visit F12 on the page to see if there is any warnings or errors. Ok after adding JQuery which I thought I had added this started working however It is not doing what i Expected it to do. As the contained both text and graphics created by PHP I expected this all to be updated The graphics are not the text is any ideas? .
Further to the image problems I placed an extra line to update the image however I used this too in PHP
<script type="text/javascript">
//initpage() ;
function updateArtworkDisplay() {
document.querySelector('#np_track_artwork').src = 'images/nowplaying_artwork_2.png?' + new Date().getTime();
}
</Script>
But it didnt work to update the image in php?
<div id='outer_img'><img id='#np_track_artwork' src='/images/nowplaying_artwork_2.png' alt='Playing track artwork' width='200' height='200'></div>
in js change
/ looks for the response and determines if the div should be updated.
function checkResponse(transport)
{
var content = transport.response.Text;
if(gCurrentCheck != content) {
gCurrentCheck = content;
new Ajax.Request(gContentUrl, {method: 'get',onSuccess:function t() {
$(gUpdateDiv).innerHTML = t.responseText; /*t.response.json()*/}
});
updateArtworkDisplay(); // fire up the redraw in php file.
}
}
Nearly there it does almost what it needs to apart from the redraw which is not happening
// Start Clock refresh
// uses new new Ajax.PeriodicalUpdater(
// in main fetch file to trigger the auto update of the page.
// Written by Denise Rose
var gUpdateDiv="";
var gContentURL="";
var gcheckInterval=0;
var gcheckURL = "";
var gCurrentCheck ="";
_fetchUpdater('track_data','/fetch_sql.php','/fetch_sql.php',8000);
function _fetchUpdater(updateDiv,contentURL,checkURL,checkInterval)
{
gUpdateDiv = updateDiv;
gContentURL = contentURL;
gcheckInterval = checkInterval;
gCheckURL = checkURL;
setTimeout('check();',gcheckInterval);
}
//Called by _fetchUpdater every (n) seconds determins if content should be updated.
function check()
{
new Ajax.Request(gCheckURL,{method:'get', onSuccess:'CheckResponse()'});
setTimeout('check();',gcheckInterval);
}
// looks for the response and determines if the div should be updated.
function checkResponse(transport)
{
var content = transport.response.Text;
if(gCurrentCheck != content) {
gCurrentCheck = content;
new Ajax.Request(gContentUrl, {method: 'get',onSuccess:function t() {
$(gUpdateDiv).innerHTML = t.responseText; /*t.response.json()*/}
});
$time = new Date().getTime();
new Ajax.Request('outer_img', {method: 'get',onSuccess:function s() {
$('outer_img').innerHTML = "<img id='#np_track_artwork' src='/images/nowplaying_artwork_2.png?t='"+$time+" alt='Playing track artwork' width='200' height='200'>"}
});
}
}
GIVEN UP WITH THIS PLEASE DELETE MY PERSONAL INFORMATION AND POSTSript-fetch-async-await/

PHP, Javascript, mysql, and selection lists

I'm working on a piece of some software that will grab information from a mysql database and throw it onto our form dynamically. I'm running into a couple problems, though. I'll give a quick rundown of some functionality.
When the form loads, we have a ton of selection lists. These are all populated through arrays with various keys/values in php. When I select an option from one list, we'll call it a "customers" list, on-click I need to check if that customer has a special flag (stored in the database), and update another selection list based on that data.
How I understand the core of my solution is I need to have a javascript trigger on-click, which I have. The function that is called references a php page that handles the database query through a class and it's function.
<script>
function setService()
{ // The customer's "id" grabbed from the aforementioned customer selection list
customer = $('#customer').val();
$.get('thePage.php?key=setService?customer='+customer);
}
</script>
This function then talks to my php. The CustomerProvider class works 100%. I have tested that thoroughly on other pages. The problem arises when I try to actually get my selection list to change.
<?
if(isset($_GET['key']) && $_GET['key'] == 'setService')
{
$customer = $_GET['customer'];
$customer = intval($customer);
$s = CustomerProvider::getHasContract($customer);
if ($s != '')
{ ?> <script>var element = document.getElementById('ticket_service');
element.value = 'Contracted Hours';</script> <? }
else return;
}
?>
I'm coding in javascript literally for the first time ever and they kinda just threw me on this project. I know that my portion isn't being read as html or output as I intend. I know that every other part of the php and the first bit of javascript seems to be executing okay. Any help would be incredibly appreciated.
You seem to be on the right track but just for your own sanity here are a couple pointers. You shouldn't be returning Javascript from PHP for a situation like this. Instead you should be relying on Javascript promises to wait for a response containing just the data and continue the execution of your client code once you have your values returned. Take a look at this:
<script>
function setService() { // The customer's "id" grabbed from the aforementioned customer selection list
customer = $('#customer').val();
$.get('thePage.php?key=setService?customer=' + customer, function(data) {
console.log(data + ' was returned from your php script!');
if(data.hasContract=='1')
$('#ticket_service').val('Contracted Hours');
else
$('#ticket_service').val('No Contracted Hours');
});
}
</script>
And then your PHP script will just look like this:
<?
if(isset($_GET['key']) && $_GET['key'] == 'setService')
{
$customer = $_GET['customer'];
$customer = intval($customer);
$s = CustomerProvider::getHasContract($customer);
if ($s != ''){
$hasContract = 1;
}
else
$hasContract = 0;
echo json_encode(array('hasContract' => $hasContract));
}
?>
Therefore returning only the data needed for the client app to continue... not application logic
Your code isn't doing anything with the output of the PHP script. If you want the output to be inserted somewhere in the DOM, you should use .load() rather than $.get.
$("#someelement").load('thePage.php?key=setService?customer='+customer);
This will put the output into <div id="someelement">. If the output contains <script>, the script will be executed.
If you know the result is just a script, you could use $.getScript() instead of $.get. Then the output should just be the Javascript, not enclosed in HTML tags like <script>.
The problem here is that you are not using the result from the server. Your JavaScript may indeed be correct, but the browser never sees or runs it. From the docs:
Request the test.php page, but ignore the return results.
$.get( "test.php" );
Try this code, which utilizes the $.getJSON() shortcut function. I've written two versions, which you can see commented in the code. One moves the logic for determining contract status into the JS. Either should work.
PHP
<?
if(isset($_GET['key']) && $_GET['key'] == 'setService')
{
$customer = $_GET['customer'];
$customer = intval($customer);
$s = CustomerProvider::getHasContract($customer);
// Default output
$output = array('hasContract' => false);
// Customer has contract
if ($s != '')
$output['hasContract'] = true;
echo json_encode($output)
// Alternative: PHP just returns getHasContract, JS determines action
// (this would replace $ouput, conditional, and echo)
// echo json_encode(array("hasContract" => $s));
}
?>
JavaScript
function setService()
{ // The customer's "id" grabbed from the aforementioned customer selection list
customer = $('#customer').val();
$.getJSON('thePage.php?key=setService?customer='+customer, function(result) {
// Alternative
// if (result.hasContract != "")
if (result.hasContract)
{
var element = document.getElementById('ticket_service');
element.value = 'Contracted Hours';
}
});
}
As others wrote, your code doesn't do a thing with the GET variables.
the element "ticket_service" doesn't exists on page and even if it was, the code has no impact on the page that sent the request, you should print/echo the result you want to display/return and then manipulate it with JS/Jquery.
since I'm against GET and pro POST which is safer method, here's an example with POST:
JS:
function postSomthing(customerID){
$.post(
'thePage.php',
{key:'setService',customer:customerID},
function(data){
if(data!='x'){
$('#ticket_service').val(data)
}
else{alert('no ticket');/*whatever you want to do*/}
});
}
PHP(thePage.php) :
if(isset($_POST['key']) && $_POST['key'] == 'setService'){
$customer = intval($_POST['customer']);
$s = CustomerProvider::getHasContract($customer);
if ($s != ''){echo 'x';/* false, or whatever you want*/}
else{echo 'Contracted Hours';}
}
notes:
you should create an element with the id "ticket_service" in the viewed page and not in the backstage one.

how to pass javascript variable to embedded Server Side code ASP.NET WebForm

let say i have a function like below in BAL.cs file
public static void xyz(string name)
{
Response.Write("Hello "+name);
}
Let say i have a javascript variable x.
now i want to call the function from BAL.aspx file
<script>
var x= "Tahmid";
<%=BAL.xyz()%> // want to pass x as a parameter
</script>
this is in webform.
It seems like there is some sort of confussion here that I would like to help solve. Server code and client code are separated. When client code executes (such as javascript) the server has no way to know what happened so your server side code (code behind) is not aware of any changes. In order to have the javascript variable information on the code behind you'll need to send that variable value back to the server and one of the mechanisms is the one provided by user2952502. I think in your case a postBack (using a submit or link button) would be more appropiate, right? I think you're trying to redraw the page based on something that the user did (since you're using javascript).
I think we should have some more information to understand the whole scope of your question and probably suggest you a better way to deal with it.
so you want to use windowfunctioname ?
since javascript is clientside and asp is serverside you could create a list of calls with parameters.
<script type="text/javascript">
var calls = [{exec: 'functionname', param : {name: 'Tahmid'}}];
document.addEventListener('DOMContentLoaded', function () {
c = calls.length;
for (var i = 0; i < c; i++) {
call = calls[i];
window[call.exec](call.param);
}
});
</script>
I hope that was an answer that helps.
The question is not clear enough .
what are u trying to do ?
just to print a dynamic text u can do with javascript function..
if u have to use a server function please specify the platform u use : MVC / WebForms..
in MVC you can use jQuery Post:
<script>
var x = "value";
$.post('#Url.Action("Action","Controller")',{name : x});
</script>

javascript function not taking arguments

This question is probably more complex than I realize.
When the page loads, it checks for a cookie (usercookie). If it exists, it calls a function in an external .js file. This function is situated in a jquery file and does three things. It hides come stuff, sets a variable (userloggedin) to true, and displays a welcome message to the users. However, its acting very strange. In order for the function to work, I have to define it with a "new" before it like its an object. If I don't do that, it won't work at all. But if I use it, it refuses to take any arguments. Take a look.
Keep in mind that this is situated in a $(document).ready(function() {}
userlogged = new function($name)
{
userloggedin = true;
$('.socialicons').hide();
$('#signup').hide();
$('#login').hide();
document.getElementById('cookieelement').innerHTML = "Welcome back, " + $name + "!";
}
Here is how I call the function from the main document.
<script type="text/javascript" id="cookiescript">
//checks for the usercookie and gets the value as well
var query = true;
if (query === true)
{
cookievalue =
"Seth";
userlogged(cookievalue);
}
</script>
Some of this code was returned from a php query to mysql, but I know that code works fine.
So my question is, how do I create this universal function in the js file that I can call anytime a user logs in somehow (eg. cookie detected, form entry)?
You have to declare a parameter at the declaration part like
function functionname(parameter)
you need to change the method signature to accept a parameter
userlogged = new function($name)
{
userloggedin = true;
$('.socialicons').hide();
$('#signup').hide();
$('#login').hide();
document.getElementById('cookieelement').innerHTML = "Welcome back, " + $name + "!";
}

Using PHP in javascript's IF Statement [duplicate]

This question already has answers here:
What is the difference between client-side and server-side programming?
(3 answers)
Closed 7 years ago.
I am trying to make a confirm box which will desire which php code will be executed.
Heres my code:
<script type="text/javascript">
var answer = confirm('Are you sure?');
if(answer==true)
{
<?php $confirmation = 1; ?>
}
else
{
<?php define("CONFIRMATION", 1, true); ?>
}
alert('<?php echo $confirmation; ?>')
alert('<?php echo defined("CONFIRMATION"); ?>')
</script>
The problem is , even if i click YES, $confirmation and boolean from defined() function returns 1.
Whatever I click, (cancel or ok) one of them should be 0 (I've already declared $confirmation before)
But both of codes at if and else blocks are used!
Normally it works like this
You fundamentally misunderstand what PHP is doing.
PHP is evaluated on the server before the page is sent to your browser. By the time the browser sees it and executes the javascript, all the PHP is gone.
Use your browser's "view source" on the browser window with this code in it. You'll see it looks like this:
<script type="text/javascript">
var answer = confirm('Are you sure?');
if(answer==true)
{
}
else
{
}
alert('1')
alert('1')
</script>
You either need to implement what you want to do in javascript to run on the browser, or you need to send a new request to the server and get a new page back (either directly or indirectly) with your response.
That will never work because PHP is processed before the output is sent to the browser. If you really need to modify something in PHP then try using an AJAX call.
http://ajaxpatterns.org/XMLHttpRequest_Call
Or try using jQuery's $.ajax(); function. Start by looking here.
Here is a quick example:
<script type="text/javascript">
var answer = confirm('Are you sure?');
$.ajax({
type: 'GET',
url: '/path/to/script.php',
data: 'answer=' + answer,
success: function(response) {
alert(response);
}
});
</script>
Contents of script.php:
<?php
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH'])
&& strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'
) {
// AJAX request
$answer = $_GET['answer'];
// ...
}
You can't trigger a PHP code exection without a post/get request.
For your needs, you should choose between a form submisssion or load a page-link with parameters stuffed in the query string on confirmation.
P.S.
the query string parameters are the ones following the "?" in the format variable=value
for example:
index.php?answered=1
you will be then able to retrieve these vatiable/values using PHP $_POST, $_GET or $_REQUEST variables in a way like this:
if ($_REQUEST['answered'] == 1) { //confirmed
...
}
You are misunderstanding the order of what will happen here.
Firstly, PHP will output the javascript layer. Your if block will then look like this:
if (answer == true)
{
}
else
{
}
The javascript engine should then optimise that out and totally ignore it. Consider using AJAX if you need to get PHP to process something with an input from the javascript layer.
Normally it works like this
No, it never works like this. PHP is executed before the javascript so it will never work like this.
I think from what I see you would want something like
Your link
This will go to the current page with $_GET['confirmation'] set to "1".
php executed before javascript so you can't do this because
when you check it via javascript if else statement php is already executed so you can't do it
but however you can use ajax for it

Categories

Resources