We Keep Coding

Laravel Ajax Pagination links refresh on second page click

I'm using Laravel 5.8 and I'm trying to make a pagination using AJAX and it's working 50% of the time. Actually, when I click on the links page at the bottoms, it renders the data perfectly, but my problem is that, the second time I press a pagination link at the bottom, it resfreshes the page. I don't want the page to reload half the time I click on pagination pages.
Here's my code for that:
ManagerController.php
public function index()
{
$users = User::paginate(30);
if (Request::ajax()) {
return Response::json(View::make('manager.usersTable', compact('users'))->render());
}
$user = User::find(Auth::user()->id);
$leagues = League::all();
$usersCount = DB::table('users')->count();
return view('manager.index', compact('user', 'leagues', 'users', 'usersCount'));
}
index.blade.php
$(window).on('hashchange', function() {
if (window.location.hash) {
var page = window.location.hash.replace('#', '');
if (page === Number.NaN || page <= 0) {
return false;
}else{
getData(page);
}
}
});
$(document).ready(function() {
$('.leagueModal').on('shown.bs.modal', function (event) {
var href = $(this).find('#href_link').val();
$(this).find('#leagueModalBtn').click(function() {
window.location.href = href;
});
});
$('.pagination a').on('click', function (e) {
e.preventDefault();
$('li').removeClass('active');
$(this).parent('li').addClass('active');
var page = $(this).attr('href').split('page=')[1];
getUsers(page);
});
});
function getUsers(page) {
$.ajax({
url : '?page=' + page,
type: 'GET',
dataType: 'json',
}).done(function (data) {
$('.usersTable').empty().html(data);
location.hash = page;
}).fail(function () {
console.log('Users could not be loaded.');
});
}
......... Down below is where I put my data .........
<div class="row">
<h3>Utilisateurs ({{ $usersCount }})</h3>
</div>
<div class="row">
<div class="usersTable" style="width: 100%">
#include('manager.usersTable')
</div>
</div>
usersTable.blade.php
Whatever there is in this file is not really important but I got this at the end of it:
{!! $users->render() !!}
Current situation: Causes a page reload on the second time I click on a pagination link.
What I want: To not reload the page when I click on pagination links.
What I've tried: I actually followed this source code: https://gist.github.com/tobysteward/6163902
Thanks :)

You are attaching click method to .pagination a once document is ready, however if you create a new element with same class will not have same functionality. To achieve this you have to force script to check document dynamically. Please see below example.
$(document).on('click', ".pagination a", function() {
e.preventDefault();
$('li').removeClass('active');
$(this).parent('li').addClass('active');
var page = $(this).attr('href').split('page=')[1];
getUsers(page);
});

In laravel if you are using yajra datatable add below function
function reload_table(){
table.ajax.reload(null,false);
}
and call reload_table() instead table.draw() it will not create whole table but only reload

How to close dropdown box with Jquery when clicking outside

So I have this dropdown box, I would like to close it when clicking outside of it, how can I get it?
$(document).ready(function(){
jQuery('ul.nav li.dropdown').click(function() {
jQuery(this).find('.dropdown-menu').fadeIn();
$("#actionStatus").html("");
});
$("body:not(ul.nav li.dropdown)").hover(function(){
$("ul.nav li.dropdown").find('.dropdown-menu').fadeOut();
});
$("#btnSendOption").click(function(){
var data = $("#frmUserOption").serialize();
$.ajax({
url: "/users.php",
data: data,
success: function( data ) {
$("#actionStatus").html("");
$("input[type='radio']").attr('checked', false);
$('.dropdown-menu').delay(1000).fadeOut();
},
error: function(data) {
$("#actionStatus").html("<div class='alertMsg alertMsg-danger'>Error, try again later</div>");
}
});
});
});
Any help is very appreciated. Thank you in advance.

You can use this:
$("body:not(ul.nav li.dropdown)").hover(function(){
$("ul.nav li.dropdown").find('.dropdown-menu').fadeOut();
})

maybe something like this: (didnt test it)
$(document).ready(function(){
$('ul.nav li.dropdown').click(function() {
var $this = $(this);
$("body").one("click",":not('ul.nav li.dropdown')", function(){
$this.find('.dropdown-menu').fadeOut();
});
$this.find('.dropdown-menu').fadeIn();
$("#actionStatus").html("");
});
});

I created a simple jsbin for you with an example of what I think you need. I added some simple html as reference just guessing what you needed...
http://jsbin.com/bodoxixa/1/edit?html,js,output

Jquery mobile change window.location.href to mobile.changePage

I have a short question to JQuery mobile
I Have the following script and want to have a data transition=slide but it is not working with window.location.href. So i want to change it to $.mobile.changePage. But I don't get it.
Here is the script;
var category_data;
$(document).ready(function () {
$('#search_category_form').bind('submit', function(){
var form = $('#search_category_form');
var data = form.serialize();
$.post('index.html', data, function(){
category_data = data;
window.location.href = 'index.html#search_general';
});
return false;
});
Thank you for your help

$.mobile.changePage() is now deprecated, however you can change your code to:
// [deprecated] $.mobile.changePage("index.html#search_general", {transition: "slide"});
$.mobile.pageContainer.pagecontainer("change", "index.html#search_general", {transition: "slide"});

Fill twitter button with dynamic content

is it possible to create a twitter-button , while clicking a link? :
http://fiddle.jshell.net/gmq39/22/
I tried with:
$.getScript('http://platform.twitter.com/widgets.js');
The "button", which appear´s has no functionlaity and style´s
Anybody know´s a workaround or what do i need to inlcude? need your help.. greetings!!

Use twttr.widgets.load(); to bind the twitter functionality to a dynamically added button.
Also, to make sure you don't load the script over and over again, you could first check if the script is already loaded with something like this
function twitter() {
if ($(".twitter-follow-button").length > 0) {
if (typeof (twttr) != 'undefined') {
twttr.widgets.load();
} else {
$.getScript('http://platform.twitter.com/widgets.js');
}
}
}
$(function () {
$('body').html('Follow #MagnusEngdal')
twitter();
});
http://jsfiddle.net/23D8C/1/

jQuery onunload do action if button was pressed

I have a small website who's client side framework is jQuery.
I have a page where I need to do some AJAX action before the page unloads but that action may not fire if a certain button was clicked.
I was trying this with:
<body onbeforeunload="myaction();">
But how do I know that certain button was clicked or not?

var globalClickVariable = false;
$('#my-button').click(function() {
globalClickVariable = true;
});
<body onbeforeunload="if(!globalClickVariable) { myaction(); }">

You can bind onbeforeunload into jQuery also:
myCounter = true;
$(window).load(function(){
$('#mytest').bind('click', function(){
myCounter = false;
});
});
$(window).bind('beforeunload', function() {
if (myCounter) {
$.ajax({
type: 'POST',
url: 'mytest.php'
});
}
});