I want to load a google maps file with the jQuery
the logic is very easy i want that the page is reloaded every time that i send a new variables to the query...
the problem is the content doesn't load..
here is the code JavaScript....
<script type="text/javascript">
$(document).ready(function(){
function Display_Load()
{
$("#loading").fadeIn(900,0);
$("#loading").html("<img src='img/bigLoader.gif' style='border:none;' />");
}
//Hide Loading Image
function Hide_Load()
{
$("#loading").fadeOut('slow');
};
$("#pagination li").click(function(){
Display_Load();
$("#content").load("file_map.php", Hide_Load());
}
});
</script>
and here the html code
<body>
<div id="loading" ></div>
<div id="content" ></div>
</body>
this exemple is work well with other file php or html but just still not work with Google Maps i think that the problem is on the initialize() function on loading of page but i don't know how to solve it please who can help me
th'x a lot
There's an error in your JavaScript code, you haven't completed the click call (or the ready call; the nature of syntax errors means we don't really know which one is incomplete). So none of the code is running and you should be seeing a syntax error in the JavaScript console.
Using proper indentation can help you catch errors, it's well worth getting in the habit of doing so. Here's a properly-indented version of your code:
<script type="text/javascript">
$(document).ready(function(){
function Display_Load()
{
$("#loading").fadeIn(900,0);
$("#loading").html("<img src='img/bigLoader.gif' style='border:none;' />");
}
//Hide Loading Image
function Hide_Load()
{
$("#loading").fadeOut('slow');
};
$("#pagination li").click(function(){
Display_Load();
$("#content").load("file_map.php", Hide_Load());
}
});
</script>
As you can (now) see, you're missing the ); on the second-to-last line to complete the click call.
Once you fix that, separately there's an error on this line:
$("#content").load("file_map.php", Hide_Load());
// here -----^^
Just like any other function call, there you're calling Hide_Load and passing its return value into load. If you want Hide_Load to be the completion callback, you don't want to call it, you just want to pass the function reference — ditch the ():
$("#content").load("file_map.php", Hide_Load);
With the (), it's like you're calling $("#content").load("file_map.php", undefined); since the result of a function call to a function that doesn't use return is undefined.
Here the content of an exemple file of google maps file_map.php.....
<?php include_once($_SERVER['DOCUMENT_ROOT'] . "/config.php");
require_once($lib_path."mysql.class.php");
require_once($lib_path."document.php");
require_once $lib_path . "userAccount.php";
require_once($lib_path."adsearch_class.php");
?>
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script src="http://maps.google.com/maps?file=api&v=2&key=------------------------------------" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.setUIToDefault();
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
this file is work well without jQuery...
but no result when i call it with the jQuery..
the index.php file is here
<?php
include_once($_SERVER['DOCUMENT_ROOT'] . "/config.php");
require_once($lib_path."mysql.class.php");
require_once($lib_path."document.php");
require_once $lib_path . "userAccount.php";
require_once($lib_path."adsearch_class.php");
$per_page = 5;
//getting number of rows and calculating no of pages
$rsd=new db_publish;
$rsd->connect();
$sql = "SELECT *FROM `table` LIMIT 0 , 30";
$rsd->query($sql);
$counteur = $rsd->count();
$pages = ceil($counteur/$per_page);
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Display Loading Image
function Display_Load()
{
$("#loading").fadeIn(900,0);
$("#loading").html("<img src='img/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("file_map.php");
//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.("#pagination li").id;
$("#content").load("file_map.php?page=" + pageNum);
});
});
</script>
<style>
body { margin: 0; padding: 0; font-family:Verdana; font-size:15px }
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;
}
</style>
<div align="center">
<div id="loading" ></div>
<div id="content" ></div>
<table width="800px">
<tr><Td>
<ul id="pagination">
<?php
//Show page links
for($i=1; $i<=$pages; $i++)
{
echo '<li id="'.$i.'">'.$i.'</li>';
}
?>
</ul>
</Td></tr></table>
</div>
as i tell you on the first time this exemple is work well just with google maps the content can't load....
on the result page i have just
<div id="map_canvas" style="width: 500px; height: 300px"></div>
without the maps content inside
Related
As per image below I want to show the div beneath the reply button.
(Div being the text box and send button)
My code below works except no matter which reply button you press the text box opens on the first reply button caused by the javascript function hiding MyDiv and each ID being MyDiv. The problem lies that this need to be dynamic as a I dont know ho many messages I will have.
This is not all the code but should be enough to see what is going on.
UPDATED for minimal code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
display: none;
}
</style>
</head>
<body>
<p>Example</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<br/>
<br/>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<br/>
<br/>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
</body>
</html>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
https://jsfiddle.net/vzcq7t0e/
Thanks
Ben
EDIT
Similar to this question but as above I need it to be dynamic.
Display div and hide another div by button press
EDIT 2
I am still struggling with this.. I have been trying to use jquery $(this).parent().hide();
but having no luck. Should I continue with this method or try something else?
So I worked it out. adding count ID to the ID tag and a class to hide all divs then show the div with the ID requested.
<div <?php echo 'id="myDIV ' . $x . '"' ?> class="reply" style="padding-top: 30px;">
<style>
.reply{
display: none;
}
#myDIV {
width: 100%;
margin-top: 30px;
display: none;
}
</style>
<script>
function myFunction(divid) {
var x = document.getElementById("myDIV " + divid);
if (x.style.display === "block") {
x.style.display = "none";
} else {
document.querySelectorAll('.reply').forEach(function(el) {
el.style.display = 'none';
});
x.style.display = "block";
}
}
</script>
Hello i am having php code for pagination where page number displaying i want to use only
Next and Previous Button How can i achieve this
Here is my code
<?php
session_start();
$con = mysql_connect('localhost', 'root', 'root');
mysql_select_db('Helixcrm', $con);
$per_page = 15;
$select_table = "select * from tbl_site_configs";
$variable = mysql_query($select_table);
$count = mysql_num_rows($variable);
$pages = ceil($count/$per_page)
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Qjuery pagination with loading effect using PHP and MySql</title>
//Scripts
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function Display_Load() {
$("#load").fadeIn(1000, 0);
$("#load").html("<img src='load.gif' />");
}
function Hide_Load() {
$("#load").fadeOut('slow');
};
$("#paginate li:first").not('.page').css({
'color': '#FF0084'
}).css({
'border': 'none'
});
Display_Load();
$("#content").load("pagination.php?page=1", Hide_Load());
<? php $page; ?>
$("#paginate li").not('.page').click(function() {
Display_Load();
$("#paginate li").css({
'border': 'solid #193d81 1px'
}).css({
'color': '#0063DC'
}).removeClass("active");
$(this).css({
'color': '#FF0084'
}).css({
'border': 'none'
}).addClass("active");
var pageNum = this.id;
$("#content").load("pagination.php?page=" + pageNum, Hide_Load());
});
$("#paginate li.page").click(function() {
var page = $(this).attr("data-value");
if (page == "prev") {
var index = $("#paginate li.active").index();
if (index > 1) {
$("#paginate li.active").prev().trigger("click");
} else {
$("#paginate li.active").trigger("click");
}
} else {
var index = $("#paginate li.active").index();
if (index < $("#paginate li").length - 2) {
$("#paginate li.active").next().trigger("click");
} else {
$("#paginate li.active").trigger("click");
}
}
});
});
</script>
<style type="text/css">
#load {
width:30px;
padding-top:50px;
border:0px green dashed;
margin:0 auto;
}
#paginate {
text-align:center;
border:0px green solid;
width:500px;
margin:0 auto;
}
.link {
width:800px;
margin:0 auto;
border:0px green solid;
}
li{
list-style: none;
float: left;
margin-right: 16px;
padding:5px;
border:solid 1px #193d81;
color:#0063DC;
}
li:hover {
color:#FF0084;
cursor: pointer;
}
</style>
</head>
<body>
<div id="content" ></div>
<div class="link" align="center">
<ul id="paginate">
<li id="" class="page" data-value="prev">Prev</li>
<?php
for($i=1; $i<=$pages; $i++) {
echo '<li id="'.$i.'">'.$i.'</li>';
}
?>
<li id="" class="page" data-value="next">Next</li>
</ul>
</div>
<div style="clear:both"> </div>
<div id="load" align="center" ></div>
</body>
</html>
please help me to short out my problem
Any help will be appreciated
If you can't solve your issue, I'd recommend that you don't really need javascript for pagination, it can be achieved purely through PHP (Which is actually really simple to do), I've done it myself for one of my websites using this code example..
http://www.developphp.com/page.php?id=289
Go ahead and check it out if you can't solve this problem out,
Also he produced a video explaining which sections you need to change, and going through what each part of the code does/means:
https://www.youtube.com/watch?v=K8xYGnEOXYc
Im guessing removing the echo wont work because then you have no data elements which have active bound to them.
Try making a .hidden class in your css to hide each of your echoed li elements, that way they can still have active bound to them, but they won't be visible on the DOM
.hidden { display: none; }
Your markup would then look something like this
<li class='next'><li>
<li id="1" class="hidden active">1</li>
<li id="2" class="hidden">2</li>
<li id="3" class="hidden">3</li>
<li class='prev'><li>
<html>
<head>
<style>
.messboxcontent { display:none; background: rgba(0,0,0,.4); width: 400px; height: 100px; margin: 50px auto; padding: 15px;}
.mess_name {display: inline-block; cursor: pointer ; vertical-align: middle; width:165px; height:35px; background:blue; bottom:0px; left:144px; margin-right: 16px}
#msg_holder {overflow-x:scroll ;overflow-y: hidden; white-space: nowrap; position:fixed;height:110px; width:100%; background-color:yellow; bottom:0px;}
</style>
<script type="text/javascript" src="jquery.js" ></script>
<script>
$(document).ready( function() {
done();
});
function done() {
setTimeout( function() {
update();
done();
}, 20000);
}
function update() {
$.getJSON("fetch.php", function(data) {
$.each(data.result, function(){
var message = this['message'];
var name = this['name'];
call(name, message);
});
});
};
function call(name, message){
$("#msg_holder").append("<div class='mess_name'>" + name + "<div>");
$(".mess_test").click( function() {
$('div.messboxcontent').html(' name : '+ name + ' Message : ' + message);
$('div.messboxcontent').fadeIn();
return false;
});
}
</script>
</head>
<body>
<div class="messboxcontent"></div>
<div id="msg_holder"></div>
</doby>
</html>
and this is fetch.php file
{"result":[{"message":"this is haha","name":"haha"},{"message":"this is koka","name":"koka"}]}
when ever i click on a blue box that Contain any name, it show up the latest message and name. what i want is when i click on the box that contain haha as a name i want the box that contain message: this is haha,
You need to use append rather than html.
$('div.box').append( message );
I'm trying to upload an image using codeigniter and ajax. I already have the ajax method to insert the field values to the DB, what's the easiest and simplest way to upload my file.
Here's the JQuery custom function:
(function($){
jQuery.fn.ajaxSubmit =
function() {
$(this).submit(function(event) {
event.preventDefault();
var url = $(this).attr('action');
var data = $(this).serialize();
$.ajax({
url: url,
type: "POST",
data: data,
dataType: "html",
success: function(msg) {
$('#main').html(msg);
}
});
return this;
});
};
})(jQuery);
I call it like this:
$(document).ready(function() {
$('#myForm').ajaxSubmit();
});
The function works fine, the data gets inserted in the database and I even have some directories that get created in the model before uploading the image, they are created but the image is not uploaded at all.
I know I need to use a hidden Iframe to do the job, but I dont quite know how to integrate that in my code.
I created custom Ajax File Uploader using CodeIgniter, jQuery and Malsup form plugin. Here is the HTML and Javascript/CSS code. It also support multiple file upload and Progress.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ajax UP Bar</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('form').submit( function() {
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
$(this).ajaxForm({
beforeSend: function() {
status.html();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function(xhr) {
status.html(xhr.responseText);
}
});
});
});
</script>
</head>
<body>
<form method="post" action="<?php echo base_url('users/upload/'); ?>" enctype="multipart/form-data">
<label for="upload">Select : </label>
<input type="file" name="upload[]" id="upload" multiple="multiple" />
<input type="submit" name="fsubmit" id="fsubmit" value="Upload" />
</form>
<div class="progress">
<div class="bar"></div >
<div class="percent">0%</div >
</div>
<div id="status"></div>
</body>
</html>
<style>
body { padding: 30px }
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
In CodeIgniter Controller :
<?php
if (!defined('BASEPATH'))
exit('No direct script access allowed');
class Users extends CI_Controller
{
public function __construct()
{
parent::__construct();
}
public function upload()
{
if (isset($_FILES['upload']['name'])) {
// total files //
$count = count($_FILES['upload']['name']);
// all uploads //
$uploads = $_FILES['upload'];
for ($i = 0; $i < $count; $i++) {
if ($uploads['error'][$i] == 0) {
move_uploaded_file($uploads['tmp_name'][$i], 'storage/' . $uploads['name'][$i]);
echo $uploads['name'][$i] . "\n";
}
}
}
}
}
Hope this helps you. Thanks!!
Hey, I'm trying to add a button that when clicked will grab data from the mysql database and display it with a pagination. However, I can't seem to get it to work properly.
The first main page looks like this:
pagination.php:
<?php
include('config.php');
$per_page = 3;
//Calculating no of pages
$sql = "select * from explore";
$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 class="page_numbers" id="'.$i.'">'.$i.'</li>';
}
?>
<p id="marketing">MARKETING</p>
</ul>
<br />
<br />
The button above in that page looks like this as you can see:
<p id="marketing">MARKETING</p>
So, when the user clicks this I need it to get the results from the db.
I do this with jquery like this:
$(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();
//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("filter_marketing.php?page=" + pageNum, Hide_Load());
});
});
The problem is that does not work for one main reason:
1. PageNum = marketing. I need it to be the numbers like for 'pagination li' above. I do not know how to fix it properly.
In case I'm confusing you, I will try to explain better:
I want to create a button (i.e. Marketing) that when clicked will get the data from the database and display, but I also need the pagination numbers to be 'refreshed' to compensate for the new data.
If you need further explanation, please let me know. Any help would be greatly appreciated. Thank you.
Think you might be looking for index().
var pageNum = $(this).index() + 1;
Keep in mind that index is 0 based, hence the add 1.
This would also be dependent on your html markup because index returns:
an integer indicating the position of the first element within the jQuery object relative to its sibling elements.
EDIT:
So if, when you update the content of #content, you also change the data-page attribute, you can also have that information when you click on #marketing, so you know which page to get.
This would also work if you were to give one of the LI elements a "current-page" class and then get the id of the .current-class LI.
<div id="content" data-page="1"></div>
Js:
//Pagination Click
$("#pagination li").click(function(){
//...
$("#content").load("pagination_data.php?page=" + pageNum, function(){
Hide_Load();
$(this).attr('data-page', pageNum);
});
});
$("#pagination p").click(function () {
//...
var pageNum = $('#content').attr('data-page');
$("#content").load("filter_marketing.php?page=" + pageNum, Hide_Load());
});