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! :)










share|improve this question
























  • 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















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! :)










share|improve this question
























  • 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













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! :)










share|improve this question















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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 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


















  • 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
















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












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.






share|improve 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











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
});


}
});














draft saved

draft discarded


















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.






share|improve 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















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.






share|improve 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













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.






share|improve 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.







share|improve this answer














share|improve this answer



share|improve 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


















  • 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


















draft saved

draft discarded




















































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.




draft saved


draft discarded














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





















































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







這個網誌中的熱門文章

Xamarin.form Move up view when keyboard appear

Post-Redirect-Get with Spring WebFlux and Thymeleaf

Anylogic : not able to use stopDelay()