i have a big problem , im trying to build a website around the one page template system so hear is how it works..... a user clicks a link: ..... but the problem is i have more then 100 php generated links on one page that is attached to a listener and for some strange reason, every time a link gets clicked, and a user returns back to the main page it doubles the request....
in other words : a user click links.... go to a page ..... and he see's a ton of links.... the user clicks a link..... go to a page. but if a user goes back the ajax call doubles????
ex. 1 post , ... 2 post ..... 4 post.... 8 post ..... 16 post..... 32 post ...... 64 post.....
im trying to debug with chrome, and it shows how many post to the network(HTTP Request) that are made every time one has been called and it shows how many post being made and its doubling
Html Markup :
<script>
// main menu
$('header a').addClass('lvl1Links');
// classifeds
$('#9090 a').addClass('lvl1Links');
//states - citys - cats ads
$('#selectable a').addClass('lvl1Links');
// re-install link management
$(function(){
$('.lvl1Links').click(function(event) {
event.preventDefault();
$('pload').html('<img src="source/image/lbl.gif">');
var page = $(this).attr('id');
var huh = $('input:hidden').val();
var data = 'pop='+huh+'&page='+page;
$.post('source/php/bots/authorize.php',data,function(data){
$('#pager_master_div').html(data).slideDown();
$('pload').html('');
});
});
});
// speacial style on certain input boxes
$('input').addClass('input');
$('#op').removeClass('input');
$('#sp').removeClass('input');
$('button').button();
//$("#BUser_Home_Wrapper a .lvl1Links").removeClass("lvl1Links");
</script><div id="9090"><ol id="selectable"><li class="ui-state-default">
<div class="contr">Alabama</div><div class="citys">Birmingham<br>Montgomery<br>Mobile<br>Huntsville<br>Tuscaloosa<br><li class="ui-state-default">
<div class="contr">Alaska</div><div class="citys">Anchorage<br>Juneau<br>Fairbanks<br>Sitka<br>Ketchikan<br></ol></div><style>
.contr{
}
.citys{
display:none;
position:absolute;
height:110px;
width:100px;
top:30px;
left:-5%;
right:-5%;
z-index:100;
background:#FFF;
border-radius:5px;
border:5px #0099FF solid;
font-size:10px;
}
.cityz{
display:none;
position:absolute;
height:200;
width:100px;
top:-100px;
left:-5%;
right:-5%;
z-index:100;
background:#FFF;
border-radius:5px;
border:5px #0099FF solid;
font-size:10px;
}
.citys a{
font-size:15px;
}
.cityz a{
font-size:15px;
}
#selectable li a{
font-size:14px;
}
#selectable li city a{
}
#selectable {
list-style-type: none; margin: 0; padding: 0;
}
#selectable li {
margin:5px;
position:relative;
border-radius:10px;
padding: 1px;
float:left;
width: 100px;
height: 25px;
text-align: center;
}
</style>
<script>
$('.ui-state-default').mouseenter(function(e) {
$('.citys', this).slideDown(); // added this
}).mouseleave(function(e) {
$('.citys', this).toggle(); // added this
});
// bttom rows
$('.ui-state-default').mouseenter(function(e) {
$('.cityz', this).slideDown(); // added this
}).mouseleave(function(e) {
$('.cityz', this).toggle(); // added this
});
</script>
<results></results><input type="hidden" id="fortknox" name="fortknox" value="c4ca4238a0b923820dcc509a6f75849b"><results></results><input type="hidden" id="fortknox" name="fortknox" value="c4ca4238a0b923820dcc509a6f75849b">
<script>
$('input').addClass('input');
$('button').button();
// click event for all links
$(function(){
$('.lvl1Links').click(function(event) {
event.preventDefault();
$('pload').html('<img src="source/image/lbl.gif">');
var page = $(this).attr('id');
var huh = $('input:hidden').val();
var data = 'pop='+huh+'&page='+page;
$.post('source/php/bots/authorize.php',data,function(data){
$('#pager_master_div').html(data).slideDown();
$('pload').html('');
});
});
});
</script>
php code:
<?
case 'class':
require('functions/cats.php');
classie($p);
break;
function classie($p){
connect();
$state = explode(':',$p[2]);
$total = count($state);
$s = md5('?').'.class.';
$sid = $state[1];
$state = $state[0];
echo "$state";
echo "<ol id=\"selectable\">";
if(isset($p[3])){
$city = explode(':',$p[3]);
$cid = $city[1];
$city = $city[0];
echo " : $city";
$sqlca = mysql_query("SELECT * FROM `cats` WHERE `cityId`= ".$cid." ");
while($rowsy = mysql_fetch_array($sqlca)){
echo " : ".$rowsy['name']."";
}
}
?>
you can solve your problem using unbind click to prevent double clicking and causing
multiple entry. Take a look my revision about your code on JS below:
$(function(){
$('.lvl1Links').bind(''click,function(event) {
event.preventDefault();
$('pload').html('<img src="source/image/lbl.gif">');
var page = $(this).attr('id');
var huh = $('input:hidden').val();
var data = 'pop='+huh+'&page='+page;
$.post('source/php/bots/authorize.php',data,function(data){
$('#pager_master_div').html(data).slideDown();
$('pload').html('');
});
$(this).unbind(event);
});
});
Related
Hi I'm using the following code to load the file modal_window.php into a modal window on the current page.
<style>
* {
margin:0;
padding:0;
}
#overlay {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
opacity:0.5;
filter:alpha(opacity=50);
}
#modal {
position:absolute;
background:url(tint20.png) 0 0 repeat;
background:rgba(0,0,0,0.2);
border-radius:14px;
padding:8px;
}
#content {
border-radius:8px;
background:#fff;
padding:20px;
}
#close {
position:absolute;
background:url(close.png) 0 0 no-repeat;
width:24px;
height:27px;
display:block;
text-indent:-9999px;
top:-7px;
right:-7px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script>
var modal = (function(){
var
method = {},
$overlay,
$modal,
$content,
$close;
// Center the modal in the viewport
method.center = function () {
var top, left;
top = Math.max($(window).height() - $modal.outerHeight(), 0)
/ 2;
left = Math.max($(window).width() - $modal.outerWidth(), 0)
/ 2;
$modal.css({
top:top + $(window).scrollTop(),
left:left + $(window).scrollLeft()
});
};
// Open the modal
method.open = function (settings) {
$content.append(settings.content);
$modal.css({
width: settings.width || 'auto',
height: settings.height || 'auto'
})
method.center();
$(window).bind('resize.modal', method.center);
$modal.show();
$overlay.show();
};
// Close the modal
method.close = function () {
$modal.hide();
$overlay.hide();
$content.empty();
$(window).unbind('resize.modal');
};
// Generate the HTML and add it to the document
$overlay = $('<div id="overlay"></div>');
$modal = $('<div id="modal"></div>');
$content = $('<div id="content"></div>');
$close = $('<a id="close" href="#">close</a>');
$modal.hide();
$overlay.hide();
$modal.append($content, $close);
$(document).ready(function(){
$('body').append($overlay,
$modal);
});
$close.click(function(e){
e.preventDefault();
method.close();
});
return method;
}());
// Wait until the DOM has loaded before querying the document
$(document).ready(function(){
varid = '<?php if(isset($_GET['id'])); ?>';
$('a#testmodal').click(function(e){
$.get('modal_window.php?id=varid', function(data){
modal.open({content: data});});
e.preventDefault();
});
});
</script>
</head>
<body>
<a id="testmodal" href="modal.php?id=1">Test</a>
While doing so I'm attempting to pass the variable $id to modal_window.php using :
varid = '<?php if(isset($_GET['id'])); ?>';
and then
$('a#testmodal').click(function(e){
$.get('modal_window.php?id=varid', function(data){
modal.open({content: data});});
e.preventDefault();
});
Instead of the actual value of $id (1 in this case) getting passed to modal_window.php what is getting passed is the name of the java script variable (varid). So "varid" is what is being displayed by modal_window.php. Does anyone see the mistake I'm making? Thanks!
In your get call you have id equal to the literal varid. Instead maybe
$.get('modal_window.php?id=' + varid, function(data){
modal.open({content: data});});
e.preventDefault();
});
There is a list of checkboxes. User clicks on image of a "unchecked checkbox". Ajax sends request to php script which updates database and echo's new image source of a "checked checkbox". This works fine, and is below:
HTML:
<img src="<?php echo ( $box->complete == 1 ) ? "/images/checkbox-filled.png" : "/images/checkbox-empty.png" ?>" id="checkbox-<?php echo $box->id ?>" />
markBox.js:
$.ajax( {
type: "POST",
url: "/scripts/markBox.php",
data: data,
cache: false,
success: function( imageSource ) {
image.attr( 'src', imageSource );
}
} );
markBox.php:
//Return result
if ( $box->complete == 1 )
echo "/images/checkbox-filled.png";
else
echo "/images/checkbox-empty.png";
exit;
The challenge is that I have php function that is called earlier, above the list of checkboxes, to display to user how boxes are checked and how many are not. I want this box to be called and refresh as the image does. How do I rerun the php function to run again once the ajax comes back?
HTML:
<div class="markBox"><?php echo $results->getCountComplete() ?> Complete</div>
<div class="markBox"><?php echo $results->getCountNotComplete() ?> Incomplete</div>
you don't need ajax at all: (unless you don't want to store your data to a database or a file): I hope this helps:
http://jsfiddle.net/teeEx/
HTML:
<span class="checked"> </span>
<span class="unchecked"> </span>
<span class="unchecked"> </span>
<div id="result"></div>
CSS:
a{
text-decoration: none;
}
span{
display: block;
width: 30px;
height: 30px;
margin: 20px;
}
span.checked{
background: green;
}
span.unchecked{
background: black;
}
JS:
$('a').click(function(){
var a_obj = $(this);
var obj = a_obj.children('span');
if( obj.is('.checked')){
obj.removeClass('checked').addClass('unchecked');
} else {
obj.removeClass('unchecked').addClass('checked');
}
var all = a_obj.parent();
var countChecked = all.find('span.checked').length;
var countunChecked = all.find('span.unchecked').length;
$('#result').html('checked '+countChecked+'; unckecked: '+countunChecked);
});
I am creating a chat for my site. It works fine, but a function isn't working inside of a HTML button. I have 3 files I use for it, and one line isn't working.
Before, I had an issue where I set the Javascript function, create the button, and it would say the function doesn't exist. I fixed that, by putting the function below the buttons.
Each button shows an online member, who is on your friends list.
The error I get in confusing me, as I have no idea how this is being caused.
Error: 'Uncaught SyntaxError: Unexpected token } users.php:3'
(users.php is the page I was on, if I change it that changes to the page name.)
With chrome, I can click on the error, that brings up this: 'window.script1357688207590=1;'
Scripts (sorry for being so long):
Script 1: (main script):
var username = '[error]';
$.ajax({
url: 'bchat.php',
type: 'post',
data: { method: 'method2' },
success: function(data){
username = data;
}
});
$.ajax({
url: 'bchat.php',
type: 'post',
data: { method: 'method1' },
success: function(data){
if(data!='do not show chat'){
function ToggleChat(tof){
if(tof == true){
$('#chatWindow').css('visibility','visible');
}else{
$('#chatWindow').css('visibility','hidden');
}
}
$('body').append('\
<div id=chatWindow style="background:white; visibility
:hidden; position: fixed; bottom: 0; right: 0; margin-top:-30px; width:200px; height:350px;">\
<div style="width:100%; height:100%; border:solid black 1px;">\
<div style="hieght:20px; background:rgb(40,40,40); color:white;">\
'+data+'<span> </span>'+username+'\
<button id=chat_close style="float:right; background:rgba(0,0,0,0); border:none; color:white;">\
Close\
</button>\
</div>\
<div id=chatOnline style="overflow:auto;">\
</div>\
</div>\
</div>\
<div id=chat__window style="background:white; visibility:hidden; position: fixed; bottom: 0; right: 200; margin-top:-30px; margin-left:-400px; width:200px; height:350px;">\
\
</div>\
<div id=chat style="position: fixed; bottom: 0; right: 0;">\
<button id=chat_open style="border:none; padding:5px; color:whiteSmoke; background-image: -ms-linear-gradient(bottom, #4A4A4A 0%, #00070A 100%);background-image: -moz-linear-gradient(bottom, #4A4A4A 0%, #00070A 100%);background-image: -o-linear-gradient(bottom, #4A4A4A 0%, #00070A 100%);background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #4A4A4A), color-stop(1, #00070A));background-image: -webkit-linear-gradient(bottom, #4A4A4A 0%, #00070A 100%);background-image: linear-gradient(to top, #4A4A4A 0%, #00070A 100%); width:200px; height:30px;">\
'+data+' <span> </span>Chat\
</button>\
</div>');
$('#chat_open').click(function() {
ToggleChat(true);
});
$('#chat_close').click(function() {
ToggleChat(false);
});
}
}
});
//
//update online users
//
function updateOnline(){
$.ajax({
url: 'bchat.php',
type: 'post',
data: { method: 'method3' },
success: function(data){
$('#chatOnline').html(data);
}
});
}
updateOnline();
setInterval(updateOnline,5000);
Script 2 (function script):
function chatWith(url,un){
$('#chat__window').html('<div style="width:100%; height:100%; margin-top:-30px; border:solid black 1px;"><div style="hieght:20px; background:rgb(40,40,40); color:white;">'+url+'<span> </span>'+un+'<button id=chat_chatting_close style="float:right; background:rgba(0,0,0,0); border:none; color:white;">Close</button></div><div id=chat_chats style="overflow:auto;"></div></div>');
$('#chat__window').css('visibility','visible');
}
PHP script (bchat.php):
<?php
include_once("./login_manager_php_file.php");
if($username&&$userid){
$method = $_POST['method'];
if($method){
if($method=='method1'){
$url = $images['logged_in'];
$html = "<img src='".$url."' width=7.5 height=7.5/>";
}elseif($method=='method2'){
echo $username;
}elseif($method=='method3'){
$friends_q = mysql_query("SELECT * FROM friends WHERE `with`='$username' OR `friender`='$username'");
$thtml = '';
if($friends_q){
while($friend = mysql_fetch_assoc($friends_q)){
if($friend['with']==$username){
$usern = $friend['friender'];
}else{
$usern = $friend['with'];
}
$url = '';
if(ifLoggedIn($usern)===true){
$url = $images['logged_in'];
}else{
$url = $images['logged_out'];
}
if(ifLoggedIn($usern)===true && $usern != $username){
$on = $url;
$html = "
<button onClick='
chatWith('$url','$usern');
'
style='border:none; background:rgba(0,0,0,0);'><img src='".$url."' width=7.5 height=7.5/>";
$thtml = $thtml.$html.$usern.'</button><br/>';
}
}
}
echo $thtml;
}elseif($method==='method4'){
if($_POST['usrn']){
$url = '';
if(ifLoggedIn($_POST['usrn'])===true){
$url = $images['logged_in'];
}else{
$url = $images['logged_out'];
}
echo "<img src='".$url."' width=7.5 height=7.5/>";
}else{
echo '[error]';
}
}
}
}else{
echo 'do not show chat';
}
?>
Try to change the php to add an id attribute to the button, or class if there is going to be more than one. Also, remove the onclick attribute
<button class="btnChat" ...
Just realized you will need to add in the parameters as well. I would add those to data attributes on the button.
<button class="btnChat" data-url="$url" data-usern="$usern"
You will need to make sure the $url and $usern are escaped properly
then in the script 2 file you can hook up the click event for that button:
$(function(){
$('body').on('click','.btnChat',function(){
chatWith($(this).data('url'),$(this).data('usern'));
});
});
I am currently working on this tutorial and would like to add a filter button to it.
I am using jquery to make an element clickable:
<p id="marketing">MARKETING</p>
and the jquery for the element:
// Sort content Marketing
$("#pagination p").click(function () {
Display_Load();
//Loading Data
var pageNum = this.id;
$("#content").load("filter_marketing.php?page=" + pageNum, Hide_Load());
});
The problem that I am getting is when clicking on the paragraph tag will go to 'filter_marketing.php?page=' but will not work (i.e. displays nothing) since the 'var pageNum' is not defined.
the php code for pageNum looks like this:
<?php
//Pagination Numbers
for($i=1; $i<=$pages; $i++)
{
echo '<li id="'.$i.'">'.$i.'</li>';
}
?>
Im just unsure how to make a button 'marketing' and clicking on it goes to the php page and gets the results in mysql db and displays it with the pagination.
if anyone can help on this, that would be great.
P.S. check the entire script of the tutorial to see the entire structure and how it works.
Tutorial
Edit: Here is the code:
Pagination.php:
<?php
include('config.php');
$per_page = 3;
//Calculating no of pages
$sql = "select * from explore where category='marketing'";
$result = mysql_query($sql);
$count = mysql_num_rows($result);
$pages = ceil($count/$per_page)
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery_pagination.js"></script>
<style>
body { margin: 0; padding: 5; font-family:Verdana; font-size:10px }
a
{
text-decoration:none;
color:#B2b2b2;
}
a:hover
{
color:#DF3D82;
text-decoration:underline;
}
#loading {
width: 100%;
position: absolute;
}
#pagination
{
text-align:center;
margin-left:120px;
}
li{
list-style: none;
float: left;
margin-right: 16px;
padding:5px;
border:solid 1px #dddddd;
color:#0063DC;
}
li:hover
{
color:#FF0084;
cursor: pointer;
}
td{
border:solid 1px #dddddd;
padding:5px;
}
</style>
<div id="loading" ></div>
<div id="content" ></div>
<ul id="pagination">
<?php
//Pagination Numbers
for($i=1; $i<=$pages; $i++)
{
echo '<li id="'.$i.'">'.$i.'</li>';
}
?>
<p id="marketing">MARKETING</p>
</ul>
<br />
<br />
jquery_pagination.js
$(document).ready(function(){
//Display Loading Image
function Display_Load()
{
$("#loading").fadeIn(900,0);
$("#loading").html("<img src='bigLoader.gif' />");
}
//Hide Loading Image
function Hide_Load()
{
$("#loading").fadeOut('slow');
};
//Default Starting Page Results
$("#pagination li:first").css({'color' : '#FF0084'}).css({'border' : 'none'});
Display_Load();
$("#content").load("pagination_data.php?page=1", Hide_Load());
//Pagination Click
$("#pagination li").click(function(){
Display_Load();
//CSS Styles
$("#pagination li")
.css({'border' : 'solid #dddddd 1px'})
.css({'color' : '#0063DC'});
$(this)
.css({'color' : '#FF0084'})
.css({'border' : 'none'});
//Loading Data
var pageNum = this.id;
$("#content").load("pagination_data.php?page=" + pageNum, Hide_Load());
});
// Editing below.
// Sort content Marketing
$("#pagination p").click(function () {
Display_Load();
//Loading Data
var pageNum = this.id;
$("#content").load("filter_marketing.php?page=" + pageNum, Hide_Load());
});
});
filter_marketing.php:
<?php
include('config.php');
$per_page = 3;
if($_GET)
{
$page=$_GET['page'];
}
$start = ($page-1)*$per_page;
$sql = "select * from explore where category='marketing' order by category limit $start,$per_page";
$result = mysql_query($sql);
?>
<table width="800px">
<?php
while($row = mysql_fetch_array($result))
{
$msg_id=$row['id'];
$message=$row['site_description'];
$site_price=$row['site_price'];
?>
<tr>
<td><?php echo $msg_id; ?></td>
<td><?php echo $message; ?></td>
<td><?php echo $site_price; ?></td>
</tr>
<?php
}
?>
</table>
<?php
//Pagination Numbers
for($mktg=1; $mktg<=$pages; $mktg++)
{
echo '<li class="mktg" id="'.$mktg.'">'.$mktg.'</li>';
}
The problem that I am getting is when
clicking on the paragraph tag will go
to 'filter_marketing.php?page=' but
will not work (i.e. displays nothing)
since the 'var pageNum' is not
defined.
When trying the example page I just get correct page numbers, as shown by Firebug's Net panel. The strange thing I see is that results 10-12 are not shown, i.e. page 1 has results 1-9 and page 2 shows results 13-23 (you should really make it 10 or 20 results per page).
Im just unsure how to make a button
'marketing' and clicking on it goes to
the php page and gets the results in
mysql db and displays it with the
pagination.
Where is 'marketing' in your source code? Can you provide an example of this? I just don't understand this question.
EDIT: I still don't understand this. #marketing hasn't been assigned an onclick-event. Moreover, I would use a button in a form like <input type="submit"> and attaching an onclick-event to it in your JavaScript. That function can call your PHP via AJAX or go to a different URL, returning false when successful to prevent the default action (or just let the button submit your form in the regular way).
can someone tell me how to create a nice small tooltip like ajax pop-up ?
the situation is like this,
I am pulling the $row->title from the db, and then I presented it as a link like this
<?php foreach($task->result() as $row): ?>
<tr>
<td><a href=#><?php echo $row->title; ?></a></td>
</tr>
<?php endforeach; ?>
when a random user clicks that link, I want it to produce a small pop-up or tooltip like stuff that contains the title's description $row->description , and when user moves mouse from it,it closes. i know its possible, but i just don't know how to do it.
You need jQuery. Add stylesheet into <head></head> and javascript to any place in your page.
Sample style:
<style type="text/css">
.description {
visible: hidden;
position: absolute;
left: 0px;
top: 0px;
/* View */
font-family: Arial,Tahoma,Verdana;
font-size: 8pt;
color: #bbb;
background-color: #444;
padding: 5px 7px;
border: 1px solid #222;
}
</style>
Javascript:
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Add listener to links
$(".some_class").click(function(e) {
var description = $('<div class="description">'+ $(this).attr("description") +'</div>');
$(this).append(description);
description.css("left", e.pageX-4);
description.css("top", e.pageY-4);
description.animate({ opacity: 'toggle' }, 400, 'linear');
// Remove description, if user moved the mouse cursor out description
description.mouseout(function() {
$(this).remove();
});
return false;
});
});
</script>
Change your code:
<?php foreach($task->result() as $row): ?>
<tr>
<td><?php echo $row->title; ?></td>
</tr>
<?php endforeach; ?>
But the better way is to check out some good jQuery plugin..
Check out this jQuery plugin: http://www.w3avenue.com/2010/01/11/coda-bubble-jquery-plugin/
something like the following?
AJAX to get the description and when you're received the response create the description 'box'
var tipel = document.createElement('div');
tipel.innerHTML = descr;`
add it to the page
var bodyel = document.getElementsByTagName('body').item(0);
bodyel.appendChild(tipel);`
and position it like:
tipel.style.position = "absolute";
tipel.style.top = newfntogetabsolutecoord_top(document.getElementById("mytitleelement"));
tipel.style.left = newfntogetabsolutecoord_left(document.getElementById("mytitleelement"));`
getting absolute coords of an element can be tricky, look for a fn online.
for closing the tip, a suggestion would be placing tipel just under the mouse pointer (you already know it's over the link "mytitleelement", just shift the tip a little in the lines above), and then add an onmouseout event function to tipel that:
tipel.style.display = "none"; //hides or
tipel.parentNode.removeChild(tipel); //removes it from the page
(you might get away with using this instead of tipel in those 2 lines)