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) {
Related
I am using this Wordpress theme, called ichiban.
I have made some custom menu items that links directly to sections on the same page. For these cases I would like the whole menu to un-toggle when the < li > item is clicked. This is the code I have been working on;
jQuery( document ).ready(function($) {
$('#menu-main li a').on("click", function(){
$('.site-overlay-wrapper').hide();
});
});
For now, this code only hides the open menu, the menu button does not reset, and it is not possible to re-ope the menu. Please help me getting this code correct.
SOLUTION
jQuery( document ).ready(function($) {
$('#menu-main li a').on("click", function(){
$("body").removeClass("overlay-open");
});
});
Thank you all :)
You can try using jQuery .toggle() method.
Change this line:
$('.site-overlay-wrapper').hide();
To:
$('.site-overlay-wrapper').toggle();
This help?
jQuery( document ).ready(function($) {
var t = true;
$('#menu-main li a').on("click", function(){
if(t===true){
$('.site-overlay-wrapper').hide();
t=false;
}
else{
$('.site-overlay-wrapper').show();
t=true;
}
});
});
Here is working example:
jQuery( document ).ready(function($) {
var t = true;
$('#button').on("click", function(){
if(t===true){
$('.show').hide();
$(this).text("SHOW");
t=false;
}
else{
$('.show').show();
$(this).text("HIDE");
t=true;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="button">CLICK</button>
<div class="show">HAPY NEW YEAR!!!</div>
You also can have a problem with $('#menu-main li a'). That a tag is wrong. You need to point click statemant to button class directly because you hide your menu on any a tag inside any li.
I'm Trying to popup an alert when a button is clicked using jQuery but for some reason its not working.
$(document).ready(function () {
$("#find").click(function () {
alert("Hi");
});
});
Here is the link to code:Weather
Kindly let me what I'm I doing wrong.
You should try this instead.
$(function(){
$("#find").on('click',function () {
alert("Hi");
});
});
I am using quicksand jquery and i have searched for solutions and none work. I am trying to auto-click a category when the page loads to filter what I want to filter.
Here is the links on the page that allow users to click and filter
<li>Everything</li>
<li>cat1</li>
<li>cat2</li>
<li>cat3</li>
<li>cat4</li>
when the page loads, it show ALL items and then the user can select the category to filter by. i want to auto click one, and am looking for the function to generate the click.
here is what i have tried with no solution:
<script type="text/javascript">
$(document).ready(function() {
$(".filter li a.cat2").trigger('click');
});
</script>
and
<script type="text/javascript">
$(document).ready(function() {
$(".filter li a.cat2").trigger('click');
});
</script>
and
<script>
$(function() {
// It would be better to create a function for this, but
// to avoid code duplication the click() event is triggered/reused
$('.filteroptions li a cat2').click();
});
</script>
Here is the js file it operates from and why i chose to remove "filteroptions" and try "filter" as was suggested in other posts. as mine shows ".filter li a" not filteroptions li a
// DOMContentLoaded
$(function () {
// bind radiobuttons in the form
var $filterType = $('.filter li a');
// get the first collection
var $applications = $('#list');
// clone applications to get a second collection
var $data = $applications.clone();
// attempt to call Quicksand on every form change
$filterType.click(function (e) {
$('.filter li a').removeClass('selected');
$(this).addClass('selected');
if ($(this).attr('id') == 'all') {
var $filteredData = $data.find('li');
} else {
var $filteredData = $data.find('li[class=' + $(this).attr('id') + ']');
}
// finally, call quicksand
$applications.quicksand($filteredData, {
duration: 800,
easing: 'easeInOutQuad',
attribute: 'id'
}, function () {
$("a[data-rel^='prettyPhoto']").prettyPhoto({ animationSpeed: 'slow', social_tools: false, slideshow: 2000 });
});
});
});
And here are other posts that you may say are the same, but i tried them and they do not work. They are using an older type of quicksand.
JQuery Quicksand: Link directly to pre-filtered Quicksand from another page
First open limited item not all in jQuery Quicksand?
You are using id on not class so change your click tigger to
$(".filter li #cat2").trigger('click');
I'm trying to add/remove .css('overflow-y','hidden') onclick, Which I did. The problem appears when I try to remove that css, also onclick. But this time, user needs to click on another element.
Idea is to have modal (twitter bootstrap 2.3) window where there is some data and when user click on modal button (triggers) the css applies to html element in order to prevent scrolling of the website. And now when I click anywhere on modal (modal shuts down) but there is still overflow-y styling and because of it I can't scroll my page.
So this is what I've made, but I have been stuck here and don't know where I am making mistake. Could anyone help me with this one, and if is possible give me some advice so I could take care in future.
Thanks!
<script type="text/javascript">
$('#myModal').modal('hide') // initializes and invokes show immediately</p>
$('.note').delay(10000).fadeOut('slow');
$(document).ready(function() {
var $html = $('html');
var $button = $('.container > .btn-primary');
var $modal = $('.modal-backdrop');
$button.on('click', function(e) {
$html.css('overflow-y', 'hidden');
if ($html.attr('style')) {
alert('WORKS!');
}
else {
$modal.onclick( function() {
$html.css('overflow-y','scroll');
});
};
});
});
</script>
Put your css in a class and use jquery's .toggleClass() to show/hide the overflow.
Here's a simplified example: http://jsbin.com/towiyaqa/1/
You can use like this:
$button.on('click', function(e) {
$html.css('overflow-y','hidden' ? 'scroll' : 'hidden');
e.preventDefault();
})
Here is solution for problem:
$(document).ready(function() {
var $html = $('html');
var $button = $('.container > .btn-primary');
var $modal = $('.modal-backdrop');
$button.on('click', function(e) {
$('.note').delay(10000).fadeOut('slow');
$html.css('overflow-y', 'hidden');
if ($html.attr('style')) {
console.log("overflow-y: hidden added");
}
});
$('#myModal').on('hidden.bs.modal', function () {
// do something…
console.log("fires myModal");
$html.css('overflow-y','scroll');
});
});
</script>
I am trying to revise the following jQuery Mobile code to display if the navbar with the id "e" is clicked. The code below works for all of the navbar items, but I only want the alert to appear if the navbar with the id "e" is clicked. Any help revising this would be great. Thanks much!
$(document).on('pagebeforeshow', '#p_page', function(event){
$('div[data-role="navbar"] a').live('click', function () {
alert("div E clicked");
});
});
This should work:
$(document).on('pagebeforeshow', '#p_page', function(event){
$('div[data-role="navbar"] ul li a#e').on('click', function () {
alert("div E clicked");
});
});
Working example: http://jsfiddle.net/Gajotres/rnRqm/
Instead of live use click event because live is deprecated from jquery.
$('div[data-role="navbar"] a').on('click', function () {
alert("div E clicked");
});