I have a dialog box in mvc that opens up first time but not the second time and it gives me the error that the object does not support method dialog
this is my code:
<script src="<%= Url.Content("~/Scripts/jquery-1.5.2.min.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery-ui-1.8.11.min.js") %>" type="text/javascript"></script>
$('.trigger').live('click', function (event) {
var id = $(this).attr('rel');
var dialogBox = $("<div>");
$(dialogBox).dialog({
autoOpen: false,
resizable: true,
title: 'Test Modal Dialog',
modal: true,
width: 'auto',
closeOnEscape: true,
show: "slide",
open: function (event, ui) {
$(this).load('<%=Url.Action("TabExample2","RQA")%>');
},
overlay: { backgroundColor: "#000", opacity: 0.5 }
});
$(dialogBox).dialog('open');
});
Modal Dialog
any advice on why this is happening?
Check if you don't re-referencing any jQuery libraries after you load Dialog Box.
UPDATE
To some calrification.
You should reference all needed libraries in heade section (or whatever place you want).
But to make tabs work withing DialogBox you need to write script explicity in that dialog box.
Just like any other in code jQuery script:
$(document).ready(function () {
///you tab code
});
This should work. I also had problem with not working tabs in DialogBox.
in this page you have solution and example:
http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/
and it's works :)
Related
We are working with bootstrap multiselect component in asp.net web forms application. It's works fine on first page load, but curiously, stop working after a page postback / update panel updates the content. The appearance is fine, but the behavior isn't.
Add the following code in your script section. This happens because the bootstrap control will have to be rebounded at every page load.
<script>
$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(PageLoaded)
});
function PageLoaded(sender, args) {
$(".DDLmultiple").multiselect({
includeSelectAllOption: true
});
}
</script>
Put this code in your script
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
'$('[id*=ddlProducts]').multiselect({ enableFiltering: true, filterBehavior: 'text', includeSelectAllOption: true, includeFilterClearBtn: true, selectAllText: 'Select All', nonSelectedText: 'Select Manufacturers', filterPlaceholder: 'Search Manufacturers', selectedClass: null });
}
I need someone to put me through how I can use jquery dialog to ask "Confirm" or "Cancel" validations before submit. I get Microsoft JScript runtime error: Object doesn't support property or method 'dialog' for this on IE9:
<script type="text/javascript">
$(document).ready(function () {
$("#savechanges").click(function () {
$("#dialog").dialog({
modal: true,
autoOpen: false,
buttons: {
"Confirm": function () {
$("#myformid").submit();
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
return false;
});
});
</script>
<div id="dialog"></div>
<p>
<input type="submit" id="savechanges" value="Save changes" />
</p>
If you set autoOpen as false, dialogbox doesn't open when you define it. So you should set it true.
From jQuery-UI docs,
autoOpen
When autoOpen is true the dialog will open automatically when dialog is called.
If false it will stay hidden until .dialog("open") is called on it.
DEMO
There can be multiple reason behind this issue, make use of any debug tool like firebug to check
Use a tool like Firebug for Firefox to verify each JS file is being included.
Make sure there is no other JS on the page that could cause an error.
Verify you have the correct versions of the files downloaded.
I have a dialog attached to a link that opens but closes immediately. There are no JS errors in the console. Here's the code:
JS Code
<script type="text/javascript">
$(document).ready(function(){
$( "##des-#pres_id#" ).dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$( "##link-des-#pres_id#" ).click(function() {
$( "##des-#pres_id#" ).dialog( "open" );
return false;
});
});
</script>
HTML Code
<div id="des-#pres_id#" title="Description">#description#</div>
#left(description,30)#
<cfif len(description) GT 30>
more...
</cfif>
What am i missing here?
(im using UI ver 1.7.2)
I am using a jquery dialog, but the dialog.open() does not display the dialog. (The site only works with IE 7 & 8, so I cannot see if the dialog is in fact displayed.)
I have ensured that these dependencies are available:jquery-ui.css; jquery-ui-1.8.16.custom.min.js; https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
In the markup: I creates the dialog in the document ready method:
var $dialog;
$(document).ready(function () {
$dialog = $("#dialog")
.dialog({
autoOpen: false,
title: 'My Modal Dialog',
position: 'center',
modal: true,
closeOnEscape: true,
buttons: [{ text: "Close", click: function () { $(this).dialog("close"); } }]
});
});
Another javascript function contains these lines to "open' the dialog. When I inspect the dialog, it is an Object, but I never see it.
function showDialog() {
$dialog.html("Hello World");
$dialog.dialog('open');
}
The code looks sound, and in another project I've worked on, works without a hitch. So that leaves me to think that it IS opening, but I can't see it for some reason. Has anyone encountered this, or found a solution to this?
Thank you for any help you can provide.
Have you created parent element:
<div id="dialog">..
in document ?
I'm using the following JQuery block in my DotNetNuke module:
jquery(document).ready(function (){
$( "#dialog:ui-dialog").dialog("destroy");
$( "#dialog-message").dialog({
modal: true,
buttons: {
Ok: function(){
$( this ).dialog("close");
}
}
});
});
</script>
<div id="dialog-message" title="Registration Confirmed">
I'm not sure how to redirect the user to the home page when they click the Ok button? Also, how do I wire up the dialog-message DIV to only fire when my ASP:Button is clicked?
Thanks much!!
You can put an OnClientClick on your Button and call a function that will show your modal. When the ok button is clicked you can change the window.location to the path of your homepage.
HTML
<asp:Button runat="server" ID="btn_ShowModal" OnClientClick="showModal(); return false;" />
Javascript
function showModal()
{
$( "#dialog-message").dialog({
modal: true,
buttons: {
Ok: function(){
$( this ).dialog("close");
window.location = "pathToHomepage";
}
}
});
}
Edit
There are two types of paths that can be used in javascript and in web development in general: relative paths and absolute paths.
Relative paths: start from the current directory and you access the desired location from there using '/' to go forward a directory and '../' to go backward
Absolute paths: the full url to the desired location
You can find a more thorough description here
'~/' is a sever side "shortcut" that unfortunately does not work on the client side without using something like this.ResolveClientUrl.
'<%= this.ResolveClientUrl("~/default.aspx") %>'
<script type="text/javascript">
function ShowPopup(message) {
$(function () {
$("#dialog").html(message);
$("#dialog").dialog({
title: "Alert",
buttons: {
Close: function () {
$(this).dialog('close');
window.location = "home.aspx";
}
},
modal: true
});
});
};
</script>
client side
string message = "Profile Updated!!.";
ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup('" + message + "');", true);