http://docs.jquery.com/UI/Datepicker
i want to have a link with the choosen date to click at the datepicker
e.g:
<div type="text" id="datepicker"></div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$("#datepicker").datepicker({ <a href="/controller/view/" /> });
});
After I clicked i want to be at follwing adress: /controller/view/20091212
Is something with datepicker possible?
Thanks!
use the onSelect event:
$("#datepicker").datepicker({onSelect: openday});
function openday(dateText, inst) {
window.location = 'controller/action/' + encodeURIComponent(dateText);
}
Related
I currently have a mobile site I am building and I am having trouble with integrating a custom JQuery widget. For some reason the the pageshow event is firing twice for whichever page is loaded first.
For ease of understanding I have created two HTML pages
Page 1
<!doctype html>
<head>
<meta charset="utf-8">
<title>One</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).on("mobileinit", function () {
$.mobile.changePage.defaults.reloadPage = true;
});
</script>
<script type="text/javascript" src="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.js"></script>
</head>
<body id="default">
<div data-role="page" id="content-one">
<div role="main" class="ui-content" id="one-content">
One<br/>
back to two
</div>
<script type="text/javascript">
(function($, undefined) {
$.widget("test.stuff", {
_create : function() {
console.log("create");
},
_init : function() {
console.log("_init");
},
destroy: function () {
this.element.empty();
$.Widget.prototype.destroy.call(this);
}
});
})(jQuery);
</script>
<script type="text/javascript">
$(document).on("pageshow", "#content-one", function () {
console.log("pageshow1");
$("#content-one").stuff({});
});
$(document).on("pagebeforeshow", "#content-one", function () {
console.log("pagebeforeshow1");
});
</script>
</div>
</body>
</html>
Page 2
<!doctype html>
<head>
<meta charset="utf-8">
<title>Two</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"> </script>
<script type="text/javascript">
$(document).on("mobileinit", function () {
$.mobile.changePage.defaults.reloadPage = true;
});
</script>
<script type="text/javascript" src="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.js"></script>
</head>
<body id="default">
<div data-role="page" id="content-two">
<div role="main" class="ui-content">
Two<br/>
back to one
</div>
<script type="text/javascript">
$(document).on("pageshow", "#content-two", function () {
console.log("pageshow2");
});
$(document).on("pagebeforeshow", "#content-two", function () {
console.log("pagebeforeshow2");
});
</script>
</div>
</body>
</html>
To recreate load page one first, navigate to page two using link, then navigate to page one using link.
When page one is loaded again the pageshow event is fired twice. I have the reloadPage set to true as I have dynamic content for my pages and I cannot serve cached pages.
I very well could be using the events incorrectly.
Try substituting your $(document).on("pageshow",...) with $(document).one("pageshow", ...), which restricts the event to one call http://api.jquery.com/one/.
The problem is that using on in the inline script creates a new event each time the page is loaded. So the first time you load the page, the inline script is executed and the pageshow event is triggered. The second time a new event is triggered again, but the first one is still listening to content-one pageshow. In fact, if you repeat the process you'll see the log three, four, ... times.
Another option could be to create a script in the head section which sets up all required triggers in $(document).on("pageshow", "#content-one", ...), $(document).on("pageshow", "#content-two", ...). In this case, the script will only be initialized once, so it will work.
Wasted about 2 hours trying to do all the fixes on here and other sites. I gave up and put an if statement in their to prevent it from firing again
var hasDownload = false;
$(document).on("pageinit", "#mypage",function(event){
if (hasDownload === false) {
hasDownload = true;
// do some work
}
);
Try to remove the page on hide event, like so :
$(document).on("mobileinit", function () {
$.mobile.changePage.defaults.reloadPage = true;
$(docuement).on('pagehide', function (event, ui) {
$(event.target).remove();
});
});
Remenber that if you don't disable ajax, all request will be with AJAX
I am trying to make div element screenshot, but combined with draggable jQuery, and have no luck, I can take screenshot of div and save it like png, but if I drag some elements on that div and then save screenshot I get only what is inside that div and draggable elements over that div? Any idea, this mine code so far
<script type="text/javascript" src="js/html2canvas.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script language="javascript">
$(document).ready(function() {
$("#myBtn").click(function () {
html2canvas($("#chartDiv"), {
onrendered: function (canvas) {
var imgSrc = canvas.toDataURL();
$("#myDiv").html('').show();
var url = "ajax.php";
$.post(url, {contentVar: imgSrc} ,function(data) {
$("#myDiv").html(data).show();
});
}
});
});
});
</script>
<script>
$(function() {
$( ".draggable" ).draggable();
});
</script>
I am using AJAX to save image and present in new element
AJAX.PHP
$contentVar = $_POST['contentVar'];
$filteredData=substr($_POST['contentVar'], strpos($_POST['contentVar'], ",")+1);
//Decode the string
$unencodedData=base64_decode($filteredData);
//Save the image
file_put_contents('img.png', $unencodedData);
echo "<img src="img.png">";
And here is the HTML:
<div id="chartDiv"><img src="img/assets/logo.png"></div>
<button id="myBtn">Create image</button>
<div id="myDiv"></div>
<img src="img/assets/logo.png" class="draggable" />
<img src="img/assets/logo.png" class="draggable" />
Why not disable the the draggalbe elements before taking the screenshot, then re-enabling them. This will remove the jquery_ui draggable elements and css.
I want to implement Nivoslider for a slideshow as well as jQueryUI pop-op boxes. When I implement them as separate entities, then the pop-up boxes stop working as they should.
Is there a way to implement them together, or is there a fatal error?
By the way, I am a complete noob when it comes to js - please be kind and spell things out for me please :D
This is the code for Nivoslider:
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
animSpeed: 2000, // Slide transition speed
pauseTime: 6000, // How long each slide will show
});
});
</script>
and this is the code for jQuery UI pop-up box:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
</script>
My implementation based on the demo script provided with Nivo Slider, just add in jquery UI and use this code. It stores the slider information and re-creates the slider each time the dialog is opened.
HTML Code
<div id="wrapper">
dev7studios
<button id="btnTestMe">Open Slideshow</button>
</div>
<div id="dlgTestMe">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
<img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" />
<img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with a link.
</div>
</div>
</div>
JQuery Code
$('#btnTestMe').click(function(e){
e.preventDefault();
$('#dlgTestMe').dialog({
open: function(){
var data = $('.slider-wrapper').html();
if (typeof($(this).data("slider")) == "undefined"){
$(this).data("slider", data);
}
$('#slider').nivoSlider();
}, beforeClose: function(){
$('#slider, .nivo-controlNav, .nivo-html-caption').detach();
$(this).children('.slider-wrapper').html($(this).data("slider"));
}
});
});
I am having some trouble having my link function to execute javascript.
link:
<a class="glossyBtn" id="saveButton">Save</a>
Script:
<script type="text/javascript">
$(function (){
$('form').submit(function () {
$('#saveButton').attr('disabled', 'disabled');
});
});
</script>
$('form').submit() is fired when you submit a form (usually with <button type="submit">). Your button is not of submit type.
You may achieve it adding the following onclick to your <a> element: onclick="$('form').sumbit();" or add the following to your JS code
$('#saveButton').click(function{
$('#saveButton').attr('disabled', 'disabled');
$('form').submit();
})
My goal: upon clicking a link, I want to load an external page (with a image upload form) into a jQuery UI Dialog and have it submitted AJAX style.
My problem: The dialog loads the external PHP page just fine and I'm able to submit the form via AJAX -- using the jQuery form plugin shown here http://jquery.malsup.com/form/ -- BUT for some reason the AJAX submission won't work inside the dialog box, only when I view the page directly. It simply loads the page itself as if the JS was turned off or something.
Here's the parent page displaying the dialog:
port_edit.php (header)
<script type="text/javascript" src="../common/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../common/js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript" src="../common/js/jquery.form.js"></script>
<script type="text/javascript">
function refreshWindow(){
location.reload(true);
}
$(document).ready(function() {
$('#gallery-display').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: 'Gallery Display',
width: 280,
height: 280,
close: refreshWindow,
resizable: false
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
});
</script>
port_edit.php (link)
Modify
And the external document loaded into the dialog:
image_upload.php
<script type="text/javascript" src="../common/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../common/js/jquery.form.js"></script>
<script type="text/javascript">
// wait for the DOM to be loaded
$(document).ready(function() {
// attach handler to form's submit event
$('#image-upload').submit(function() {
// submit the form
$(this).ajaxSubmit();
return false;
}); });
</script>
</head>
<body>
<form action="image_upload_action.php" method="post" enctype="multipart/form-data" name="portfolio-upload" id="image-upload">
<input type="file" name="file" id="file" />
<input type="submit" name="btn-submit" id="btn-submit" value="Upload" class="button"/>
<br />
</form>
HELP!
Would you want to try moving the code within the document.ready() in image_upload.php into the same function in the port_edit.php and try again? I am not sure this would work, but you could try that...
Like below:
port_edit.php
<script type="text/javascript" src="../common/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../common/js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript" src="../common/js/jquery.form.js"></script>
<script type="text/javascript">
function refreshWindow() {
location.reload(true);
}
$(document).ready(function() {
$('#gallery-display').each(function() {
var $link = $(this);
var $dialog = $('<div></div>').load($link.attr('href')).dialog({
autoOpen: false,
title: 'Gallery Display',
width: 280,
height: 280,
close: refreshWindow,
resizable: false
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
// attach handler to form's submit event
$('#image-upload').submit(function() {
// submit the form
$(this).ajaxSubmit();
return false;
});
});
</script>
Modify
image_upload.php
<form action="image_upload_action.php" method="post" enctype="multipart/form-data" name="portfolio-upload" id="image-upload">
<input type="file" name="file" id="file" />
<input type="submit" name="btn-submit" id="btn-submit" value="Upload" class="button"/>
<br />
</form>