如何通过ajax更新一个地区的数据?

时间:2013-02-27 09:45:37

标签: javascript ajax jquery cakephp

我想将数据上传到四个链接的一个区域,当我点击link1时它将加载特定区域的数据,当我点击链接2时,它会将页面加载到第一个链接打开的同一区域, 我怎样才能做到这一点?

    <div class="container">
    <div class="span-5">
        <ul>
            <li><?php echo $this->Manager->link('Ecommerce',array('controller'=>'associations','action'=>"view_report"),array('id'=> 'home','class'=>'nav'));?></li>
            <li><a href="#" id="home" class="nav">Home</a></li>
            <li><a href="#" id="about" class="nav">About</a></li>
            <li><a href="#" id="contact" class="nav">Contact Us</a></li>
        </ul>
    </div>
</div>

我想从电子商务链接打开的数据是新文件.ctp中的那个

 <?php v_start($this);?>

<h1><?php echo __l('View Report');?></h1>

<div class="firsttable">
    <table width="100%" border="0" cellspacing="0" cellpadding="2">
        <thead>
          <tr class="heading">
            <td><?php  echo __l('Financials');?></td>
            <td><?php  echo __l('Payment Methods');?></td>
            <td><?php  echo __l('By Credit Card');?></td>
          </tr>
        </thead>
        <tbody>  

          <tr>
            <td>
                <?php 
                    echo __l("YTD \t ");
                    $ytd_total=0;
                    foreach ($YTD as $yearData)
                    {

                        $ytd_total +=$yearData['AssocPaymentDetail']['membership_fee'] - $yearData['AssociationDiscount']['amount'];

                    }
                    echo  $ytd_total."<br />";

                ?>
                <?php

                echo __l("Last 5days ");
                 $fda_total= 0;
                 foreach ($fiveDays as $fiveDaysData)
                    {

                        $fda_total += $fiveDaysData['AssocPaymentDetail']['membership_fee'] - $fiveDaysData['AssociationDiscount']['amount'];

                    }
                    echo $fda_total ."<br />";
                 ?> 
            </td>
            <td><?php  echo __l('creditcard');?>  <?php echo __l($ccSum) ?> </td>
            <td>
                <?php
        //       debug($paymentRecord);
        //      debug($ccIndex);
                    foreach($paymentRecord as $data =>$key){
                        foreach($ccIndex as $index){
                            if($data== $index)
                            {
                                echo "$data \t\t\t";
                                if(is_array($key))
                                    echo array_sum($key);
                                else 
                                    echo "\t\t $key";


                            }

                            echo "<br/>";
                        }   

                    }

                ?>
            </td>
          </tr>
        </tbody>  
    </table>
</div>

请提前帮助我做这件事

4 个答案:

答案 0 :(得分:3)

我没有使用任何额外的jquery

就完成了这项工作
<div class="container">
 <div class="span-5">
    <ul>
        <li><?php echo $this->Manager->link('Ecommerce',array('controller'=>'associations','action'=>"view_report"),array('update'=> '#testDiv'));?>li>
        <li><a href="#" id="home" class="nav">Home</a></li>
        <li><a href="#" id="about" class="nav">About</a></li>
        <li><a href="#" id="contact" class="nav">Contact Us</a></li>
    </ul>
   </div>
   </div>
 <div id = 'testdiv'></div>

蛋糕将使用蛋糕的属性更新由itselp更新区域。非常感谢回答这个问题的人,不管回答是对还是错。谢谢所有

答案 1 :(得分:1)

放入href属性中的链接,然后通过jquery这样处理它们

$('a.nav').click(function(e){
 e.preventDefault();
 $.get($(this).attr('href'), function(data){
  $cont = $('[CONTAINERS SELECTOR]');
  $cont.html(data);
 })
})

编辑后评论

将您的HTML更改为此类

<div class="container">
<div class="innerCont"></div>
    <div class="span-5">
        <ul>
            <li><?php echo $this->Manager->link('Ecommerce',array('controller'=>'associations','action'=>"view_report"),array('id'=> 'home','class'=>'nav'));?></li>
            <li><a href="#" id="home" class="nav">Home</a></li>
            <li><a href="#" id="about" class="nav">About</a></li>
            <li><a href="#" id="contact" class="nav">Contact Us</a></li>
        </ul>
    </div>

并将内容选择器设置为div.innerCont

$cont = $('div.innerCont');

答案 2 :(得分:1)

你没有在你的html中指定区域,这里我假设它将在你的ul节点之后

$uls = $("ul.span5"); // select all page ul.span5
$uls.each(function(){ // for all ul.span5 node
    $ul = $(this); // current ul to work
    $region = $("<div/>").insertAfter($ul); // dynamic create and insert the region, as a div
    $links = $ul.find("a.nav"); // select all sub links
    $links.click(function(e){ // click on links
        $a = $(this); // current link
        var href = $a.attr("href"); // i assume you work on the href
        $region.load("myajax.php",{href:href},function(data){ // do ajax and load it in the common region
            // here load is done, do next step here
        });
        e.preventDefault(); // no real click please
    });
});

答案 3 :(得分:1)

您可以将单个请求处理程序附加到nav作为类名的所有链接,然后将输出加载到容器

$(".nav").on('click', function() {
    $("#loadingdiv").load("linktoload.php"); // or other 

});