Bootstrap Modal not working any more after routing
I just included some routing in my project, using AltoRouter. I am using relatively simple routing, something like:
$router->map('GET','/room/[*:chatid]','chat.php','chat');
Now on the chat.php, I have a modal. This modal works perfectly fine before including the routing. But now, there is another problems with the modal.
- the modal is always there as a normal div underneath the rest of the
page - it is never shown as a modal at all, not even in the moment it should
be shown
Following is the code for the modal.
<div id="namePopup" class="overlay">
<div class="popup">
<h2>Username festlegen</h2>
<a class="close" href="#">×</a>
<div class="content">
Bitte einen Namen für den Chat festlegen:<br/>
<input id="chatRoomName"/>
<button id="submitChatRoomName">Name festlegen</button>
</div>
</div>
</div>
And then, when navigating to the page, I just check for a set cookie. If it is not set I want to open the modal:
if(sessionStorage.getItem("username") === null){
window.location.href="#namePopup";
}
The JS seems to be working fine, as #namePopup is correctly added to the URL when needed. But I guess, the router can not use this, although I do not understand, why it is always shown instead then.
Can anybody help me figure out the problem or help me creating a route for opening the modal, if that's needed?
javascript php twitter-bootstrap url-routing altorouter
asked Jan 1 at 12:25
namelessnameless
64511338
add a comment |
I just included some routing in my project, using AltoRouter. I am using relatively simple routing, something like:
$router->map('GET','/room/[*:chatid]','chat.php','chat');
Now on the chat.php, I have a modal. This modal works perfectly fine before including the routing. But now, there is another problems with the modal.
- the modal is always there as a normal div underneath the rest of the
page - it is never shown as a modal at all, not even in the moment it should
be shown
Following is the code for the modal.
<div id="namePopup" class="overlay">
<div class="popup">
<h2>Username festlegen</h2>
<a class="close" href="#">×</a>
<div class="content">
Bitte einen Namen für den Chat festlegen:<br/>
<input id="chatRoomName"/>
<button id="submitChatRoomName">Name festlegen</button>
</div>
</div>
</div>
And then, when navigating to the page, I just check for a set cookie. If it is not set I want to open the modal:
if(sessionStorage.getItem("username") === null){
window.location.href="#namePopup";
}
The JS seems to be working fine, as #namePopup is correctly added to the URL when needed. But I guess, the router can not use this, although I do not understand, why it is always shown instead then.
Can anybody help me figure out the problem or help me creating a route for opening the modal, if that's needed?
javascript php twitter-bootstrap url-routing altorouter
asked Jan 1 at 12:25
namelessnameless
64511338
add a comment |
I just included some routing in my project, using AltoRouter. I am using relatively simple routing, something like:
$router->map('GET','/room/[*:chatid]','chat.php','chat');
Now on the chat.php, I have a modal. This modal works perfectly fine before including the routing. But now, there is another problems with the modal.
- the modal is always there as a normal div underneath the rest of the
page - it is never shown as a modal at all, not even in the moment it should
be shown
Following is the code for the modal.
<div id="namePopup" class="overlay">
<div class="popup">
<h2>Username festlegen</h2>
<a class="close" href="#">×</a>
<div class="content">
Bitte einen Namen für den Chat festlegen:<br/>
<input id="chatRoomName"/>
<button id="submitChatRoomName">Name festlegen</button>
</div>
</div>
</div>
And then, when navigating to the page, I just check for a set cookie. If it is not set I want to open the modal:
if(sessionStorage.getItem("username") === null){
window.location.href="#namePopup";
}
The JS seems to be working fine, as #namePopup is correctly added to the URL when needed. But I guess, the router can not use this, although I do not understand, why it is always shown instead then.
Can anybody help me figure out the problem or help me creating a route for opening the modal, if that's needed?
javascript php twitter-bootstrap url-routing altorouter
asked Jan 1 at 12:25
namelessnameless
64511338
I just included some routing in my project, using AltoRouter. I am using relatively simple routing, something like:
$router->map('GET','/room/[*:chatid]','chat.php','chat');
Now on the chat.php, I have a modal. This modal works perfectly fine before including the routing. But now, there is another problems with the modal.
- the modal is always there as a normal div underneath the rest of the
page - it is never shown as a modal at all, not even in the moment it should
be shown
Following is the code for the modal.
<div id="namePopup" class="overlay">
<div class="popup">
<h2>Username festlegen</h2>
<a class="close" href="#">×</a>
<div class="content">
Bitte einen Namen für den Chat festlegen:<br/>
<input id="chatRoomName"/>
<button id="submitChatRoomName">Name festlegen</button>
</div>
</div>
</div>
And then, when navigating to the page, I just check for a set cookie. If it is not set I want to open the modal:
if(sessionStorage.getItem("username") === null){
window.location.href="#namePopup";
}
The JS seems to be working fine, as #namePopup is correctly added to the URL when needed. But I guess, the router can not use this, although I do not understand, why it is always shown instead then.
Can anybody help me figure out the problem or help me creating a route for opening the modal, if that's needed?
javascript php twitter-bootstrap url-routing altorouter
javascript php twitter-bootstrap url-routing altorouter
asked Jan 1 at 12:25
namelessnameless
64511338
asked Jan 1 at 12:25
namelessnameless
64511338
edited Jan 1 at 12:38
nameless
asked Jan 1 at 12:25
namelessnameless
64511338
asked Jan 1 at 12:25
namelessnameless
64511338
asked Jan 1 at 12:25
namelessnameless
64511338
64511338
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53995413%2fbootstrap-modal-not-working-any-more-after-routing%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53995413%2fbootstrap-modal-not-working-any-more-after-routing%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
