Develop Reference

jQuery and Php variable calling

I have a problem with jQuery and PHP.
I have a .php file that contains a variable, for example var surname = "";
The problem that I am facing is, I want remotely access it from a .html file and give it a value from another variable in the .html file.
Is there any way to do it?
Thanks.

Ok, so you said you wanted to get a variable from HTML and send it to the PHP file to change data, that is what the variable 'varfromhtml' is.
You just need to give it a value you want to send, you can get the value of a div using jQuery eg
<div id="div">data</div>
var varfromhtml = $.("#div").val();
The variable 'varfromhtml' is now equal to 'h08sahdas', you can mess around with that to get it right for you.
Here is the final script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var varfromhtml = $.("#div").val();
$(document).ready(function(){
$.ajax({
method: "POST",
action: "myfile.php",
data: {
varfromhtml:varfromhtml
},
success: function(data){
$('#mydiv').val(data);
}
});
</script>

How to get the value of an object present inside a div with id using AJAX

I have a view page where i have an object inside a div like :-
<div id="booking_id"><%#booking_id%></div>
I want to get the value of #booking_id to be passed in AJAX data params and my ajax function is like this :
<script type="text/javascript">
$(document).ready(function(){
$("#selecthotel2").change(function(){
var room = $(this).children(":selected").val();
var params = $('#booking_id').filter('#booking_id').val();
$.ajax({
url: "/rooms/assign_room",
data: {
room,
params
}
})
});
});
</script>
But i am not getting the #booking_id value to be passed to another action.
I think i am going somewhat wrong in the ajax syntax,kindly help.

change
$('#booking_id').filter('#booking_id').val();
to simply
$('#booking_id').text();
Currently your code is trying to look inside $("#booking_id") for another element with the same ID, instead of taking the value of $('#booking_id') itself.
Also since $("#booking_id") is a div and not an input, I think you need to get the contents using text(), not val().

Adding more than 1 variable to be called on php from a script

I have a code like this (copied from a forum):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#lets_search").bind('submit',function() {
var ggg = $('#colsrc').val();
$.post('students_query.php' ,{ggg:ggg}, function(data){
$("#search_results").html(data);
});
return false;
});
});
</script>
What it does is submit search query and return results without refresh.
Just to specify and to be clearer:
lets_search - the ID of a form where every data is taken.
colsrc - ID of a dropdown menu
students_query.php - the file where the submit action takes place, and the one that returns results after a query.
search_results - ID of a span tag where the returned results are shown
Everything works fine. My problem here is the variable created (ggg), which gets its value from colsrc, is the only one value being passed to students_query.php. What I want to happen is to pass 2 values to the students_query.php and I don't know which part of the code to edit or how to do it either.
Consider this data to be used:
ggg2 - another variable to be declared.
searchthis - id of another dropdown menu that contains the other value I want to pass to the php file.
I badly need 2 data to be passed on the php file for both of them will be used on a query that will determine the results to be returned. Thank you.

You can add another value in the post function parameters :
$.post('students_query.php' ,{
ggg:ggg,
ggg2: 'something'
}, function(data){
$("#search_results").html(data);
});

JQuery post function accepts the data to be posted as a plain Javascript object or a string in its second parameter. When you want to post multiple values you can pass an object with multiple key:value pairs. In you case the code will look like this:
// $.post( url, data , success callback, expected dataType)
$.post('students_query.php', {
ggg: ggg, // Add a comma here
ggg2: 'value', // Then add other data like this
searchthis: 'another value' // You can keep adding more
}, function(data) {
$("#search_results").html(data);
});

AJAX URL update

Im sure there is a simple solution for this but im having issues,
I have an external ajax.js file that has an AJAX call like so:
$(function() {
$.ajax({
url: url,
success: function( data, status )
above the AJAX call I have got two global variables called ticker and url like so:
var ticker = 'AAPL'
var url = 'http://blahblahblah' + ticker
In my HTML file I have got an input box where the user types in a ticker symbol (e.g. GOOG) and clicks a button that would update the ticker variable so that the AJAX call is done again with the new URL.
<form id="form">
<h3>Enter the ticker symbol of the company you wish to view:</h3>
<input type="text" id="userInput">
<button onclick="myFunction()">Try it</button>
</form>
<script type="text/javascript" src="ajax.js">
<script>
function myFunction()
{
//old value
alert(ticker);
ticker = document.getElementById('userInput').value;
//new value
alert(ticker);
}
</script>
This code changes the ticker variable but the AJAX call is still being performed with the old ticker url. I think its not being assigned properly? Im very new to AJAX but I cant find any tutorials online that explain this problem.
Thanks

Strings are immutable in Javascript, meaning that url is going to be constant, even if you change ticker. Do this instead:
$(function() {
$.ajax({
url: "http:/blah" + ticker,
success: function(data, status) {}
});
});
EDIT: Now that I think about it, it has nothing to do with strings being immutable. Doing url = "http:/" + ticker doesn't create a closure with the value of ticker, it simply creates a new string value and stores it in url. After the new value is created, it's not linked to ticker in any way.

As far as I can tell from the code you've posted, your ajax routine is only being called when the page is loaded, which explains why only the default url / ticker is shown in the results.
You need to wrap the ajax routine in a function and call it after the user has inputted a symbol:
In your ajax.js file:
function getSymbolInfo(ticker) { // consider passing ticker to this function instead of using a global var
$.ajax({
url: url + ticker,
success: function( data, status ) {
// show results
}
});
}
And from MyFunction:
function myFunction()
{
var ticker = document.getElementById('userInput').value;
getSymbolInfo(ticker);
}

Show ajax tooltip from an SVG onclick event

I have an SVG with this code for some shapes (its a map)
onclick="top.traeDatos(evt.target.id);"
in the html file I have:
function traeDatos(region){
alert(region);
}
So, I click on a region, I have the alert window with the region name and the variable in the html file. Thats great
Now I want that the click on the map shows a popup with more information i'll get using ajax from multiple databases trough a file called, for example "getDetails.php".
Im new in js and ajax, I know how to make a standard call in ajax to get some information given an id (or name in this case), I know how to change the value of a text field to the text I get trought the ajax call...but I dont understand how to call ajax and show a tooltip from that javascript code in the SVG or the one in html.
Im not sure too of what tolltip to use, but one problem at the time ;)
Can you enlighten me a little.
Thanks!

Here's a start:
function traeDatos(region){
var domn = document.domain;
document.domain = domn;
var detURL = "http://" + domn + "/getDetails.php";
$.ajax({
url: detURL,
type: 'POST',
data: {
region: region
},
cache: false,
success: function(json){
var data = jQuery.parseJSON(json);
//using PHP's json_encode() you can return an array
//in the example below 'info' is an item in the array
$('#insert_place').val(data.info);
}
});
}
Let me know if you have some problem with that.