在ajax發佈之後初始化jscolor帖子，重置形式

如何在ajax帖子之後運行jscolor，將表單元素重置爲默認值？在ajax發佈之後初始化jscolor帖子，重置形式

下面的ajax成功發佈到頁面中的iframe，並在您單擊「恢復默認值」按鈕時將頁面窗體值恢復爲默認值。問題是具有jscolor的輸入不會將其背景顏色更改爲其默認值。

我所做的研究讓我相信我需要用jscolor.init（）重新啓動jscolor;在ajax後，但我不能得到它的工作。我也嘗試在ajax文章之外創建一個函數（重置表單值然後jscolor.init（）;），並將它綁定到onclick的「恢復默認」按鈕，但這不起作用。

如何讓jscolor在ajax文章後重新運行？

的Javascript：

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#restore_form').click(function() { 
     $.ajax({ 
      data: $('#build_form').serialize(), 
      type: $('#build_form').attr('method'), 
      url: $('#build_form').attr('action')+'?type=restore', 
      success: function(response) { 
       $('#preview').contents().find('html').html(response); 
       $('#build_form')[0].reset(); 
       jscolor.init(); 
      } 
     }); 
     return false; 
    }); 
}); 
</script>

HTML：

<iframe id="preview" src="preview.php" width="100%" height="120"></iframe> 

<form id="build_form" class="build_form" action="preview.php" method="post"> 
    <input type="text" name="background_color" value="#0CA0E2" class="color {adjust:false,hash:true}" /> 
    <input id="restore_form" name="restore" type="submit" value="Restore Default" class="button" /> 
    <input id="save_form" name="submit" type="submit" value="Save Changes" class="button" /> 
</form>

來源

2012-07-25 Mark

爲什麼你不重置顏色？ – davidbuzatto 2012-07-25 04:30:46

嘗試重置顏色。看到你的標記，我認爲你的默認顏色是0CA0E2。我相信嗎？如果是這樣，你只需要（如果你使用的jscolor構造和分配新的對象到myJsColorVar VAR）：

myJsColorVar.color.fromString("0CA0E2"); // instead of jscolor.init()

在文檔，它用於：

document.getElementById("myColorInput").color.fromString("0CA0E2");

我認爲，最後一個例子對你更好，因爲我看到你沒有在JS中創建jscolor，而是應用了「color class」。

你只需要配置一個ID爲您的色彩輸入：

<form id="build_form" class="build_form" action="preview.php" method="post"> 
    <input id="myColorInput" type="text" name="background_color" value="#0CA0E2" class="color {adjust:false,hash:true}" /> 
    <input id="restore_form" name="restore" type="submit" value="Restore Default" class="button" /> 
    <input id="save_form" name="submit" type="submit" value="Save Changes" class="button" /> 
</form>

到這裏看看：http://jscolor.com/try.php#setting-color

編輯：我創建了一個自定義的jscolor。

<html> 
    <head> 
     <title>jscolor demo</title> 
    </head> 
    <body> 
     <script type="text/javascript" src="jscolor.js"></script> 
     <script type="text/javascript"> 

      function CustomJSColor(applyIn, defaultColor, opts) { 

       this.jscolor = new jscolor.color(document.getElementById(applyIn), opts); 
       this.defaultColor = defaultColor; 
       this.jscolor.fromString(this.defaultColor); 

       this.reset = function() { 
        this.jscolor.fromString(this.defaultColor); 
       }; 

      } 

     </script> 
    <body> 
     <input id="myField"> 
     <script> 

      // the input with id "myField" will be the color picker 
      // 0099cc is the default color 
      // {} is the other options 
      var myPicker = new CustomJSColor("myField", "0099cc", {}); 

      // to reset the color you just need to call reset 
      myPicker.reset(); 

     </script> 
    </body> 
</html>

我試圖從jscolor.color繼承，但它似乎不是一個構造函數，所以我創建了一個類，有裏面一個jscolor。要重置組件的顏色，只需調用重置方法即可。注意，因爲只使用「顏色」類不會創建CustomJSColor。您需要以編程方式創建它。

來源

2012-07-25 04:33:13 davidbuzatto

我想過那個;但我將使用多種顏色輸入的相同腳本。所以我試圖避免爲每個表單寫一個特定的腳本。 – Mark 2012-07-25 04:40:49

但是每種形式的默認顏色總是相同的？ – davidbuzatto 2012-07-25 04:42:21

每種形式的每種輸入的默認顏色都不相同。 – Mark 2012-07-25 04:43:46

我知道這是一個古老的職位，但我有同樣的問題，並發現一個簡單的解決方案，假設形式的結構與類「色」

$('.color').each(function() { 
    $(this).focus(); 
}); 
$('#someotherinput').focus();

獲取焦點觸發jscolor jscolor輸入mojo並適當地設置單元格背景和文本顏色。

來源

2012-12-09 02:24:27

我發現這是一個很好的解決方案。在設定值（JavaScript）後，我將此函數稱爲：

document.getElementById('<your_id>').jscolor.importColor();

然後顯示新顏色。

來源

2017-02-01 10:38:52 Sander

在ajax發佈之後初始化jscolor帖子，重置形式

回答

相關問題