Nevertheless you are using the plugin in a way it isn't supposed to be
used, this is what I wanted to point out and this is where the double
loading comes from. One from the click handler itself and a second
time because that click event is triggered again by the plugin.
Besides if you're not using remote() or history() it will not work in
IE (doesn't work in Safari 3 anyway as it stands).
What is wrong with the following much less redundant code using the
history() method:
$('a.testing').history(function() {
var i = /\d/.exec(this.id)[0];
$.get('chapter-' + i + '.html', function(data) {
$('#div1').hide();
$('#div2').append(data).show();
});
});
--Klaus
On 7 Okt., 14:26, Leanan <[EMAIL PROTECTED]> wrote:
> Not having a test for Chap3 was a typo. That last if should be
> adjusted accordingly.
>
> Klaus-
>
> I don't want to use .remote, because I only want to make the ajax call
> once. If the content we expect to be there isn't there, then I want
> to load it. If, however, we've already loaded it, I just want to re-
> show the div that contains it, not hit the server again (the data I'm
> getting is large and takes some time to generate. As the content is
> not something likely to change in a few minutes, the solution I've
> come up with is sufficient in that regard). I already have this
> functionality working flawlessly. All I really need to do is that
> when the back button is hit, div#2 gets hidden and div#1 is shown,
> and, if someone hits forward from that point, then div#1 is hidden and
> div#2 is shown. This is working, too, except for what appears to be a
> double call to $.get.
>
> When I do something similar to the demo, the links with the #something
> get added. I don't want to log every single link that gets clicked
> (they expand tables, adjust which divs get shown, etc). This is why I
> just have the call to initialize, to add the ability to swap the
> visibility of the divs when they go back to the base url.
>
> I don't understand though why it is appearing to call my $.get twice.
> Is it because when the link with the # is clicked and put in the
> history the plugin is executing the $.get as well? This seems odd,
> since I have neither any $.history or $.remote calls in my script. I
> would change my .click to a .history, except that I have a table of
> links that could be selected, and I need to know which link was
> clicked, because I need to grab info from the link for the resulting
> call.
>
> There must be a way to do this?
>
> On Oct 7, 2:36 am, Klaus Hartl <[EMAIL PROTECTED]> wrote:
>
> > History/Remote is not supposed to work that way. Although the hash is
> > changing correctly it will not work in IE for example. You need to
> > explicitly tell the history manager which links add to history. Just
> > have a look at the demo. For pure Ajax loading links that is the
> > remote method. In your case
>
> > $('a.testing').remote('#div2', function() {
> > //callback
>
> > });
>
> > $.ajaxHistory.initialize();
>
> > The show/hide of div1/div2 looks to me like a workaround you don't
> > need but I'm not sure.
>
> > --Klaus
>
> > On 6 Okt., 22:52, Leanan <[EMAIL PROTECTED]> wrote:
>
> > > Klaus,
>
> > > I've created a demo that exhibits this behavior. I modified your demo
> > > that is included with the script athttp://www.stilbuero.de/jquery/history/
>
> > > All you should have to do is change your index.html to be the
> > > following:
>
> > > <html lang="en">
> > > <head>
> > > <meta http-equiv="Content-Type" content="text/html;
> > > charset=utf-8">
> > > <meta http-equiv="Content-Style-Type" content="text/css">
> > > <meta http-equiv="Content-Script-Type" content="text/
> > > javascript">
> > > <title>jQuery history/remote - solution for hijaxing links</
> > > title>
> > > <script src="jquery-1.1.3.1.pack.js" type="text/javascript"></
> > > script>
> > > <script src="jquery.history_remote.js" type="text/javascript"></
> > > script>
> > > </head>
> > > <body>
>
> > > <div id="div1">
> > > <a href="#test1" class="testing" id="Chap1">Test Chap1</a><br>
> > > <a href="#test2" class="testing" id="Chap2">Test Chap2</a><br>
> > > <a href="#test3" class="testing" id="Chap3">Test Chap3</a><br>
> > > </div>
>
> > > <div id="div2"> </div>
> > > <script type="text/javascript">
> > > $(document).ready(function() {
> > > $.ajaxHistory.initialize(function() {
> > > $('#div1').show();
> > > $('#div2').hide();
> > > });
>
> > > $('.testing').click(function() {
> > > if ($(this).attr('id') == "Chap1") {
> > > $.get('chapter-1.html', function(data) {
> > > $('#div2').append(data);
> > > $('#div1').hide();
> > > $('#div2').show();
> > > });
> > > }
> > > if ($(this).attr('id') == "Chap2") {
> > > $.get('chapter-2.html', function(data) {
> > > $('#div2').append(data);
> > > $('#div1').hide();
> > > $('#div2').show();
> > > });
> > > }
> > > if ($(this).attr('id') == "Chap1") {
> > > $.get('chapter-1.html', function(data) {
> > > $('#div2').append(data);
> > > $('#div1').hide();
> > > $('#div2').show();
> > > });
> > > }
> > > });
> > > });
> > > </script>
> > > </body>
> > > </html>
>
> > > You should notice that every time you click on the Test links, you
> > > will actually get the html page twice instead of once.
