Javascript Rails引导模式显示在JSFIDLE中,但不显示在Rails中
这是一个学校项目,我被卡住了。我正在尝试实现一个日历,它将在日历单元格单击时弹出对话框窗口。请注意,下面的代码是一个完全不懂rails的新手的尝试,多亏了我的大学教授。我已经把它全部塞进了一个部分,理论上应该可以很好地工作。。。这是密码Javascript Rails引导模式显示在JSFIDLE中,但不显示在Rails中,javascript,jquery,css,ruby-on-rails,ruby,Javascript,Jquery,Css,Ruby On Rails,Ruby,这是一个学校项目,我被卡住了。我正在尝试实现一个日历,它将在日历单元格单击时弹出对话框窗口。请注意,下面的代码是一个完全不懂rails的新手的尝试,多亏了我的大学教授。我已经把它全部塞进了一个部分,理论上应该可以很好地工作。。。这是密码 <div id="calendar"></div> <div id="createEventModal" class="modal hide" tabindex="-1" role="dialog" aria-labelle
<div id="calendar"></div>
<div id="createEventModal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="false">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="myModalLabel1">Create Appointment</h3>
</div>
<div class="modal-body">
<form id="createAppointmentForm" class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputPatient">Patient:</label>
<div class="controls">
<input type="text" name="patientName" id="patientName" tyle="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="["Value 1","Value 2","Value 3"]">
<input type="hidden" id="apptStartTime"/>
<input type="hidden" id="apptEndTime"/>
<input type="hidden" id="apptAllDay" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="when">When:</label>
<div class="controls controls-row" id="when" style="margin-top:5px;">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button type="submit" class="btn btn-primary" id="submitButton">Save</button>
</div>
</div>
<script>
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
defaultView: 'agendaWeek',
editable: true,
selectable: true,
//header and other values
select: function(start, end, allDay) {
endtime = $.fullCalendar.formatDate(end,'h:mm tt');
starttime = $.fullCalendar.formatDate(start,'ddd, MMM d, h:mm tt');
var mywhen = starttime + ' - ' + endtime;
$('#createEventModal #apptStartTime').val(start);
$('#createEventModal #apptEndTime').val(end);
$('#createEventModal #apptAllDay').val(allDay);
$('#createEventModal #when').text(mywhen);
$('#createEventModal').modal('show');
}
});
$('#submitButton').on('click', function(e){
// We don't want this to act as a link so cancel the link action
e.preventDefault();
doSubmit();
});
function doSubmit(){
$("#createEventModal").modal('hide');
console.log($('#apptStartTime').val());
console.log($('#apptEndTime').val());
console.log($('#apptAllDay').val());
alert("form submitted");
$("#calendar").fullCalendar('renderEvent',
{
title: $('#patientName').val(),
start: new Date($('#apptStartTime').val()),
end: new Date($('#apptEndTime').val()),
allDay: ($('#apptAllDay').val() == "true"),
},
true);
}
});
</script>
当我在本地主机上运行我的应用程序并点击手机时,我的屏幕会变暗,好像它会显示模式,但我看不到模式。我已经提到了互联网上的许多例子和以前的培训项目,我所做的一切都是徒劳的,我确实有bootsrap和jquery以及所有必要的文件包括在内。。。我甚至尝试使用scriptsrc链接,但它们只是破坏了我页面上的所有javascript。以下是指向js fiddle示例的链接:
谢谢你的帮助 开发工具控制台中是否有任何错误?gem文件中是否有:gem“jquery TurboLink”?如果您输入:alertjquery有效!作为$'document'后面的第一行。准备好了吗。。。line,它发射了吗?你看到这个问题/答案了吗:我的Gemfile中有turbolinks gem,它们之间有区别吗?。我在控制台中得到0个错误。当我刷新页面时,警报立即触发。同样是的,我昨天看了解决方案链接,但那不起作用,我得到了相同的结果。如果需要,我可以添加更多的代码。有趣的是,我去掉了一些其他的示例代码,所以它工作得很好。。。但这远远不是我想要做的。