Ajax(ify) Combox populated by PHP array

Question

I'm still learning how Ajax works, and as such I'm having a lot of trouble taking my current PHP combo box, and making it Ajaxified. The combo box choices are populated by a PHP array, and represent the number of images I wish to display on a page. Right now all the code is in one PHP file, although I'm pretty sure when it's in Ajax, it will have to be in two pages.

Oh, and if you could use jQuery, it would be much appreciated.

<?php
     $curPage = 0;
     if(isset($_GET['page'])){
        $curPage = (int) $_GET['page'];
     }

    // values of combobox in an array
    $imgNum_values = array('12','16','20');
    if(isset($_GET['imgs']) && in_array($_GET['imgs'], $imgNum_values))
    {
        $selected_imgNum = $_GET['imgs'];
    }else{
        // input default value, if empty the first variable will be shown
        $selected_imgNum = '';
    }
    $option_num = count($imgNum_values);
    echo '
        <form name=imgNum method="get" action="new_arrivals_img.php">
            <label>number of images per page:</label>
            <select name="imgs" onChange="imgNum.submit();">';

    for($x = 0; $x < $option_num; $x++)
    {
        // print the options
        echo '
                <option value="'.$imgNum_values[$x].'"'.($imgNum_values[$x] == $selected_imgNum ? 
                    ' selected="selected"' : '').'>'.$imgNum_values[$x].'</option>';
    }

    echo '
            </select>
            <input type="hidden" name="page" value="<?php echo $curPage; ?>" />
        </form>';

?>

Below is the PHP query etc for the images displayed. I don't need the below section changed into Ajax at the moment, unless it's essential to the above code being changed into Ajax.

<?php
    if((int) $_GET['imgs'] > 0){ 
        $limit = (int) $_GET['imgs']; 
    } else { 
        $limit = 12; 
    }
    $mysql_link = mysql_connect("localhost", "root", "root");   
    mysql_select_db("new_arrivals_imgs") or die("Could not select database");

    $query = mysql_query("SELECT `imgURL`,`imgTitle` FROM `images` ".
    "ORDER BY `imgDate` DESC LIMIT " . $limit * $curPage . ", $limit") or die(mysql_error());

    if(!$query) {
        echo "Cannot retrieve information from database.";
    } else { 
    while($row = mysql_fetch_assoc($query)) { 
        echo "<li><a href='new_arrivals_img/".$row['imgURL']."' class='gallery' title='".$row['imgTitle']."'><img src='new_arrivals_img/thumbnails/".$row['imgURL']."'></a></li>";
      }
    }

?>

Thanks so much for any help.

well that would be amazing! but i figure that might be a lot of work. I think more what I'm looking for, is a guide to what I have to do. Being that the combo box options are created by php, I figure I will need to use some jQuery to do this on load, then some jQuery to submit onChange. But I have no idea how to write these functions etc. — stefmikhail
– stefmikhail, Commented Aug 19, 2011 at 19:48

Pablo · Accepted Answer · 2011-08-20 02:12:24Z

2

I'll give you an example on how you could do this with jQuery:

The HTML:

<form>
    <label>Images Number:</label>
    <select id="imgNum" name="imgNum">
        <option value="12">12</option>
        <option value="16">16</option>
        <option value="20">20</option>      
    </select>
</form>

<div id="imgTray"></div>

The JavaScript(jQuery):

//Bind the onChange event to Fetch images on combox selection
$("#imgNum").change(function(){
    //The combo box
    var sel = $(this);
    //Selected value
    var value = sel.value();

    //Feth the images
    $.get("get_images.php",{imgs: value}, function(data){
        //Add images(or what ever the script output is) to the document
        $("#imgTray").html(data);
    });
})

//You should store the current selected option in a cookie
//For the sake of the example i'll set the default permanently to 12
var imgNum_selected = 12;

//set the initial selected option and trigger the event
$("#imgNum [value='"+imgNum_selected+"']")
    .prop("selected","selected")
    .change();

I'll assumed you know where to put the jQuery code

The PHP(get_images.php):

<?php
    if((int) $_GET['imgs'] > 0){ 
        $limit = (int) $_GET['imgs']; 
    } else { 
        $limit = 12; 
    }
    $mysql_link = mysql_connect("localhost", "root", "root");   
    mysql_select_db("new_arrivals_imgs") or die("Could not select database");

    $query = mysql_query("SELECT `imgURL`,`imgTitle` FROM `images` ".
    "ORDER BY `imgDate` DESC LIMIT " . $limit * $curPage . ", $limit") or die(mysql_error());

    if(!$query) {
        echo "Cannot retrieve information from database.";
    } else { 
    while($row = mysql_fetch_assoc($query)) { 
        echo "<li><a href='new_arrivals_img/".$row['imgURL']."' class='gallery' title='".$row['imgTitle']."'><img src='new_arrivals_img/thumbnails/".$row['imgURL']."'></a></li>";
      }
    }

?>

And by the way i did not test this, i hope you find something useful

answered Aug 20, 2011 at 2:12

Pablo

6,0767 gold badges38 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

stefmikhail Over a year ago

Thanks! I'm at work right now so I will test this out hopefully tonight when I get home, if not, tomorrow morning. Any chance you might be around if I have any questions concerning it?

Pablo Over a year ago

Well,i should get that email notification if you leave another message here

stefmikhail Over a year ago

Pablo, so I've tested it, and although the combo box appears to be functioning correctly, I can't really tell for sure because the data (images in this case) are not being shown. I'm going to try to figure it out myself, although I'm not that sure I know what I'm doing.

stefmikhail Over a year ago

I figured it out. The javscript var value = sel.value() should have been var value = sel.val(). I am wondering something else however. I wish to integrate this code with a jQuery Ajax pagination code that is already put together and working. How difficult would this be? Should I be able to just place it in, and it should work? I don't know enough about how Ajax works to figure this. For example, does the php have to be in separate files? I don't know if this would be a problem seeing as both share common information such as current page, and images per page.

Collectives™ on Stack Overflow

Ajax(ify) Combox populated by PHP array

1 Answer 1

The HTML:

The JavaScript(jQuery):

The PHP(get_images.php):

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

The HTML:

The JavaScript(jQuery):

The PHP(get_images.php):

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related