I fetched some div elements from database with this code :
<?php
$getTickets = mysqli_query($db, "SELECT * FROM usersTicket");
while ($row = mysqli_fetch_array($getTickets)) {
?>
<div class="tickets">
<div class="ticket"><?php echo $row['ticketText'] ?></div>
</div>
<?php
}
?>
How can I get the number of these div elements that fetched from database ?
Use this if you want to get the number of divs returned from the database.
$number_of_divs = mysqli_num_rows($getTickets);
You could use jQuery for that:
$(document).ready(function() {
var ticketclassnr = $(".tickets").length;
});
Related
I have some content that is fed in from mysql that, when clicked should fire an alert()...
however, this is not working...
here is my code for the code that is fed in from php/get_answers.php
<?php session_start(); ?>
<?php require_once("../includes/include_all.php"); ?>
<?php $answers = $question->get_answers_for_question($_GET['id']); ?>
<?php while($row = $answers->fetch_array()){ ?>
<!-- ALL ANSWERS HERE -->
<div class = 'answer-row'>
<div class = 'answer-side'>
<div class = 'arrow-contain-answer' type = 'answer' id = 'arrow-up' answer-id = '<?php echo $row["id"]; ?>'></div>
<div class = 'answer-votes-contain'>
<?php echo $row['popularity']; ?>
</div>
<div class = 'arrow-contain-answer' id = 'arrow-down'answer-id = '<?php echo $row["id"]; ?>'></div>
</div>
<div class = 'answer-content'>
<?php
echo $row['content'];
?>
</div>
<div class = 'actions'>
<a href = '#' class= 'add-comment' id = '<?php echo $row["id"]; ?>'> add comment </a>
</div>
</div>
<?php } ?>
and here is the jquery on the page that it is displayed on:
$(".arrow-contain-answer").click(function(){
alert();
});
What I want to happen is when someone clicks the element with the class of 'arrow-contain-answer' an event will occur..
I think I have had problems before when elements are being 'fed' into the page via mysql/php.
$(document).on("click", ".arrow-contain-answer", function(){
alert();
});
Try this way for dynamic added elements!
even better(performancewise) if you delegate it with the closest static element(parent) which is present in the document when dynamic fed element is added.
$('.answer-row').on("click", ".arrow-contain-answer", function(){
alert('clicked');
});
to read more about on delegated event
I'm working on this project trying to create a simple site where a user can input information then on a different page that same information is displayed.
I am using JQuery to refresh the page and .load new content, MySQL to store the information, and PHP to insert and retrieve that information.
The problem I am having now is i'm using Javascript to update the page and .fadeIn the data but currently it is just fading out and fading in ALL of the data. What I want it to do is to keep the current data the same and ONLY fade in the new data.
Here is my JQuery function:
<script type="text/javascript">
$(document).ready(function() {
var refreshId = setInterval(function() {
$("#responsecontainer").fadeOut('fast').load('output.php');
}, 3000);
$.ajaxSetup({ cache: false });
});
</script>
Here is my PHP called 'output.php':
<?php include_once('db_connect.php'); ?>
<?php include_once('input.php'); ?>
<?php
//query the database
$query = mysql_query("SELECT * FROM notes ORDER BY ID DESC");
//fetch the results / convert results into an array
while($rows = mysql_fetch_array($query)):
$title = $rows['notestitle'];
$text = $rows['notestext'];
?>
<div id="title">
<h1><?php echo "$title<br>"; ?></h1>
</div>
<div id="text">
<h2><?php echo "$text<br>"; ?></h2>
</div>
<?php endwhile; ?>
And here is the code for the page that is displaying the info:
<?php include_once('db_connect.php'); ?>
<?php include_once('input.php'); ?>
<div id="header"></div>
<div id="responsecontainer">
<?php include_once('output.php'); ?>
</div>
Let me know if you need me to provide anything else or if something is unclear to you.
Thanks for your time.
Use this simple query with limit
SELECT * FROM notes ORDER BY ID DESC LIMIT 1
I have spent the last several hours trying to simply post the data (text/html) that was entered in the ckeditor (textarea) to the PHP file.
Their API claims that the data automatically posts the data on form submissions, but it does not, it returns nothing.
EDIT: here is the real code:
<?php
require("fns.php");
// grab tab content from database
$tab = array();
$query ="SELECT * FROM tabs";
$db_conn = db_connect();
$results = mysql_query($query,$db_conn);
while($row = mysql_fetch_array($results))
{
$tab[]= $row;
}
// form validation
if($_POST['btnSave'])
{
// grab selected tab ID
$tabId = $_POST['tabId'];
$title = $_POST['txtTitle'];
$content = $_POST['ckeditor'];
// all fields required
if(isset($tabId) && isset($title) && isset($content))
{
// update recorde where id = tabId
$query = "UPDATE tabs SET title = '$title', content = '$content' WHERE id = $tabId";
if($content !== "")
{
if(mysql_query($query,$db_conn))
{
$message = "<h3 style='color:#003300;'>Changes Saved!</h3><br /><p>".$content."</p>";
header("Location:testtabs.php");
}
}
else
{
$message ="<h3 style='color: #950000;'>Content cannot be blank!</h3>";
}
}
}
?>
<!-- in head section -->
<script type="text/javascript">
$(document).ready(function() {
// inflate ckeditor
$('#ckeditor').ckeditor();
//track selected tab
var currentId = -1;
// Tab initialization
var $tabs = $('#tabs').tabs({
select: function(event, ui){
/*
ui.index: zero based index selected tab
ui.tab: anchor element of the selected tab
ui.panel: element containing the content for the selected tab
*/
// get current tab ID for php script
var currentId = ui.index + 1;
$("#tabId").val(currentId);
var tabName = $(ui.tab).text();
var content = $(ui.panel).html();
// swap title
$( '#title' ).val( tabName );
// swap content
$("#ckeditor").val(content);
}
});
});
<body>
<?php echo $message; ?>
<div id="tabs">
<ul>
<li><?php echo $tab[0]['title'];?></li>
<li><?php echo $tab[1]['title'];?></li>
<li><?php echo $tab[2]['title'];?></li>
</ul>
<div id="tabs-1">
<div class="content">
<?php echo $tab[0]['content']; ?>
</div>
</div>
<div id="tabs-2">
<div class="content">
<?php echo $tab[1]['content']; ?>
</div>
</div>
<div id="tabs-3">
<div class="content">
<?php echo $tab[2]['content']; ?>
</div>
</div>
</div>
<?php
if (isset($_SESSION['valid_user']) && ($_SESSION['account_type'] == 'ADMIN'))
{
// display editor with tab 1 content
?>
<table id="tab-editor">
<form action = 'testtabs.php' method ='post'>
<input type="hidden" id="tabId" name ="tabId" value="-1"/>
<tr><td>Title: <input type='text' name='txtTitle' id='title' value='<?php echo $tab[0]['title'];?>'/></td></tr>
<tr><td>Tab Content:</td></tr><tr><td> <textarea name='ckeditor' id='ckeditor' class='tab-editor'><?php //echo $tab[0]['content'];?></textarea></td></tr>
<tr><td><input type='submit' name='btnSave' value='Save Changes' /></td>
</form>
</table>
<?php
}
?>
CKEditor create an istance of CKEditor from a textarea (maybe even from other elements, I don't know that) using the content of the textarea to populate the editor.
Anyway when you use jQuery:
$('#ckeditor').val("Initial text (test)");
you're putting text inside the textarea tag.
After you create a CKEditor instance you'll need to use CKEditor methods to get the data:
http://docs.cksource.com/ckeditor_api/
Specifically I think you'll need:
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#getData
PS: sorry for my bad english
EDIT: hadn't seen the edit, sorry
Reverted back to the traditional ckeditor javascript, works fine now...
CKEDITOR.replace( 'ckeditor' );
// Tab initialization
// Tab initialization
var $tabs = $('#tabs').tabs({
select: function(event, ui){
/*
ui.index: zero based index selected tab
ui.tab: anchor element of the selected tab
ui.panel: element containing the content for the selected tab
*/
// get current tab ID for php script
var currentId = ui.index + 1;
$("#tabId").val(currentId);
var tabName = $(ui.tab).text();
var content = $(ui.panel).html();
// swap title
$( '#title' ).val( tabName );
// swap content
CKEDITOR.instances['ckeditor'].setData(content);
}
});
i am new to ajax . i want to submit a data with the help of ajax and then get the new data replacing the old one in the same div as of which the old data was .
here is the jquery for sliding tab
$(document).ready(function() {
// Vertical Sliding Tabs
$('div#st_vertical').slideTabs({
// Options
contentAnim: 'slideH',
contentAnimTime: 600,
contentEasing: 'easeInOutExpo',
orientation: 'vertical',
tabsAnimTime: 300
});
});
ajax
function addhubs()
{
var group =$('#customhubs').val();
var user=$('#loginuser').val();
$.ajax({
type:"GET",
url: 'mfrnds.php?val='+group+'&& loguser='+user,
success: function(html){
}
});
}
the div i want to replace data
<div id="st_vertical" class="st_vertical">
<div class="st_tabs_container">
<div class="st_slide_container">
<ul class="st_tabs">
<?php $sql=mysql_query("select * from groups");
while($ab=mysql_fetch_array($sql))
{
$gpID[]=$ab['group_id'];
$gp=$ab['group_id'];
$gpName=$ab['group_name'];
?>
<li><?php echo $gpName;?></li>
<?php
}
?> </ul>
</div> <!-- /.st_slide_container -->
</div> <!-- /.st_tabs_container -->
and the mfrnds.php of the ajax call file contains query to update the new data.
$user=$_GET['loguser'];
$group=$_GET['val'];
$sql=mysql_query("insert into groups (group_name) values ('$group')");
how can i update the div in the above . plz help me .m stuck badly luking for solution from 4 days. thanks
Note that in your addhubs function you should only add one & in your url and concatenate everything without spaces in between such as below.
When the ajax call has finished it returns the contents of the page you requested (mfrnds.php) in the html variable. So you can simply select the div you want and enter the html as you can see below. So here we go...:
Your Page
<html>
<body>
<script>
$(document).ready(function() {
setupTabs();
});
function setupTabs() {
// Vertical Sliding Tabs
$('div#st_vertical').slideTabs({
// Options
contentAnim: 'slideH',
contentAnimTime: 600,
contentEasing: 'easeInOutExpo',
orientation: 'vertical',
tabsAnimTime: 300
});
}
function addhubs() {
var group = $('#customhubs').val();
var user = $('#loginuser').val();
$.ajax({
type:"GET",
url: 'mfrnds.php?val=' + group + '&loguser=' + user,
success: function(html) {
//Get div and display the data in there
$('div.st_slide_container).html(html);
//As your slide effect is gone after you updated this HTML, redo your slide effect:
setupTabs();
}
});
}
</script>
<!-- Vertical div -->
<div id="st_vertical" class="st_vertical">
<div class="st_tabs_container">
<div class="st_slide_container">
<ul class="st_tabs">
<?php
$sql = mysql_query("select * from groups");
while($ab = mysql_fetch_assoc($sql)) {
$gp = $ab['group_id'];
$gpName = $ab['group_name']; ?>
<li>
<a href="#stv_content_<?=$gp?>" rel="v_tab_<?=$gp?>" class="st_tab ">
<?php echo $gpName;?>
</a>
</li>
<?php
}
?>
</ul>
</div> <!-- /st_slide_container -->
</div> <!-- /st_tabs_container -->
</div> <!-- /st_vertical -->
</body>
</html>
So in your mfrnds.php you should have a PHP script that uses the val and loguser GET variables and updates the database. After the database has been updated you should return the updated HTML like the following:
*mfrnds.php
<?php
$user = $_GET['loguser'];
$group = $_GET['val'];
$sql = mysql_query("insert into groups (group_name) values ('$group')"); ?>
<ul class="st_tabs">
<?php
$sql = mysql_query("select * from groups");
while($ab = mysql_fetch_assoc($sql)) {
$gp = $ab['group_id'];
$gpName = $ab['group_name']; ?>
<li>
<a href="#stv_content_<?=$gp?>" rel="v_tab_<?=$gp?>" class="st_tab ">
<?php echo $gpName;?>
</a>
</li>
<?php
}
?>
</ul>
Note though that this code is basically meant as an example, I don't know what you want to do exactly in mfrnds.php etc, but I hope this gives you a good idea!
It looks like you are almost there.
In your mfrnds.php file add a line to grab the updated rows
use:
PSEUDOCODE
"SELECT * FROM groups"
for each row in groups
echo "<div> groups.name groups.category </div"
and then in your callback function
success: function(html){
$('.st_tabs').html(html); //replace the html of the sttabs div with the html echoed out from mfrnds.php
}
hi i am building a php mysql database pagination page, so i have a list of records 2 rows long at the bottom of the record i want a div which opens up when the span above it is clicked, how do i set up the jquery to make it so that it takes the id of the <p> and expands it in jquery
<span id="button1">Toggle</span>
<p id="p1">
hello<br/>hello
</p>
<script>
$("#button1").click(function () {
$("#p1").slideToggle("slow");
});
</script>
when i output it in php mysql the button will all have a different id and the p will have different ids as well
//Jquery Code which calls toggle_visibility function
$(".pOne").click(function(){
toggle_visibility('partsIdThree');
})
.toggle( function() {
$(this).children("span").text("[-]");
}, function() {
$(this).children("span").text("[+]");
});
//HTML Code
<div id="parts_toogle_one">
<p class="pOne">Add Records <span>[+]</span></p>
<div id="msg_body_one">
<tr><td></td></tr>
</div>
</div>
// Javascript code
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == "inline") {
e.style.display = 'none';
}
else if(e.style.display == "none") {
e.style.display = "inline";
}
}
Something like this..
You can use a dynamic id retrieving, so you don't have to worry about the number of results..
For example:
<?php $i = 0;?>
<?php foreach($resultset as $result) : ;?>
<span class="activator" id="result<?php echo $i;?>">CLICK HERE</span>
<div id="panel_result<?php echo $i;?>">SLIDER DIV</div>
<!-- Do the rest of you processing of $result here; it just doesn't matter, for here you only need some identification, I used a number for convenience. -->
<?php ++$i;?>
<?php endforeach;?>
Your jquery:
$('.activator').click(function(){
var the_id = $(this).attr('id');
var the_panel = $('#panel_' + the_id);
$(the_panel).slideToggle('slow');
});
So you don't have to write a jQuery command for each line you print in php, use just this snippet and it will work out by itself which panel to slide, according to which span is clicked.