在AJAX加载数据时使用Summer note插件显示动态内容下拉列表

时间:2019-01-28 15:36:23

标签: javascript mysql ajax summernote

我想使用夏季笔记编辑器在下拉列表中显示动态内容,同时借助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);
            }
        });
    }

感谢@

0 个答案:

没有答案