0

I have created a click function on an ASPX page which worked fine, when I moved the code to my site.master which has a existing J query function it doesn't seem to work.

this is my J query function I created:

var scrolled = 0;
$(document).ready(function () {
    try {
        $("#downClick").on("click", function () {
            scrolled = scrolled + 235;

            $(".cover").stop().animate({
                scrollTop: scrolled
            });

        });
        $("#upClick").on("click", function () {
            scrolled = scrolled - 235;

            $(".cover").stop().animate({
                scrollTop: scrolled
            });

        });
        $(".clearValue").on("click", function () {
            scrolled = 0;
        });
    } catch (e) { }
});

However, when I tried adding this to my main site, in the site.master, it just refreshes the page when I click more booklets.

Clearly the code works but something in the site.master making the page refresh.

I have another J query function in the site.master which I think may be causing this:

$(document).ready(function () {
    try {
        $('.slider1').bxSlider({
            slideWidth: 960,
            captions: true,
            auto: true,
            autoControls: true
        });
    } catch (e) { }
});

This is a slider on the page, but with the previous code added it doesn't work.

Any ideas why the first code doesn't work in my main page, am assuming its because threes other Jquery functions but still not sure why it refreshes. any help would be much appreciated.

quamrana
  • 37,849
  • 12
  • 53
  • 71
al123
  • 561
  • 9
  • 25
  • 1
    Note: Your first try/catch is outside of the event handlers so it will do nothing but check that *the events were registered without error*. Not very useful as it unlikely to error at that time. Put try catches around actual code *inside* callbacks. – iCollect.it Ltd Aug 27 '14 at 09:22

1 Answers1

2

You're using buttons inside a form; the button is causing a postback. Perfectly normal.

Instead, use an input of type button. Rewrite:

<button id="downClick">More Booklets</button>

So that it reads:

<input id="downClick" type="button" value="More Booklets" />

Your jQuery selectors are based on the id, so it'll still handle the click events as you'd expect.

  • You can also use a ` – Daniel J.G. Aug 27 '14 at 09:24
  • Thank you so much this has helped! works now! I would never have guessed that! – al123 Aug 27 '14 at 09:37