I'm using Jquery dialogs in my Asp.net web application for all my messages.
Now I've tried to fill a listview with customers inside a dialog and its working, but I want to allow the user to use paging in the listview for choosing his customer out of the list.
When I press the button to move up 1 page, it ain't working...
Maybe it's just not possible? Or does someone have an example of paging a datacontrol in a Jquery dialog?
Greetz,
Ben
I suspect that the dialog is not being displayed after the paging postback?
You have two options:
One: Change to using a popup window with the listview so that the paging is handled in the normal way in its own page
Two: On the serverside, when rendering pages, also render a startup jQuery script that re-displays the dialog.
<div id="dialog" style="display:none;" >
<asp:listview ID="lv" runat="server" />
...etc
</div>
In code behind:
var script = new StringBuilder();
script.AppendLine("jQuery(function($) {");
script.AppendLine(string.Format(" $('#dialog').attr('Title','{0}');", dialogTitle));
script.AppendLine(" $('#dialog').dialog({ closeOnEscape: true, modal: true });");
script.AppendLine("});");
ClientScript.RegisterStartupScript(GetType(), "dialog", script.ToString(), true);
The 2nd option works!
I only added this code in codebehind:
ScriptManager.RegisterClientScriptBlock(this, typeof(Page), "openDialogScript", "$(function() { openCustomerDialog(); });", true);
And in the .aspx file I added this:
openCustomerDialog = function openDialog(){
$("#reportCustomerDialog").dialog({
modal: true,
height: 420,
width: 500,
buttons: {
Ok: function() {
$(this).dialog('close');
}
}
});
$("#dialog").show();
};
Related
I write in View inside the script tag function.When I click the menu item in view call this function.
I want rename Java script confirm() buttons . How can I do this ? I don't know how write Java script code for this condition .
I follow below code
<script type="text/javascript">
function myFunction() {
var x;
if (confirm("Press a button") == true) {
x = "You pressed Cancel";
} else {
x = "You pressed OK";
}
}
</script>
<li><a><span class="glyphicon glyphicon-log-in" onclick="myFunction()"> </span> Exit</a></li>
ANSWER
You can't control the appearance of confirm() or alert() Javascript dialogs, because they are native, consquently their design is based on the OS/browser.
What you can do:
Own Dialog
Extensions / Plugins
Use a existing dialog js
WAY TO BUILD OWN CLICK ELEMENTS
document.querySelector('#okLI').addEventListener('click', handleClick);
document.querySelector('#cancelLI').addEventListener('click', handleClick);
function handleClick(e){
var target = e.target;
var clickType = target.getAttribute("click-type");
if(clickType > 0)
console.log("CLICKED OK");
if(clickType < 0)
console.log("CLICKED CANCEL");
}
document.querySelector('#ok').addEventListener('click', clickButton);
document.querySelector('#cancel').addEventListener('click', clickButton);
function clickButton(e){
var button = e.target;
var buttonType = button.getAttribute("button-type");
if(buttonType > 0)
console.log("CLICKED OK");
if(buttonType < 0)
console.log("CLICKED CANCEL");
}
<ul>
<li id="okLI" click-type="1">OK</li>
<li id="cancelLI" click-type="-1">CANCEL</li>
</ul>
<button id="ok" button-type="1">OK</button>
<button id="cancel" button-type="-1">CANCEL</button>
You dont need to use buttons, you can add this to every element you want to click.
As you requested, please check jQuery modal dialog for this feature.
you need to include following css and JS in your page.
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Then add following script on your page.
Following script will configure a dialog for you with two buttons, "Delete" and "Cancel" and as you see both have a call back function where you can decide what to do on individual click.
<script type="text/javascript">
$( function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Delete": function() {
// YOUR LOGIC GOES HERE
$( this ).dialog("close");
},
Cancel: function() {
$(this).dialog( "close" );
}
}
});
} );
</script>
and then add following HTML on your page
<div id="dialog-confirm" title="Delete Item?">
<p>Do you want to proceed?</p>
</div>
Finally you just need to call following function, when you want to show dialog.
for example, to trigger it on a button click.. you can make it like following
<button type="button" id="btn_delete">Delete</button>
<script type="text/javascrpt">
$("#btn_delete").click(function(){
$( "#dialog-confirm").dialog( "open" );
});
</script>
You can find more details on following link.
jQuery Dialog
For javascript Confirm
You cannot rename button titles for Javascript Confirm, as it is managed by browser and there is no any library or plugin which can manipulate these components.
I am working on ASP.NET webform development. I am working with jquery fancybox to call my webpage as a popup window. Everything is working fine. But my issue comes up when I close my pop-up window and open the same page as a pop-up again, the page_load is calling multiple times.
Example: I have a button "Add User". When I click first time, it opens the pop-up and Page_load is called once. I closed the pop-up window and again click on "Add User", this time when I run Debug, it loading Page_Load method twice and again thrice and so on.
On my master page I am calling the fancybox api (Because I will be using Fancybox in my whole application)
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(FancyBoxLoad);
function FancyBoxLoad(sender, args) {
var dWidth = parseInt(500);var dHeight = parseInt(500);
$(".various").click(function() {
if ($(this).attr('href').match(/width=[0-9]+/i) != null) {
dWidth = parseInt($(this).attr('href').match(/width=[0-9]+/i)[0].replace('width=', ''));
dHeight = parseInt($(this).attr('href').match(/height=[0-9]+/i)[0].replace('height=', ''));
}
$(".various").fancybox({
maxWidth: dWidth,
maxHeight: dHeight,
fitToView: true,
width: '75%',
height: '100%',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none'
});
});
}
On my Content page I have
<div style="float: right; padding-right: 10px;">
<a id="addnew" class="various fancybox.iframe" href="">
<input class="button" value="Add User" type="button" /></a>
</div>
I have a asp.net web forms app with update panels.
and its also in a listview and I dont know if that matters or not.
I have the following Javascript..
<script lang="javascript" type="text/javascript">
function pageLoad(sender, args)
{
$(document).ready(function () {
$('textarea.epop').live('click', test);
});
function tes(event)
{
var btn = $(this);
alert(btn.val());
$('#editortext').val(btn.val());
var dialog = $('#edialog').dialog({
modal: true,
width:'auto',
resizable: false,
buttons: {
'OK': function() {
alert($('#editortext').val());
alert(btn.val());
btn.val($('#editortext').val());
$('#editortext').val("");
$(this).dialog('close');
return false;
}
}
});
// Move the dialog back into the <form> element
dialog.parent().appendTo(jQuery("form:first"));
$('#edialog').dialog('open');
return false;
}
}
</script>
Then I have this in the html body..
<div id="edialog" title="Edit SQL" style="display: none">
<label for="editortext">
SQL Query:</label>
<textarea rows="20" cols="100" id="editortext" class="editortext"></textarea>
</div>
and then in one of my list items in my list view wich is inside a update panel. I have..
<asp:TextBox ID='txtSQLQuery' CssClass="epop" TextMode="multiline" Columns="50" Rows="5" runat="server" Text='<%# Eval("SQLQuery") %>' />
code works perfect the first time with no post back.
but say I change the selection, and then a auto postback happens...
then the code no longer sets the text.. when you click ok..
using alerts I can see that its actually still referencing the old value and not the new current displayed value which seemed to invoke the click.
At this point I am stumped..
If you have your controls inside updatepanel and the update panel is set to updatemode ="condicional" you probably have to invoke updatePanel.update() from your server side code to update values.
Another thing that often happens is that the update panel and jquery are not best friends, so it will be better writing or initialize your code like this:
$(document).ready(function () {
$('textarea.epop').live('click', function(e){
test();
});
});
// register again after postback's
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
$('textarea.epop').live('click', function(e){
test();
});
})
I'm having a problem with a JQuery dialog being empty when displayed. I know what the problem is but can't figure out how to fix it. I hope to find some help here.
Issue:
I have a page with a simple list of users. Every item/user on the list has an EDIT link. When clicked edit a dialog box pops up with details for that user. Great! Sounds simple enough.
So the user list initializes the partial view that'll be a dialog box:
#Html.Partial("EditUser", new User())
That pre-loads the partial view and the dialog is initialized with a regular:
$(function () {
$("#edit-user-dialog").dialog({
title: "Edit User",
autoOpen: false,
height: 500,
width: 600,
modal: true
});
});
So far so good...
The partial view itself is a regular page with Ajax form submit that allows me to submit modified user info. Everything associated to that popup, such as its DIV, connected JScripts must be contained within just so information could be easily found later. Here is the sample code of the Partial View that will be displayed as a dialog:
#model MyNamespace.User
<script src="#Url.Content("~/myUserEditScriptScripts.js")" type="text/javascript"></script>
<div id="edit-user-dialog" style="display: none">
#using (Ajax.BeginForm("SaveUserJson", "User", new { id = Model.Id }, new AjaxOptions
{
HttpMethod = "post",
OnSuccess = "editUserSuccess()",
}))
{
<div class="display-field">
#Html.DisplayFor(model => model.Name)
</div>
.
.
.
Various controls go here...
.
.
.
<p>
<input type="submit" value="Detach" />
</p>
}
</div>
Standard stuff so far...
So when the initial list of users is loaded the "Edit users" partial view gets pre-loaded on the page but it's not visible because the div is set to display: none and it's initialized as being a dialog popup.
Next when an "edit" link is clicked next to a specific user I would like that popup to be populated with the information of that selected user.
Ajax to the rescue!
On "Edit" link click I load the partial view with the selected user data:
function editUserLoad(userId) {
$.ajax({
url: '/User/EditUser/',
data: { id: userId },
type: 'post',
datatype:'html',
success: function (data) {
$("#edit-user-dialog").html(data);
$("#edit-user-dialog").dialog('open');
}
});
}
Works great! It grabs the selected userId, jumps to my action method that returns the partial view populated with the User data I want to display.
The problem is that the dialog is displayed empty ! Well I know why. It's empty because the dialog DIV is set to "display: none". But why ? Doesn't .dialog('open'); override display: none and doesn't it suppose to show the content of the dialog even if it was hidden ?
I tried to have .show separately but it didnt work.
Help ?
Could you try this approach. Just create an empty div like following
<script type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: 'Edit User',
modal: true,
open: function(event, ui) {
//Load the Edit User partial View
$(this).load("#Url.Action("action","controller",new {ID = user_id})");
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#my-button').click(function () {
$('#dialog').dialog('open');
});
});
</script>
<div id="dialog" title="Edit User" style="overflow: hidden;">
//return partial view
public ActionResult EditUserView(int id)
{
UserModel um = new UserModel(id);
return PartialView(um);
}
THERE is a very nice example here, which you can use to
I have a issue with Jquery Modal dialog being called from a button inside an update panel..
here are the insights..
Javascript used for opening a Jquery modal dialog in aspx page..
<script type='text/javascript'>
function openModalDiv(divname) {
$('#' + divname).dialog({
autoOpen: false,
bgiframe: true,
closeOnEscape: true,
modal: true,
resizable: false,
height: 'auto',
buttons: { Ok: function () { closeModalDiv(divname) } },
open: function (event, ui) { jQuery('.ui-dialog-titlebar-close').hide(); }
});
$('#' + divname).dialog('open');
('#' + divname).parent().appendTo($('form:FrmSearch'));
$('#' + divname).css('overflow', 'hidden')
}
function closeModalDiv(divname) {
$('#' + divname).dialog('close');
}
</script>
the button in aspx page..
<asp:UpdatePanel ID="upDialogs" runat="server">
<ContentTemplate>
<asp:Button ID="btnOpenDialog" runat="server" Text="Open Dialog" onclick="btnOpenDialog_Click" />
</ContentTemplate>
</asp:UpdatePanel>
The Div which needs to be called from code behind via javascript..
<div id="ErrorDiv2" title="Error" style="visibility:hidden">
<p><span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>Please select an option among the results and try again!</p>
</div>
Finally the code behind ..
protected void btnOpenDialog_Click(object sender, EventArgs e)
{
if (ProfileID == null)
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "ErrorDivOpen", "document.getElementById('ErrorDiv2').style.visibility = 'visible';", true);
Page.ClientScript.RegisterStartupScript(this.GetType(), "ErrorDivShow", "openModalDiv('ErrorDiv2');", true);
}
}
Now the Issue in detail..
Without the update panel the modal dialog pops very fine but makes full post back..
I want to have only a partial post back and hence am using a update panel..
The following are the solutions I have tried..
Added update panel to the existing div, dint work.
added an update panel along with runat="Server" for the div, still dint work..
Can any one help me with possible solutions?
Thanks for your quick reply but I found another solution.
I added both update panel and runat parameters to the Div.
<asp:UpdatePanel ID="upErrorDiv" runat="server"><ContentTemplate>
<div runat="server" id="ErrorDiv2" title="Error" style="visibility:hidden">
<p><span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>Please select an option among the results and try again!</p>
</div>
</ContentTemplate></asp:UpdatePanel>
Changed the code behind as.
if (ProfileID == null)
{
ScriptManager.RegisterStartupScript(ErrorDiv2,this.GetType(), "ErrorDivOpen", "document.getElementById('ErrorDiv2').style.visibility = 'visible';", true);
ScriptManager.RegisterStartupScript(ErrorDiv2,this.GetType(), "ErrorDivShow", "openModalDiv('ErrorDiv2');", true);
return;
}
Could you try injecting the javascript into a Literal control inside UpdatePanel, istead registering it with ClientScriptManager ?
Kris