Laravel 4 ajax享有部分景致
[英]Laravel 4 ajax with partial views
问题描述
im new with laravel 4 started a few days ago. 
几天前我开始使用laravel 4。 My problem is simple, i have a combobox which the client or the user changes and renders a "partial" view. 我的问题很简单，我有一个组合框，客户端或用户更改并呈现“部分”视图。
this is my first view. 这是我的第一个观点。 OnChange: 的OnChange：
will render that simple message through javascript 将通过JavaScript呈现该简单消息
my problem is if i place the value "by hand" it will only show the partial view: 我的问题是，如果我“手动”放置值，它将只显示部分视图：
this is my function in the controller 这是我在控制器中的功能
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);
}
}
this my javascript function: 这个我的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);
}
this is my view: 这是我的看法：
<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>
this is my partial view: 这是我的部分观点：
@if($ides!=0)
<div id="txtHint"> <b>Person info will be listed here -> {{ $ides }} </b></div>
@endif
I know why i have this problem, i don't know how to avoid it if you guys know it will be very helpful, or other away to do it. 我知道为什么我有这个问题，如果你们知道它会非常有用，或者其他方法可以做到，我不知道如何避免它。
Thank you, 谢谢，
Gonçalo Moura GonçaloMoura
EDITED: if i use your solution it will show like this: 编辑：如果我使用您的解决方案，它将显示如下：
StateChanged function: StateChanged功能：
function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
// alert(document.getElementById("txtHint").innerHTML);
}
}
jquery function: 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 个解决方案
解决方案1
3 2014-02-27 14:00:13
i will give you a simpler approach for overall design. 我会给你一个更简单的整体设计方法。
you don't need to touch anything in controller. 你不需要触摸控制器中的任何东西。
return the same view for both with or without ajax request. 有或没有ajax请求返回相同的视图。
just make a little change in the layout. 只是在布局上做一点改动。
@if(!Request::ajax())
<html>
....
.... //the whole layout
</html>
@else
{{$content}}
@endif
simple logic. 简单的逻辑。
if the request is not ajax, return the view with the whole template. 如果请求不是ajax，则返回包含整个模板的视图。
if the request is ajax, return only the view. 如果请求是ajax，则仅返回视图。
解决方案2
0 2014-02-27 12:08:04
Because you tell it to display only partial view if value is found in URL. 因为如果在URL中找到value则告诉它仅显示部分视图。
This is causing problem for you 这给你带来了麻烦
if($id=="")
{
$this->layout->content = View::make('home.user');
}
else
{
$this->layout->content = View::make('home.user2')->with('ides',$id);
}
Change your controller method to this. 将控制器方法更改为此。
public function getTeste1()
{
$id = Input::get('value', null);
$this->layout->content = View::make('home.user')->with('id', $id);
}
And view to this 并且看待这个
<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>
And intend your code, for your own good :) 并打算你的代码，为了你自己的好:)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.