I use the following datepicker.php page for jquery datepicker is given below:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
</script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body style="font-size:62.5%;">
<input type="text" id="datepicker" />
</body>
</html>
it is working well as a single page but when i use this page from another page using include (datepicker.php) method then the datepicker is not working. How can I solve this?
Because this function used only one page if you use datepicker on another page then define function on another page.
You should not be including a full HTML document within another HTML document. The result is not a valid webpage.
Related
My server side data is following:
$total=100;
$jd=array();
for($i=1;$i<=$total; $i++){
$jd["current_value"]=$i;
$jd["total"]=$total;
$jd["some_extra_data"]="Extra data-$i";
echo json_encode($jd);
sleep(1);
}
Now i want to create a progress bar from above ajax request data.
But i don't get a single data from request. all time i get full data. so, i cant create a progress bar.
how can i apply request?
Please me. thanks.
If you are not too adverse to using a JS library then you might consider using JQuerys UI library for this.
http://jqueryui.com/progressbar/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: 50
});
});
</script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
If you were to combine this with the JQuery Ajax request then you should be able to achieve what you are after: http://api.jquery.com/jquery.ajax/
You can then periodically call the server side page to get a value to populate the progress bar.
Let me know if thats in the direct direction and I can elaborate if need be.
Maybe someone already had the problem like mine - I want to use the Simple init DateTimePicker from this example . I created a simple php page:
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.datetimepicker.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.datetimepicker.css" />
<script>
jQuery('#datetimepicker').datetimepicker();
</script>
</head>
<body>
<input id="datetimepicker" type="text" >
</body>
</html>
I also put the jquery.datetimepicker.js and jquery.js in the js folder, same with css, however after refreshing the page - all I see is the empty input field and the datepicker doesn't show up. What am I doing wrong?
Use document.ready function and make sure js are included correctly
<script>
jQuery(document).ready(function(){
jQuery('#datetimepicker').datetimepicker();
});
</script>
I use jQuery mobile to make a mobile form and then submit it.
On the main page I import the jQuery libraries.
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Waiter Menu</title>
<link rel="stylesheet" href="js1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="js1.0/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js1.0/jquery.mobile-1.0.min.js"></script>
</head>
When submit the form from the first page and linked to the second, the libraries have pre-import and I don't want that.
Because at the second page I want to use custom JavaScript.
Is there any way not to stop jQuery at linked file?
Thanks in advance!!
---edit----
I found the solution here: How To Disable Ajax In jQuery Mobile Before Page Load?
i put this into form header
<script type="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
and I set new header at second file!
I have an index.php file that requires a common head.php file, in the head.php file are several Javascript files, when trying it like that, the code looks fine in the source, but the files don't actually do anything to the document. (The .css file works fine though)
If the Javascript files are put directly into the index.php (in the same head area as where the head.php is required) they work fine, even though the source show the exact same code.
Is there a trick to make this work properly, or do I have to put the Javascript manually into every single page on the website? (There are a lot and I would like to be able to use a single head.php just in case I want to update a file or add a script)
Any help would be very appreciated!
Below is some code for the different pages for reference:
head.php
<link rel="stylesheet" type="text/css" href="style/main.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="include/alajax.js"></script>
<script type="text/javascript" src="include/jtip.js"></script>
<script type="text/javascript" src="include/jquery.timeago.js"></script>
index.php
<head>
<?php require_once 'site/head.php'; ?>
</head>
index.php (Source Code as displayed by the browser)
<head>
<!--require_once 'site/head.php';-->
<link rel="stylesheet" type="text/css" href="includes/fancy/fancy.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="include/alajax.js"></script>
<script type="text/javascript" src="include/jtip.js"></script>
<script type="text/javascript" src="include/jquery.timeago.js"></script>
<!-- end of head.php -->
</head>
<body>
<!-- Site that uses jquery and other functions in the included javascript that do not work with the files when included through a .php, though works fine if directly on the same page as the functions -->
EDIT:
(Here is a more fleshed out index.php with the header.php and login.php)
index.php
<head>
<?php require_once 'site/head.php'; ?>
</head>
<body>
<div id="header">
<?php require 'site/header.php'; ?>
</div>
<div id="wrapper">
<div id="navbar">
<?php require 'site/navbar.php'; ?>
</div>
<div id="content">
<!-- Just basic php and html here, and some times that rely on jquery.timeago.js to calculate time, works fine when everything is loaded in head.php -->
</div>
</div>
</body>
header.php (not to be confused with head.php)
<div id="loginheader">
<img src="img/logo.png" width="200" height="100" alt="Logo" />
<?php
require 'login.php';
?>
</div>
login.php
<!--- Contains javascript that requires jquery (included in head.php) and alajax (also included in head.php) if jquery is loaded in here and not in head, the form works, but the times in index.php break. -->
Hi folks finally i found the answer, the reason behind js file not loading is the problem with my/your one of the js file which we have include. So please check all the js files one by one for identifying the corrupted one.
Explanation of my case.
I have included all the css and js files inside a file called html_header.php
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"> </script>
<script type="text/javascript" src="../js/excanvas.js"> </script>
<script type="text/javascript" src="../js/jquery.flot.js"> </script>
<script type="text/javascript" src="../js/jquery.flot.stack.js"> </script>
<script type="text/javascript" src="../js/jquery.flot.pie.js"> </script>
<script type="text/javascript" src="../js/jquery.quicksand.js"> </script>
<script type="text/javascript" src="../js/jquery.easing.1.3.js"> </script>
<script type="text/javascript" src="../js/jquery.tipsy.js"> </script>
<script type="text/javascript" src="../js/cl_editor/jquery.cleditor.min.js"> </script>
<script type="text/javascript" src="../uploadify/swfobject.js"></script>
<script type="text/javascript" src="../uploadify/jquery.uploadify.v2.1.4.min.js"></script>
<script type="text/javascript" src="../js/jquery.autogrowtextarea.js"></script>
<script type="text/javascript" src="../js/form_elements.js"></script>
<script type="text/javascript" src="../js/jquery.ui.core.js"></script>
<script type="text/javascript" src="../js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="../js/jquery.ui.slider.js"></script>
<script type="text/javascript" src="../js/jquery.ui.progressbar.js"></script>
<script type="text/javascript" src="../js/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="../js/jquery.ui.tabs.js"></script>
<script type="text/javascript" src="../js/jquery.ui.autocomplete.js"></script>
<script type="text/javascript" src="../js/jquery.ui.position.min.js"></script>
<script type="text/javascript" src="../js/fullcalendar.js"></script>
<script type="text/javascript" src="../js/gcal.js"></script>
<script type="text/javascript" src="../js/bootstrap-modal.js"></script>
<script type="text/javascript" src="../js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="../js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="../js/highlight.js"></script>
<script type="text/javascript" src="../js/jq_tables/jquery.dataTables.js"></script>
<!--<script type="text/javascript" src="../js/main.js"> </script>-->
<script type="text/javascript" src="../js/jquery.validate.min.js"></script>
<script type="text/javascript" src="../js/jquery.printElement.min.js"></script>
<script type="text/javascript" src="../js/addmethod.js"></script>
when i commented main.js the problem solved. After i have uploaded a fresh copy of main.js file.
Thank you
I have a calendar script I got off the internet working fine. Recently, I tried incorporating a jQuery sorting script, but I can't get both working together. It's either the calendar script or the sorting one that works.
I don't have much jQuery experience. I've tried changing the order in lots of ways, changing the jQuery versions and commenting out a bunch of JS scripts but I still can only get either get or one or none of them working.
The page is password-protected and the information being pulled from the database is private, but if it helps I'll try and make a separate page with dummy data; but I hope the mistake is a glaring one.
Here's the page head:
<head>
<title>My Page</title>
<!-- css -->
<link rel="stylesheet" type='text/css' href="stylesheets/datatable.css"/>
<link href="stylesheets/pagination.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui-timepicker-addon.css" />
<link rel="stylesheet" media="all" type="text/css" href="css/Aristo.css" />
<!-- scripts -->
<!-- [if lte IE 8]>
<script language="javascript" type="text/javascript" src="scripts/excanvas.js"></script> <![endif] -->
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="scripts/jquery.datatables.js"></script>
<script type="text/javascript" src="scripts/jquery.fullcalendar.js"></script>
<script type="text/javascript" src="scripts/jquery.placeholder.js"></script>
<script type="text/javascript" src="scripts/jquery.accordion.js"></script>
<script type="text/javascript" src="scripts/jquery.tabbed.js"></script>
<script type="text/javascript" src="scripts/application.js"></script>
<!-- If I enable this, the calendar works but the sorting script stops working:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js"></script> -->
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="js/jquery-ui-sliderAccess.js"></script>
</head>
Is there an obvious mistake here? I'm using someone else's jQuery. Let me know if there is any other info I can add that might help with this...
The problem is that you are loading the jQuery library twice when you uncomment the part in question. This will result in the second script overwriting the $ and therefore also all functionality the plugins above have already attached to it (their functions are living inside the $ object).
Simple solution to your problem: Only load jQuery once (preferrably via a CDN), load the original library as the first script, then load its plugins, and then load your own scripts.
The correct order should therefore be:
<!-- Loading jQuery via Google -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<!-- Loading jQuery scripts -->
<script type="text/javascript" src="scripts/jquery.datatables.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="js/jquery-ui-sliderAccess.js"></script>
<script type="text/javascript" src="scripts/jquery.fullcalendar.js"></script>
<script type="text/javascript" src="scripts/jquery.placeholder.js"></script>
<script type="text/javascript" src="scripts/jquery.accordion.js"></script>
<script type="text/javascript" src="scripts/jquery.tabbed.js"></script>
<script type="text/javascript" src="scripts/application.js"></script>
Your sorting script and your calendar script are using 2 different versions of jQuery. I assume the one your sorting script is pulling up is conflicting with the calendar one (the one commented out in your code). Specifically:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
and:
<script type="text/javascript" src="js/jquery-latest.js"></script>
are competing with each other.