I am using j-query date-picker. Its fine in Firefox & Chrome but not in IE 8. date-picker box showing another place on browser in IE 8. I want to display date-picker near date text-box. So Please suggest.
I am adding file -
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
<link type="text/css" href="css/jquery.datepick.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.datepick.js"></script>
PHP code is -
<?php
for($i=0;$i<$sibling_number;$i++)
{
?>
$(function() {
$('#fromdate_<?php echo $i;?>').datepick();
});
<?php
}
?>
Related
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 am preparing a jquerymobile app, in which i want to insert a jqplotchart, so that i wrote code for that. but now problem is chart is not being displayed in my page.
libraries i
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link rel="stylesheet" href="stylesheets/jquery.mobile-1.1.1.min.css" type="text/css"/>
<link rel="stylesheet" href="stylesheets/jquery.jqplot.css" type="text/css"/>
<link rel="stylesheet" href="stylesheets/jqm-docs.css" type="text/css"/>
<script src="jquery.jqplot.min.js" type="text/javascript"></script>
<script src="jqplot.pieRenderer.min.js" type="text/javascript"></script>
<script src="jqplot.barRenderer.min.js" type="text/javascript"></script>
<script src="jqplot.categoryAxisRenderer.min.js" type="text/javascript"></script>
<script src="underscore-min.js" type="text/javascript"></script>
<script src="hideAddressBar.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery.dataTables.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="jqm-docs.js"></script>
<script type="text/javascript" src="jquery.flot.min.js"></script>
<script type="text/javascript" src="JQPlot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="JQPlot/plugins/jqplot.canvasTextRenderer.min.js"></script>
javascript i written:
$(document).bind("mobileinit",function() {
// go to server for chart data
$('#pagePlotChart').live('pageshow',function() {
$.get("mygraphdata", function(data){
$.jqplot('plotChart', data,{
title:'My Chart',
axesDefaults:
{
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
axes:
{ xaxis: { label:"Day", pad: 0 },
yaxis: { label: "Measurement" }
}
});
});
return false;
});
});
html code:
<div id="pagePlotChart" data-role="page" data-rockncoder-jspage="managePlotChart">
<header data-role="header" data-position="fixed">
<h1>Plot Chart</h1>
</header>
<section data-role="content">
<div id="plotChart" class="myChart"></div>
<button id="refreshPlotChart" value="Refresh Chart" data-mini="true"></button>
</section>
</div>
actually i have to take json data from some php file and pass to this chart. and chart shuld display the graph by using that json data from some php file.
my json data will be in this formate ["v1:myName","g:233","h:322"]..etc.
php file is sending json data. i checked in fidler. but chart is not working.
please tell me solution for this.
First of all I notice you are loading jQuery mobile twice in your page header. Try removing the older version, and moving most or all of your JS includes to the page footer, that way your page can (partially) render before the JS files are downloaded by the browser. Best practice for the jqplot components is certainly to move includes to the footer.
The actual order of loading the jqplot components is almost right. It looks like the main jQuery file needs to be loaded before the main jqplot file, though - right now only the mobile version of jQuery is loading before jqplot. Please see this answer for more detail.
If jqplot is loading but the data is not present, or possibly the data or chart code has a bug, you will see a blank space in the page where the chart should be. Make sure that you can load a static chart page hand-assembled with the data you are getting from your PHP page. This will test the data and the includes.
If jqplot is not loading at all (for example if dependencies are not loaded in correct order) you will not see any empty space for the chart at all on your page and it will be rendered with zero space where the chart should be.
It looks like you are calling the chart div correctly. However I am not sure if $(document).bind("mobileinit",function() is working. The base call for jqplot is normally
$(document).ready(function(). Setting up charts in divs that aren't initially visible when the page is rendered can be tricky. This question might help if that's what the problem is.
See this related question about jQuery Mobile rendering content after page is initialized. Basically you can use .trigger('create') per naugtur's comment.
There is an easier way (worked in my case):
-first: delare your plot container div outside of any page (for example just below body tag):
<body>
<div id="plotContainer"></div>
...
-then: set the plot (Chart) in your $(document).ready(function(){ ... here ... }); and hide it so it will not show between pages:
$("#jqxChart").jqxChart(settings);
$("#jqxChart").hide();
-finaly: just copy the div with the plot inside your page:
<script>
$('#page_ID').bind('pageshow', function(data) {
$("#jqxChart").appendTo("#ID_of_DIV_you_want");
$("#jqxChart").show();
$('#jqxChart').jqxChart('refresh');
});
</script>
Hope this helps!!!
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.
scenario
I have a PHP if statement to test if a user is logging in for the first time ever. This then displays, a demo in a greybox popup box.
Sadly when the box loads in IE, the content of the website doesn't. This means when I user closes the box, they are left the with background.
Code - I'm now using PHP include.
greybox.php
<?php if ($fli == 0) {echo " <script type='text/javascript'>
window.onload = function() {
GB_showCenter('Your first login', '../video.php');
};
</script> ";} else echo "";?>
<!-- GB scrip -->
<script type="text/javascript">
var GB_ROOT_DIR = "greybox/";
</script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />
<!-- GB -->
RELEVANT Script on main site
<?php $fli = $_SESSION["USER"]["fli"]; ?>
<?php include "greybox.php" ?>
I would deeply appreicate any help at all please! :)
Never worked with it but what if you try the full url for a test.
How does IE then reacts?
Alternative could be jQueryIU, you can create a dialog for the first login.
Also if I restart my browser do I have to see the video again?
If you save the last login in the DB you can use that information to show the video.
Good luck.
I have a php page how can i show another window using extjs? So code i have so far is like this:
Can anyone show me how can this be done? I only want this done by extjs please dont tell other alternatives.
<script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.0.2a/ext-all.js">
</script>
<script>
window = new Ext.Window({layout: 'border'}).show()
</script>
Bellow is the code to show an Ext window. Tested and it is working.
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.0.2a/resources/css/ext-all.css" />
<script type="text/javascript" src="http://cdn.sencha.io/ext-4.0.2a/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var window = Ext.create('Ext.Window',{
title: 'Hello',
height:100,
width:100
});
window.show();
})
</script>
Working on jsFiddle
new Ext.Window({
title:'Hello World Window',
html:'Am I the right size?',
height:Ext.getBody().getViewSize().height,
width:Ext.getBody().getViewSize().width*0.8 //80%
}).show();
ExtJS open window with max height