- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我创建了一个搜索过滤器,无需ajax和javascript即可正常工作,但要获得结果,用户必须单击搜索按钮。我想在用户输入时得到结果。
这就是我所做的:
路由.yml
searchFlight:
path: /search_flight
defaults: { _controller: FLYBookingsBundle:Post:searchtabflightResult }
Controller
/**
*
* @Route("/search_flight", name="searchFlight")
* @Method("POST")
*/
public function searchtabflightResultAction(Request $request)
{
$form = $this->createForm(new SearchflightType());
$request->request->get('query');
$form->handleRequest($request);
dump($form);
$em = $this->getDoctrine()->getManager();
$entities = $em->getRepository('FLYBookingsBundle:Post')->searchflight($form);
if ($request->isXmlHttpRequest()) {
$jsonArray = json_encode(array(
'status' => 'success', 'entities' => $form
));
$response = new Response($jsonArray);
return $response;
}
return $this->render('FLYBookingsBundle:Post:searchtabflightResult.html.twig', array(
'form' => $form->createView(),
'entities' => $entities,
));
}
searchtabflightresult.html.twig
<form id="myForm" action="{{ path ('searchFlight') }}" method="POST">
{{ form_widget(form.from, { 'attr': {'class': 'form-control auto',} }) }}
{{ form_errors(form.from) }}
{{ form_widget(form.to, { 'attr': {'class': 'form-control auto1',} }) }}
{{ form_errors(form.to) }}
{{ form_widget(form.departuredate) }}
{{ form_errors(form.departuredate) }}
{{ form_widget(form.arrivaldate) }}
{{ form_errors(form.arrivaldate) }}
{{ form_widget(form.price) }}
{{ form_errors(form.price) }}
<button style="height: 43px" type="submit" class="full-width icon-check">SEARCH NOW</button>
</form>
<div class="reloadproducts">
<i id="spinner" style="display:none; font-size: 20px" class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>
{% if entities|length != 0 %}
{% for entity in entities %}
{{ entity.from }}
{{ entity.to }}
{{ entity.price|tva(entity.tva.multiplicate) }}
{% if entity.departuredate %}{{ entity.departuredate|date('Y-m-d H:i:s') }}{% endif %}
{% if entity.arrivaldate %}{{ entity.arrivaldate|date('Y-m-d H:i:s') }}
{% endif %}
{% endfor %}
{% else %}
<h1 style="color: #707070">The product you loking for doesn't exist</h1>
{% endif %}
</div>
.
<script>
$(document).ready(function() {
$("#myForm").submit(function(e) {
$('#spinner').show();
e.preventDefault();
var $form = $('#myForm');
$.ajax({
type: "POST",
dataType: "json",
data: $form.serialize(),
cache: false,
success: function(response) {
$('.reloadproducts').load(window.location + ' .reloadproducts > *');
$('#spinner').hide();
console.log(response);
},
error: function(response) {
console.log(response);
$('#spinner').hide();
}
});
});
});
</script>
添加:
class SearchflightType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('from', 'genemu_jqueryselect2_entity', array(
'class' => 'FLYBookingsBundle:ListDeparturesArrivals',
'property' => 'name',
'placeholder' => 'Departure city',
'query_builder' => function(EntityRepository $er) {
return $er->createQueryBuilder('u')
->where('u.mode_transport = :mode')
->setParameter("mode", "AIRPLANE")
->groupBy('u.code')
->orderBy('u.name', 'ASC');
},)
)
->add('to', 'genemu_jqueryselect2_entity', array(
'class' => 'FLYBookingsBundle:ListDeparturesArrivals',
'property' => 'name',
'placeholder' => 'Arrival city',
'query_builder' => function(EntityRepository $er) {
return $er->createQueryBuilder('u')
->where('u.mode_transport = :mode')
->setParameter("mode", "AIRPLANE")
->groupBy('u.code')
->orderBy('u.name', 'ASC');
},)
)
->add('departuredate', DateType::class, array(
'required' => false,
'label' => 'Departure date',
'format' => 'y/M/d',
'widget' => 'single_text',
'attr' => [
'class' => 'form-control date_timepicker_start input-inline',
'placeholder' => 'dd/mm/yyyy',
]
))
->add('arrivaldate', DateType::class, array(
'required' => false,
'label' => 'Arrival date',
'format' => 'y/M/d',
'widget' => 'single_text',
'attr' => [
'class' => 'form-control date_timepicker_end input-inline',
'placeholder' => 'dd/mm/yyyy',
]
))
->add('price', TextType::class, array(
'required' => false,
'attr' => [
'class' => 'range',
"data-slider-min" => "5",
"data-slider-max" => "1000",
"data-slider-step" => "0.5",
"data-slider-value" => "[5,1000]"
]
));
}
public function setDefaultOptions(OptionsResolverInterface $resolver)
{
parent::setDefaultOptions($resolver);
$resolver->setDefaults(array(
// avoid to pass the csrf token in the url (but it's not protected anymore)
'csrf_protection' => false,
'data_class' => 'FLY\BookingsBundle\Entity\Post'
))
;
}
public function getName()
{
return 'fly_bookingsbundle_searchtabflight';
}
}
最佳答案
只是想给你一些建议。
首先,如果您想在用户键入时获取结果,请使用“keyup”方法。
不要使用
if ($this->get('request')->getMethod() == 'POST')
如果只想将此方法用于 POST,请使用注释 @Method, example here
如果你使用
dataType: "json",
从 Controller 返回JsonResponse,例如:
return JsonResponse::create('status' => 'success', 'entities' => $form);
在这种情况下,您不需要设置 header 并执行 json_encode。最后一点也许可以帮助您解决问题。祝你好运!
更新:
$('#myForm > input').change(function(e) {
$('#spinner').show();
e.preventDefault();
if (xhr) {
xhr.abort();
xhr = null;
}
var xhr = $.ajax({
type: "POST",
dataType: "json",
data: $form.serialize(),
cache: false,
success: function(response) {
$('.reloadproducts').load(window.location + ' .reloadproducts > *');
$('#spinner').hide();
console.log(response);
},
error: function(response) {
console.log(response);
$('#spinner').hide();
}
});
});
关于javascript - 使用 Ajax 和 Symfony2 进行即时搜索,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42022265/
我已经四处寻找我的问题的解决方案,但它们似乎都涉及看似复杂的方法,如数据透视表、交叉表等。似乎必须有一个更简单的解决方案来解决那些没有解决的问题在我看来是一个特别复杂的问题。我正在使用 MS SQL
我在共享服务器上安装了 MySQL,并且可以通过 phpMyAdmin 进行访问。我想将该数据库连续实时克隆到云 mySQL 数据库(我们专门为此数据库创建了一个支持 Nginx 的 MySQL 服务
我目前正在围绕一个相当复杂的数据模型编写一个 Django 应用程序。对于许多用例,我需要构建相似但略有不同的模板(包括 graphviz 等)。 现在我想知道是否有一种方法可以遵循 DRY 并“即时
我选择了图片并在提交表单之前进行了预览。但是我想在选择图像并预览并提交文件后即时编辑文件。 js代码: var img = null; var canvas1 = document.g
目前,我们的网站存储 2/3 的固定图像尺寸。这些在上传时生成并通过我们的 CDN 分发。然而,我们需要实现更灵活的解决方案,我们正在开发需要多种不同尺寸的移动和平板电脑应用程序。我们建议的解决方案是
在 Google Wave 的介绍视频中,他们谈到了网络应用程序中的聊天问题。在许多 Web 应用程序中,您会看到如下消息: is typing.. (消息提交前) Google 想出了一个想法“在键
这个问题在这里已经有了答案: Formatting a number with leading zeros in PHP [duplicate] (11 个回答) 关闭3年前. PHP - 是否有一种
如何在VBA的“即时”窗口中打印二维数组?是否存在执行此操作的通用方法?一种在“即时”窗口中为每行绘制一排数组的方法可以解决此问题,因为唯一要做的就是为数组的每一行循环此代码。 最佳答案 我做了一个简
与非 JIT 编译器相比,JIT 编译器具体做什么?谁能给出一个简洁易懂的描述? 最佳答案 JIT 编译器在程序启动后运行,并将代码(通常是字节码或某种 VM 指令)动态(或称为即时)编译为通常更快的
我已经在我的 Windows 2003 服务器上安装了 VisualSVN,并将其配置为提供匿名读取访问。据我了解,VisualSVN 仅使用 apache 和下面的官方 SVN 存储库服务器。 现在
我正在开发一个使用 Twig 的 PHP 应用程序(但这并不重要)作为 View 层。这个 View 层有一个自定义扩展,允许我注册远程样式和脚本 Assets 以及样式和脚本内联 block 。系统
如今在许多网页上,您会经常看到带有指向目标的箭头的即时工具提示,类似于: https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip
我正在用 C++ 编写并在 Windows 中使用 OpenGL。 我创建了一个立方体,我希望它通过按“4”或“6”小键盘键围绕 y 轴旋转(使用 glRotate3f(),而不是 gluLookat
与非 JIT 编译器相比,JIT 编译器具体做什么?谁能给出一个简洁易懂的描述? 最佳答案 JIT 编译器在程序启动后运行,并将代码(通常是字节码或某种 VM 指令)动态(或称为即时)编译为通常更快的
这个问题在这里已经有了答案: 关闭 10 年前。
与非 JIT 编译器相比,JIT 编译器具体做什么?谁能给个简洁易懂的描述? 最佳答案 JIT 编译器在程序启动后运行,并将代码(通常是字节码或某种 VM 指令)即时(或所谓的即时)编译成通常速度更快
与非 JIT 编译器相比,JIT 编译器具体做什么?谁能给个简洁易懂的描述? 最佳答案 JIT 编译器在程序启动后运行,并将代码(通常是字节码或某种 VM 指令)即时(或所谓的即时)编译成通常速度更快
我希望能够即时将音频文件转换为 MP3 以供用户浏览器使用。我正在使用的软件是:ubuntu 系统上的 Apache、PHP 和 FFMPEG。这是我到目前为止的代码: 使用此代码,仅转换音频的前几
我正在使用 IntervalObservable 连续调用我的应用程序的服务器端。我可以订阅和取消订阅 Oberservable,一切正常,但有一个异常(exception): 对服务器的第一次调用被
从服务器上的文件夹压缩(比如 2 个文件)并强制下载的最简单方法是什么?不将“zip”保存到服务器。 $zip = new ZipArchive(); //the string "fil
我是一名优秀的程序员,十分优秀!