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

Prevent a link from loading the clicked link in the modal window

I have a list of links which when clicked should open a modal window with some information. I am using e.preventDefault(); to prevent the default action of the browser and then add my own custom code to load my own data in the modal. The content loads just fine but after a few seconds the whole website whose link I clicked get loaded inside the modal.
It only happens with links from a specific website.
The links from that website should be the first one that I click. Clicking on other links first resolves this issue.
Here is my code:
$('a.modal-link').on('click', openModal);
function openModal(evt) {
evt.preventDefault();
var link = $(this).attr("href");
var text = $(this).text();
safeModal(link, text);
};
function safeModal(linkUrl, linkText) {
var link = linkUrl;
var page = window.location.href.split('?')[0];
var text = linkText;
var ajaxURL = "http://example.com/script.php";
$.ajax({
type: "POST"
, url: ajaxURL
, data: {
link: link
, page: page
}
, success: function (markup) {
$(".feed-modal .modal-body").html(markup);
}
})
};
I can also provide the link to the actual website, so you can see the issue yourself (I may not have explained it properly).
UPDATE: I am adding the link. Try clicking on the first headline and you will see the issue. After that, reload the webpage and then click on the sixth link. Now, close the modal and click on the first link again. Everything should work perfectly this time.
UPDATE: The syntax error doesn't exist. I made it in the question by mistake. :)

This code has a syntax error (delete })):
success: function (markup) {
$(".feed-modal .modal-body").html(markup);
}) //delete this
}
The whole function should be:
function safeModal(linkUrl, linkText) {
var link = linkUrl;
var page = window.location.href.split('?')[0];
var text = linkText;
var ajaxURL = "http://example.com/script.php";
$.ajax({
type: "POST"
, url: ajaxURL
, data: {
link: link
, page: page
}
, success: function (markup) {
$(".feed-modal .modal-body").html(markup);
//}) without this
}
})
};
Working DEMO

Prevent a click from loading a website and load some other custom content instead?

I am working on a project where a user can click on a link to get some additional information about it. The website uses Bootstrap Framework if that is important., The extra information is stored in a file on the server. Here is the code that calls the function openModal:
$('a.modal-link').on('click', openModal);
This is the JavaScript code for this function:
function openModal() {
var link = $(this).attr("href");
var page = "url-of-current-page";
var text = $(this).text();
$.ajax({
type: "POST",
url: "path/to/getdata.php",
data: {
link: link,
page: page
},
success: function(content) {
$(".modal-body").html(content);
}
})
};
This is supposed to set the HTML of modal-body to the data I received back. But it loads up the actual link inside the modal after showing up my data briefly. How can I prevent that?
Let me know if I need to add more details before downvoting.

As you're clicking an anchor, you probably want to prevent it from redirecting, change the function to
function openModal(e) {
e.preventDefault();
var link = $(this).attr("href");
var page = "url-of-current-page";
var text = $(this).text();
$.ajax({
type: "POST",
url: "path/to/getdata.php",
data: {
link: link,
page: page
},
success: function(content) {
$(".modal-body").html(content);
}
});
}

Jquery ajax button click event firing twice?

I have a Employee page which shows list of employees with an edit option. On clicking the edit button jquery-ajax is used to fetch the data from the server.
The problem is when I click the edit button the event is firing twice.
I am using a seperate js file and is referring the file to the main page.The script was working fine until i moved it to the seperate js file.
The Jquery script is
//ajaxGet on edit button click
$(document).on('click', '.editRole', ajaxGet);
var ajaxGet = function (e) {
var spinner = $(this).parent('div').find('.spinner');
var href = $("#editMenuSettings").data("url");
var menuRoleId = $(this).data('id');
spinner.toggle(true);
var options = {
type: "GET",
url: href,
data: { menuRoleId: menuRoleId }
};
$.ajax(options).success(function (data) {
spinner.toggle(false);
$(".modal-body").html(data);
$(".modal").modal({
backdrop: 'static'
});
});
$.ajax(options).error(function (data) {
spinner.toggle(false);
toastr.error("Oops..Some thing gone wrong");
});
return false;
};

You call $.ajax twice.
At lines
$.ajax(options).success(function(data)...
$.ajax(options).error(function(data)...
you actually make two different AJAX calls - one with success callback only, another one with error callback.
In your case, your call should look like this:
var options = {
type: "GET",
url: href,
data: { menuRoleId: menuRoleId }
};
$.ajax(options)
.success(function (data) {
spinner.toggle(false);
$(".modal-body").html(data);
$(".modal").modal({
backdrop: 'static'
});
})
.error(function (data) {
spinner.toggle(false);
toastr.error("Oops..Some thing gone wrong");
});
return false;
It will set both callbacks to the single AJAX call and execute this one.

Load AJAX content in modal and change URL

My current setup is on click a modal popups with data from the ajax action which has been passed an id, I want the URL to change on click.
But I also want it so that if you directly accessed the URL it would load say index with the modal preloaded.
Very much like https://www.myunidays.com/perks/view/shoeaholics/online it loads the URL with the content in a model then if you click/close the modal the URL changes to the index page.
I have seen related questions about changing URL on click but couldn't find anything to do with accessing URL directly (is their a rule I can add to my .htaccess).
(Any code/direction is appreciated)

Create a partial view (so that layout isnt rendered twice) and add the action to controller
public function actionViewmodal($id)
{
return $this->renderPartial('_view', array('model' => $this->findModel($id)));
}
Then within my index I did the following
$(document).ready(function() {
$('a').click(function() {
pageurl = $(this).attr('href');
var Id = jQuery(this).attr('id');
$.ajax({
type: 'POST',
data: {
'modal_id' : Id,
},
url : 'http://localhost:8888/directory/viewmodal?id='+Id,
success: function(response) {
if(response) {
$('.modal_some_wrapper').html(response);
$('#modal_'+Id).modal('show');
$(document).on('hidden.bs.modal', modal_id, function (event) {
$(this).remove();
});
} else {
alert('Error');
}
}
});
//to change the browser URL to the given link location
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',pageurl);
}
//stop refreshing to the page given in
return false;
});
});
Could someone example how myunidays website works with modal and URL change?