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 });
}
Related
Here is java script section
$(function () {
CKEDITOR.replace('<%=CKEPage.ClientID %>', { filebrowserImageUploadUrl: 'Upload.ashx' });
CKEDITOR.replace('<%=CKETeznote.ClientID %>', { filebrowserImageUploadUrl: 'Upload1.ashx' }));
});
I could to solve the problem by put below code for each CKEditor control :
(CKEditor control ID).FilebrowserImageUploadUrl = "upload.ashx";
There is no need to javascript code anymore.
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 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 :)
I am updating one of my sites from asp.net with jQuery UI to use master pages.
Here is a snippet of my original code, which works w/out master pages, but not with:
$('#myCancelEventDialog').dialog({
autoOpen: false,
width: 500,
buttons: {
"Cancel This Event": function () { __doPostBack('btnCancel', ''); },
"Do Nothing": function () { $(this).dialog("close"); }
}
});
However, I see what is going on, with the master page chaging the names of the functions, and this code below fixes it for this instance.
$('#myCancelEventDialog').dialog({
autoOpen: false,
width: 500,
buttons: {
"Cancel This Event": function () { __doPostBack('ctl00$ContentPlaceHolder$btnCancel', ''); },
"Do Nothing": function () { $(this).dialog("close"); }
}
});
Notice I have put the 'ctl00$ContentPlaceHolder$' prefix on the btnCancel so that the appropriate callback function is fixed.
From other threads I have read on stackoverflow, there is a better solution than patching up the code one place at a time as I have done above, but haven't quite got it right yet.
What is the general-purpose way to get jQuery UI postback functions to find the right callback function when you are using master pages like in my example above?
A quick fix could be to do the following
$('#myCancelEventDialog').dialog({
autoOpen: false,
width: 500,
buttons: {
"Cancel This Event": function () { __doPostBack("'" + $('[id$=btnvalue]')[0].id + "'", ''); },
"Do Nothing": function () { $(this).dialog("close"); }
}
});
This uses the jQuery endswith selector since the master page now means your control id have prefixes but the ending is the same. This works as long as you dont have duplicate id's dotted around which is what the asp.net team aimed to stop by prefixing nested control id's.
The downside of this is that jQuery has to do more work to find the element as it cannot use the native getElementById.
Another fix would be to upgrade to asp.net 4.0 where you can turn of the prefixing of controls using the clientidmode
You will want to use the ClientID of the control you are after:
__doPostBack('<%= btnCancel.ClientID %>', '');
However, if you use this technique, you will have to enclose your script block inside a div that is exposed to the ASP.Net runtime via the runat attribute.
<div runat="server">
<script type="text/javascript" language="javascript">
//Your Script Here
</script>
</div>
It might be helpful for developers;
http://deepasp.wordpress.com/2013/05/31/jquery-dialog-in-asp-net-master-page/