Pass JQuery variables to php - php

I want to pass jQuery variable to php file ,
this is my_js.js file
function updates() {
$.getJSON("php/fetch.php", function(data) {
$.each(data.result, function(){
var s_id = this['sender_id'];
});
});
}
and i want to display it here in php file,
<html>
<head><title>Pass jquery var to php file</title>
</head>
<body>
<div> <?php echo $s_id ; ?> </div>
<script type="text/javascript" src="my_js.js"></script>
<script type="text/javascript" src="jquery.js"></script>
</body>
</html>

You might consider using jQuery to set the s_id value in the page.
You can modify your HTML as follows (the important part being the added span element):
<html>
<head><title>Pass jquery var to php file</title>
</head>
<body>
<div><span id="s_id"></span></div>
<script type="text/javascript" src="my_js.js"></script>
<script type="text/javascript" src="jquery.js"></script>
</body>
</html>
And you can use jQuery in your getJSON callback to set the value as follows to find your added span element and modify its text:
function updates() {
$.getJSON("php/fetch.php", function(data) {
$.each(data.result, function(){
$("#s_id").text(this['sender_id']);
});
});
}

Related

jQuery load with php $_GET didn't work

i want to send Get when the link clicked to receive the result in php code
and this what happened
this in php file working perfect
<html>
<a class="cc" href="#">click me</a>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".cc").click(function () {
$(".body").load('page.php ')
})});
</script>
<section class="body"></section>
</html>
but when i put GET to the href didn't work just Flashing content
<html>
<a class="cc" href="?id=1">click me</a>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".cc").click(function () {
$(".body").load('page.php ')
})});
</script>
<section class="body"></section>
</html>
In the second case, you really need to stop the <a> from following the link.
$(document).ready(function() {
$(".cc").click(function(e) {
e.preventDefault();
$(".body").load('page.php');
});
});

How to assign a PHP variable value to JavaScript variable

In this code which I am posting i have one problem. I want my PHP variable to be stored in JavaScript variable but it shows error. The code is below.
<?php
$name="anurag singh";
echo '
<html>
<head>
<script type="text/javascript" src="jquery-2.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var name1=.$name.";"
$.post("main_page.php",{input1: name1}, function(msg){
alert("hi "+msg);
});
});
</script>
</head>
<body>
<h1>This is the demo!</h1>
<h2>In echo we can add more than one statements</h2>
</body>
</html>
';
?>
Now when I am assigning $name to the variable name1 than I get an syntax error. Please let me know what changes I have to make. So that I get the value of the PHP variable $name stored in JavaScript variable name1.
In javascript with echo version: var name1= "'.$name.'";
<?php
$name = "anurag singh";
echo '
<html>
<head>
<script type="text/javascript" src="jquery-2.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var name1= "'.$name.'";
$.post("main_page.php",{input1: name1}, function(msg){
alert("hi "+msg);
});
});
</script>
</head>
<body>
<h1>This is the demo!</h1>
<h2>In echo we can add more than one statements</h2>
</body>
</html>
';
?>
And you can use like var name1= "<?php echo $name; ?>"; seperated html and php
<?php
$name="anurag singh";
?>
<html>
<head>
<script type="text/javascript" src="jquery-2.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var name1= "<?php echo $name; ?>";
$.post("main_page.php",{input1: name1}, function(msg){
alert("hi "+msg);
});
});
</script>
</head>
<body>
<h1>This is the demo!</h1>
<h2>In echo we can add more than one statements</h2>
</body>
</html>
<?php
$name="anurag singh";
echo '
<html>
<head>
<script type="text/javascript" src="jquery-2.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var name1='.$name.'";"
$.post("main_page.php",{input1: name1}, function(msg){
alert("hi "+msg);
});
});
</script>
</head>
<body>
<h1>This is the demo!</h1>
<h2>In echo we can add more than one statements</h2>
</body>
</html>
';
?>
echo it into a script tag
echo '<script> var name = '.$name.';</script>';
You can do it this way -
<?php $name="anurag singh"; ?>
<html>
<head>
<script type="text/javascript" src="jquery-2.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var name1="<?php echo $name ?>";
$.post("main_page.php",{input1: name1}, function(msg){
alert("hi "+msg);
});
});
</script>
</head>
<body>
<h1>This is the demo!</h1>
<h2>In echo we can add more than one statements</h2>
</body>
</html>
You are pasing string $ame not variable as because you have used '...' this let the php know that its string no more variables inside this string.
<?php
$name="anurag singh";
?>
<html>
<head>
<script type="text/javascript" src="jquery-2.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var name1=<?pgp echo $name ?>;
$.post("main_page.php",{input1: name1}, function(msg){
alert("hi "+msg);
});
});
</script>
</head>
<body>
<h1>This is the demo!</h1>
<h2>In echo we can add more than one statements</h2>
</body>
</html>
try this
$(document).ready(function(){
var name1="'.$name.'";
$.post("main_page.php",{input1: name1}, function(msg){
alert("hi "+msg);
});
you can assign this value like var name= "'. $name.'";

BackboneJS with normal php server

I'm new to backboneJS so i have a problem sync the data from PHP server with backbone that i dont even get the json data from the php server to backbone model!Help me
Here is my php code
$data = array('1'=>array('id'=> 1, 'description'=>'Pick up milk', 'status'=> 'incomplete' ));
echo json_encode($data);
and the backbone js code
<html>
<head>
<script src="jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="underscore-min.js" type="text/javascript"></script>
<script src="backbone.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
var TodoItem = Backbone.Model.extend({});
var todoItem = new TodoItem();
todoItem.url = '/backboneJS/todo.php';
console.log(todoItem.fetch());
</script>
<body>
</body>
</html>
I cant get the json data from the php to the backbone.What wrong with my code ?
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js" type="text/javascript"></script>
</head>
<body>
</body>
<script type="text/javascript">
var TodoModel = Backbone.Model.extend({
urlRoot: '/backboneJS/todo.php',
initialize: function(){
// Place init message or else
}
});
var todoItem = new TodoModel();
todoItem.fetch({
success: function(todoResult){
console.log(todoResult);
console.log(todoItem.get(1));
}
});
</script>
</html>
Sticking to design pattern also, if you call your todoItem outside of nested function its likely to be executed before the actual fetch() is performed. Tested locally.

moving jquery autocomplete code snippet to script.js file

I'm trying to keep true to the DRY principle by moving my jquery auto complete code to a scripts.js file but i'm having trouble getting the auto complete functionality to work when i move it.
Here's how its setup at the moment.
add form
<head>
<?php
require_once ('includes/connect-db.php');
require_once ('includes/functions.php');
?>
<link href="css/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="includes/js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript">
$('document').ready(function() {
$('#datepickerID').datepicker({
changeYear:true,
changeMonth:true,
dateFormat:'yy-mm-dd'
})
<?php $productArray = autoComplete();?>
$(function() {
var js_products_array = <?php echo json_encode($productArray); ?>;
$( "#autocompleteID" ).autocomplete({
source: js_products_array
});
});
});
</script>
</head>
I'm uncertain as to how to get this to work between the addForm.php and scripts.js when there is embeded php code in the javascript, if that makes sense.
You will have to keep js_products_array outside of the .js file as it contains data from PHP scripts and initilize the autocomplete() on document ready.
so you can keep only
<?php $productArray = autoComplete();?>
<script type="text/javascript">
var js_products_array = <?php echo json_encode($productArray); ?>;
</script>
and in your file.js you can add
$('document').ready(function() {
$('#datepickerID').datepicker({
changeYear:true,
changeMonth:true,
dateFormat:'yy-mm-dd'
})
$( "#autocompleteID" ).autocomplete({
source: js_products_array
});
});

jquery getting data when click on specfic div,i want that when we click on Ajax 1 then

i want that when we click on Ajax 1 then content of ajax1 is change but Ajax 2 will remain same and vice verse plz help i want to do that with jquery
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#pas").click(function(){
$.ajax({url:"001.php?q=1 & l=111", success:function(result){
$("#pas").html(result);
}});
});});
</script>
</head>
<body>
<div id="pas"><h2>AJAX 1</h2></div>
<div id="pas"><h2> AJAX2 </h2></div>
</body>
</html>
Two elements cannot have the same id. You should change to using classes.
<div class="pas"><h2>AJAX 1</h2></div>
<div class="pas"><h2> AJAX2 </h2></div>
Once you've done that, you can use this to target the correct item.
$(document).ready(function(){
$(".pas").click(function(){
var $this = $(this); // "this" is the clicked element
$.ajax({url:"001.php?q=1 & l=111", success:function(result){
$this.html(result);
}});
});
});
you have to differentiate div's ids: give them two different id (i.e. pas1 and pas2 ) and same class 'pas', then fire actions on div.pas
Don't use duplicated id's, use class instead. Use a refference to the clicked object to update your content. Here is your modified code:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function(){
var _this = this;
$.ajax({url:"001.php?q=1 & l=111", success:function(result){
$(_this).html(result);
}});
});});
</script>
</head>
<body>
<div><h2>AJAX 1</h2></div>
<div><h2> AJAX2 </h2></div>
</body>
</html>

Categories