I have two JQuery sliders, value of "Second_Slider" gets updated and a div named
"amount2" as well as it should.
Now i want to update an php variable to the value of "Second_Slider" also. how can i achieve this?
$( "#Slider" ).bind( "slide", function(event, ui) {
$("#Second_Slider").slider({ value:300 });
$( "#amount2" ).val( "$" + $( "#Second_Slider" ).slider( "value" ) );
<?php $Php_Var_I_Want_to_Change = "what-do-i-put-here? ?> };
updated
you could try something like this
var slideXHR;
function setSlideSession(slideValue){
if( slideXHR == 'XMLHttpRequest'){
//stop previous ajax request
slideXHR.abort();
}
slideXHR = $.get('url/file.php', { item : slideValue });
}
$( "#Slider" ).bind( "slidestop", function(event, ui) {
$("#Second_Slider").slider({ value:300 });
var slideValue = $( "#Second_Slider" ).slider( "value" );
$( "#amount2" ).val( "$" + slideValue );
//set session variable on php via ajax
setSlideSession( slideValue );
};
php file
<?php
session_start();
$_SESSION['variable'] = $_GET['item'];
?>
You can't "bind" php variables to javascript variables.
Javascript is run client side, the only way you can get the values into PHP is by making a request from the client side.
e.g.
Submitting a form
Clicking a link
Sending an ajax request
I wouldn't suggest an approach to take without understanding why you want to bind it in the first place.
I can't really get your question but if i am following right you want to update a PHP variable through a jQuery slider's slideevent?
That's absolutely impossible once php is processed on server-side and then passed into the client as javascripts are processed on the client, after PHP has done its job!
If you want to send data to the server, use AJAX!
you are mixing JavaScript (client-site) with PHP (server-site) - will not work.
in your case you may consider sending an ajax request on change of slider - what could be overkill - every thing depends what it is for
Related
I've got a page with four divs on it that I'm trying to load using jquery. The user shows and hides the divs by clicking on links. Currently, the contents of the divs are populated with PHP include statements, but that leads to ~30-second load times for the page.
I'm trying to replace those include statements with JQuery in order to load the proper contents of each div when the user clicks the link to show or hide it. My problem is that when I click one of the links to switch divs, the div appears but without anything in it. I've used Fiddler to ensure the request is going off (which it is) but the response is coming back as a 404.
However, when I examine the response in Fiddler, the expected HTML is there, just not getting passed into my element properly. I've tried using .load() as well as $.get(), but got the same results. I've also ensured my element names are correct as well. Code is as follows:
$(document).ready(function()
{
$('#allvideos').click(function () {
$.get("/wp-content/themes/Danceamatic/templates/all_videos.php", function(data) {
var $resp = data;
$( "#carrusel_all_videos" ).html($resp);
alert("Load was performed.");
});
$('#current_showcase').hide();
$('#carrusel_new_videos').hide();
$('#carrusel_featured').hide();
$('#carrusel_all_videos').show();
$('#i_mentors').hide();
return false;
});
$('#featuredvideos').click(function () {
$.get("/wp-content/themes/Danceamatic/templates/view_featured.php", function(data) {
var $resp = data;
$( "#carrusel_featured" ).html($resp);
alert("Load was performed.");
});
$('#current_showcase').hide();
$('#carrusel_all_videos').hide();
$('#carrusel_new_videos').hide();
$('#carrusel_featured').show();
$('#i_mentors').hide();
return false;
});
$('#newvideos').click(function () {
$.get( "/wp-content/themes/Danceamatic/templates/new_videos.php", function( data ) {
$( "#carrusel_new_videos" ).html( $.parseHTML(data) );
alert( "Load was performed." );
});
$('#current_showcase').hide();
$('#carrusel_all_videos').hide();
$('#carrusel_featured').hide();
$('#carrusel_new_videos').show();
$('#i_mentors').hide();
return false;
});
$('#currentshowcase').click(function () {
$('#carrusel_all_videos').hide();
$('#carrusel_new_videos').hide();
$('#carrusel_featured').hide();
$('#current_showcase').show();
$('#i_mentors').show();
});
});
I've set breakpoints on the "var $resp = $data" line and have not hit it at all.
Any help is appreciated. Thanks!
The url "/wp-content/themes/Danceamatic/templates/all_videos.php" is not correct. Double check the location of the javascript file that makes this request and also check the location of the php file.
If the location seems correct then maybe it's the structure of the url -- try:
"wp-content/themes/Danceamatic/templates/all_videos.php" or
"./wp-content/themes/Danceamatic/templates/all_videos.php" or
"../wp-content/themes/Danceamatic/templates/all_videos.php".
everyone, i got a very simple problem, but i am really confused... for un hour
in a php page, i have the code:
<script>
$( document ).ready(function() {
$("#date_avant").click(function(){
$.post( "_corps_medecin_changedate.php", { name: 'test', id: '1' } );
$("#consultations_jour").load("_corps_medecin_changedate.php");
});
});
</script>
And in the page _corps_medecin_changedate.php, just at the beginning, i have the code:
<?php
var_dump($_POST);
$date_debut = $_POST['name'];
?>
And i got msg:
array (size=0)
empty
Notice: Undefined index: name
I checked the firebug, the parameters are correct in the post list, so i thinked it is sended correctly, but just canot receive in the action page.
Server info : Apache/2.2.11 (Win32) PHP/5.4.4
And in local envirment.
Can anyone help me?
Your returned data from your $.post call is not automatically made available to your .load() call. They are two separate functions which means your call to load essentially send no POST data to the PHP script.
You can pass the post parameters as part of your call to load
<script>
$( document ).ready(function() {
$("#date_avant").click(function(){
$("#consultations_jour").load("_corps_medecin_changedate.php", { name: 'test', id: '1' });
});
});
</script>
You have to handle result of post request in callback function, like this:
<script>
$( document ).ready(function() {
$("#date_avant").click(function(){
$.post( "_corps_medecin_changedate.php", { name: 'test', id: '1' },
function(result) { $("#consultations_jour").html(result);} );
});
});
</script>
In your code you make 2 different requests (first is in .post function, and second is in .load).
that is because your are calling the _corps_medecin_changedate.php again right (.load()), after the post is made with no posted datas.. and you are not using callbacks..
$("#consultations_jour").load("_corps_medecin_changedate.php"); //here
Since post is async... the .load() function (which isn't inside a post's callback) is called right after you call post and does not waits for it
i have no idea why are you loading the same php page again after post it made which i don't think is needed...but as an example ...you can use callback... to check the datas that you have posted
$.post( "_corps_medecin_changedate.php", { name: 'test', id: '1' },function(data){
alert('done');
});
//$("#consultations_jour").load("_corps_medecin_changedate.php");
try this and you should get the posted values in your PHP page.
I am trying to pass variables from a modal form to another page. I declare the variables from the form with the id tags in each selection.
Page reloads to test.php, however no variable can be echoed.
javascript
var id = $( "#id" ),
name = $( "#name" )
$.post("jqtest/test.php", { device_id: "id", device_name: "name" });
load('jqtest/test.php');
test.php
echo $_POST['device_name'];
echo $_POST['device_id'];
It's not clear how are you planning to use this code to pass values from your modal form but there are several problems with your current code:
; is missing at the end of variable assignment
read values from input fields using val() instead of getting jquery objects of them
use variable names in data object of post method instead of literals ("id", "name")
Try this to see that variables are passed and echoed in a callback function
var id = $( "#id" ).val(),
name = $( "#name" ).val();
$.post("jqtest/test.php",
{ device_id: id, device_name: name },
function(data){
alert(data);
}
);
It looks like there's a lot wrong with this... It looks like you are using echo $_POST['device_name']; and echo $_POST['device_id']; just to ensure that your AJAX is working. If that's the case, you don't need to be using .load();. You are also sending the jQuery object of $( "#id" ) and $( "#name" ) instead of the values within those form elements. Later, in your .post request, you have those same variables in quotes, which is sending the strings "id" and "name". Again - likely not what you're looking for.
Your question is a bit convoluted but I'll do my best to answer. Try this JS:
var id = $("#id").val(),
name = $("#name").val();
$.post("jqtest/test.php", { device_id: id, device_name: name }, function(response) {
console.log(response);
});
In your PHP file, use this code:
echo $_POST['device_name'];
echo $_POST['device_id'];
You will see your variables show up in the JS console of your browser. With this script, you've sent your two variables to test.php via POST and test.php will echo the results. The callback function added to the $.post request will display the output from test.php in the javascript console. Learn more about .$post() on the jQuery docs.
I know how to get the position of a div using JS, I'm using Jquery's draggable script, and have an event that when the person stop dragging that it should get the location of the div (top and left):
document.getElementById('object').style.top;
document.getElementById('object').style.left;
now the question is how do I get those coordinates into a php session...?
Maybe the best (easiest) option is to store them in a cookie. The cookie can be read by PHP if you like, but even if you don't, you can still use the cookie again when the page is reloaded in the same browser.
If you want to store the value so it is kept too if the user logs in on another browser (or in a different session), you can store the cookie in a database.
On drop, make an Ajax request to a PHP script that puts them into $_SESSION.
This is the final solution I made thanks to GolezTrol :), I never knew you could make cookies using js
<script type="text/javascript">
function setCookie(c_name,value,exdays){
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
</script>
<script type="text/javascript">
$(function() {
$( "#object" ).draggable({ containment: ".body", scroll: false });
$( "#object" ).bind( "dragstop", function(event, ui) {
var l = document.getElementById('object').style.left;
javascript: setCookie('objectl', l, 365);
var t = document.getElementById('object').style.top;
javascript: setCookie('objectt', t, 365);
});
});
</script>
somehow still not able to do what I’m inted to do. It gives me the last value in loop on click not sure why. Here I want the value which is been clicked.
Here is my code:
$(document).ready(function() {
var link = $('a[id]').size();
//alert(link);
var i=1;
while (i<=link)
{
$('#payment_'+i).click(function(){
//alert($("#pro_path_"+i).val());
$.post("<?php echo $base; ?>form/setpropath/", {pro_path: $("#pro_path_"+i).val()}, function(data){
//alert(data);
$("#container").html(data);
});
});
i++;
}
});
Here the placement_1, placement_2 .... are the hrefs and the pro_path is the value I want to post, the value is defined in the hidden input type with id as pro_path_1, pro_path_2, etc. and here the hrefs varies for different users so in the code I have $('a[id]').size(). Somehow when execute and alert I get last value in the loop and I don’t want that, it should be that value which is clicked.
I think onready event it should have parsed the document and the values inside the loop
I’m not sure where I went wrong. Please help me to get my intended result.
Thanks, all
I would suggest using the startsWith attribute filter and getting rid of the while loop:
$(document).ready(function() {
$('a[id^=payment_]').each(function() {
//extract the number from the current id
var num = $(this).attr('id').split('_')[1];
$(this).click(function(){
$.post("<?php echo $base; ?>form/setpropath/", {pro_path: $("#pro_path_" + num).val()},function(data){
$("#container").html(data);
});
});
});
});
You have to use a local copy of i:
$('#payment_'+i).click(function(){
var i = i; // copies global i to local i
$.post("<?php echo $base; ?>form/setpropath/", {pro_path: $("#pro_path_"+i).val()}, function(data){
$("#container").html(data);
});
});
Otherwise the callback function will use the global i.
Here is a note on multiple/concurrent Asynchronous Requests:
Since you are sending multiple requests via AJAX you should keep in mind that only 2 concurrent requests are supported by browsers.
So it is only natural that you get only the response from the last request.
What if you added a class to each of the links and do something like this
$(function() {
$('.paymentbutton').click(function(e) {
$.post("<?php echo $base; ?>form/setpropath/",
{pro_path: $(this).val()},
function(data) {
$("#container").html(data);
});
});
});
});
Note the use of $(this) to get the link that was clicked.