i would like to use ajax to retrieve information from a php page that will update "onchange" of a select drop down menu. (<select>). i used jquery to check if it is changed
$('#names').change(function() {
//code to get the info into the div comes here
})
all id like to do is work the page "check.php" with "?v=valueOfNamesGoesHere"
and return the information into the div names "output"
I have tried
$('#names').change(function() {
$('#output').load('check.php?v=' + $('#names').val());
});
without success. I have checked the "check.php" itself with the information that is supposed to get passed into it. for example "check.php?v=john" and i got the information needed in the page itself. (when i go directly to mysite.com/check.php?v=john).
what am i doing wrong?
Thanks!
use
$('#names').find(":selected").text()
instead of $('#names').val() as it is a dropdown..
Related
ORIGINAL POST: Not sure why I am having such a hard time grasping this but I am creating a page that executes a query to list a set of records per a user. I am wanting to create a div that shows the details of a select record from the list. I am attempting to load that record with the following:
$(document).ready(function(){
// load index page when the page loads
$("#form").load("tm-reserves-form.php");
$("#record").click(function(){
// load home page on click
$("#form").load("tm-reserves-form-test.php?ContactID"+$ContactID);
});
});
Initial form loads but I can not get my .click function to work using the URL parameters.
How can I pass the url parameter from my current query into a div that loads an external page and executes a second query based on that url paramenter (primary id)?
Thanks in advanced for helping me out!
EDIT POST: Found solution, but another issue has arisen.
So I took a crash course this weekend on ajax and I found a working solution here:
$(document).ready(function(){
// load index page when the page loads
$("#form").load("tm-reserves-form.php");
$("#record").click(function(){
// load home page on click
var ContactID = document.getElementById('ContactID').value;
$("#form").load("tm-reserves-form.php", {"ContactID": ContactID});
});
});
So with this example, when the page loads the div form is loaded with a default page. With a click function on the label #record the div #form is than loaded with a parameter of ContactID that is a string value inside of #ContactID. All that seems to work very well (even passes the parameter correctly).
The issue now is that it is only allowing me to pass the first record to my div. Any thoughts on what I need to implement next? I originally thought it was to clear the var but that didn't work either.
The original query parameters are not readily available to a running script. So $ContactID is not resolved to an actual value.
See this page on methods for extracting query parameters from the current page:
Get query string parameters with jQuery
$(document).ready(function(){
// load index page when the page loads
$("#form").load("tm-reserves-form.php");
$("#record").click(function(){
// load home page on click
var ContactID = document.getElementById('ContactID').value;
$("#form").load("tm-reserves-form.php", {"ContactID": ContactID});
});
});
This code solved my initial question, but led to an additional question.
My problem is that i have 2 dropdowns that get its content from my DB, a simple SELECT * with the category and then select a item from that category.
First dropdown : "dropdown_type" is the category.
Second dropdown : "dropdown_abo" is the item.
At the second dropdown, i am using a JQuery pluging that makes it possible to search inside the dropdown, to get the item faster then scrolling (theres gonna be a lot of items in it). You can see the plugin here
When you select a item from the second dropdown, a div(abo_info) below shall show all the info of the selected item.
My problem is that I'm stuck, and don't know how to proceed. How can i make it so, when i select a category, and then an item i get the content from that item shown in the div below?
I'm using PHP, JQuery and Mysql_*(to DB connect, know about PDO but im not that good at it).
Can i please get some help here, or some examples on how it can be done?
I have made a JSfiddle so you can see the complete code
You seem to be headed the correct way and doing a good job of it.
Please proceed further by using the following steps as a guideline,
Using jQuery.ajax() or jQuery.post() you can basically send a request to a PHP file.
In the PHP file you can connect to your DB using either PDO or normal mySQL connectors and return your required data back to the AJAX call.
The returned data can be rendered and displayed as required at the HTML sections.
Please use these following references that can give you a better idea code wise:
Beginner’s Guide to Ajax Development with PHP
jQuery Ajax POST example with PHP
as #WisdmLabs mentioned, you are on the right track...
The steps to continue shouls be:
Add a JS event once both dropboxes were selected (using onchange() or a submit button)
The event will fire an AJAX request for a PHP file with the POST
data of the item you want to get the data for.
On the PHP file you will run your SQL query and send back the information needed- preferable as in json.
On the JS AJAX function you will get the Json object and inserted neede info into the page DOM
JS Code
$(".dropboxClass").change(function(){ // you can use a button instead or any other event type
// here you can first check that bothdropboxes were selected
// now get the values of the dropboxes
drop1 = $("#dropbox1").val();
drop2 = $("#dropbox2").val();
// run the AJAX request for the PHP file
var request = $.ajax({
url: 'test2.php',
dataType: "json" ,
method: "POST",
data: { d1: drop1, d2:drop2 }
});
request.done(function(itemData){
// here you will get the Json object , get the data you need and insert into the DOM
console.log('Status:' + itemData['status']);
console.log('Name:' + itemData['name']);
alert('success');
});
request.fail(function(){
// AJAX call failed - do something.....
});
});
PHP Script
// connect to your DB and get the data you need into an array
$DB_data = array(
"status"=>"code",
"name"=>"item Name",
"desc"=>"Item Description"
);
echo json_encode($DB_data);
so, I have read just about every question on this subject, but the solutions don't work for my project, it seems that when I change the dropdown, it does the first event, but when I change to a different element it doesn't do anything else, but when I do this with an alert message it changes every time.
here is what I have to demonstrate what I mean
I tried .post it works great until I add php and all the dynamic functions, is it because I used $('#updateDiv').html(url);
I also hide and showed the div based on the change of the dropdown, but all that did was hid and show the div, I want the div to show the content based on a list of categories.
the PHP side will be dynamic, but if I do .html() none of the php renders properly.
http://fiddle.jshell.net/LrxUS/
$.post(url, function(data) {
$("#updateDiv").html(data);
});
As per the fiddle, you have specified
var mydropdown = $('#mydropdown');
but in the change function, you have specified $(mydropdown), either define only id in the variable or the object. Like,
var mydropdown = '#mydropdown';
$(mydropdown).change(function() {}
After that use $.ajax to get the dynamic content.
Ok, lets make it the simplest so that there is no room for mistake in the client side script. Use $.load method defined here.
AS:
$("#updateDiv").load(url);
And don't forget to check what your firebug, chrome inspector or fiddler says about your request in case if you don't get the required result.
I am using below script on a form (say, form-A) to load another form (form-B) in thickbox, with values passed by controller.
First, in form-A, i am selecting one option from dropdown "customerID", then "Add Project" button (with id 'addProject') becomes visible, on clicking which, a thickbox appears with form-B in it. Here, in form-B, i want to pass selected customer. How can I do that?
I tried below code, and tried to access the $_GET['custID'] in controller's manage_project function, but it is showing blank. But when i am alerting the url1 (i have commented below), ID is coming there.
Below code is in form-A view file.
('#addProject').click(function(){
var url1='<?php echo SITEURL ?>/xome/invoice/manage_project?TB_iframe=true&height=800&width=700&inlineId=innerDiv&class=thickbox&custID='+$('#customerID').val();
//alert(url1);
tb_show('Add More Project',url1,'');
})
According to documentation at (http://thickbox.net/):
Important to Remember: Add all other query parameters before the
TB_iframe parameters. Everything after the "TB" is removed from the
URL.
So, try add custID before TB_iframe. And then you will be able to operate with a variable in the script, such as access them via $_GET['custID']. For example:
var url1='<?php echo SITEURL ?>/xome/invoice/manage_project?custID='+$('#customerID').val() + '&TB_iframe=true&height=800&width=700&inlineId=innerDiv&class=thickbox';
I'm using codeigniter for this project. I have a search form and search form results.
Now when I click search in search form I'm being redirected to search form result and I get results.
Is it possible to create div or table in search form which is hidden at first then call the search procedure and which results it returns to get them back in the page without reloading it?
Using jquery/ajax/php ? Thank you
I assume your search result view contains just a block of HTML for the search results (like a TABLE or somesuch, not a full HTML page with BODY)? If not update the view so it just contains the code for the results. Then you can just use the $.post method to submit the form get the view and then inject it into a DIV (or element of your choice):
$(document).ready(function() {
$('#myformid').submit(function() {
var seralizedForm = $(this).serialize();
var url = $(this).attr('action');
$.post(url, serializedForm, function(results) {
$('#resultsDiv').html(results);
}, "html");
return false;
});
});
This should plug into your code with minimal modification. Change the "myformid" to an ID you set on the form tag, and change "resultsDiv" to the ID of an empty DIV you want the results to go into.
What this is going to do is bind this function to be called when the form is submitted (either by pressing enter or clicking a submit button). It will serialize the form (so you can send the values of the inputs to your controller) and get the URL to submit to by the normal "action" attribute that forms have.
It will then submit the form to that URL via a post, and the results will be loaded into a DIV with the ID of resultsDiv.
Yes, it is in fact possible.
for CodeIgniter, I'd write a controller function & view for what you would like to display. then, make an AJAX call to the page, which will be whatever you want to display on the page, and load it onto the current page.
If you are using jQuery, you can look into their Various AJAX Functions to make the ajax call and retrieve the data