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)
Related
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'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);
I have a server side method that can take long time. I decided to display a loading process modal and for that I used this tutorial. It works fine, but my problem is the following.
I'm using jQuery UI/Tab on the same page and it contains two tabs. On postback all UI loses styles. As I understood, the problem is in UpdatePanel, and the solutions suggested is to use the function pageLoad(). But it solved my problem partially, because the last selected tab is not persisted on postback.
It worked fine before implementing the loading model process and I used the following :
$(function() {
$("#tabs").tabs({
show: function() {
var sel = $('#tabs').tabs('option', 'selected');
$("#<%= hidLastTab.ClientID %>").val(sel);
$( "#tabs" ).tabs( "option", "disabled", [<%= hidDisTab.Value %>] );
},
selected: <%= hidLastTab.Value %>
});
});
Is there any solution for this?
I have a similar problem and I sorted out using the following:
$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(load_lazyload);
load_lazyload();
}
function load_lazyload() {
//here you need to add the jquery functions related to the tabs, as well as other jquery code you may have
//i.e.
$(function () {
$(".datepicker").datepicker({ dateFormat: 'dd/mm/yy' });
});
}
Hope this helps,
UPDATE: Probably, for your specific case, it would be something like this:
$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(load_lazyload);
load_lazyload();
}
function load_lazyload() {
$(function() {
$("#tabs").tabs({
show: function() {
var sel = $('#tabs').tabs('option', 'selected');
$("#<%= hidLastTab.ClientID %>").val(sel);
$( "#tabs" ).tabs( "option", "disabled", [<%= hidDisTab.Value %>] );
},
selected: <%= hidLastTab.Value %>
});
});
}
You need to register a ClientSideScript that selects the current tab in whatever event/method that is being executed during the postback.
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 :)
So here is my button:
<div id="calculateButton" style="cursor: pointer;">
<img src="<%= VirtualPathUtility.ToAbsolute("~/img/chic/btn_calculate.gif")%>" />
</div>
And here is the javascript:
$('#calculateButton').click(function () {
alert('Calculating...');
});
When I click the button nothing happens. What am I doing wrong?
Edits:
$(document).ready(function () {
$("#prepaymentTable").bubble({ width: 400, title: 'Prepayment' });
$("#exposureTable").bubble({ width: 400, title: 'Exposure' });
$('#calculateButton').click(function () {
alert('Calculating...');
});
});
The bubble plugins both work...but not the button click...
Make sure you're attaching the click handler inside a document.ready handler, after the element has loaded, like this:
$(function() {
$('#calculateButton').click(function () {
alert('Calculating...');
});
});
If it's created later as the result of AJAX, etc, use .live(), for example:
$('#calculateButton').live('click', function () {