I'm trying to create jquery dialog, but there is no use :(
here is my jQuery code:
$(document).ready(function() {
createDialog();
});
function createDialog() {
$("#dialog:ui-dialog").dialog("destroy");
$("#dialog-form").dialog(
{
autoOpen : false,
height : 475,
width : 350,
modal : true,
buttons : {
"submit" : function() {
var bValid = true;
allFields.removeClass("ui-state-error");
postText();
$(this).dialog("close");
}
},
cancel : function() {
$(this).dialog("close");
}
},
close : function() {
allFields.val("").removeClass("ui-state-error");
}
});
$(".add-org").click(function() {
$("#dialog-form").dialog("open");
});
}
here is html code:
<link href="<c:url value="/resources/styles/jquery-ui-1.8.21.custom.css"/>"
rel="stylesheet" type="text/css">
<script type="text/javascript"
src="<c:url value='/resources/js/jquery-1.7.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/jquery-ui-1.8.21.custom.min.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/myScript.js'/>"></script>
New
<div id="dialog-form" title="Add New ">
<p class="validateTips">All form fields are required.</p>
<form>
..................
</form>
</div>
and firebug says:
TypeError: $("#dialog:ui-dialog").dialog is not a function
$("#dialog:ui-dialog").dialog("destroy");
and on my page I see all the fields from the form.
so what is my problem?
Try this: Working demo http://jsfiddle.net/kEZkh/
Not sure if your source path are correct please include following scripts.
rest please feel free to play around with demo & hope it helps the cause :)
scripts
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
code
$("#forgot").click(function(e){
$("#dialog-form").dialog("open");
e.preventDefault();
});
$("#dialog-form").dialog({
modal: true,
autoOpen: false,
height: 255,
width: 300,
buttons: {
"Retrieve": function() {
document.forms["forgotform"].submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
});
Check in Firebug/DevTools if the script file was loaded successfully. If it is, type this into the console (Firebug, DevTools) or better, put that line where your other code is executed:
console.debug(jQuery.ui)
If it shows undefined, then jQuery UI was not loaded (yet). Check if your code runs before everything was loaded, put it inside jQuery's $(document).ready();. If it is an object, inspect it and check for the dialog property.
If you configured a custom build on jqueryui.com, doublecheck if you included the dialog widget.
The destroy call should be on the same element as you already used when you created the dialog, not the .ui-dialog container that gets wrapped around your content:
$("#dialog-form").dialog('destroy');
Since your current code is throwing an exception, the subsequent lines which are supposed to create the dialog never get called.
If you want to destroy every dialog that might already be open, jQuery UI handily puts a .ui-dialog-content class on each content div:
$('.ui-dialog-content').dialog('destroy');
Related
My code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/js/iziModal.min.js" integrity="sha512-8aOKv+WECF2OZvOoJWZQMx7+VYNxqokDKTGJqkEYlqpsSuKXoocijXQNip3oT4OEkFfafyluI6Bm6oWZjFXR0A==" crossorigin="anonymous"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/css/iziModal.css" integrity="sha512-pH06JFjxM84j7iRF99/Cw7d9R9m2mVmEVr8oI0kK8gVkr461DI+8OYpQctHUrbmdOH7oaRyDRkkCVlQIQCFEiQ==" crossorigin="anonymous" />
Modal
<script>
$(document).on('click', '.trigger', function (event) {
event.preventDefault();
$('#modal-iframe').iziModal('open', event); // Use "event" to get URL href
});
$("#modal-iframe").iziModal({
iframe: true,
iframeHeight: 800,
iframeURL: 'http://izimodal.marcelodolza.com'
});
</script>
Tried
switching from using iframe, button
enabling, disabling iframeURL
changing event to event.this, this (i'm a js noob)
I need help with this javascript code. I keep getting this error:
Uncaught TypeError: $(...).dialog is not a function
Code:
<script>
$(function () {
$('#tdog').dialog({
autoOpen: false,
width: 200,
modal: true,
});
});
</script>
<div id="tdog"></div>
I included the jquery import in the header. What am I doing wrong?
I'm guessing you forgot to include jquery UI.
See this answer for reference:
Error: TypeError: $(...).dialog is not a function
The script is running before the div has been loaded on the page, thus it is unavailable, add the ready function to ensure it is loaded first.
$( document ).ready(function() {
$('#tdog').dialog({
autoOpen: false,
width: 200,
modal: true,
});
});
You have to include the ui and also the styles before starting the script
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function () {
$('#tdog').dialog({
autoOpen: false,
width: 200,
modal: true,
});
});
</script>
In Laravel, I had a minified version of all the js files in /public/js/app.js being included in app.blade.php (main template page). I commented out the inclusion of app.js and the error went away, presumably because of the 'included twice' points made above.
I was wondering if someone could help me out with a bit of jquery im trying to write.
Im quite new to jQuery so this is prob something easy.
I have a div with an id of 'about-box'
I want it to slide in and out of the viewport when a menu item is pressed.
I have the following jQuery.
<script type="text/javascript">
$(document).ready(function() {
$('#menu-item-1 a').click(function() {
if($('#about-box:visible').length)
$('#about-box').hide("slide", { direction: "left" }, 1000);
else
$('#about-box').show("slide", { direction: "left" }, 1000);
});
});
</script>
But i am getting the following error message:
Uncaught TypeError: undefined is not a function
Any help getting this to work would be greatly appreciated.
I think the problem is you are not including jQuery-UI in your page, the show/hide implementation you have used requires jQuery UI
$(document).ready(function() {
$('#menu-item-1 a').click(function() {
if ($('#about-box').stop(true, true).is(':visible')) {
$('#about-box').hide("slide", {
direction: "left"
}, 1000);
} else {
$('#about-box').show("slide", {
direction: "left"
}, 1000);
}
});
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<div id="menu-item-1"><a>menu-item-1 a</a></div>
<div id="about-box">about-box</div>
You can also use jQueryUI toggle
$(document).ready(function() {
$('#menu-item-1 a').click(function() {
$('#about-box').toggle("slide", {
direction: "left"
}, 1000);
});
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<div id="menu-item-1"><a>menu-item-1 a</a></div>
<div id="about-box">about-box</div>
since document is for sure a good element the undefined is not on the ready
:visible looks good see here http://api.jquery.com/visible-selector/
So the undefined must be here $('#menu-item-1 a').click or in other code in your page or on the execution of the ready.
Try to find where . remove the if else . does the undefined throw?? if yes the $('#menu-item-1 a') doesnt resolve.
wish it help
try changing the selector to
$('#about-box').is(':visible')
$('#about-box:visible') is a wrong selector,I think you can toggle a class on about-box button and decide slide in or out
I want to make my div draggable and resizable using jquery.
Here is a simple div:
<div id="dialog-modal-alerts" title="Alerts" style="display:none;"></div>
and this is how I use jquery:
$("#dialog-modal-alerts").dialog({
height: 500,
width: 900,
title: strTitle,
resizable:true,
draggable:true,
dialogClass: "alertDialog",
//buttons: [{ text: "Ok", click: function() { $( this ).dialog( "close" ); } }],
close: function (event, ui) { closeDialog(number) },
modal: true
});
And it doesn't work.
It works if I write
$(function () {
$("#dialog-modal-alerts").draggable();
});
But if I write
$(function () {
$("#dialog-modal-alerts").resizable();
});
it's still not working
Can anybody help with my issue?
did you check this? it's by default draggable dialog and resizable
http://jqueryui.com/dialog/#modal
it's about strTitle try to remove it and add 'Title' or anything and close(number) make sure number and strTitle exists as valid variables.
i created this example i working fine:
<div id="dialog-modal-alerts" title="Alerts" style="display:none;">
Hlllo
Ahmed Alaa<br />
</div>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function () {
$("#dialog-modal-alerts").dialog({
height: 500,
width: 900,
title: 'Hi',
resizable: true,
draggable: true,
dialogClass: "alertDialog",
modal: true
});
});
My best guess is that there is something broken in one of your functions that you haven't shown us, possibly a syntax error, that keeps it from finishing the code. I say this because I can successfully execute your snippet and achieve the desired behavior. Perhaps my full pastebin will help.
Note that separately calling
$("#dialog-modal-alerts").draggable();
is expected to work, since this is a documented jquery ui method. You can mark any item as draggable, whether or not it is a modal dialog, and that's what you've done.
On the other hand,
$("#dialog-modal-alerts").resizable();
is not expected to work, since resizable is not it's own function.
am working on a html5 application that will work on both desktop,tablets and mobile devices.am stuck when it comes to using progress bars and dialog boxes.at first i had been using jquery mobile but its only until now when i want to incorporate jquery ui inorder to use progress bars and dialog pop ups is when i came to realize that the two are not working out well when used together. this is a sample code of the effect of the two plugins
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>dialogbox demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
$().lowStorageSpace();
});
$.fn.lowStorageSpace = function () {
$('<div></div>').appendTo('body')
.html('<div><h5>You are running out of space.backup or sync data before you proceed!!</h5></div>')
.dialog({
modal: true, title: 'Low storage space!!', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: true,
buttons: {
Sync: function () {
//sync();
$(this).dialog("close");
},
Backup: function () {
// backup();
$(this).dialog("close");
},
Cancel: function () {
//cancel();
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
}
</script>
</body>
</html>
the above code works well when i comment out jquery.mobile-1.2.0.min.js. but i really need it too in my complete app.
any help on how i can use the two will be appreciated.
i have seen many similar questions but non has solved my problem
thanks in advance.
This is a conflict i agree. Out of all the examples of jquery ui and jquery mobile i have seen i have not seen code showing that the two can be used on the same script. I would use two different scripts, one for ui and one for mobile. That way there should not be any conflict here.