Print not working as desired in Lightbox

[jscheuer1]

Combo2Conct.php is not working. We want it to return the options only, so it should not have:

<select name="Combo2" id="Combo2">

on it. But that's not the big problem. If I post to it from a form like so:

<form method="post" action="http://raihans.co.uk/source/Combo2Conct.php">
<input type="text" name="Country_Name" value="spain"><br>
<input type="submit" value="Go">
</form>

It needs to return something like so:

  <option selected="selected">Select Airport</option>
  <option value="Alicante">Alicante</option>
  <option value="Barcelona">Barcelona</option>
  <option value="Malaga">Malaga</option>

Or something like that for the states. It's not doing either of those things. Can you make it so that it does? I can't because I don't do database work. Once it is returning the options, the AJAX part should work.

[jscheuer1]

I see now that Combo2Conct.php is working for Spain, Bangladesh, Turkey and Greece I think, not for France.

So everything should be working for those countries that are working. Except I also see that you have no Combo2 select on the user-login/db-test page.

You need to add something like the highlighted:

<form method="post" action="http://raihans.co.uk/source/Combo2Conct.php">
<select name="Combo1" id="Combo1" onchange="run()">
<option value="" selected>Select a country</option>
<?php $link = mysql_connect("Domain_Name","DB_User","DB_User_pwd");
if (!$link)    {  die('Could not connect to Database: ' . mysql_error());   
}
mysql_select_db("DB_Name",$link);
$category = "SELECT Country_Name FROM Test_Country";
$query_result = mysql_query($category);
while($result = mysql_fetch_assoc($query_result)) { ?>
<option value = "<?php echo $result['Country_Name']?>"><?php echo $result['Country_Name']?></option>
<?php
} ?>
</select>
&nbsp;&nbsp;&nbsp;<select name="Combo2" id="Combo2">
<option value="" selected>Select a state</option>
</select>

&nbsp;&nbsp;&nbsp;TextBox1:&nbsp;&nbsp; <input type="text" id="Text1" placeholder="get value on option select"><br>
</form>

That's where the state options from the AJAX POST request will show up.

[raihan]

Yes, you are right, I have entry only for Bangladesh, Spain and Turkey. Just as a test.
As you mentioned I have added another Combo. As I click on Country, 2nd Combo get changed, but doesn't show anything. I think, it cannot accessing the 'Combo2Conct.php' file. Could be there any quotation or symbol problem in my code. Full code as:

<script>
function run() {
var str = document.getElementById("Combo1").value;
document.getElementById("Text1").value = str;
(function($){
$.ajax({
url: 'http://raihans.co.uk/source/Combo2Conct.php',
data: 'Country_Name=' + str,
method: 'post',
success: function(result){
$('#Combo2').empty().append(result);
}
});
})(jQuery); }
</script>

<form method="post" action="http://raihans.co.uk/source/Combo2Conct.php"></form>

<select name="Combo1" id="Combo1" onchange="run()">

<option value="" selected>Select a country</option>

<?php $link = mysql_connect("raihanscouk1.ipagemysql.com","riyad","Close-6");
if (!$link) { die('Could not connect to Database: ' . mysql_error());
}
mysql_select_db("conct",$link);
$category = "SELECT Country_Name FROM Test_Country";
$query_result = mysql_query($category);
while($result = mysql_fetch_assoc($query_result)) { ?>
<option value = "<?php echo $result['Country_Name']?>"><?php echo $result['Country_Name']?></option>
<?php
} ?>
</select>

&nbsp;&nbsp;&nbsp;<select name="Combo2" id="Combo2">
<option value="" selected>Select a state</option></select>

&nbsp;&nbsp;&nbsp;TextBox1:&nbsp;&nbsp; <input type="text" id="Text1" placeholder="get value on option select"><br>

and Combo2Conct.php as:

<?php
$CName=isset($_POST['Country_Name'])? $_POST['Country_Name'] : '';
if(!$CName){die();}
$link = mysql_connect("raihanscouk1.ipagemysql.com","riyad","Close-6");
if (!$link) { die('Could not connect to Database: ' . mysql_error());
}
mysql_select_db("conct",$link);
$category = "SELECT State_Name FROM Test_State LEFT JOIN Test_Country USING (CountryID) WHERE Country_Name='$CName'";
$query_result = mysql_query($category);
while($result = mysql_fetch_assoc($query_result)) { ?>
<option value = "<?php echo $result['State_Name']; ?>"><?php echo $result['State_Name']; ?></option>
<?php
}
?>

Thanking you again.


Raihan

[raihan]

Yes, you are right, I have entry only for Bangladesh, Spain and Turkey. Just as a test.
As you mentioned I have added another Combo. As I click on Country, 2nd Combo get changed, but doesn't show anything. I think, it cannot accessing the 'Combo2Conct.php' file. Could be there any quotation or symbol problem in my code. Full code as:

<script>
function run() {
var str = document.getElementById("Combo1").value;
document.getElementById("Text1").value = str;
(function($){
    $.ajax({
        url: 'http://raihans.co.uk/source/Combo2Conct.php',
        data: 'Country_Name=' + str,
        method: 'post',
        success: function(result){
            $('#Combo2').empty().append(result);
        }
    });
})(jQuery); }  
</script>

<form method="post" action="http://raihans.co.uk/source/Combo2Conct.php"></form>

<select name="Combo1" id="Combo1" onchange="run()">

<option value="" selected>Select a country</option>

<?php $link = mysql_connect("Domain_Name","DB_User","DB_User_pwd");
if (!$link)    {  die('Could not connect to Database: ' . mysql_error());   
}
mysql_select_db("DB_Name",$link);
$category = "SELECT Country_Name FROM Test_Country";
$query_result = mysql_query($category);
while($result = mysql_fetch_assoc($query_result)) { ?>
<option value = "<?php echo $result['Country_Name']?>"><?php echo $result['Country_Name']?></option>
<?php
} ?>
</select>

&nbsp;&nbsp;&nbsp;<select name="Combo2" id="Combo2">
<option value="" selected>Select a state</option></select>

&nbsp;&nbsp;&nbsp;TextBox1:&nbsp;&nbsp; <input type="text" id="Text1" placeholder="get value on option select"><br>

and Combo2Conct.php as:

<?php
$CName=isset($_POST['Country_Name'])? $_POST['Country_Name'] : '';
if(!$CName){die();}
<?php $link = mysql_connect("Domain_Name","DB_User","DB_User_pwd");
if (!$link)    {  die('Could not connect to Database: ' . mysql_error());   
}
mysql_select_db("DB_Name",$link);
$category = "SELECT State_Name FROM Test_State LEFT JOIN Test_Country USING (CountryID) WHERE Country_Name='$CName'";
$query_result = mysql_query($category);
while($result = mysql_fetch_assoc($query_result)) { ?>
<option value = "<?php echo $result['State_Name']; ?>"><?php echo $result['State_Name']; ?></option>
<?php
}
?>

Thanking you again.


Raihan

[jscheuer1]

I made a typo, it's type not method, so run should be:

<script>
function run() {
var str = document.getElementById("Combo1").value;
document.getElementById("Text1").value = str;
(function($){
    $.ajax({
        url: 'http://raihans.co.uk/source/Combo2Conct.php',
        data: 'Country_Name=' + str,
        type: 'post',
        cache: false,
        success: function(result){
            $('#Combo2').empty().append(result);
        }
    });
})(jQuery); }  
</script>

I also added a cache: false to prevent caching.

And we still need the default option on Combo2Conct.php:

<option value="" selected>Select a state</option>
<?php 
$CName=isset($_POST['Country_Name'])? $_POST['Country_Name'] : ''; 
if(!$CName){die();} 
<?php $link = mysql_connect("Domain_Name","DB_User","DB_User_pwd"); 
if (!$link)    {  die('Could not connect to Database: ' . mysql_error());    
} 
mysql_select_db("DB_Name",$link); 
$category = "SELECT State_Name FROM Test_State LEFT JOIN Test_Country USING (CountryID) WHERE Country_Name='$CName'"; 
$query_result = mysql_query($category); 
while($result = mysql_fetch_assoc($query_result)) { ?> 
<option value = "<?php echo $result['State_Name']; ?>"><?php echo $result['State_Name']; ?></option> 
<?php 
} 
?>

I tested it and it's working here.

[jscheuer1]

I see you have it working, a nice addition would be to disable Combo 2:

<select name="Combo2" id="Combo2" disabled> 

	<option value="" selected>Select a state</option></select>

and then to enable it only when there are choices:

function run() {
var str = document.getElementById("Combo1").value;
document.getElementById("Text1").value = str;
(function($){
    $.ajax({
        url: 'http://raihans.co.uk/source/Combo2Conct.php',
        data: 'Country_Name=' + str,
        type: 'post',
        cache: false,
        success: function(result){
            var c = $('#Combo2').empty().append(result).get(0);
            c.disabled = c.options.length < 2;
        }
    });
})(jQuery); }

[raihan]

Hi,
very very very thanks to you. It's working now. I was struggling with that abour 3 months now.
At the end the problem was with ajax. Mainly my ajax code was not working in joomla platform. That's why it was not having access to 'Combo2Conct.php' file. I have to use some 3rd party extension. And it's great now!!!

If you have time, please, explain me - how the ajax code is working in your code. as you mentioned 'function($)', then 'success:' portion. Mainly wish to know, how 'Country_Name' value is going to Combo2Conct.php and then again showing to Combo2.

Thanks a lot again. You are great. I will come back to you again and again.


Raihan

[raihan]

Hi,
Just realized - if I open my site from Joomla Admin panel, then it's working fine. But if I go in my site without Joomla Admin panel our problem is still there. Any idea, please? Is ajax code depends on user access? Only that could be the reason, coming on my mind. Though I have tried with the access for 'dbuser' to admin access. No success.

Thanking you again.


Raihan

[raihan]

Hi, Sorry, seems it's working now. Don't know why it's didn't work for sometime. Anyway, it's working now in all of my computer (Win XP, 7, 2008 Server, Ubuntu desktop and Server) with all the browsers (mozilla, chrome, IE8 and 9, Safari and Opera). Thanking you again.

Raihan

[jscheuer1]

You probably just needed to clear the browser cache on those other views.

The highlighted AJAX code is jQuery:

 . . .
(function($){
    $.ajax({
        url: 'http://raihans.co.uk/source/Combo2Conct.php',
        data: 'Country_Name=' + str,
        type: 'post',
        cache: false,
        success: function(result){
            var c = $('#Combo2').empty().append(result).get(0);
            c.disabled = c.options.length < 2;
        }
    });
})(jQuery);
. . .

And you have jQuery on the page, but it's in noConflict mode. That's so that $ can be used by another library - MooTools I think. The wrapper (not highlighted) is a self executing function which defines $ locally as jQuery.

Since run is already a function with local scope it could have been done like so:

function run() {
	var str = document.getElementById("Combo1").value;
	document.getElementById("Text1").value = str;
	var $ = jQuery;
	$.ajax({
		url: 'http://raihans.co.uk/source/Combo2Conct.php',
		data: 'Country_Name=' + str,
		type: 'post',
		cache: false,
		success: function(result){
		    var c = $('#Combo2').empty().append(result).get(0);
		    c.disabled = c.options.length < 2;
		}
	});
}

The $.ajax() function is the jQuery way to do AJAX (jQuery has many ways to do AJAX, $.ajax() is the main one, all others are shorthand versions of it for certain more common types of AJAX requests). It takes care of a lot of the details for you, such as determining how to make an AJAX request object cross browser and how to send headers if and when required. The properties passed to the $.ajax() function tell it what it's supposed to do. The url is the page to fetch. The data property is what to send to that page (URL encoded form data if POST, a query string if GET), the type property is the method to use (POST or GET usually). The cache property is (when the type is POST) whether or not to send a header that will cause the server to fetch the page fresh each time. If the type is GET it sends a unique time stamp in the query string. The success property is a function that runs when the request is successful. It has one parameter, which is the response from the request. I used result to represent that, you can use any non-reserved word. In this particular success function I wrote it to empty the Combo2 select and then fill that select with the response from theCombo2Conct.php page. I chose empty() which removes all DOM elements and append() which inserts things as DOM elements because when you later submit a form that has been altered by javascript bad things can happen if you have used innerHTML to alter it. Chaining the jQuery $(#Combo2) Object, I use the .get(0) method on it to get it as a DOM element to then set its disabled property based upon the length of its options property.

You can look up the jQuery.ajax() function here:

http://api.jquery.com/jQuery.ajax/

And you can check on the jQuery empty(), append(), and get() (there are two gets in jQuery, one is shorthand for a certain type of $.ajax(), I used the other here, it gets a DOM element from a jQuery Object) methods used in the success function there as well by using the search box near the top of that page.

If you have any other questions, just ask.