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 have a function:
$("button.btn-info").click(function() {
var id=this.id;
});
So, and I have to get item from PHP array $records with 'id' number. I need to insert this item into 'alert' function, but I don't know how I can pass variable from JS to PHP.
Please, tell me.
Use for example json_encode($records) and output it in a <script> tag in your html file like this:
<script type="text/javascript">
var records = <?php echo json_encode($records); ?>;
</script>
this should usually stand before your other js code that depends on the records-var.
or else you could use ajax (jQuery.get) if you want to load this var dynamically.
Not entirely sure I understand your question. It appears you just wish to write your PHP variable out to the javascript:
$("button.btn-info").click(function() {
var id=<?php echo $records->id?>;
});
Just remember that the Web page that hosts the JavaScript is static. If you want it to interact with PHP, you need to utilize AJAX or something else more advanced.
Simple answer:
The jQuery library my code base was using was out of date.
If yours is up to date try the following:
Step though the unminified version of jQuery to see if the issue is inside the library (which 9 times out of 10 it probably will not be)
When all else fails, just write a pure javascript solution.
Sometimes when I am writing a "class" in javscript with jQuery, jQuery will just not function as it should. For example today I was doing the following on an input select:
$(this).val(newValue);
This was working in jFiddle just fine, but not working in my project (both had 0 script errors). I tried to isolate the code as much as possible, but to no avail I could not get it to work.
The "solution" for this was to just write straight up javascript to set the value and it worked just fine.
I am not a jQuery master, but this is not the first time I had to write a straight javascript solution when jQuery "failed." Do any jQuery masters out there know why something like this might happen? Is there a method of debugging jQuery I am not aware of? Does anyone else run into these types of problems with jQuery? If so, do you have a solution?
Update(s):
Aug 25, 2011
I downloaded the most recent version of the jQuery library and stepped through it only to find that the bug was probably resolved between jQuery 1.4.4 and 1.6.2. I didn't realize the person who handles most of the javascript wasn't keeping the jQuery library up to date. After stepping through the jQuery 1.4.4 library it seems that jQuery was not able to find my selector for some reason and therefore was never setting the value. This problem has been resolved in 1.6.2....
Lesson of the week... keep your jQuery library up to date and verify your senior developer's statements when things aren't matching up.
-
I chose the answer I did because it was the only one which really helped me diagnose the source of the problem. While stepping through the unminified version of jQuery is such a simple solution, I actually should have done that before posting this question. I will post my findings as to why it didn't work later.
Aug 24, 2011
I agree with the user Sohnee that having a duplicate 'name' isn't bad practice and in some places you actually need it.
I feel rather stupid because the posted code has been wrong for almost a week now. I have updated the code. I moved the init function to the public scope.
Aug 22, 2011
While I am partially satisfied that the core of the problem is with duplicate names, I need to know why are duplicate names bad?
I know when dealing with inputs/css/etc you usually except IDs to be unique and classes to represent groups. I didn't think there were any rules about names, but if someone can explain to me why having duplicate names is bad practice, I will consider that the answer to this problem.
Aug 16, 2011
As for the current answers, I don't think it is a conflict. jQuery is working just fine. The binds are triggering causing the functions to be called in both implementations.
The problem line is
$(overrideSelector).each(
function(){
$(this).val(newVal);
}
);
For example, if I console out newVal in the .each() it will have a value of lets say 'A'.
Then if I console log out $(this).val() it will be 'B'. Then $(this).val(newVal); is run. After that if I do a console log of $(this).val() it will still be 'B'.
In the comments someone mentioned that I might be using the word this wrong. Both of these returned 0 javascript errors on Chrome's console. I will give the following code snippet was what was having problems. I will write the original and then what I replaced it with javascript.
I am aware the name is the same, but that is ok. The page I am working on is a huge form and the cloned select is just to make the user not have to scroll back to another part of the form.
HTML:
<div id='overrideHolder'>
</div>
<select name='mySelect'>
<option value='A'>A</option>
<option value='B'>B</option>
</select>
jQuery (this does not work):
var someClass = (function(){
var overrideSelector = '[name="mySelect"]';
...
return{
init : function(){
$(overrideSelector).clone().appendTo('#overrideHolder');
$(overrideSelector).each(
function(){
$(this).bind(
'change',
{},
function(){
someClass.overrideTryAgain(this);
}
);
}
);
}
overrideTryAgain : function(element){
var newVal = $(element).val();
$(overrideSelector).each(
function(){
$(this).val(newVal);
}
);
...
},
...
}
})();
$(document).ready(function(){
someClass.init();
}
Javascript (this works):
var someClass : (function(){
var overrideSelector = '[name="mySelect"]';
...
return{
init : function(){
$(overrideSelector).clone().appendTo('#overrideHolder');
$(overrideSelector).each(
function(){
$(this).bind(
'change',
{},
function(){
someClass.overrideTryAgain(this);
}
);
}
);
}
overrideTryAgain : function(element){
// NOTE: Using javascript instead of jQuery because jQuery was not duplicating the selected value properly
var newValue = $(element).get(0);
newValue = newValue.selectedIndex;
$(overrideSelector).each(
function(){
var currentSelect = $(this).get(0);
currentSelect.options[newValue].selected = true;
}
);
...
},
...
}
})();
...
$(document).ready(function(){
someClass.init();
}
I tried to reproduce the problem from your code, and like others could not do so. So it seems like there's something external that is interfering: a conflict, something with the markup, but generally something that's not obvious.
This sounds like a job for source-code stepping. Run this against the non-minified jQuery and trace the offending line with a debugger such as the built-in Chrome debugger or Firebug to see what's happening inside jQuery. This should reveal what's going wrong, be it a jQuery bug or something in your own code/markup that you didn't see before.
You have to make sure you are picking the right element. For that you can use Chrome console.log to see which DOM node you are trying to set the value.
Duplicated names on HTML are bad for a simple reason. When a form is sent to the server the input elements inside it are submitted sending the values through an object whose keys are the DOM names. If you have duplicated names the object will not bind the values with unique keys. You may have same names in different forms, that is allowed.
You can check the html specs for Form Controls (w3.org) to get more information on Control Names and the behavior for checkboxes.
Of note for a WebForms application: the whole page is a form, don't use same names ever...
First of all make sure, the jquery library is included. then try using jQuery object instead of $ some libraries use $ in their code. also take a look at jQuery.noConflict() method:
http://api.jquery.com/jQuery.noConflict/
If the purpose is simply to clone and "synchronise" values between selects your solution seems to be a bit too complex for what it is. First of all you probably do not need all the each loops as the $(overrideSelector) will do that for you automagically. Anyhow here is a simplified version of your code (If I missed the purpose of what your code is supposed to do let me know)
var someClass = new function() {
var overrideSelector = '[name="mySelect"]';
this.init = function() {
$(overrideSelector).clone().appendTo('#overrideHolder');
$(overrideSelector).live("change", function() {
$(overrideSelector).val($(this).val())
})
}
}
$(document).ready( function() {
someClass.init();
})
regarding the update, this always seems more solid to me:
$(overrideSelector).each(
function(i, element){
$(element).val(newVal);
}
);
I was looking at this problem and I couldn't get it to work with your code, but I tried implementing it on my own...
Will this work for you?
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
<div id='overrideHolder'>
</div>
<select name='mySelect'>
<option value='A'>A</option>
<option value='B'>B</option>
</select>
<input id="addSelect" type="button" value="Add select" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
(function ($) {
var _constants = {
selector: 'select[name="mySelect"]'
};
var _methods = {
init: function () {
var $select = $(_constants.selector).live('change', function (e) {
var $this = $(this);
var val = $(this).val();
$(_constants.selector).not($this).val(val);
});
_methods.cloneSelect($select);
$('#addSelect').click(function (e) {
_methods.cloneSelect($(_constants.selector).eq(0));
});
},
cloneSelect: function ($select) {
$select.clone().appendTo('#overrideHolder');
}
};
//shorthand for $(document).ready
$(function () {
_methods.init();
});
})(jQuery);
</script>
</body>
</html>
There is something wrong at a deeper level.
You can't simply clone the select, you shouldn't have two elements with the same name
Treat the original and the clone separately, you don't need to listen for changes on the original or reset the value on the copy
Drop the .each calls, jQuery already does that for you internally
$(element).get(0) === element. You're putting it in then taking it out.
That said, you can try something along Michal's suggestion:
var mySelect = $(overrideSelector)
var mySelectClone = mySelect.clone().appendTo('#holder')
mySelectClone.bind('change', function(){
addressValidation.overrideTryAgain(this)
})
...
overrideTryAgain : function(element){
var newVal = $(element).val()
mySelect.val(newVal)
}
Also, have you compared the two versions's outputs?
overrideTryAgain : function(element){
var newVal = $(element).val()
var newVal2 = element.options[element.selectedIndex].value
console.log("jQuery: "+ newVal)
console.log("DOM: "+ newVal2)
$(overrideSelector).val(newVal);
...
},
And if your option values include empty strings or other falsy values ("0", etc), you're in for a bag of hurt.
I have seen duplicate named form elements cause problems, so I would try to eliminate those.
I would also recommend being very careful with the val() method in this case. It looks fine in your code, but it's easy to stare at some code expecting on thing, forgetting that val() only returns the value of the first matching element (in the DOM).
I tried to duplicate your problem, but couldn't really. There are quite a few simplifications you can make that may reveal the problem:
use change instead of bind('change',{}
eliminate each calls
pass the newVal into your overrideTryAgain method-- instead of an element. The element is not needed and this will make it easier to test/debug.
var selector = "[name=mySelect]";
var holder = "#overrideHolder";
...
$(selector).clone().appendTo(holder);
...
$(selector).change(function () {
overrideTryAgain($(this).val());
});
var overrideTryAgain = function (newVal) {
$(selector).val(newVal);
}
Is it bad to have duplicate 'name' in different HTML input tags? NO - If this was the case then radio buttons would suck.
jQuery cannot change value where JS can NO
Your issue lies outside the code that you have supplied. jQuery has no issues with performing your requirements, and without the complete code it is virtually impossible to pin point - which works perfectly fine.
This statement is backed by the following fiddle http://jsfiddle.net/EeQEN/ which is just a simplification of the code provided.
var overrideSelector = '[name="mySelect"]';
var overrideTryAgain = function(element) {
var newVal = $(element).val();
$(overrideSelector).each(function() {
$(this).val(newVal);
});
};
$(overrideSelector).clone().appendTo('#overrideHolder');
$(overrideSelector).each(function() {
$(this).bind('change', {}, function() {
overrideTryAgain(this);
});
});
I have tried all the recent versions of jQuery, and unless it is a bug with a particular browser (which you have not specified), then I suspect the problem lies with variable scope leek.
If you are unconvinced then please provide a functional example of the problem an I am sure the exact problem can be identified.
A piece of advice for future reference, don't requery the DOM; cache all selected elements and never apply events via looping thru the elements - use delegate and allow events to bubble up, not only will it improve the performance it will also make your code more maintainable.
It is actually valid to have the same name attribute on many form elements, this is actually how some form elements are designed to work, such as radio buttons. It is also how some server-side languages are designed to work, for example the array-style naming in php name="country[]"
It is not bad practice to have duplicate names - you just need to be aware that you are not dealing with a unique element when you get the element by name. In fact, document.getElementsByName("sharedName") returns an array of results, even if you only have one element with the specified name.
So this isn't a question of it being bad practice, it is a question of whether your code (or the code contained in a framework you are using) understands this non-uniqueness.
I think you might have some luck implementing jQuery Class.
I put the classes you used in jsfiddle and even then it came up with a bunch of problems. The parentheses aren't closed everywhere and then you tried to define methods inside of a function when they aren't chained together.
var someClass = function(){
...
})();
Is missing a parentheses left of "function" and try putting in jQuery in the ending parentheses.
var someClass = (function(){
...
})(jQuery);
Along with that, I don't think you can define the normal "methods"
init : function(){
overrideTryAgain : function(element){
Just like that inside that parent function.
I want to load the external page's data into a div along with the javascript functions(though the js file is same for both of them, the functions do not work). The file loads fine into the page, but the javascript function don't work properly.
My Code-
var emaild = $("#hidden").val();
var div = $("#mydiv");
var refreshId = setInterval(function() {
$.getScript("js.js", function() {
div.html($("#load").load('posts.php?id='+emaild));
});
}, 6000);
$.ajaxSetup({ cache: false });
Thanks in advance. Hope I get a solution soon! :D
You may have a problem here:
div.html($("#load").load('posts.php?id='+emaild));
$.html() expects an html string and you're giving it a deferred instead. It may not be the cause of your script not running, but good to eliminate anyhow.
Is there a reason why you're using $("#load").load when you want the output of the call to go inside div. In other words, isn't this what you really want?
div.load('posts.php?id=' + emaild);
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.