我想使用夏季笔记编辑器在下拉列表中显示动态内容,同时借助ajax从数据库中获取数据 Mysql数据库。在这里,我已经附加了我的代码,请检查我的代码并回复您的正面反馈。
检查我的php代码:
<?php
include('../config.php');
$_POST['business_id'] = 314;
$businessdetails=$buss_obj->getBusinessDetailsByBusinessid($_POST['business_id']);
$services=$serv_obj->getAllServicesbypublic($business_id);
$addressTextBoxIdArray = array();
$i = 0;
$form_details = $intake_newform_obj -> getAllintakeforms($_POST['business_id']);
foreach($form_details as $formdisplay){
$form_id = $formdisplay['form_id'];
$form_serviceid = $formdisplay['service_id'];
$selected_service = explode(",",$formdisplay['service_id']);
if($formdisplay['internal_use_checkbox'] !=1)
{
$response['form_name'] = $formdisplay['form_name'];
$response['form_description'] = nl2br($formdisplay['form_description']);
$question_display = $intake_add_questions_obj ->getIntakeFormQuestionsDetails($form_id);
$j = 0;
foreach($question_display as $question)
{
if($question['type'] == 'address')
{
$addressTextBoxIdArray[$j] = $question['id'];
$j++;
}
}
foreach($question_display as $question)
{
$i = $i+1;
$response['form_name'] = $formdisplay['form_name'];
$response['form_description'] = $formdisplay['form_description'];
if($question['type'] == 'textbox')
{
$response['checkbox_ques'] = $question['checkbox_ques'];
$response['form_id'] = $question['form_id'];
$response['id'] = $question['id']; /** question id **/
}
}
echo json_encode($response);
}
}
?>
检查我的js文件:
文件名:summernote-email-data.js
/*Summernote Init*/
var ParametrosButton = function (context) {
var ui = $.summernote.ui;
var list = '<li id=""><strong class="text-small">Client</strong></li> <li id="%first%">First name <span class="list-align-right"> %first% </span></li> <li id="%last%">Last name<span class="list-align-right"> %last% </span></li> <li id="%phone%">Phone<span class="list-align-right"> %phone% </span></li> <li id="%email%">Email<span class="list-align-right"> %email% </span></li> <li id=""><strong class="text-small">Appointment</strong></li> <li id="%type%">Type<span class="list-align-right"> %type% </span></li><li id="%duration%">Duration<span class="list-align-right"> %duration% </span></li><li id="%time%">Date/time<span class="list-align-right"> %time% </span></li><li id="%calendar%">Calendar name<span class="list-align-right"> %calendar% </span></li><li id="%viewlink%">Link to view/edit<span class="list-align-right"> %viewlink% </span></li><li id="%paylink%">Link to pay<span class="list-align-right"> %paylink% </span></li><li id="%formslink%">Link to edit forms<span class="list-align-right"> %formslink% </span></li><li id="%export%">Link to export<span class="list-align-right"> %export% </span></li><li id="%price%">Price<span class="list-align-right"> %price% </span></li>';
var button = ui.buttonGroup([
ui.button({
className: 'dropdown-toggle',
contents: '<span class="fa fa-tags"></span> Insert Field <span class="caret"></span>',
tooltip: "Insert Field",
data: {
toggle: 'dropdown'
},
click: function(){
context.invoke("editor.saveRange");
}
}),
ui.dropdown({
className: 'drop-default summernote-list insert-field-dropdown',
contents:
$.get(
"http://cms.bicsglobal.com/Zenbookin_V1_UAT/scheduling/emailtemplate_intakeforms.php",
function(response) {
files = JSON.parse(response);
for (i = 0; i < files.length; i++)
{
var title = files[i].replace(/-|_/g, " ");
forms += '<div data-href="' + files[i] + '" style="cursor:pointer;color:blue;text-decoration:underline;margin:5px;min-width:200px;">' + title + '</div>';
}
var response = response;
var forms = 'hi';
var forms = 'response.form_name';
},'json'
),
callback: function($dropdown) {
$dropdown.find('li').each(function () {
$(this).click(function () {
var insertVal = $(this).attr('id');
var htmlData = "";
if(insertVal == "%viewlink%")
{
htmlData = '<a href="%viewlink%">change/cancel appointment</a>';
}else if(insertVal == "%paylink%")
{
htmlData = '<a href="%paylink%">pay for appointment</a>';
}else if(insertVal == "%formslink%")
{
htmlData = '<a href="%formslink%">edit forms</a>';
}
context.invoke("editor.restoreRange");
context.invoke("editor.focus");
if(htmlData == '')
{
context.invoke("editor.insertText", $(this).attr('id'));
}else{
context.invoke("editor.pasteHTML", htmlData);
}
});
});
}
}),
ui.dropdown({
className: 'drop-default summernote-list insert-field-dropdown',
contents: "<ul>"+list+forms+"</ul>",
callback: function ($dropdown) {
$dropdown.find('li').each(function () {
$(this).click(function () {
var insertVal = $(this).attr('id');
var htmlData = "";
if(insertVal == "%viewlink%")
{
htmlData = '<a href="%viewlink%">change/cancel appointment</a>';
}else if(insertVal == "%paylink%")
{
htmlData = '<a href="%paylink%">pay for appointment</a>';
}else if(insertVal == "%formslink%")
{
htmlData = '<a href="%formslink%">edit forms</a>';
}
context.invoke("editor.restoreRange");
context.invoke("editor.focus");
if(htmlData == '')
{
context.invoke("editor.insertText", $(this).attr('id'));
}else{
context.invoke("editor.pasteHTML", htmlData);
}
});
});
}
})
]);
return button.render(); // return button as jquery object
}
var AddsButton = function (context) {
var ui = $.summernote.ui;
var list = '<li id="%view%">Change/Cancel Appointment</li> <li id="%export%">Add to iCal/Outlook Calendar</li> <li id="%google%">Add to Google Calendar</li> <li id="%forms%">Edit Forms</li> <li id="%pay%">Pay for Appointment</li>';
var button = ui.buttonGroup([
ui.button({
className: 'dropdown-toggle',
contents: 'Add Button',
tooltip: "Add Button",
data: {
toggle: 'dropdown'
},
click: function(){
context.invoke("editor.saveRange");
}
}),
ui.dropdown({
className: 'drop-default summernote-list add-button-dropdown',
contents: "<ul>"+list+"</ul>",
callback: function ($dropdown) {
$dropdown.find('li').each(function () {
$(this).click(function () {
var idVal = $(this).attr('id');
var notehtmlVal = '<table cellpadding="0" cellspacing="0" border="0" align="center" style="margin-bottom:10px;"><tbody><tr><td bgcolor="" height="40" width="300" style="border:solid 1px #2ecd99;color:#2ecd99;font-family:sans-serif;border-radius:3px; margin-bottom:10px; vertical-align: middle;" align="center" valign="middle"> <a href="'+idVal+'" style="color:#2ecd99;text-decoration:none;">'+$(this).html()+'</a></td> </tr></tbody></table>';
context.invoke("editor.restoreRange");
context.invoke("editor.focus");
context.invoke("editor.pasteHTML", notehtmlVal);
});
});
}
})
]);
return button.render(); // return button as jquery object
}
$(function() {
"use strict";
$('.summernote').summernote({
height: ($(window).height() - 300),
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['fontname', ['fontname']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', /*'codeview',*/ 'help']],
['myotherbutton', ['parametros','addbutton']]
],
buttons: {
parametros: ParametrosButton,
addbutton: AddsButton,
},
callbacks: {
onImageUpload: function(image) {
uploadImage(image[0]);
}
}
});
});
function uploadImage(image) {
var data = new FormData();
var imgUrl = $('#get_url').val();
data.append("image", image);
$.ajax({
url: imgUrl+'controller/service_controller.php',
cache: false,
contentType: false,
processData: false,
data: data,
type: "post",
success: function(url) {
var image = $('<img>').attr('src', url);
$('.summernote').summernote("insertNode", image[0]);
},
error: function(data) {
console.log(data);
}
});
}
感谢@