We Keep Coding

Laravel5 pagination with Jquery Ajax

I am using Laravel5 pagination. I have added some ajax code because when I click next button I don't need to refresh the page.
My issue is when I am clicking next button my page is refreshing. please help me to find this issue. My code and screen shot are given below.
In firefox firebug console showing some error "TypeError: Argument 1 of Window.getDefaultComputedStyle is not an object."
js
#abilitytest: Click function for showing data in bootstrap model
$( "#abilitytest" ).click(function() {
$.post("/abilitytest", function(response){
$( "#abilityQuestions" ).html(response);
});
});
$('.pagination a').on('click', function (event) {
event.preventDefault();
var page = $(this).attr('href');
console.log(page);
alert('hai');
});
Controller
$abilitytests = Abilitytest::simplePaginate(1);
return view('test.abilitytestmodal',['abilitytests' => $abilitytests]);

Maybe there some trouble with binding event listener on $('.pagination a')?
Try
$(document).on('click', '.pagination a', function(event){
Instead of
$('.pagination a').on('click', function (event) {

Currently I am using laravel pagination built-in function simplePaginate().
Abilitytest::simplePaginate(1) the ul class of pagination will be class="pager".<ul class="pager">.
If we are using laravel built-in function paginate() the ul class of pagination will be class="pagination"..
So the issue is I am using wrong class name in JS file "<ul class="pagination">".
So my code is
$('.pager a').on('click', function (event) {
event.preventDefault();
var page = $(this).attr('href');
console.log(page);
alert('hai');
});
THanks

you can use jQuery on document ready like this
$(document).ready(function (){
$('.pagination a').on('click', function (event) {

How to get the id of element when right clicked

I like to know how to get the id of li when i right click over this li using javascript or jquery.
<ul>
<li id="liid" class="collapsable">
<div class="hitarea collapsable-hitarea">
</div>
<span class="folder">Group1.2</span>
</li>
</ul>
I have the right click function.
$(document).bind("contextmenu", function (e) {
// code to get the id of current li
});
Can any one help me please.

Use .on('contextmenu', 'li')
$(function() {
$('ul').on('contextmenu', 'li', function(e) { //Get li under ul and invoke on contextmenu
e.preventDefault(); //Prevent defaults
alert(this.id); //alert the id
});
});
Demo

This uses event delegation on document and only fires if an li is clicked.
$(document)
.on('contextmenu', 'li', function(e) {
e.preventDefault();
console.log(this.id);
});
Compared to adding a handler on $('ul') or $('li'), this will only bind a single handler.

You can try this
$(function() {
$('li').on("contextmenu", function (e) {
alert(this.id);
e.preventDefault();
});
}
Demo

You can use this..
If you want open also Context Menu on right click then use below code:
$(function() {
$('ul li').on('contextmenu', function() {
alert(this.id);
});
});
and without Context Menu then use below code:
$(function() {
$('ul li').on('contextmenu', function(e) {
e.preventDefault();
alert(this.id);
});
});
Happy New year...

returning clicked li class in an ul javascript/jquery

My code (the html page):
<nav>
<ul>
<li id="homeLink">Home</li>
<li id="rekenLink">Rekenmachine</li>
<li id="bakkerLink">Parkeergarage</li>
<li id="garageLink">Bij de bakker</li>
<ul>
</nav>
The javascript/jquery behind it:
$(function () {
$("ul").click(function () {
// here I want to get the clicked id of the li (e.g. bakkerLink)
});
});
How do I do that?

Use the .on() method with signature $(common_parent).on(event_name, filter_selector, event_listener).
Demo: http://jsfiddle.net/gLhbA/
$(function() {
$("ul").on("click", "li", function() {
// here I want to get the clicked id of the li (e.g. bakkerLink)
var id = this.id;
alert(id);
});
});
Another method is to bind the event to li instead of ul:
$(function() {
$("li").click(function() {
// here I want to get the clicked id of the li (e.g. bakkerLink)
var id = this.id;
alert(id);
});
});

Use jQuery on() instead of click and pass li as selector.
$(function() {
$("ul").on('click', 'li', function() {
//Here this will point to the li element being clicked
alert(this.id);
});
});
on() reference - http://api.jquery.com/on/

$(function() {
$("li").click(function() {
alert(this.id);
});
});
edit: jsfiddle link

Handle the click event of the <li> instead of the <ul>.
You can then get this.id.

Use the event's target (The anchor that was clicked) and then grab its parent's id:
$(function() {
$("ul").click(function(e) {
alert(e.target.parentNode.id);
});
});
JSFiddle

here is one of the way to do. Make sure your using the latest jquery file.
$("ul li").on('click', function() {
console.log($(this).attr("id"));
});

You may try
$(function () {
$("li").click(function () {
var id = $(this).attr("id");
alert(id);
});
});
or
$(document).ready( function() {
$("li").click(function () {
var id = $(this).attr("id");
alert(id);
});
});

Go to the link after do the effect in jquery

I want to fade out the current page and fade in the new one. The fade in work well, but when I try to fade out the div when the link is clicked, It just load the new page, but it doesn't fade out first. The div's which I want to fade out and in content is a loaded with a php function like this:
Script:
<script type="text/javascript">
$(function(){
$('#article').fadeIn('250');
$('a').click(function() {$('#article').fadeOut('250')});
});
</script>
Link:
<li>Article 1</li>
Div:
<div id="article">
<?php
$n='articles/article'.$_GET['n'].'.php';
if (is_file($n)) {include($n);} else {include ("articles/error.php");}
?>
</div>
EDIT:
I have already done it by mixing your answers, but I have a problem, the duration of the fadeOut effect doesn't work. No matter what duration I use, it always takes the same. That's what I have now:
<script type="text/javascript">
$(function () {
$('a').click(function () { var a = $(this);
$('#article').fadeOut( 250, function () { window.location = 'index.php?n=' + a.attr('rel'); }); return false; });
$('#article').hide().fadeIn(250);
});
</script>

Return false to prevent navigation. Use callback after animation completes to navigate manually.
$(function () {
$('#article').fadeIn('250');
$('a').click(function () {
$('#article').fadeOut('250',
function () {
window.location = $(this).prev().attr("href");
}
); return false;
}
);
});

Your link is redirecting as it is supposed to.
Reform your html Link like this:
<li>Article 1</li>
and reform your jQuery like so:
<script type="text/javascript">
$(function(){
$('#article').fadeIn('250');
$('a').click(function() {
$('#article').fadeOut('250', function{ //callback
window.location ="index.php?n=1";
})
});
});
</script>

Try using a callback in the fadeOut function call.
$('a').click(function(e) {
link_href = this.href;
$('#article').fadeOut(250, function() {
window.location.href = link_href;
});
return false;
});

There is no need to refresh the entire page each time, just load the new content into the article div like so:
link:
<li>Article 1</li>
Script:
<script type="text/javascript">
$(function(){
$('a').click(function() {var a = $(this); $('#article').fadeOut('250' function(){
$.get('index.php?n=' + a.attr('rel'), function(response){
$('#article').html(reponse).fadeIn('250');
}
})}
);
});
</script>

Using jQuery post

I have a link that posts to a url (ajax). Then I want to hide the entire li.
HTML
<li>Product Name Delete</li>
JQUERY
$(function(){
$(".del").click(function () {
var link = $(this).attr('href');
$.post(link, function() {
$(this).parent().slideUp();
return false;
});
event.preventDefault();
});
});

The this-keyword in the success-handler passed to $.post does not refer to the anchor element, so your code won't work. You can easily fix this by saving a reference to the li-element outside the success-handler:
$(function(){
$(".del").click(function () {
var link = $(this).attr('href');
var li = $(this).parent();
$.post(link, function() {
li.slideUp();
return false;
});
event.preventDefault();
});
});