In My view file I am importing my necessary libraries as following
{{ Html::script(asset('js/jquery-1.11.0.min.js')) }}
{{ Html::script(asset('js/jquery-ui.min.js')) }}
{{ Html::style(asset('css/jquery-ui.css')) }}
Then I have the following in my view to create dialog:
<button id="hello">Click Me</button>
<div id="dialog1" style="display:none">
<div>
Hello World
</div>
</div>
And just at the bottom I have the following Script:
$(document).ready(function () {
$("#dialog1").dialog({
autoOpen: false,
modal: true
});
});
$("#hello").click(function() {
$("#dialog1").dialog('open');
});
The same thing is working in jsfiddle but not in my laravel. Do i need to do anything? I am getting the the following error in the console:
Uncaught TypeError: $(...).dialog is not a function
Here is how my files are loaded
#extends('layouts.headerfooter')
#section('content')
{{ Html::style(asset('css/home.css')) }}
{{ Html::script(asset('js/home.js')) }}
<script src="https://code.jquery.com/jquery-1.12.1.js" integrity="sha256-VuhDpmsr9xiKwvTIHfYWCIQ84US9WqZsLfR4P7qF6O8=" crossorigin="anonymous"></script>
{{Html::script('https://code.jquery.com/jquery-1.12.1.js')}}
{{ Html::script('js/jquery-ui.min.js') }}
{{ Html::style('css/jquery-ui.css') }}
<script>
$(document).ready(function () {
$("#dialog1").dialog({
autoOpen: false,
modal: true
});
});
$("#hello").click(function() {
$("#dialog1").dialog('open');
});
</script>
<div>
</div>
#endsection
it might be that your jquery-ui is customize and doesnt include dialog widget, try also putting your
$("#hello").click(function() {
$("#dialog1").dialog('open');
});
inside the $(document).ready(...)
Related
I am beginner with Ajax. I try refresh a table when user select an option in form-select filter. I use Symfony and Twig.
I get the new datas in the Json format in my console when i select a new filter, but the table does'nt show with the new datas. I failed to find the solution when my request ajax is success.
My Select filter :
{{ form_start(form) }}
<div class="container-fluid">
<div class="row">
<div class="col-fluid">
{{ form_row(form.isAttending) }}
</div>
<button type="submit" class="btn btn-outline-success mb-2">{{ button_label|default('Envoyer') }}</button>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-1-fluid">
{{ form_row(form.active) }}
</div>
</div>
</div>
{{ form_end(form) }}
In my Controller :
/**
* #Route("/ajax", methods={"GET", "POST"})
*/
public function testAjax(Request $request)
{
if (!$request->isXmlHttpRequest()) {
return new JsonResponse(array(
'status' => 'Error',
'message' => 'Error'),
400);
}
if($request->request->has('isAttending')) {
$preSelect = $request->request->get('isAttending');
return new JsonResponse(
$this->queryFollowingFilter($preSelect),
200);
}
}
In my Template :
<script>
$(document).on('change', '#campagnes_tel_isAttending', function () {
$('#flash').remove();
let $field = $(this)
let $preselect = $('#campagnes_tel_isAttending')
let $form = $field.closest('form')
let data = {}
data['isAttending'] = $field.val()
console.log(data)
$.ajax({
type: "POST",
url: "/campagnestel/ajax",
data: data,
dataType: "json",
success: function(response) {
console.log(response);
}
});
});
</script>
Any ideas ?
According to your question and comments your problem is not Symfony, not Ajax and also not Twig related. You get the correct data and you just do not know how to manipulate the DOM. DOM manipulation is a basic capability of JavaScript.
Here you can learn how to manipulate the DOM: https://www.w3schools.com/js/js_htmldom.asp
And here you can learn how to easily can manipulate it with jQuery which you are obviously using: https://www.w3schools.com/js/js_jquery_dom.asp
Sample:
$('#my-table').append(response.myWhatever);
I'm trying to implement an infinite scrolling based on this tutorial.
Couldn't be simpler, right? well... It's not working. This is my code here:
In the route file (I didn't put it in a controller because was a simple test)
Route::get('/', function(){
$articles = \App\Article::paginate(1);
return view('home')->with('articles', $articles);
});
In home.blade.php
<div class="infinite-scroll">
#foreach($articles as $article)
<article class="post">
<header>
<div class="title">
<h2>{{ $article->title }}</h2>
</div>
</header>
</article>
#endforeach
</div>
{{ $articles->links() }}
At the bottom of that same file
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.3.7/jquery.jscroll.min.js"></script>
<script type="text/javascript">
$('ul.pagination').hide();
$(function() {
$('.infinite-scroll').jscroll({
autoTrigger: true,
debug: true,
loadingHtml: '<img class="center-block" src="/images/loading.gif" alt="Loading..." />',
padding: 0,
nextSelector: '.pagination li.active + li a',
contentSelector: '.infinite-scroll',
callback: function() {
$('ul.pagination').remove();
}
});
});
</script>
There's absolutely nothing in the console. Like nothing is happening.
I'm missing something, but I don't know what. Do you see something wrong? Thanks!
Ps. I also changed contentSelector: '.infinite-scroll' to contentSelector: 'div.infinite-scroll',. But nothing.
Your pagination is outside the infinite-scroll.
Try
<div class="infinite-scroll">
#foreach($articles as $article)
<article class="post">
<header>
<div class="title">
<h2>{{ $article->title }}</h2>
</div>
</header>
</article>
#endforeach
{{ $articles->links() }}
</div>
Try like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.3.7/jquery.jscroll.min.js"></script>
<script type="text/javascript">
$('ul.pagination').hide();
$(function() {
$('document').ready(function(){
$('.infinite-scroll').jscroll({
autoTrigger: true,
debug: true,
loadingHtml: '<img class="center-block" src="/images/loading.gif" alt="Loading..." />',
padding: 0,
nextSelector: '.pagination li.active + li a',
contentSelector: '.infinite-scroll',
callback: function() {
$('ul.pagination').remove();
}
});
});
});
</script>
So I have a form on the front page:
{{ Form::open(array('url' => URL::to('', array(), true))) }}
<p>
{{Form::label('author') }}
{{Form::text('author') }}
</p>
<p>
{{Form::label('title') }}
{{Form::text('title') }}
</p>
<p>
{{Form::label('message') }}
{{Form::text('message') }}
</p>
<p>
{{ Form::submit() }}
</p>
{{ Form::close() }}
Then these are my routes:
Route::get('/', function()
{
/* unrelated stuff here */
});
Route::post('/', function()
{
/* testing */
print_r("DONE!");
exit;
});
So I am basically trying to test whether my form submission works or not. And it doesn't. For some reason the POST method is being executed once I load the front page instead of when the form is submitted. Why is that and how can I fix this?
Your form url should be specified to post to / -
{{ Form::open(array('url' => '/')) }}
In order to redirect back to the homepage you should modify your post method like this -
Route::post('/', function()
{
/* testing */
print_r("DONE!");
return Redirect::to('/');
});
Here is the documentation for redirecting.
I would recommend you to use dirrefent route:
{{ Form::open(array('url' => URL::to('/submitForm', array(), true))) }}
And then:
Route::post('/submitForm', function()
{
/* testing */
print_r("DONE!");
return redirect()->route('/');
});
In my page show.html.twig i have this block
<div class="col-md-9 col-sm-9 user-wrapper">
<div class="description">
{{ render(controller('FLYBookingsBundle:Post:new')) }}
</div>
</div>
As you can see there is a render that render the page new.html.twig, i want to render the page product << {{ render(controller('FLYBookingsBundle:Post:product')) }} >> in the div description only if the user click on the link My Product List . how do i do that with twig ?
Here is the solution I used to "pop-up" a form for sending an e-mail to an entity based on a button appearing with that entity.
You will need to install jquery if not already installed. There are many possible ways to do this. Use your pal Google & "symfony install jquery" to find one. You may also want to find a good javascript debugger for your browser. I use the Firebug add-on in Firefox.
Template with link (edited for brevity). The returned e-mail form appears in <div id="dialog"></div>:
<div id="dialog"></div>
{% for opp in opportunities %}
<div class="row">
<div class="col-md-9">
<ul class="list-unstyled">
...
<li><a href="#" value="{{ opp.id }}" id="emailOrganization" class="btn btn-xs btn-info" >E-mail {{ opp.orgName }}</a>
</ul>
</div>
</div>
{% endfor %}
Javascript:
$(document).on("click", "#emailOrganization", function () {
var where = $(location).attr('pathname');
var id = $(this).attr("value");
//replaces URI ending in 'search' with 'oppForm/' + id (of organization)
var url = where.replace('search', 'oppForm/' + id);
$.get(url, function (data) {
//creates dialog box containing e-mail form
$('#dialog').dialog();
$('#dialog').dialog({
modal: true,
buttons: [
{
text: "Send",
id: "send",
class: "btn-xs btn-primary",
click: function () {
var formData = $("form").serialize();
$.post(url, formData, function (response) {
if (response.indexOf("Email sent") >= 0) {
$("#send").hide();
}
$('#dialog').html(response);
})
}
},
{
text: 'Close',
id: "close",
class: "btn-xs btn-primary",
click: function () {
$(this).dialog("close");
}
}
],
resizable: true,
});
$('#dialog').dialog("widget").find(".ui-dialog-titlebar").hide();
$('#dialog').html(data);
});
});
Controller (edited for brevity)
/**
* #Route("/oppForm/{id}", name="opp_form")
* #Template("default/oppEmail.html.twig")
*/
public function oppFormAction(Request $request, $id)
{
...
$form = $this->createForm(new OpportunityEmailType($oppName, $orgName, $email, $id));
$form->handleRequest($request);
if ($request->getMethod() == 'POST') {
if ($form->isValid()) {
...
}
$response = new Response("Email sent: " . count($to));
return $response;
}
}
return [
'form' => $form->createView(),
'id' => $id,
];
}
Template:
<form role="form" action="{{ path('opp_form', {'id': id}) }}" method="post" name="opp_email">
{# hidden submit button allows functional test; also tested with codeception #}
<div style="visibility: hidden;"><input type="submit" value="Mail"></div>
{{ form_widget(form._token) }}
{{ form_row(form.id) }}
{{ form_row(form.to) }}
{{ form_row(form.from) }}
{{ form_row(form.subject) }}
{{ form_row(form.message) }}
</form>
I'm trying to use ajax to find the next page on my pagination. However it keeps bringing in the whole body. I've taken a print screen to show the problem.
I'm not an expert on ajax show would appreciate some help as to how I can rectify this issue?
My code is below:
public function viewall()
{
$data["projects"] = $projects = Auth::user()->projects()->paginate(3);
if(Request::ajax())
{
$html = View::make('projects.viewall', $data)->render();
return Response::json(array('html' => $html));
}
return View::make('projects.viewall')->with('projects', $projects);
}
Js/js.js
$(".pagination a").click(function()
{
var myurl = $(this).attr('href');
$.ajax(
{
url: myurl,
type: "get",
datatype: "html",
beforeSend: function()
{
$('#ajax-loading').show();
}
})
.done(function(data)
{
$('#ajax-loading').hide();
$("#projects").empty().html(data.html);
})
.fail(function(jqXHR, ajaxOptions, thrownError)
{
alert('No response from server');
});
return false;
});
viewall.blade.php
#extends("layout")
#section("content")
<div class="container">
<h4>Your Projects</h4>
<div id="ajax-loading" class="alert alert-warning" style="display: none;">
<strong>Loading...</strong>
</div>
#if (Auth::check())
#if (count($projects) > 0)
#foreach ($projects as $project)
<div class="one-third column" id="projects">
{{ $project->project_name }}
{{ $project->project_brief }}
{{ date("d-m-Y", strtotime($project->start_day)) }}
</div>
#endforeach
#else
<h5 class="errorslist">You have no projects click <a class="errorslist" href="/project/create">here to create a project</a></h5>
#endif
#endif
<div class="sixteen columns">
{{ $projects->links() }}
</div>
</div>
#stop
This line:
$("#projects").empty().html(data.html);
will fill the #project up with your returned html which you created here:
$html = View::make('projects.viewall', $data)->render();
So,you just need to change projects.viewall with only 'partial view' that you want to load.
Probably you don't need to extends your main layout.
But you render a view here:
$html = View::make('projects.viewall', $data)->render();
so html is created by Laravel and then you insert it as html into the #projects domElement.
I experienced this kind of problem, just run
dd( json_decode( json_encode( Products::paginate(5) ), true) );
and can get a hint :)
I have read a solution about this here:
http://www.tagipuru.xyz/2016/05/17/displaying-data-using-laravel-pagination-in-the-html-table-without-page-reload/