jQuery change content of div with button press ( include() )
up vote
2
down vote
favorite
I need some basic help, I cant find my solution :(
I try to have menu with some buttons on the left side (menu_kneeboard
). If you click something, it would open another php file with the include()
function in the content_kneeboard
section. How do I do it? If I use the .text
statement (? attribute?) it works and it will show "IT WORKS!" in the content_kneeboard
div
.
But how could I make it working while using <?php include("map.php"); ?>
as action?
I tried .html(<?php include("map.php"); ?>)
but it does not seem to work. .php
does not seem to excist.
<div class="menu_kneeboard">
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(".content_kneeboard").text("IT WORKS!");
})
});
</script>
<button>click</button>
</div>
<div class="content_kneeboard">
<p>old content</p>
</div>
Thank you for your help! :)
javascript jquery html button include
add a comment |
up vote
2
down vote
favorite
I need some basic help, I cant find my solution :(
I try to have menu with some buttons on the left side (menu_kneeboard
). If you click something, it would open another php file with the include()
function in the content_kneeboard
section. How do I do it? If I use the .text
statement (? attribute?) it works and it will show "IT WORKS!" in the content_kneeboard
div
.
But how could I make it working while using <?php include("map.php"); ?>
as action?
I tried .html(<?php include("map.php"); ?>)
but it does not seem to work. .php
does not seem to excist.
<div class="menu_kneeboard">
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(".content_kneeboard").text("IT WORKS!");
})
});
</script>
<button>click</button>
</div>
<div class="content_kneeboard">
<p>old content</p>
</div>
Thank you for your help! :)
javascript jquery html button include
Are you wanting to open a modal or redirect to map.php or just replace .content_kneeboard with map.php?
– hyphen
Nov 9 at 12:31
replace .content_kneeboard with map.php :)
– Kevin Jung
Nov 9 at 12:34
You could include all your php files and add a class with the css propertydisplay: none;
to them and when pressing the button remove this class for the file you want to be shown and add it to the file that has been shown
– Matt.S
Nov 9 at 12:44
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
I need some basic help, I cant find my solution :(
I try to have menu with some buttons on the left side (menu_kneeboard
). If you click something, it would open another php file with the include()
function in the content_kneeboard
section. How do I do it? If I use the .text
statement (? attribute?) it works and it will show "IT WORKS!" in the content_kneeboard
div
.
But how could I make it working while using <?php include("map.php"); ?>
as action?
I tried .html(<?php include("map.php"); ?>)
but it does not seem to work. .php
does not seem to excist.
<div class="menu_kneeboard">
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(".content_kneeboard").text("IT WORKS!");
})
});
</script>
<button>click</button>
</div>
<div class="content_kneeboard">
<p>old content</p>
</div>
Thank you for your help! :)
javascript jquery html button include
I need some basic help, I cant find my solution :(
I try to have menu with some buttons on the left side (menu_kneeboard
). If you click something, it would open another php file with the include()
function in the content_kneeboard
section. How do I do it? If I use the .text
statement (? attribute?) it works and it will show "IT WORKS!" in the content_kneeboard
div
.
But how could I make it working while using <?php include("map.php"); ?>
as action?
I tried .html(<?php include("map.php"); ?>)
but it does not seem to work. .php
does not seem to excist.
<div class="menu_kneeboard">
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(".content_kneeboard").text("IT WORKS!");
})
});
</script>
<button>click</button>
</div>
<div class="content_kneeboard">
<p>old content</p>
</div>
Thank you for your help! :)
javascript jquery html button include
javascript jquery html button include
edited Nov 9 at 13:09
AIqbalRaj
1,2572518
1,2572518
asked Nov 9 at 12:21
Kevin Jung
205
205
Are you wanting to open a modal or redirect to map.php or just replace .content_kneeboard with map.php?
– hyphen
Nov 9 at 12:31
replace .content_kneeboard with map.php :)
– Kevin Jung
Nov 9 at 12:34
You could include all your php files and add a class with the css propertydisplay: none;
to them and when pressing the button remove this class for the file you want to be shown and add it to the file that has been shown
– Matt.S
Nov 9 at 12:44
add a comment |
Are you wanting to open a modal or redirect to map.php or just replace .content_kneeboard with map.php?
– hyphen
Nov 9 at 12:31
replace .content_kneeboard with map.php :)
– Kevin Jung
Nov 9 at 12:34
You could include all your php files and add a class with the css propertydisplay: none;
to them and when pressing the button remove this class for the file you want to be shown and add it to the file that has been shown
– Matt.S
Nov 9 at 12:44
Are you wanting to open a modal or redirect to map.php or just replace .content_kneeboard with map.php?
– hyphen
Nov 9 at 12:31
Are you wanting to open a modal or redirect to map.php or just replace .content_kneeboard with map.php?
– hyphen
Nov 9 at 12:31
replace .content_kneeboard with map.php :)
– Kevin Jung
Nov 9 at 12:34
replace .content_kneeboard with map.php :)
– Kevin Jung
Nov 9 at 12:34
You could include all your php files and add a class with the css property
display: none;
to them and when pressing the button remove this class for the file you want to be shown and add it to the file that has been shown– Matt.S
Nov 9 at 12:44
You could include all your php files and add a class with the css property
display: none;
to them and when pressing the button remove this class for the file you want to be shown and add it to the file that has been shown– Matt.S
Nov 9 at 12:44
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
I'm not sure what content is in map.php, so this may not be the best solution if it's a lot of markup, but you can put the markup directly in the tag:
$("button").click(function() {
$(".content_kneeboard").empty(); //if there are other elements in this div you want to preserve, keep in mind this will remove those too.
$(".content_kneeboard").html('<div id="map_content"></div>');
});
Another option would be to include the php on the initial page load but set display:none;
, and then in your button click you could do something like (jquery):
$("#map_content").fadeIn('fast');
or with js:
document.getElementById(map_content).style.display = 'block';
it would largely depend on what exactly the content of map.php is. If we knew more about the implementation it might yield you better results in terms of answers.
I will add that if its any significant amount of markup, more than a couple of divs, I'd probably opt to include the php on the initial page load as hidden, and then show it when the button is clicked. That's generally how I handle this sort of thing.
If you need to know more specifically how to implement that, let me know and I can add to this answer.
There is very much text in map.php and - important - it will not only be map.php. There will be many buttons on the left side, which will change the content in the middle (content_kneeboard). So the idea to just dont display them is the best I guess. But isnt there a simple solution to just include the main.php (and other files on button click) with the <?php include("kneeboard/subpage/subpage_map.php"); ?> "command"?
– Kevin Jung
Nov 9 at 13:28
imgur.com/a/FylcS6L This is how it looks right now. Each button on the left shoud change the content in the middle (where the map is right know). BUT the user can change his used plane and map in some settings, so even for the checklists there are nearly 30 different php files (Checklists) I want to load into the content area (depends on the chosen plane in the settings).
– Kevin Jung
Nov 9 at 14:28
Ahh, I saw “kneeboard” and wondered if it was aviation related. The way I would do it would be to use an Ajax request on button click to fetch the contents of map.php or whatever other content needs to be loaded, and then echo the content back in the Ajax response where you’d then sub out the content using JavaScript. I can add an example later if need be, but google around for Ajax requests. There are plenty of examples.
– hyphen
Nov 9 at 14:38
Yeah aviation related :D. Oh shit - sounds complicated :-O! I will look into it, thank you very much!
– Kevin Jung
Nov 9 at 14:43
It’s not too bad once you get the feel for it and it will open up a lot of possible use cases for your app. I use it a lot.
– hyphen
Nov 9 at 14:45
|
show 2 more comments
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',
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%2f53225639%2fjquery-change-content-of-div-with-button-press-include%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
I'm not sure what content is in map.php, so this may not be the best solution if it's a lot of markup, but you can put the markup directly in the tag:
$("button").click(function() {
$(".content_kneeboard").empty(); //if there are other elements in this div you want to preserve, keep in mind this will remove those too.
$(".content_kneeboard").html('<div id="map_content"></div>');
});
Another option would be to include the php on the initial page load but set display:none;
, and then in your button click you could do something like (jquery):
$("#map_content").fadeIn('fast');
or with js:
document.getElementById(map_content).style.display = 'block';
it would largely depend on what exactly the content of map.php is. If we knew more about the implementation it might yield you better results in terms of answers.
I will add that if its any significant amount of markup, more than a couple of divs, I'd probably opt to include the php on the initial page load as hidden, and then show it when the button is clicked. That's generally how I handle this sort of thing.
If you need to know more specifically how to implement that, let me know and I can add to this answer.
There is very much text in map.php and - important - it will not only be map.php. There will be many buttons on the left side, which will change the content in the middle (content_kneeboard). So the idea to just dont display them is the best I guess. But isnt there a simple solution to just include the main.php (and other files on button click) with the <?php include("kneeboard/subpage/subpage_map.php"); ?> "command"?
– Kevin Jung
Nov 9 at 13:28
imgur.com/a/FylcS6L This is how it looks right now. Each button on the left shoud change the content in the middle (where the map is right know). BUT the user can change his used plane and map in some settings, so even for the checklists there are nearly 30 different php files (Checklists) I want to load into the content area (depends on the chosen plane in the settings).
– Kevin Jung
Nov 9 at 14:28
Ahh, I saw “kneeboard” and wondered if it was aviation related. The way I would do it would be to use an Ajax request on button click to fetch the contents of map.php or whatever other content needs to be loaded, and then echo the content back in the Ajax response where you’d then sub out the content using JavaScript. I can add an example later if need be, but google around for Ajax requests. There are plenty of examples.
– hyphen
Nov 9 at 14:38
Yeah aviation related :D. Oh shit - sounds complicated :-O! I will look into it, thank you very much!
– Kevin Jung
Nov 9 at 14:43
It’s not too bad once you get the feel for it and it will open up a lot of possible use cases for your app. I use it a lot.
– hyphen
Nov 9 at 14:45
|
show 2 more comments
up vote
1
down vote
accepted
I'm not sure what content is in map.php, so this may not be the best solution if it's a lot of markup, but you can put the markup directly in the tag:
$("button").click(function() {
$(".content_kneeboard").empty(); //if there are other elements in this div you want to preserve, keep in mind this will remove those too.
$(".content_kneeboard").html('<div id="map_content"></div>');
});
Another option would be to include the php on the initial page load but set display:none;
, and then in your button click you could do something like (jquery):
$("#map_content").fadeIn('fast');
or with js:
document.getElementById(map_content).style.display = 'block';
it would largely depend on what exactly the content of map.php is. If we knew more about the implementation it might yield you better results in terms of answers.
I will add that if its any significant amount of markup, more than a couple of divs, I'd probably opt to include the php on the initial page load as hidden, and then show it when the button is clicked. That's generally how I handle this sort of thing.
If you need to know more specifically how to implement that, let me know and I can add to this answer.
There is very much text in map.php and - important - it will not only be map.php. There will be many buttons on the left side, which will change the content in the middle (content_kneeboard). So the idea to just dont display them is the best I guess. But isnt there a simple solution to just include the main.php (and other files on button click) with the <?php include("kneeboard/subpage/subpage_map.php"); ?> "command"?
– Kevin Jung
Nov 9 at 13:28
imgur.com/a/FylcS6L This is how it looks right now. Each button on the left shoud change the content in the middle (where the map is right know). BUT the user can change his used plane and map in some settings, so even for the checklists there are nearly 30 different php files (Checklists) I want to load into the content area (depends on the chosen plane in the settings).
– Kevin Jung
Nov 9 at 14:28
Ahh, I saw “kneeboard” and wondered if it was aviation related. The way I would do it would be to use an Ajax request on button click to fetch the contents of map.php or whatever other content needs to be loaded, and then echo the content back in the Ajax response where you’d then sub out the content using JavaScript. I can add an example later if need be, but google around for Ajax requests. There are plenty of examples.
– hyphen
Nov 9 at 14:38
Yeah aviation related :D. Oh shit - sounds complicated :-O! I will look into it, thank you very much!
– Kevin Jung
Nov 9 at 14:43
It’s not too bad once you get the feel for it and it will open up a lot of possible use cases for your app. I use it a lot.
– hyphen
Nov 9 at 14:45
|
show 2 more comments
up vote
1
down vote
accepted
up vote
1
down vote
accepted
I'm not sure what content is in map.php, so this may not be the best solution if it's a lot of markup, but you can put the markup directly in the tag:
$("button").click(function() {
$(".content_kneeboard").empty(); //if there are other elements in this div you want to preserve, keep in mind this will remove those too.
$(".content_kneeboard").html('<div id="map_content"></div>');
});
Another option would be to include the php on the initial page load but set display:none;
, and then in your button click you could do something like (jquery):
$("#map_content").fadeIn('fast');
or with js:
document.getElementById(map_content).style.display = 'block';
it would largely depend on what exactly the content of map.php is. If we knew more about the implementation it might yield you better results in terms of answers.
I will add that if its any significant amount of markup, more than a couple of divs, I'd probably opt to include the php on the initial page load as hidden, and then show it when the button is clicked. That's generally how I handle this sort of thing.
If you need to know more specifically how to implement that, let me know and I can add to this answer.
I'm not sure what content is in map.php, so this may not be the best solution if it's a lot of markup, but you can put the markup directly in the tag:
$("button").click(function() {
$(".content_kneeboard").empty(); //if there are other elements in this div you want to preserve, keep in mind this will remove those too.
$(".content_kneeboard").html('<div id="map_content"></div>');
});
Another option would be to include the php on the initial page load but set display:none;
, and then in your button click you could do something like (jquery):
$("#map_content").fadeIn('fast');
or with js:
document.getElementById(map_content).style.display = 'block';
it would largely depend on what exactly the content of map.php is. If we knew more about the implementation it might yield you better results in terms of answers.
I will add that if its any significant amount of markup, more than a couple of divs, I'd probably opt to include the php on the initial page load as hidden, and then show it when the button is clicked. That's generally how I handle this sort of thing.
If you need to know more specifically how to implement that, let me know and I can add to this answer.
edited Nov 9 at 12:52
answered Nov 9 at 12:45
hyphen
169111
169111
There is very much text in map.php and - important - it will not only be map.php. There will be many buttons on the left side, which will change the content in the middle (content_kneeboard). So the idea to just dont display them is the best I guess. But isnt there a simple solution to just include the main.php (and other files on button click) with the <?php include("kneeboard/subpage/subpage_map.php"); ?> "command"?
– Kevin Jung
Nov 9 at 13:28
imgur.com/a/FylcS6L This is how it looks right now. Each button on the left shoud change the content in the middle (where the map is right know). BUT the user can change his used plane and map in some settings, so even for the checklists there are nearly 30 different php files (Checklists) I want to load into the content area (depends on the chosen plane in the settings).
– Kevin Jung
Nov 9 at 14:28
Ahh, I saw “kneeboard” and wondered if it was aviation related. The way I would do it would be to use an Ajax request on button click to fetch the contents of map.php or whatever other content needs to be loaded, and then echo the content back in the Ajax response where you’d then sub out the content using JavaScript. I can add an example later if need be, but google around for Ajax requests. There are plenty of examples.
– hyphen
Nov 9 at 14:38
Yeah aviation related :D. Oh shit - sounds complicated :-O! I will look into it, thank you very much!
– Kevin Jung
Nov 9 at 14:43
It’s not too bad once you get the feel for it and it will open up a lot of possible use cases for your app. I use it a lot.
– hyphen
Nov 9 at 14:45
|
show 2 more comments
There is very much text in map.php and - important - it will not only be map.php. There will be many buttons on the left side, which will change the content in the middle (content_kneeboard). So the idea to just dont display them is the best I guess. But isnt there a simple solution to just include the main.php (and other files on button click) with the <?php include("kneeboard/subpage/subpage_map.php"); ?> "command"?
– Kevin Jung
Nov 9 at 13:28
imgur.com/a/FylcS6L This is how it looks right now. Each button on the left shoud change the content in the middle (where the map is right know). BUT the user can change his used plane and map in some settings, so even for the checklists there are nearly 30 different php files (Checklists) I want to load into the content area (depends on the chosen plane in the settings).
– Kevin Jung
Nov 9 at 14:28
Ahh, I saw “kneeboard” and wondered if it was aviation related. The way I would do it would be to use an Ajax request on button click to fetch the contents of map.php or whatever other content needs to be loaded, and then echo the content back in the Ajax response where you’d then sub out the content using JavaScript. I can add an example later if need be, but google around for Ajax requests. There are plenty of examples.
– hyphen
Nov 9 at 14:38
Yeah aviation related :D. Oh shit - sounds complicated :-O! I will look into it, thank you very much!
– Kevin Jung
Nov 9 at 14:43
It’s not too bad once you get the feel for it and it will open up a lot of possible use cases for your app. I use it a lot.
– hyphen
Nov 9 at 14:45
There is very much text in map.php and - important - it will not only be map.php. There will be many buttons on the left side, which will change the content in the middle (content_kneeboard). So the idea to just dont display them is the best I guess. But isnt there a simple solution to just include the main.php (and other files on button click) with the <?php include("kneeboard/subpage/subpage_map.php"); ?> "command"?
– Kevin Jung
Nov 9 at 13:28
There is very much text in map.php and - important - it will not only be map.php. There will be many buttons on the left side, which will change the content in the middle (content_kneeboard). So the idea to just dont display them is the best I guess. But isnt there a simple solution to just include the main.php (and other files on button click) with the <?php include("kneeboard/subpage/subpage_map.php"); ?> "command"?
– Kevin Jung
Nov 9 at 13:28
imgur.com/a/FylcS6L This is how it looks right now. Each button on the left shoud change the content in the middle (where the map is right know). BUT the user can change his used plane and map in some settings, so even for the checklists there are nearly 30 different php files (Checklists) I want to load into the content area (depends on the chosen plane in the settings).
– Kevin Jung
Nov 9 at 14:28
imgur.com/a/FylcS6L This is how it looks right now. Each button on the left shoud change the content in the middle (where the map is right know). BUT the user can change his used plane and map in some settings, so even for the checklists there are nearly 30 different php files (Checklists) I want to load into the content area (depends on the chosen plane in the settings).
– Kevin Jung
Nov 9 at 14:28
Ahh, I saw “kneeboard” and wondered if it was aviation related. The way I would do it would be to use an Ajax request on button click to fetch the contents of map.php or whatever other content needs to be loaded, and then echo the content back in the Ajax response where you’d then sub out the content using JavaScript. I can add an example later if need be, but google around for Ajax requests. There are plenty of examples.
– hyphen
Nov 9 at 14:38
Ahh, I saw “kneeboard” and wondered if it was aviation related. The way I would do it would be to use an Ajax request on button click to fetch the contents of map.php or whatever other content needs to be loaded, and then echo the content back in the Ajax response where you’d then sub out the content using JavaScript. I can add an example later if need be, but google around for Ajax requests. There are plenty of examples.
– hyphen
Nov 9 at 14:38
Yeah aviation related :D. Oh shit - sounds complicated :-O! I will look into it, thank you very much!
– Kevin Jung
Nov 9 at 14:43
Yeah aviation related :D. Oh shit - sounds complicated :-O! I will look into it, thank you very much!
– Kevin Jung
Nov 9 at 14:43
It’s not too bad once you get the feel for it and it will open up a lot of possible use cases for your app. I use it a lot.
– hyphen
Nov 9 at 14:45
It’s not too bad once you get the feel for it and it will open up a lot of possible use cases for your app. I use it a lot.
– hyphen
Nov 9 at 14:45
|
show 2 more comments
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53225639%2fjquery-change-content-of-div-with-button-press-include%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
Are you wanting to open a modal or redirect to map.php or just replace .content_kneeboard with map.php?
– hyphen
Nov 9 at 12:31
replace .content_kneeboard with map.php :)
– Kevin Jung
Nov 9 at 12:34
You could include all your php files and add a class with the css property
display: none;
to them and when pressing the button remove this class for the file you want to be shown and add it to the file that has been shown– Matt.S
Nov 9 at 12:44