Basically I’m trying to load a tab with the following unique_id
data from a button. The issue is I want the tab to load with the corresponding variable without reloading the page. I’ve looked on here for solutions regarding ajax URL rewrite but nothing is working. I dont care about adding more files here and there I just need a solution to this minor problem. Thanks
<a href="?user_id='. $row['unique_id'] .'"> ... blah .. stuff.. etc </a>
Advertisement
Answer
Ajax loading into a tab in 2 flavors, vanilla and jquery
function loadTabOG() { let url = 'someURLThatWillReturnHTML.php'; fetch(url) .then(response => response.text()) .then(html => { document.getElementById('tab-2').innerHTML += html }) // the snippet won't allow us to do an ajax request, so we'll simulate the response here. document.getElementById('tab-2').innerHTML += "<p>Here is some new html from regular javascript</p>"; } function loadTabJQ() { let url = 'someURLThatWillReturnHTML.php'; $.ajax({ url: url, }).done(function(html) { $('#tab-2').append(html) }); // the snippet won't allow us to do an ajax request, so we'll simulate the response here. $('#tab-2').append("<p>Here is some new html from jquery</p>") }
.tab { border: 1px solid #ccc; border-radius: 8px; padding: 15px; margin: 15px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='tab' id='tab-1'> <h3>Tab 1</h3> <ul> <li><a href='javascript:void(0)' onclick='loadTabOG()'>Load tab 2 using regular javascript</a> </li> <li> <a href='javascript:void(0)' onclick='loadTabJQ()'>Load tab 2 using jquery</a> </li> </ul> </div> <div class='tab' id='tab-2'> <h3>Tab 2</h3> <div>