2016-10-19 50 views
0

幫我解釋一下我要實現我會首先顯示的圖像是什麼:刷新和獲取源代碼

enter image description here

在右手邊我有一個<div>和裏面,jQuery的阿賈克斯一起注入一個HTML頁面與CSS。

我有2個問題。

  1. 當我改變文本格內,因此,例如我編輯This text can be edited by the userhello,該頁面的源代碼不更新,也許是由於它被注入。我能做些什麼來解決這個問題?可能以某種方式動態刷新用戶交互後的頁面?請給我一個例子。

  2. 第二個問題只會在第一個問題解決後纔出現,那就是如何檢索「更新」的源代碼並更新/保存該文件,以便在頁面重新加載時應用更改?

在我的數據庫我有一個文件位置即example.html的,我採取這一併注射到頁面上,但我不知道是否有可能更新該文件或文件而具有源代碼在該表它被注入到頁面上並且在更改時更新源代碼而不是更新文件。

+1

您正在尋找在錯誤的源代碼,打F12,活源可以在那裏找到。 – Teemu

+0

這是真的,這解決了問題之一。第二個問題檢索並保存源代碼或更新它 –

+0

@Joel Hinz我認爲laravel標籤是必需的,因爲我使用laravel來做這個網站,即與模板等工作,有時它是相對的 –

回答

0

不知道這是否是你想要什麼來實現的,但繼承人一個簡單的例子,你可以使用Vue的直接html插入DIV如果那是你想要什麼

注意使用{{{輸入}} }反轉義代碼的HTML

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    input: '# <div>This can be edited by the user</div>' 
 
    } 
 
});
.box{ 
 
    height: 200px; 
 
    width: 200px; 
 
    background: #cecece; 
 
} 
 

 
input{ 
 
    width: 100%; 
 
    border: none; 
 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script> 
 
<div id="app"> 
 

 
    <textarea>Comment stuff</textarea> 
 
    <button>Button</button> 
 
    <br> 
 
    <input v-model="input"> 
 
    
 
    <div class="box"> 
 
    {{input}} 
 
    </div> 
 

 
</div>

+0

我假設這樣的事情,但有一個問題,例如,如果將文本添加到文本中而無需重新加載頁面以使其保留在那裏,我怎樣才能刷新div。因此,例如當我運行頁面時,它顯示「這可以由用戶編輯」,這就是源代碼顯示的內容,所以當我使用var code = document.getElementById('content-link2')。innerHTML; console.log(code);該代碼在那裏。但是,如果我更改該文本,var代碼不會更新,因此它仍然會顯示「This ...」所以我需要一種方法來刷新div而無需重新加載頁面 –