javascript - 创建一个响应式且可以发布到数据库的自定义弹出窗口

标签 javascript php html laravel popup

我目前正在为我的公司开发一个使用 Laravel 框架用 PHP 编写的 Intranet 解决方案,这需要我做很多以前从未做过的新事情,其中​​之一是创建一个具有动态 html 的弹出窗口,具体取决于在这样的下拉列表中:

我有一个日历 ( http://fullcalendar.io/ ) 当我单击此日历中的某一天时,应该会显示一个弹出窗口,如下所示:

从该下拉列表中选择一个值后,应根据所选值显示一组不同的字段,例如: 或者 所以我真的需要对弹出窗口进行大量控制,我以前没有使用弹出窗口的经验(除非 javascript 中的变量的简单警报计数),并且我需要一整套功能,它还需要能够发布到数据库,所以我认为它甚至可能必须是一个表单元素。我还需要能够从日历字段中的 onclick 事件触发弹出窗口,这样对于到目前为止一直编写后端代码的人来说就变得更加困难。

那么您的问题是什么? 谁能告诉我在不丢失任何功能必需品的情况下实现这一目标的最简单/最快的方法是什么,我可以从 php 执行此操作,Laravel 框架中是否存在这样的功能?(如果存在,我找不到它)或我必须开始使用jquery之类的东西吗?

我发现了一些库,例如 Fancybox,声称能够做到这一点,但我无法从他们的使用指南中弄清楚。

对于所有认为这不属于这里的人:我唯一的问题不是“这可能吗?”我还问我该怎么做,我应该在 html、javascript、php 中编写什么才能使其工作?

编辑:我刚刚读了一些关于 jquery 对话框的内容,看起来很有趣,似乎您可以使用 jquery 对话框从 html 中的表单创建弹出窗口(表单是隐藏的),但我似乎无法获取代码要关闭弹出窗口(对话框),到目前为止我有这个:

$(document).ready(function() {
    $('#calendar').fullCalendar({        
        //calendar options here        
        dayClick: function(date, jsEvent, view) {
            //to get date use date.format());
            //POPUPCODE START
            $("#logform").dialog({                                                            //Shows dialog
                height: 250,
                width: 450,
                modal: true,
                buttons: {
                    "Cancel": function() {
                        $( this ).dialog( "close" );
                    },
                    "Save": function() {
                        $.ajax({
                            url: "/url/to/submit",                   //
                            timeout: 30000,
                            type: "POST",
                            data: $('#modalform').serialize(),
                            dataType: 'json',
                            error: function(XMLHttpRequest, textStatus, errorThrown)  {
                                alert("An error has occurred making the request: " + errorThrown)
                            },
                            success: function(data){                                                        
                                 //Do stuff here on success such as modal info      
                                     $( this ).dialog( "close" );
                            }
                        }
                    } 
                }
            }),    
            //POPUPCODE END
            var myCalendar = $('#calendar'); 
            myCalendar.fullCalendar();
            var myEvent = {
                title:"Work 7.6h",
                allDay: true,
                start: date,
                end: date
            };

            myCalendar.fullCalendar( 'renderEvent', myEvent,true );

        },
        eventClick: function(calEvent, jsEvent, view) {
            var myCalendar = $('#calendar'); 
            myCalendar.fullCalendar('removeEvents',calEvent._id);

        }    
    })

});

对于我的 html,我有:

<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">Calendar</div>

                <div class="panel-body">
                    <div id='calendar'></div>
                                        <a class='iframe' href='home.blade.php'>Click me</a>
                </div>
                                <form id="logform" style="display:none">
                                    <input type="text" name="something">
                                    <input type="text" name="somethingelse">
                                </form>
            </div>
        </div>
    </div>
</div>

只有在//popupcode start 和//popupcode end 之间添加代码后才开始出现问题,现在我的日历甚至不会显示,我得到了

SyntaxError: missing ) after argument list

它指向的地方是我的//popupcode 结尾上方的第三行:

}
                        }
                    }   //this one
                }
            }),    
            //POPUPCODE END

但是无论我添加或删除什么,我都会遇到相同的错误

最佳答案

我自己想出了这个办法,而不是通过学习各种新东西来让事情变得更难,我通过删除之前添加的所有代码并添加 1 行代码来使用 jquery 创建弹出窗口来让它工作。

我删除了用于创建弹出窗口的所有代码,并将其替换为:$("#somediv").load().dialog({modal:true});

我在表单周围创建了一个名为“somediv”的 div,现在它正在做我需要它做的事情,因为我的整个表单现在都在弹出窗口中,我很确定我可以向其中添加一个可以提交的按钮表单,这样我就可以用 php 捕获它,然后我就可以用 php 中的数据做任何我想做的事情(发布到数据库或返回错误消息等...)

关于javascript - 创建一个响应式且可以发布到数据库的自定义弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30212155/

相关文章:

javascript - D3js 图表响应

javascript - 无法从 froala 编辑器上传图像

php - 根据下拉选择更改表中的内容

android - CSS 挑战 : Background-Image with 100% height - White Space when Scrolling Mobile

html - css3 flexbox限制每行4个元素自动宽度

javascript - 创建下拉菜单

javascript - 使用 nvd3 仅绘制分组的多条字符

php - curl 错误SSL证书无法获得本地颁发者证书 - 最近的开发

html - Servlet返回“HTTP状态404请求的资源(/Servlet)不可用”

javascript - D3 条形图。值未与 Y 轴对齐