I am in the process of developing an academic toolkit for my university. The problem statement is, the user will be given a list of courses. When one clicks on that particular name of the course, he should get a dynamic slide panel showing the course objective and other details of that course. All these values will be present in a mySQL database. The slide panel is a must requirement here. So please help me how to get the data dynamically in the slide panel from the mySQL database. Thanks in advance... :)
http://api.jquery.com/jQuery.ajax/'>jQuery's $.ajax is your friend!
Something like the following should work (it is untested and not optimized). Hopefully it will lead you in the right direction. You should also add a loading message, error handling, and data caching.
<style>
.course{
border:solid 1px #000;
margin-bottom:10px;
}
.title{
display:block;
border-bottom:solid 1px #000;
background:#eee;
font-weight:bold;
}
.details{
display:none;
}
</style>
<div class='course'>
<a class='title' href='/classDetails.php?classID=54321'>Composition 101</a>
<div class='details'></div>
</div>
<div class='course'>
<a class='title' href='/classDetails.php?classID=54322'>Composition 201</a>
<div class='details'></div>
</div>
<div class='course'>
<a class='title' href='/classDetails.php?classID=54323'>Composition 301</a>
<div class='details'></div>
</div>
<script>
$(function(){
$(".course").each(function(){
var self = $(this);
$(".title",self).click(function(){
$.ajax({
"url":this.href,
"success":function(data){
// extract the content you need from the HTML page.
var content= $(data).find("#content").html()
// insert into the details div and then show it.
self.find(".details").html(content).slideDown(1000);
}
});
// prevent default action...
return false;
});
});
});
</script>
Also note that there are some abstractions of $.ajax to make calls like this easier (such as $("#myElement").load(url), $.post and $.get). You can find more information about these methods at http://api.jquery.com/category/ajax/
Related
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>
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>
I'm setting up a website containing a page that will contain many buttons. I want to be able to click on the button to populate a div with information from a database.
I've adapted some code that I previously had, but it isn't working.
The source javascript and HTML are shown here:
<script>
function showBiog(key) {
//alert(key);
// Get the search value
var search_value = key
// This time we're going to grab data from a file to display
var filename = "functions/biography.php";
// Send these values
var posting = $.post(filename, { search_term: search_value });
// Display this value in our results container
posting.done(function (data) {
$("#test_results").empty().append(data);
});
}
</script>
<style type="text/css">
.test {
background-color: #B32D2F;
border: thin solid #DBB2B3;
height: 50px;
width: 250px;
}
.testresults {
background-color: #88B32D;
border: thin solid #DBB2B3;
height: 50px;
width: 250px;
}
</style>
</head>
<body>
<div class="test" onClick="showBiog(1)"><p>1</p></div>
<div class="test" onClick="showBiog(2)"><p>2</p></div>
<div class="test" onClick="showBiog(3)"><p>3</p></div>
<div class="test" onClick="showBiog(4)"><p>4</p></div>
Results
<div class="testresults" id="test_results"></div>
The HTML of biography.php is
<body>
<?php if (! $_POST["search_term"]) { ?>
<div class="err">
<?php echo $row_Recordset1['firstname']; ?>
</div>
<?php } else { ?>
<?php echo $row_results['firstname']; }?>
</body>
The SQL for results in Dreamweaver is
SELECT *
FROM pilots
WHERE key LIKE colname
with colname $_POST['search_term']
Few things...
You may not need "var search_value = key" if you are not making any change or addition to it. Simply use "key" in the $.post (keep code simple).
What is expected to be in "key"? Depending on what you are sending, the statement var posting = $.post(filename, { search_term: search_value }); may break due to JSON structure requirements.
To assure you are sending out the right information to the PHP, you should try something like $.post(filename, JSON.stringify({ 'search_term': key }) );
On the PHP side, you can use unserialize() to decode JSON data, then process your query.
Just a small personal note and advice: If JSON is not well formed on the POST side, PHP will get nothing, thus it will return nothing. You should always try to log or display the data received by PHP when writing AJAX calls to assure it was correctly received. Otherwise you may be chasing a bug in the wrong spot. ;)
I have following html structure in editstaff.php:
<div id="result" style="display:none">This is result div</div>
<form id="adres" onsubmit="return submitForm();">
<input type="hidden" name="type" value="adrs" />
<input type="submit" value="Address" /></form>
And in inline-style:
#result{
position: absolute;
border: 5px solid gray;
padding: 10px;
background: white;
width: 270px;
height: 190px;
}
What this html page do, clicking on "Address" button of "adres" form, some post data is send to another php page which shows information based on sent data on a pop-up like div (which style was display:none) fadeIn from display:none. The javascript/jquery codes for this purpose are as follows:
<script>
function submitForm(){
var data=$("#adres").serializeArray();
/* alert(data); */
data.push(
{
name:'sname',value:$("#title").val()
}
);
$.post("geteditdata.php",data,
function(data){
$("#result").html(data);
positionPopup();
$("#result").fadeIn(1000);
}
)
return false;
}
function positionPopup(){
$("#result").css({
left: ($(window).width() - $('#result').width()) / 2,
top: ($(window).width() - $('#result').width()) / 2,
position:'absolute'
});
}
$("#divclose").live('click',function(){
$("#result").fadeOut(500);
});
</script>
i.e the div in editstaff.php with fetched data will pop-up like following structure:
<div id="result">
some_value
Close
</div>
All things is going on okay upto this stage. But when I am clicking on "Close" link on pop-up div the div is not closing(fadeOut) with $("#divclose").click(function()
Why this is not happening in this case?
can anybody give a solution for me?
I am giving a demo page where you can see the problem in practical.
Please visit http://raddacentre.org/editstaff.php and
write 'Afsar' in "Search by name" field and
then press "show".
After page loads, please press "Address" button which will be at the bottom of the page.
Then a pop-up div will be shown where there will be a link named "Close".
Press that button and please check why this div is not fade in there?
As I used jquery version 1.3, I used $("#divclose").live method instead of $(selector).on method.
Any help will be appreciated.
in geteditdata.php there is only this code:
<?php
echo $_POST['sname'];
?>
<br /><br />Close Here
You are using really old jQuery 1.2.3 (it's not jq 1.3), I'm not sure if .live exist in that version. So two things:
Use new jQuery (I suggest 1.9)
Use .on instead of .live (read about it, syntax is a little bit different)
Code should look like that:
$("body").on('click', "#divclose", function(){
$("#result").fadeOut(500);
});
Instead of "body" you can use other container that exist when event is being binded.
I'm trying to keep my ajax call on the same line, as detailed here: http://external.sidewaykill.com/versound/motd.php.
It won't, so what can I do?
$(document).ready(function() {
$.ajaxSetup ({
cache: false
});
var ajax_load = "<img src='http://static.sidewaykill.com/img/ajax-loader2.gif' alt='loading...' />";
// load() functions
var loadUrl = "playercount.php?id=2";
$("#servercount").html(ajax_load).load(loadUrl);
});
This has nothing to do with PHP but everything to do with the absolutely awful markup of your HTML and the lack of CSS. You're going to want to wrap all of this "free-text" inside of a div or two, and then make sure you're putting the wrapper div inside of the infobar div
Sample CSS:
#infobar p{
float: left;
margin-left: 5px;
}
HTML:
<div id="infobar">
<div style="float: left;">
<p>Welcome! Our server count is:</p>
<p>1 / 10</p>
<p>We hope you enjoy your stay! We are currently playing on gm_construct.</p>
</div>
</div>
its because the ajax call returning a div element,
as this :
<div id="count"> 0 / 10</div>
Since div is a block element it will always render in a new line. there are two solutions for this
one would be to return a <span> element instead of the div
second will be if u are unable to change the return value you can fix it via css
#servercount #count { display : inline }
My suggestion is to go with the first solutions
I'm looking to setup a page which holds an image of grid paper. These grids can be selected and depending on what type of link the user chooses the color will be filled and saved. Once all of the blocks are filled this will be archived and then a new sheet will be displayed. I wanted to use PHP / MySQL on the backend but was wondering what would be good client side?
Why a image for the grid? Better solution is to use a table or a list filled with divs to create the grid. Then use jQuery to fill in the backgrounds when the user clicks a link.
Example for the grid:
<ul id="grid">
<li>
<div class="cell" id="cell_id"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</li>
<li>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</li>
...
</ul>
CSS example:
<style>
#grid {
list-style: none;
}
#grid li {
height: 50px;
}
#grid .cell {
float: left;
width: 100px;
height: 50px;
border: 1px solid black;
}
</style>
And finally use jQuery to fill the cells when a user clicks a link. You can find the cell by calculating the rows and cells or just give the cells a id. The saving part can be done by a AJAX call to a page that will save the information to the DB.
Simple jQuery example (you have to think up the rest yourself):
<script>
$('link').click(function() {
//place check for new sheet here
var id = $(this).attr('id');
//set the bg color
$('cell_id').css('background-color', 'red'); //or color code #FF0000
//save the info
$.post('save_info.php', { cell_id: id, color: "red" }, function(data) {
alert('saved!');
});
});
</script>
You can find more info and download jQuery at: http://jquery.com/
The jQuery code to create a new sheet when all the cells are filled can be done with a little check in the click function. This check must count all the cells that have a bg color, is this the same as the total cells? Then create a new sheet by removing all the cells their bg color and by setting new id's. But you can figure this out by yourself ;).