Symfony Crawler for a button that invokes ajax - ajax

Here I need to click $('button-see-more') which triggers an ajax call and loads more stuff on the page. I'm trying with
$link = $crawler->selectLink('See More Products')->link();
$crawler = $client->click($link);
But that ofcourse won't work because it doesn't have any anchor tag.
This is the HTML, the button is actually a element, I want to simulate a click on it
<div class="paging">
<div class="mtl">
<div class="button-see-more txtCenter" data-current-page="1" data-total-pages="3" data-txt-seemore="See More Products" data-txt-loading="Loading More Items for Phones">
<span class="i-loader hidden"></span>
<span class="text">See More Products</span>
</div>
</div>
</div>
How can I do that? Thanks

With crawler you can't detect a link from javascript,
but if you have already an ajax link, you can simulate your request by this method
$crawler = $client->request('GET', '/foo/', array(), array(), array(
'HTTP_X-Requested-With' => 'XMLHttpRequest',
));

Related

Laravel pagination on each side not working properly

In my Laravel (5.7) controller, I have set pagination + 'on each side navigation' to 2 items. However, this is not working on my view. I'm getting much more items than 2, which causes my window to break out on small mobile devices.
What can be the cause of this and how can I fix it? I mean, I can get it fixed with CSS, but I would like to get it fixed the proper way.
My code in the controller:
public function index(Request $request)
{
$type = 'all';
if ($request->has('type')) {
if ($request->type == 'all') {
$materials = Material::paginate(10)->onEachSide(2);
} else {
$type = $request->type;
$materials = Material::where('type', $type)->paginate(10)->onEachSide(2);
}
} else {
$materials = Material::paginate(10)->onEachSide(2);
}
$stock = array(
'enkelzitKajaks' => Material::where('type', 'Enkelzitkajak')->count(),
'dubbelzitKajaks' => Material::where('type', 'Dubbelzitkajak')->count(),
'canadeseKanos' => Material::where('type', 'Canadese kano')->count(),
'langePeddels' => Material::where('type', 'Lange peddel')->count(),
'kortePeddels' => Material::where('type', 'Korte peddel')->count(),
'tonnetjes' => Material::where('type', 'Tonnetje')->count(),
'zwemvesten' => Material::where('type', 'Zwemvest')->count()
);
return view('materials.index')->with('materials', $materials)->with('stock', $stock)->with('type', $type);
}
My code in the view:
<section class="pagination">
<div class="container">
<div class="row">
<div class="col-12">
{{ $materials->links() }}
</div>
</div>
<hr>
</div>
</section>
A screenshot of my view on small devices:
First of all The laravel pagination onEachSide(x) has leading and tailing parts besides the middle section. Leading two pages and tailing two pages.
You are trying with onEachSide(2) and on the 6th page. So now we try to look at the logic in pagination.
In laravel when using onEachSide(2) it will show pagination like this
leadingTwoPages
currentPage - 2
currentPage
currentPage +2
tailingTwoPages
1,2
4,5
6
7,8
22,23
Then think about the first part of pagination it needs to show the 1st page to the 8th page without the 3rd page.
Instead of page number three, it needs to be a show button with dots.
Then instead of showing a button with dots for page number three, it will show the original 3rd-page number.
After the 6th page the laravel pagination onEachSide(2) will work fine
You can try class="pagination pagination-sm" for mobile device
It's because of a bug in Laravel 5.* versions. If you don't want to upgrade your app, you should manually change some codes in:
vendor/laravel/framework/src/illuminate/Pagination/UrlWindow.php
as mentioned and discussed in below link with Taylor Otwell.
Disccus about on each side bug in Laravel 5.*
You should use onEachSide this in blade.
Remove the onEachSide from the controllers. Using onEachSide in controllers will be helpful when you are creating APIs. Instead use onEachSide in blade file.
<section class="pagination">
<div class="container">
<div class="row">
<div class="col-12">
{{ $materials->onEachSide(1)->links() }}
</div>
</div>
<hr>
</div>
</section>
Use can manage the link window by changing the parameter in onEachSide
https://laravel.com/docs/8.x/pagination#adjusting-the-pagination-link-window

blank page in next page in laravel pagination

Pagination in laravel is showing blank page in pages other than first.
below is controller
$products=DB::table('products')->join('mobile_devices', 'products.id', '=', 'mobile_devices.product_id')->where('mobile_devices.brand', '=',$request->brand)
->where('mobile_devices.ram', '=', $request->ram)
->where('mobile_devices.storage', '=',$request->storage )
->select('products.*')->paginate(15);
below is blade
<div class="product-filter product-filter-bottom filters-panel">
<div class="row">
<div class="col-sm-6 text-left"></div>
<div class="col-sm-6 text-right">{{$products->links()}}</div>
</div>
</div>
working fine in eloquent result but in query result the problem is occuring. The first page is shown but in other pages just blank page appears
Do the properties request->ram and $request->storage carry over to the pagination links? They're probably not if you're not adding them in. See "Appending to Pagination Links" in the docs at https://laravel.com/docs/6.x/pagination#displaying-pagination-results
$products = DB::table(...);
$products->appends([
'ram' => $request->ram,
'storage' => $request->storage,
'brand_id' => $request->brand_id,
'brand' => $request->brand
]);
See also How to automatically append query string to laravel pagination links?
In your view,use the collection/result like this..
#foreach($products as $product)
{{$product->name}} // whatever you want to display
#endforeach
{{$products->links()}} // use the exact name of the object that you are passed to the view

to get data in a modal in Laravel

Is there any way to get the data inside a modal? I know that it is possible to work with this through Jquery, but I would like to know if there is any way to work with Laravel itself. In a view, we can do this:
return view ('admin/users/index', ['datas1' => $ datas1, 'datas2' => $datas2];
but for a modal, is it possible to do something like this? to send my data through the controller and within my modal I check if this data are coming empty or filled, as this answer I just want to show different things, like this:
$dep = User::query()->where('dep_link', $id)->get();
 return['status' => 'success', 'dep' => $dep];
only my validation in the modal:
<div class="row" style="padding: 28px 20px;">
<div class="col-12">
#if(empty($dep))
<div class="position-relative">
<label for="rg_titular">Selecione o RG do titular (.png .jpg .pdf)</label><br>
<input type="file" name="rg_titular" class="file-input"/>
<button type="button" class="file-button">Selecionar arquivo</button>
<span class="text-arquivo">Arquivo selecionado!</span>
</div>
#else
<a href="link" target="_blank">
Visualizar RG do titular
</a>
#endif
</div>
</div>
Is there any way I can get this data inside the modal window and work with them? I just want to check if it's coming empty or not, that's all.
You can write a view composer for the modal blade file.
https://laravel.com/docs/5.8/views#view-composers
In your service provider (app, or a custom one you make)
public function boot()
{
view()->composer('myBladeFileName', function ($view) {
$activeUsers = \App\User::where('active', true)->get();
$view->with(compact('activeUsers'));
});
}

Rendering wordpress form with editor as ajax response is not working properly

In one of my project in wordpress, I tried to create a custom theme options with different fields. but I face an issue when I tried to load a form using ajax with text editor . The rendered editor comes with style and javascript issues, ie the text color becomes white and editor buttons were not visible, also the text and visual toggle not working. I think I need to run some javascript or I miss some js file which could be called in the rendered html, I am attaching the screenshot with this message ang my rendering html code is as follow, This form is renered as inner html in admin area
<form id="bgntheme_option_form" action="#" method="post">
<ul>
<li class="li-first">
<div class="option-field">Home Page Header</div>
<div class="option-value">
<?php
$settings = array( 'textarea_name' => 'bgntheme_home_header' );
wp_editor( $content, $editor_id, $settings );
?>
<p class="field-info">Header textarea for homepage.</p>
</div>
<div class="clear-both"></div>
</li>
<li class="update-form">
<button id="bgntheme_submit" name="general-settings-submit" value="Update-General" >Update</button>
</li>
</ul>
</form>
You have to add the following snippet to your ajax success method:
tinymce.execCommand('mceRemoveEditor', true, 'your_editor_id' );
tinymce.execCommand('mceAddEditor', true, 'your_editor_id' );
please replace your_editor_id with id of editor.
UPDATE
You can try this:
1) HTML
<ul>
<li class="li-first">
<div class="option-field">Home Page Header</div>
<div class="option-value">
<?php
$settings = array('media_buttons' => false, 'textarea_name' => 'bgntheme_home_header' );
wp_editor( '', 'my_editor', $settings );
?>
<p class="field-info">Header textarea for homepage.</p>
</div>
<div class="clear-both"></div>
</li>
<li class="update-form">
<button id="bgntheme_submit" name="general-settings-submit" value="Update-General" >Update</button>
</li>
2) JS
success : function( response ) {
jQuery('#content-wrapper-inner').html(response);
jQuery('#content-wrapper-inner').fadeIn("slow",function‌​() {
tinymce.execCommand('mceRemoveEditor', true, 'my_editor' );
tinymce.execCommand('mceAddEditor', true, 'my_editor' );
});
}
I had your problem and I solved it.
In your call back function in your javascript file add this code:
quicktags({id : 'your_editor_id'});
tinymce.execCommand( 'mceAddEditor', false, 'your_editor_id' );
hear is an example :
$.ajax({
url: data.ajax_url,
type: 'post',
datatype: 'json',
success : function (response) {
$('.row').append(String(response));
quicktags({id : 'your_editor_id'});
tinymce.execCommand( 'mceAddEditor', false, 'your_editor_id' );
}
});

Getting TokenMismatchException in VerifyCsrfToken.php line 53 in Laravel 5.1 while using csrf token

I am getting TokenMismatchException in VerifyCsrfToken.php line 53:
I am using {!!Form::open()!!}
{!!Form::close!!}. When I click the add Button in my form with empty field for the first time, it shows me error as I set the validation rule. But when I click the Add button again without refreshing the page, it shows me the TokenMismatchException error. I have checked with dd() and it shows me the token like this:
array:3 [▼
"_token" => "5dXwRHbz4GNY1tx9OVeWPcOkirVIm0YtpkZufFbr"
"menu_name" => ""
"menu_price" => ""
Here is my form code:
{!! Form::open(array('route' =>'upcoming.store', 'method'=>'POST')) !!}
<div class="col-lg-6 col-sm-offset-3 top-spacing">
<input type="text" name="menu_name" placeholder="Menu Name.." class="form-control">
</div>
<div class="col-lg-6 col-sm-offset-3 top-spacing">
<input type="text" name="menu_price" placeholder="Menu Price.." class="form-control">
</div>
<div class="col-sm-2 col-sm-offset-8 top-spacing">
<button class="btn btn-success">
Add +
</button>
</div>
</div>
{!! Form::close() !!}
Here is my controller store function:
public function store(Request $request)
{
dd($request->all());
$this->validate($request, array(
'menu_name'=>'required',
'menu_price'=>'required',
));
$upcoming = new Upcomingfood;
$upcoming->menu_name=$request->menu_name;
$upcoming->menu_price=$request->menu_price;
$upcoming->save();
Session::flash('success','Food Menu Added Successfullly');
return redirect()->back();
}
Can anyone help?
I have solved this problem by going to
`VerifyCsrfToken.php`
and then I have changed
throw new TokenMismatchException;
by
else{
return redirect()->back();
}
But I am not sure am I right or wrong to apply this way. will it bring any problem in my future work in this project. anyone please make me sure. please.
Try add {{ csrf_field() }} inside the form.
I really recommend that you read official documentation https://laravel.com/docs/5.4/csrf

Resources