前端問題請教

javascript jquery

tenno081 2019-01-02 09:25:13 ‧ 3153 瀏覽

分享至

是這樣的，這是我的一個片語的功能，然後下圖是我會用到片語功能的其中
一個頁面

能否請問，我如何做，才能按下片語時，會跑出一個視窗，然後視窗裡面會
顯示我的所有片語標題，並點選後把片語內容帶入我的交班內容?

片語前端
https://dotnetfiddle.net/mHckio

交班單
https://dotnetfiddle.net/BmZriS

看更多先前的討論...收起先前的討論...

wingkawa iT邦新手 3 級 ‧ 2019-01-02 10:06:07 檢舉

dialog?
javascript與html原生:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
jquery:
https://jqueryui.com/dialog/

tenno081 iT邦研究生 4 級 ‧ 2019-01-02 11:04:49 檢舉

你好，整體類似第一個這樣，但我還是不太懂怎麼把他實現出來，
裡面的資料都是自行添加的，那我的這狀況我該如何做?

wingkawa iT邦新手 3 級 ‧ 2019-01-02 11:35:16 檢舉

細節就參考Aka程式狗的回答吧，已經滿清楚的。
現在你先釐清你要做的每個動作流程，然後一步一步實現就行了。
1. 按下「片語」按鈕。
2. 出現Dialog視窗，視窗裡面是所有片語標題，標題可點擊（或是一個按鈕之類的）。
3. 將片語內文填入交班內容。
也就是說：
1. 片語按鈕觸發Dialog顯示
2. Dialog內的內容看是要載入頁面時就用後端先準備好，或是建議用ajax來取得。
3. Dialog的內容要可以點擊，點擊觸發暫存片語內容到javascript變數內。
4. 將暫存的東西填到交班內容的textarea內。

tenno081 iT邦研究生 4 級 ‧ 2019-01-02 11:44:33 檢舉

我後來有看到，我再想想，感謝

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

耿直小伙

iT邦新手 1 級 ‧ 2019-01-02 10:37:15

最佳解答

jquery - 提醒用戶也可以很優雅。使用jquery.ui.js客製化dialog()彈出視窗

透過dialog之類的jquery套件執行客製化彈出視窗，
我這邊提供一個實現方向。

click 片語
透過ajax帶出所有片語標題
在ajax完成後的success、complete或done(三擇一)的function內將標題塞到dialog的body
將dialog的confirm確認function改寫為將片語內容帶入交班內容(帶入方式請用片語ID帶出片語內容)
呼叫dialog()

回應 12
分享
檢舉

看更多先前的回應...收起先前的回應...

tenno081 iT邦研究生 4 級 ‧ 2019-01-02 11:43:34 檢舉

我能否請問，ajax是用onLoad這個方法嗎?

耿直小伙 iT邦新手 1 級 ‧ 2019-01-02 12:06:14 檢舉

不用onload，用這段程式碼執行到某個後端網址，讓他回傳片語的id與標題，在使用這個id跟標題輸出在dialog的body。

        $.ajax({
    　　　type: 'post', // 請求方法
    　　　url: 'akacodedog.php', // 請求網址
    　　　async: true, // 異步請求
    　　　cache: false, // 停止瀏覽器緩存加載
    　　　dataType: 'json', // 返回資料類型
    　　　beforeSend: function(jqXHR) {}, // 發送請求前執行
    　　　success: function(data, textStatus, jqXHR) {}, // 成功後執行
    　　　error: function(xhr, status, error) {}, // 失敗後執行
    　　　complete: function(xhr, status, error) {}, // 完成後執行
    　　}).done(function(data, textStatus, jqXHR){ // 無論成功、失敗皆執行
          $('#akacodedog').html(data); // 把結果輸出到#akacodedog容器
        });

耿直小伙 iT邦新手 1 級 ‧ 2019-01-02 12:09:00 檢舉

補充：你只要變更參數url，接著透過success、complete或者done的function，將data給console出來，應該就會看到你需要的資訊。

小魚 iT邦大師 1 級 ‧ 2019-01-02 13:31:53 檢舉

如果要用ajax另外還要在後端寫API

tenno081 iT邦研究生 4 級 ‧ 2019-01-02 14:22:58 檢舉

要到後端喔!我一直以為只要純前端就好，這樣是我需要到
controller那裏寫些什麼嗎?
目前我的畫面大概長這樣

 $.ajax({
        type: 'post',
        url: '/Center/HDPharse/HDPharseList',
        async: true, 
        cache: false, 
        dataType: 'json', 
        success: function(data, textStatus, jqXHR) {}, 
    })
    $('#HDPharseList').html(data);

耿直小伙 iT邦新手 1 級 ‧ 2019-01-02 15:45:01 檢舉

問題得回到源頭，你的「片語」資料來自哪裡？是資料庫還是寫死的固定資訊？

tenno081 iT邦研究生 4 級 ‧ 2019-01-02 16:03:52 檢舉

資料庫的，別的Table的，而我片語這邊本身也能做CRUD相關
順想請問一下，我的是C#，那我這邊可以用Ajax.BeginForm
這個方法嗎?

耿直小伙 iT邦新手 1 級 ‧ 2019-01-02 16:12:06 檢舉

關於C#的問題需要其他人幫你解決了。

但若是片語資料建在資料庫，那麼controller的工作是透過sql將片語取出來，若不懂sql語法的話可能要在爬文一下了喔！這跟你現在做的前端頁面差很多，或者你們公司內有專門的負責人員可以請教一下sql怎麼取資料，在將片語資料回傳到前端給dialog使用。請求資料的步驟大概是這樣：

click片語向controller請求資料
在controller使用sql語法取出片語的資料
在controller回傳資料到前端的ajax給dialog()使用

tenno081 iT邦研究生 4 級 ‧ 2019-01-02 16:25:40 檢舉

這樣1跟2的功能有點像查詢吼?

耿直小伙 iT邦新手 1 級 ‧ 2019-01-02 16:59:43 檢舉

是查詢沒錯，使用select撈出片語資料。

tenno081 iT邦研究生 4 級 ‧ 2019-01-02 18:01:31 檢舉

如果是這樣的話我可否沿用原本就有的功能呢?
這是我片與維護用的查詢相關功能
controller

 public ActionResult HDPharseList(HDPharseQueryViewModel model)
        {
            HDPharseService hpsrvc = new HDPharseService();
            model.pharses = hpsrvc.FindPharse(SessionUserInfo().CID,model.OPERATING,model.TITLE);
            if (model.pharses == null) model.pharses = new List<HDPharseDto>();
            model.OperatingOptions = GetOperatingOptions();
            return View(model);
        }

service

  public List<HDPharseDto> FindPharse(string cid ,string operating,string title)
        {
            var query = (from x in _repo.HD_PHARSE
                         where (x.CID == cid ) &&
                               (operating == null || operating.Trim().Equals("") ||x.OPERATING.StartsWith(operating) )&&
                               (title == null || title.Trim().Equals("")|| x.TITLE.StartsWith(title))
                         select new HDPharseDto
                         {
                             GUID =x.GUID,
                             CID=x.CID,
                             OPERATING =x.OPERATING,
                             HOSOUT=x.HOSOUT,
                             DIVISION=x.DIVISION,
                             USERNAME =x.USERNAME,
                             TITLE =x.TITLE,
                             PHARSE_CONTENT=x.PHARSE_CONTENT,
                             STATUS=x.STATUS,
                             CRE_DATE=x.CRE_DATE,
                             CRE_UID=x.CRE_UID,
                             MOD_DATE=x.MOD_DATE,
                             MOD_UID=x.MOD_UID
                         }).ToList<HDPharseDto>();
            foreach(HDPharseDto dto in query)
            {
                dto.Name = _repo.EMPLOYEE.Where(x => x.CID == dto.CID && x.EMP_ID == dto.USERNAME).FirstOrDefault<EMPLOYEE>().EMP_NAME;
            }

            return query;                                                      
        }

如果是這樣的話我可否沿用原本就有的功能呢?
這是我片與維護用的查詢相關功能
controller
```
 public ActionResult HDPharseList(HDPharseQueryViewModel model)
        {
            HDPharseService hpsrvc = new HDPharseService();
            model.pharses = hpsrvc.FindPharse(SessionUserInfo().CID,model.OPERATING,model.TITLE);
            if (model.pharses == null) model.pharses = new List<HDPharseDto>();
            model.OperatingOptions = GetOperatingOptions();
            return View(model);
        }
```
service
```
  public List<HDPharseDto> FindPharse(string cid ,string operating,string title)
        {
            var query = (from x in _repo.HD_PHARSE
                         where (x.CID == cid ) &&
                               (operating == null || operating.Trim().Equals("") ||x.OPERATING.StartsWith(operating) )&&
                               (title == null || title.Trim().Equals("")|| x.TITLE.StartsWith(title))
                         select new HDPharseDto
                         {
                             GUID =x.GUID,
                             CID=x.CID,
                             OPERATING =x.OPERATING,
                             HOSOUT=x.HOSOUT,
                             DIVISION=x.DIVISION,
                             USERNAME =x.USERNAME,
                             TITLE =x.TITLE,
                             PHARSE_CONTENT=x.PHARSE_CONTENT,
                             STATUS=x.STATUS,
                             CRE_DATE=x.CRE_DATE,
                             CRE_UID=x.CRE_UID,
                             MOD_DATE=x.MOD_DATE,
                             MOD_UID=x.MOD_UID
                         }).ToList<HDPharseDto>();
            foreach(HDPharseDto dto in query)
            {
                dto.Name = _repo.EMPLOYEE.Where(x => x.CID == dto.CID && x.EMP_ID == dto.USERNAME).FirstOrDefault<EMPLOYEE>().EMP_NAME;
            }

return query;                                                      
        }
```

修改

耿直小伙 iT邦新手 1 級 ‧ 2019-01-02 21:54:54 檢舉

這樣把這些資料塞到dialog就可以囉。

登入發表回應