Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Container appears twice #549

Closed
ilikourou opened this issue Jul 31, 2015 · 4 comments
Closed

Container appears twice #549

ilikourou opened this issue Jul 31, 2015 · 4 comments

Comments

@ilikourou
Copy link

Hello.

I am using jquery-pjax for an application and everything works fine, except for one thing.
This is the code so that you can understand what's the problem:

<div id="main">
    <div class="inner">
        .....
    </div>
</div>

.....

<script>
    $(document).pjax("a:not('[no-data-pjax]')", '#main');
    $(document).on('submit', 'form[data-pjax]', function(event) {
        $.pjax.submit(event, '#main')
    });
    $.pjax.defaults.timeout = 15000;
</script>

When I click on a link (inside #main), the new html code gets:

<div id="main">
    <div id="main">
        <div class="inner">
        .....
        </div>
    </div>
</div>

As you can see, div with id #main appears twice after the link is clicked.

Any help?

Thanks,
Ilias
@mislav
Copy link
Collaborator

mislav commented Jul 31, 2015

Does the response HTML for the pjax request include <div id="main">? If so, then it's expected that it will appear twice. Pjax will insert anything that it receives as response HTML into the original #main container.

@ilikourou
Copy link
Author

Yes, the response HTML does include <div id="main">, but what I don't understand is why response HTML starts from <div id="main"> and not the the beginning of the document.

All my HTML pages have the following format:

<body>
    <div id="header">....</div>
    <div id="main">...</div>
    <div id="footer">...</div>
</body>

So, if everything received as response HTML gets into the original #main container, when a user clicks on a link inside #main, I would expect the HTML to become something like this:

<body>
    <div id="header">...</div>
    <div id="main">
        <div id="header">...</div>
        <div id="main">...</div>
        <div id="footer">...</div>
    </div>
    <div id="footer">...</div>
</body>

Is this correct?

Right now, only <div id="main"> is inserted into the original #main cointainer.

Thank you,
Ilias

@ilikourou
Copy link
Author

It turned out that using the fragment option made it work correctly:

$.pjax.defaults.fragment = '#main';

@mislav
Copy link
Collaborator

mislav commented Sep 11, 2015

Glad you solved it! You should have closed the issue.

@mislav mislav closed this as completed Sep 11, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mislav @ilikourou