2017-11-04 19 views
0

私のフォームでカラーピッカーを使いたいのですが、私のプロジェクトでは以下のコードを試しましたが、動作しません。私はそこcolor.Is CSSやJSファイルを含むに問題を示していない空のテキストボックスを持っ Laravelカラーピッカーが動作しません

@extends('layouts.blank') 

@push('stylesheets') 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap 
/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap- 
colorpicker/2.5.1/css/bootstrap-colorpicker.min.css" rel="stylesheet"> 

@endpush 

@section('main_container') 
<div class="main-content"> 

<!-- page content --> 
    <div id="page-wrapper"> 
    <div class="tab-pane active" id="horizontal-form"> 

    <h3 class="blank1">Vehicle Details</h3> 

      {!! Form::open(array('class' => 'form-horizontal','route' => 
      'vehicles.store','method'=>'POST')) !!} 
<script type="text/javascript"> 
    $('.colorpicker').colorpicker(); 

</script> 
<div class="row"> 
<div id="cp2" class="input-group colorpicker colorpicker-component"> 

    <input type="text" value="#00AABB" class="form-control" /> 

    <span class="input-group-addon"><i></i></span> 

</div> 
    <div class="row"> 
    <div class="form-group"> 
    <div class="col-md-6"> 
    <div class="col-xs-12 col-sm-12 col-md-12 text-center"> 
      <button type="submit" class="btn btn-primary">Submit</button> 
    </div> 
    </div> 
    </div> 
    </div> 

    {{ Form::close() }} 

</div> 
</div> 
    </div> 
    </div> 
    @endsection 
    @pushonce('custom-scripts') 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap- 
colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"> 
</script> 
    @endpushonce 

コードに何か問題?ビューブレードで

、。 どうすればこの問題を解決できますか?

+0

*「機能しません」*は意味のない問題の説明であり、投げられたエラーについては何も言及していません。私はコードが正しいかどうかでcssファイルを追加することを知らないのですか?[ask] – charlietfl

+0

@ charlietflを読む時間がありますか? – usertest

答えて

1

のようにしてください。

0

私はそれが働いた後、@yieldスクリプトを通じてスクリプトを使用していたこの

<div class="main-content"> 

<!-- page content --> 
    <div id="page-wrapper"> 
    <div class="tab-pane active" id="horizontal-form"> 

    <h3 class="blank1">Vehicle Details</h3> 

      {!! Form::open(array('class' => 'form-horizontal','route' => 
      'vehicles.store','method'=>'POST')) !!} 
<script type="text/javascript"> 
    $('#cp2').colorpicker(); 

</script> 
<div class="row"> 
<div id="cp2" class="input-group colorpicker-component"> 

    <input type="text" value="#00AABB" class="colorpicker form-control" /> 

    <span class="input-group-addon"><i></i></span> 

</div> 
    <div class="row"> 
    <div class="form-group"> 
    <div class="col-md-6"> 
    <div class="col-xs-12 col-sm-12 col-md-12 text-center"> 
      <button type="submit" class="btn btn-primary">Submit</button> 
    </div> 
    </div> 
    </div> 
    </div> 

    {{ Form::close() }} 

</div> 
</div> 
    </div> 
    </div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"> 
</script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap- 
colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script> 
+0

ありがとうございますが、動作していません。同じ結果が得られます – usertest

+0

コンソールに何かが表示され、私の回答が更新されたことを教えてください。このリンクをチェックしてください。https://github.com/farbelous/bootstrap-colorpicker/blob/master/index .html – Jinesh

+0

私のコンソールにエラーは表示されませんが、動作しません。 – usertest

0

これはうまくいきます!

<html lang="en"> 
    <head> 
     <title>Bootstrap Color Picker Plugin Example</title> 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.6/css/bootstrap-colorpicker.css" rel="stylesheet"> 
     <script src="https://code.jquery.com/jquery-2.2.2.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.6/js/bootstrap-colorpicker.js"></script> 
    </head> 
    <body> 
    <div class="container"> 
     <h1>Bootstrap Color Picker Plugin Example</h1> 
     <div id="cp2" class="input-group colorpicker-component"> 
      <input type="text" value="#00AABB" class="form-control" /> 
      <span class="input-group-addon"><i></i></span> 
     </div> 
    </div> 
    <script type="text/javascript"> 
    $('#cp2').colorpicker(); 
    </script> 
    </body> 
    </html> 
関連する問題