Laravel 4 ajax享有部分景致

时间:2014-02-27 12:04:59

标签: javascript php ajax laravel

几天前,我开始使用laravel 4。我的问题很简单,我有一个组合框,客户端或用户更改并呈现“部分”视图。

enter image description here

这是我的第一个观点。的OnChange:

enter image description here

将通过javascript

呈现该简单消息

我的问题是,如果我“手动”放置值,它将只显示部分视图:

enter image description here

这是我在控制器中的功能

    public function getTeste1() {
    $id = Input::get('value');
    if($id=="")
    {
        $this->layout->content = View::make('home.user');
    }
    else
    {
        $this->layout->content = View::make('home.user2')->with('ides',$id);
    }
}

这是我的javascript函数:

function showCustomer(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="";
url="?value="+str;
//url=url+"&sid="+Math.random();
// alert(url);
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(true);
}

这是我的观点:

<h1>Home</h1>

<p>Welcome to your Home. You rock!</p>

<form>
<select name="users" onchange="showCustomer(this.value)">
<option value="0">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<div id="txtHint"></div>

这是我的部分观点:

@if($ides!=0)
<div id="txtHint"> <b>Person info will be listed here -> {{ $ides }} </b></div>
@endif

我知道为什么我会遇到这个问题,如果你们知道它会非常有用,或者其他方法可以做到这一点,我不知道如何避免它。

谢谢,

GonçaloMoura

EDITED: 如果我使用你的解决方案,它将显示如下: enter image description here

StateChanged功能:

function stateChanged()
{
   if (xmlHttp.readyState==4)
   {
      document.getElementById("txtHint").innerHTML=xmlHttp.responseText;

      // alert(document.getElementById("txtHint").innerHTML);

   }
}

jquery函数:

<script>
$(document).ready(function() {
$("#users").change(function() {
  $.get('http://localhost/LoginProject/public/home/teste1?value=' + $(this).val(),         function(data) {
    $("#txtHint").html(data);
  });
});
});
</script>

2 个答案:

答案 0 :(得分:3)

我将为您提供一种更简单的整体设计方法。

你不需要触摸控制器中的任何东西。

为有或没有ajax请求返回相同的视图。

只需在布局上做一点改动。

@if(!Request::ajax())
<html>
....
.... //the whole layout
</html>
@else
{{$content}}
@endif
简单的逻辑。

如果请求不是ajax,则返回包含整个模板的视图。

如果请求是ajax,则只返回视图。

答案 1 :(得分:0)

因为如果在网址中找到value,则告诉它仅显示部分视图 这对你造成了问题

if($id=="")
{
    $this->layout->content = View::make('home.user');
}
else
{
    $this->layout->content = View::make('home.user2')->with('ides',$id);
}


将您的控制器方法更改为此。

public function getTeste1()
{
    $id = Input::get('value', null);

    $this->layout->content = View::make('home.user')->with('id', $id);
}

并查看此

<h1>Home</h1>

<p>Welcome to your Home. You rock!</p>

<form>
    <select name="users" onchange="showCustomer(this.value)">
        <option value="0">Select a person:</option>
        <option value="1">Peter Griffin</option>
        <option value="2">Lois Griffin</option>
        <option value="3">Glenn Quagmire</option>
        <option value="4">Joseph Swanson</option>
    </select>
</form>

<div id="txtHint">
    @if ($id)
        show detail without AJAX call. Since ID is in URL, you can get the info directly
    @else
        show info that this container will hold some data after AJAX call
    @endif
</div>

为了你自己的利益,打算使用你的代码:)