CODEWITHSUNDEEP
phplaraveljquery-ui
Kutumb Kutumb
Kutumb Kutumb

Reputation: 205

JQueryUI dialog not working in my laravel application

In My view file I am importing my necessary libraries as following

{{ Html::script(asset('js/jquery-1.11.0.min.js')) }}
{{ Html::script(asset('js/jquery-ui.min.js')) }}
{{ Html::style(asset('css/jquery-ui.css')) }}

Then I have the following in my view to create dialog:

<button id="hello">Click Me</button>
 <div id="dialog1" style="display:none">
    <div>
        Hello World
    </div>
</div>

And just at the bottom I have the following Script:

$(document).ready(function () {
$("#dialog1").dialog({
    autoOpen: false,
    modal: true
});
});

$("#hello").click(function() {
    $("#dialog1").dialog('open');
});

The same thing is working in jsfiddle but not in my laravel. Do i need to do anything? I am getting the the following error in the console:

Uncaught TypeError: $(...).dialog is not a function

Here is how my files are loaded

    @extends('layouts.headerfooter')
@section('content')
    {{ Html::style(asset('css/home.css')) }}
    {{ Html::script(asset('js/home.js')) }}
    <script   src="https://code.jquery.com/jquery-1.12.1.js"   integrity="sha256-VuhDpmsr9xiKwvTIHfYWCIQ84US9WqZsLfR4P7qF6O8="   crossorigin="anonymous"></script>
    {{Html::script('https://code.jquery.com/jquery-1.12.1.js')}}
    {{ Html::script('js/jquery-ui.min.js') }}
    {{ Html::style('css/jquery-ui.css') }}
<script>
 $(document).ready(function () {
$("#dialog1").dialog({
    autoOpen: false,
    modal: true
});
});

$("#hello").click(function() {
    $("#dialog1").dialog('open');
});
</script>
<div>
</div>
@endsection

Upvotes: 0

Views: 710

Answers (1)

cresjie
cresjie

Reputation: 469

it might be that your jquery-ui is customize and doesnt include dialog widget, try also putting your

$("#hello").click(function() { $("#dialog1").dialog('open'); });

inside the $(document).ready(...)

Upvotes: 1

Related Questions