I'm trying to get a span to refresh with a php function which queries the database for spaces. However, I can't figure out how to keep it refreshing the actual database content dynamically (preferably via a timer). Here's what I have so far
<script type="text/javascript">
window.onload = startInterval;
function startInterval()
{
setInterval("startTime();",1000);
}
function startTime()
{
document.getElementById('spaces').innerHTML = <?php echo get_spaces($id)?>;
}
</script>
You're going to have to use Ajax to load content dynamically without reloading the page.
You will have to make a PHP script that will output only the content you want to load dynamically on the page and then load this script with Ajax.
There is an easy way to do this with jQuery, see this example: http://www.sitepoint.com/ajax-jquery/
I assume get_spaces executes a query by a parameter id
Have this function return a result by
echo json_encode($result);
Now, instead of function start_timer calling your php function statically as your example has above, have it return via ajax
function start_timer(){
$.ajax ({
url: get_spaces.php?id=1, // replace the parameter with dynamic assignment
dataType: json,
Success: function(result){
//iterate thru result json obj
}
});
Like the other posters pointed out, you'll have to use AJAX to make this work. Here is some pseudo code that might help you,
<script type="text/javascript">
window.onload = // Start your setInterval, pass it interval.ajax_call()
var interval = (function(
// Store data here
var data;
return {
// Make your ajax call within this function
ajax_call: function(),
}
)();
</script>
This way you can store the information from your database into data via the ajax callback.
Related
I am wondering how to transition a variable from PHP to Jquery.
My php file is loaded into a div like this:
$("#leaguesSelectionTable th").click(function(){
var teamSelect = this.id;
$("#loadTables").load("php/leagueTable.php?team="+teamSelect);
});
When the leagueTable.php is loaded into the div, I echoed and made sure the variable gets there. It does.
<?php if(isset($_GET['team'])){
$team = $_GET['team'];
}?>
leagueTable.php also has its own .js file with more functions. I want to know if I can get the $team variable in leagueTable.php to the .js file (which runs on document ready) and stored into a variable. Something like:
$.get( "../leagueTable.php", function( data ) {
var = data;
});
What I really don't get about ajax calls is how do I specify the particular data I want from the PHP file? I only want to retrive the $team variable and store it in a jquery variable.
Thanks.
simply
<?php if(isset($_GET['team'])){
echo $_GET['team'];exit;
}?>
and try this to check if you are getting correct values
$.get( "../leagueTable.php", function( data ) {
console.log(data);
});
The load method will expect HTML from the provided URL, to be embedded in the element provided, #loadTables in this case.
The script element is completely valid and the browser will probably execute what ever is inside immediately after appending the new DOM elements.
So, the context where this new JS is executed should be the same as the one where you made the AJAX call. If I am not wrong, you could globally declare a variable before calling the load method and the sub-script included in the AJAX response should be able to access it.
Though, I think this is probably not the very best approach you could use.
<script type="text/javascript">
$("#leaguesSelectionTable th").click(function(){
var teamSelect = this.id;
$.get( "php/leagueTable.php?team="+teamSelect", function( data ) {
var teamSelect = jQuery.parseJSON(data);
});
});
<script>
OR
you can simply use like below:
var teamSelect = jQuery.parseJSON('<?php echo $teamSelect;?>');
Here you will have to prepare the $teamSelect in the php file as a JSON string.
I know this has been covered a few times, but I'm completely a noob when it comes to javascript so I have no idea what I'm doing. I am running a javascript that sends variables to a php file and that info is ajaxed into the current page using innerhtml. Here is that part of the code...
function givingHistory(dyear,did)
{
var divname="giving" + dyear;
$.ajax({
url: 'finance/givinghistory.php',
type: 'POST',
data: {
year: dyear,
id: did
},
success: function(givedata) {
document.getElementById(divname).innerHTML = givedata;
}
});
}
</script>
In the givedata function response from the php file there is a call to another javascript function that is already loaded in my common .js file (so both javascript functions are loaded when the page loads). How do I get the onClick that is added via innerhtml to work? Inside the php file, I check to see if id = a php session variable. If it does it spits out the text that includes the onClick.
If you use a specific id/class/identifier when the page loads in the $('*') function then the action will only bind to that. To get the action bind to anything ever try using $(document).on('click', **selector**, function() {});.
Previously there was bind/live that bound to elements as and when but on is the function now.
Also why are you mixing the $.ajax (jQuery) with document.getElementById(divname).innerHTML (regular javascript)? If you are already using jQuery you could just use $('#'+divname).html(blahbahblah);
This question already has answers here:
using php include in jquery
(2 answers)
Closed 9 years ago.
My problem is that I need to include a PHP file inside a DIV when a button is pressed without the page reloading.
There is even more explanation in the 'Jsfiddle' file.
Below is an included Jsfiddle document.
http://jsfiddle.net/jjygp/5/
Thanks for your time. I am more than happy to provide any information upon request.
See here for your updated jsfiddle
You had marked the change button with a name of Change but were trying to select it with an id of change. Also, you had not told jsfiddle to include jQuery.
Try the following:
<button name="Change" id="Change">Change Div</button>
You are specifying a click function on an id, but no id is set on the button.
You can try with load() function in jquery
http://api.jquery.com/load/
PHP is a server-side script language, which will be executed before a JavaScript script did.
Therefore, you cannot use .load() to execute a PHP code, however, you may try .ajax() to create an AJAX request to the server which can implement the PHP code.
Please see http://api.jquery.com/jQuery.ajax/ if you have trouble on using .ajax().
Note: in .ajax() method, there is a setting called beforeSend, which "can be used to modify the jqXHR (in jQuery 1.4.x, XMLHTTPRequest) object before it is sent". Hope this method helps you in any way.
Then, your JavaScript code will be like this:
$(document).ready(function(){
$("#Change").click(function(){
//doing AJAX request
$.ajax({
url:"include/start10.php",
beforeSend:function(){
$('#myDiv').fadeOut('slow');
},
success:function(data){
// do something with the return data if you have
// the return data could be a plain-text, or HTML, or JSON, or JSONP, depends on your needs, if you do ha
$('#myDiv').fadeIn('slow');
}
});
});
});
You cannot include PHP file with AJAX, but instead the response of the AJAX server-side script, which is the PHP (which has the same effect).
Loading...
The JS file (code):
function ajaxalizeDiv()
{
$.ajax({
type: "get",
url: "/path/to/the/php/you/want/to/include",
data: {
// Anything in json format you may want to include
id: myvarwithid, // descriptive example
action: "read" // descriptive example
},
dataType: "json",
success: onAjax
});
}
function onAjax(res)
{
if(!res || !res.text)
return;
$("#mydiv").html(res.text);
}
And here goes the PHP file:
<?php
$id = (int) #$_GET['id']; // same as in data part of ajax query request
$action = #$_GET['action']; // same as in data part of ajax query request
$text = 'click me';
// Note this is short example you may want to echo instead of die
// You may use not JSON, but raw text. However, JSON is more human-friendy (readable)
// and easy to maintain.
// Note also the array keys are used in the onAjax function form res (response).
die(json_encode(array('text' => $text /* and anything else you want */)));
?>
I have a table where one field is titled a secure password. In this field, there is an input button that calls an AJAX function. The AJAX function on return updates the password in the secured password field. This updates the DOM value for that field.
On this same page I have another function which uses Javascript to parse all the elements in the table into an array. The problem is the Javascript function is writing what was originally in the secure password field rather than what the AJAX function has updated it to.
It seems as though Javascript does not pull the current DOM value but the DOM value when the page was loaded. Is this the default nature of Javascript and if so how can I get around this so I can get the current values for all fields in the table, not just the page load values.
This script is written in PHP/Javascript, thanks in advance for the assistance.
Your Javascript function that parse all elements in the table into an array uses
the document.ready function or is loaded only once when the Page is loaded.
In Vanilla JS
document.addEventListener('DOMContentLoaded', (event) => {
//Where you wrote your function
})
Jquery
$(document).ready(function() {
// where you have your function if you are using Jquery
});
And AJAX calls do not reload the page. That means your Javascript function does not get executed so it does not update the array with the new data from the calls.
You need your Javascript as a callback function to the success or complete property of the AJAX call.
jQuery.ajax({
type: 'POST',
url: ajaxurl,
success: function() {
parsingFunction();
},
error: function() {
alert(errorThrown);
}
});
Did you try using a hidden input field for storing the data instead of updating the text input? Or may be you can try using the data-xxx attributes
bests,
Is it possible to get an element id into a PHP variable?
Let's say I have a number of element with IDs:
<span id="1" class="myElement"></span>
<span id="2" class="myElement"></span>
How do I get this into a PHP variable in order to submit a query. I suppose I would have to resubmit the page, which is OK. I would like to use POST. Can I do something like:
<script language="JavaScript">
$(document).ready(function(){
$(".myElement").click(function() {
$.post("'.$_SERVER['REQUEST_URI'].'", { id: $(this).attr("id") });
});
});
</script>
I need to pass $(this).attr('id') into $newID in order to run
SELECT * from t1 WHERE id = $newID
jQuery is a very powerful tool and I would like to figure out a way to combine its power with server-side code.
Thanks.
This is like your question: ajax post with jQuery
If you want this all in one file (posting to active file) here is what you would need in general:
<?php
// Place this at the top of your file
if (isset($_POST['id'])) {
$newID = $_POST['id']; // You need to sanitize this before using in a query
// Perform some db queries, etc here
// Format a desired response (text, html, etc)
$response = 'Format a response here';
// This will return your formatted response to the $.post() call in jQuery
return print_r($response);
}
?>
<script type='text/javascript'>
$(document).ready(function() {
$('.myElement').click(function() {
$.post(location.href, { id: $(this).attr('id') }, function(response) {
// Inserts your chosen response into the page in 'response-content' DIV
$('#response-content').html(response); // Can also use .text(), .append(), etc
});
});
});
</script>
<span id="1" class="myElement"></span>
<span id="2" class="myElement"></span>
<div id='response-content'></div>
From here you can customize the queries and response and what you would like to do with the response.
You have two "good" choices in my mind.
The first is to initiate a post request every time the ordering changes. You might be changing the ordering using jQuery UI sortable. Most libraries that support dragging and dropping also allow you to put an event callback on the drop simply within the initialization function.
In this even callback, you'd initiate the $.post as you have written it in your code (although I would urge you to look up the actual documentation on the matter to make sure you're POSTing to the correct location).
The second strategy is to piggyback on a form submission action. If you're using the jQuery Form Plugin to handle your form submissions, they allow you to indicate a before serialize callback where you can simply add into your form a field that specifies the ordering of the elements.
In both cases, you'd need to write your own function that actually serializes the element IDs. Something like the following would do just fine (totally untested; may contain syntax errors):
var order = [];
$('span.myElement').each(function(){
// N.B., "this" here is a DOM element, not a jQuery container
order.push(this.id);
});
return order.join(',');
You're quite right, something along those lines would work. Here's an example:
(btw, using $.post or $.get doesn't resubmit the page but sends an AJAX request that can call a callback function once the server returns, which is pretty neat)
<script language="JavaScript">
$(document).ready(function(){
$(".myElement").click(function() {
$.post(document.location, { id: $(this).attr("id") },
function (data) {
// say data will be some new HTML the server sends our way
// update some component on the page with contents representing the element with that new id
$('div#someContentSpace').html(data);
});
});
});
</script>
Your approach looks perfectly fine to me, but jQuery does not have a $_SERVER variable like PHP does. The url you would want to provide would be window.location (I believe an empty string will also work, or you can just specify the url on your own). You seem to be sending the ID just fine, though, so this will work.
If you want the page to react to this change, you can add a callback function to $.post(). You can do a variety of things.
$.post(window.location, {id: this.id}, function (data) {
//one
location.reload();
//two
$("#responsedata").html(data);
//three
$("#responsedata").load("affected_page.php #output");
});
I think number 2 is the most elegent. It does not require a page reload. Have your server side php script echo whatever data you want back (json, html, whatever), and it will be put in data above for jQuery to handle however you wish.
By the way, on the server side running the query, don't forget to sanitize the $id and put it in quotes. You don't want someone SQL Injecting you.