Issue
I'm trying to load page content into a div via Ajax when a select option is selected.
This is my code, but it will not work.
$('mySelect').on('change',function(){
function loadPage(url){
$("#page").load(url);
}
});<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<select class="custom-select" id="mySelect">
<option value="1" onchange="loadPage('One.html')">One</option>
<option value="2" onchange="loadPage('Two.html')">Two</option>
</select>
</div>
<div id="page"></div>
</body>
</html>I have a select box with 2 options the values are One.html and Two.html and under that I have a div and want the content from One.html and Two.html to load in the div when the select box changes... Via Ajax any suggestions?
Thanks
Solution
You're missing the id sign # :
$('mySelect').on('change',function(){
Should be :
$('#mySelect').on('change',function(){
___^
Try to avoid the inline event onchange() and use data-* to store the url param then pass it to the loadPage function inside the change event.
$(function() {
loadPage("One.html");
$('#mySelect').on('change', function() {
loadPage($(this).find(':selected').data('url'));
//OR
// $("#page").load( $(this).find(':selected').data('url') );
});
});
function loadPage(url) {
$("#page").load(url);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<select class="custom-select" id="mySelect">
<option value="1" data-url="One.html">One</option>
<option value="2" data-url="Two.html">Two</option>
</select>
</div>
<div id="page"></div>Answered By - Zakaria Acharki
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.