JQueryUI dialog not working in my laravel application

Question

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

Is your script triggered after the JS files are loaded? Are the JS files accessible? Sounds like one of those 2 things is going on. — lesssugar
– lesssugar, Commented Mar 16, 2016 at 21:50
js files are accessible I am sure about that. But how to check whether triggering is done after js files are loaded? — Kutumb Kutumb
– Kutumb Kutumb, Commented Mar 16, 2016 at 21:53
Well, tell us where in the DOM are your JS documents and where is your script located. Or, inspect the DOM yourself. — lesssugar
– lesssugar, Commented Mar 16, 2016 at 21:54
And I have placed my scripts in a separate folder. I am loading those after the body tag and also in between the head tag. None is working — Kutumb Kutumb
– Kutumb Kutumb, Commented Mar 16, 2016 at 21:57

cresjie · Accepted Answer · 2016-03-17 01:56:23Z

1

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(...)

answered Mar 17, 2016 at 1:56

cresjie

4692 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQueryUI dialog not working in my laravel application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related