JQuery Datepicker到PHP变量没有窗体 [英] JQuery Datepicker to PHP variable without form

查看:154
本文介绍了JQuery Datepicker到PHP变量没有窗体的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一种情况,我觉得这很简单,但我似乎找不到正确的关键词/方法。

I'm having a situation and I've got the feeling it's quite simple to fix, but I can't seem to find the right keywords / way to do it.

我有什么

没有表单的JQuery Datepicker。它附加到一个跨度,因为我希望我的日历是一个菜单项在我的网站上。如果我将鼠标悬停/单击日历菜单项,则Datepicker显示:

A JQuery Datepicker without a form. It's attached to a span, because I want my calendar to be a menu-item on my website. If I hover/click The 'Calendar' menu-item, the Datepicker shows:

<ul class="menu vertical">
  <li>
    <span id="datepicker"></span>
  </li>
</ul>

我想要/需要

我想将使用datepicker选择的日期传递给PHP,因此我可以将其作为网站上其他位置的变量使用。

I would like to pass the date selected with the datepicker to PHP, so I can use it as a variable elsewhere on the website.

我相信从其他情况下,应该可以使用Ajax。但是我发现的所有例子包括一个输入字段和/或一个提交按钮。我没有表单,因为我只想从菜单中显示datepicker。

I believe, from other cases, it should be possible with Ajax. But all the examples I find include an input field and/or a submit button. I don't have a form, because I would like to show the datepicker only from the menu.

最好的方法是什么?

- 修改 -

也许我应该多一点解释。我有图像,保存在dd-mm-yy文件夹中。我希望能够使用datepicker选择日期,然后在图库中显示该文件夹中的图像。这是图库的代码:

Maybe I should give a bit more explanation. I've got images, saved in dd-mm-yy folders. I would like to be able to select a date with the datepicker and then show the images from that folder in a gallery. This is the code for the gallery:

<?php
$date = INPUT FROM DATEPICKER HERE;
$dirname = "images/$date/";
$images = glob($dirname."*.jpg");
echo '<div id="slider" class="flexslider"><ul class="slides">';
foreach($images as $image) {
    $titel = basename("$image", ".jpg").PHP_EOL;
    echo '<li><img src="'.$image.'" alt="'.basename("$image", ".jpg").PHP_EOL.'"><p class="flex-caption">'.str_replace("_", " ", $titel).'</p></li>';
};
echo '</ul></div>';
?>


推荐答案

Javascript UPDATED / p>

Javascript UPDATED:

$("#datepicker").datepicker({
    onSelect: function() {
        var date = $('#datepicker').datepicker("getDate");
        $.ajax({
            url: "processdate.php",
            type: "POST",
            async: true,
            data: {
                selected_date: date
            },
            success: function(resp) {
                if (resp === "true") {
                    alert("it worked");
                } else {
                    alert("nope :-(");
                }
            } 
        });
    }
}).datepicker("setDate", new Date());//Set current date.

JAVASCRIPT注意

这将将日期设置为当前日期,仅供显示,但它不会运行AJAX调用因为如果您的用户将立即重定向。个人而言,我建议在datepicker旁边添加一个按钮,而不是自动重定向到下一页。

This will set the date to the current date, for display purposes only, but it will not run the AJAX call because if it did your users would be instantly redirected. Personally I recommend adding a button next to the datepicker that goes to the next page instead of automatically redirecting on select.

processdate.php,在同一目录中创建此php文件具有js的页面

processdate.php, create this php file in same directory as page that has the js

<?php
session_start();
if(isset($_POST["selected_date"])){
    $_SESSION["date"] = $_POST["selected_date"];
    echo "true";
} else {
    echo "false";
}
?>

您的php,这是您在AJAX工作后应重定向的页面。

your php, this is the page you should redirect to after you have the AJAX working.

<?php
session_start();
$date = $_SESSION["date"];
$dirname = "images/$date/";
$images = glob($dirname."*.jpg");
echo '<div id="slider" class="flexslider"><ul class="slides">';
foreach($images as $image) {
    $titel = basename("$image", ".jpg").PHP_EOL;
    echo '<li><img src="'.$image.'" alt="'.basename("$image", ".jpg").PHP_EOL.'"><p class="flex-caption">'.str_replace("_", " ", $titel).'</p></li>';
};
echo '</ul></div>';
?>

一旦你有这个工作替换 alert(it working); / code>无论你想要发生什么,如果它是成功的,我假定重定向到您的图像页面。

Once you have this working replace alert("it worked"); with whatever you want to happen if it's successful, I'm presuming a redirect to your image page.

这篇关于JQuery Datepicker到PHP变量没有窗体的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆