How to Call a PHP File with AJAX in Magento

ajaxjavascriptmodulePHP

Seems like I can't make Ajax to call the PHP file and I can't figure out what or where the problem is. I`m trying to make a module that reads from database and it should display a form with options to select. The form gets populated but when I'm changing an option, it won't display the message.

Basically, it's a module that will list some stores available in database (id, name and email) and when a store is selected, the email should print out. I'm using this as example: http://www.w3schools.com/PHP/php_ajax_database.asp

Here is what I did until now:

in app\code\local\AdiGh\askStore\etc\config.xml

<frontend>
<routers>
    <askstore>
        <use>standard</use>
        <args>
            <module>AdiGh_askStore</module>
            <frontName>estores</frontName>
        </args>
    </askstore>
</routers>
<layout>
    <updates>
        <askstore>
            <file>estores.xml</file>
        </askstore>
    </updates>
</layout>

in app\code\local\AdiGh\askStore\controllers\IndexController.php and AjaxController (a file with same code just _AjaxController becomes _IndexController

    class AdiGh_askStore_AjaxController extends Mage_Core_Controller_Front_Action
{
    public function indexAction()
    {
        $this->loadLayout();
        $this->renderLayout();
    }
}

in c:\Users\Adi\Desktop\askStore\app\design\frontend\default\default\layout\estores.xml

<layout version="0.1.0">
<default>
    <reference name="content">
    </reference>
</default>
<askstore_index_index>
    <reference name="content">
        <block type="askstore/askstore" name="askstore" template="estores/estores.phtml" />
    </reference>
</askstore_index_index>
<askstore_ajax_index>
    <reference>
        <block type="askstore/askstore" name="root" template="estores/estores.phtml" output="toHtml">
    </block>
    </reference>
</askstore_ajax_index>

and the estores.phtml found in app\design\frontend\default\default\template\ has this:

    <?php
$theIds = $this->getId();
?>
<?php echo get_class($this)."<br />"; ?>
<script type="text/javascript">
    function showEmail(str)
    {
        if (str=="")
        {
            document.getElementById("response").innerHTML="";
            return;
        }
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("response").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","ajax/index/store/q="+str,true);
        xmlhttp.send();
    }
</script>
<form name='myForm'>
    Choose Store:
    <select name="store" id="store" onChange="showEmail(this.value);">
        <option value="">Please select a store</option>
        <?php foreach ($theIds as $i => $theId) : ?>
            <?php
                $theNames = $this->getName();
                $theName = $theNames[$i];
            ?>
        <option value="<?php echo $theId; ?>"><?php echo $theName; ?></option>
        <?php endforeach; ?>
    </select>
</form>
<?php echo $this->theResponse() ?>
<?php

?>

Email: <div id="response"></div>

The AskStore.php block that is under app\code\local\AdiGh\askStore\Block\

class AdiGh_askStore_Block_AskStore extends Mage_Core_Block_Template
{

public function getId()
{
    $iduri='';
    $collection = Mage::getModel('adigh_askstore/estores')->getCollection()->setOrder('id','asc');
    foreach($collection as $data)
    {
        $iduri .= $data->getData('id') .',';
    }
    Mage::getSingleton('adminhtml/session')->addSuccess('Cool Ca marche !!');
    return explode(',' , $iduri );
 }

public function getName()
{
    $name='';
    $collection = Mage::getModel('adigh_askstore/estores')->getCollection()->setOrder('id','asc');
    foreach($collection as $data)
    {
        $name .= $data->getData('name') .',';
    }
    Mage::getSingleton('adminhtml/session')->addSuccess('Cool Ca marche !!');
    return explode(',' , $name );
}

public function getEmail()
{
    $email='';
    $collection = Mage::getModel('adigh_askstore/estores')->getCollection()->setOrder('id','asc');
    foreach($collection as $data)
    {
        $email .= $data->getData('email') .',';
    }
    Mage::getSingleton('adminhtml/session')->addSuccess('Cool Ca marche !!');
    return explode(',' , $email );
}
public function theResponse() {

    $q = intval($_GET['q']);



    if($q==0)
    {
        echo "store is 0";
    }
    elseif ($q>0){
        $read = Mage::getSingleton( 'core/resource' )->getConnection( 'core_read' ); // To read from the database
        $productTable = Mage::getSingleton( 'core/resource' )->getTableName( 'adigh_askstore/estores' );

        $query = "SELECT * FROM " . $productTable . "WHERE id = '".$q."'";

        $result = $read->query($query);
        while ( $row = $result->fetch() ) {
            echo 'ID: ' . $row['id'] . '<br>';
            echo 'ID: ' . $row['name'] . '<br>';
            echo 'ID: ' . $row['email'] . '<br>';
    }


    }

    print_r($result);




}
}

So, as I said, it connects to the database and populates the select form with the right options and values. But when I access it under localhost/estores/index it will display the right form but onChange will reload the page without displaying the result. I will be more than grateful to read some constructive opinions.

Thanks a lot!

Best Answer

Ok.. figured it out with the help of a user from stackoverflow @Mage_Zeus. What I did was actually calling theResponse public function from myblock.php in the controller with

public function storeAction()
{
    $this->getLayout()->getBlockSingleton('askstore/askstore')->theResponse();
}

and then tweaked theResponse function to actually do what I needed. Thank you everyone for your great support! It really helped me go through this.

Related Topic