I'm trying open a view in popup (dialog) after a click on a link, i don't find the problem:
Here is my JS code in my view:
<script type="text/javascript">
$.ajaxSetup({ cache: false });
$(document).ready(function () {
$(".openDialog").on("click", "a", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this).attr("data-dialog-id"))
.appendTo("body")
.dialog({
title: $(this).attr("data-dialog-title"),
close: function () {
$(this).remove();},
modal: true,
height: 500,
width: 700
})
.load(this.href);
});
$(".close").on("click", "a", function (e) {
e.preventDefault();
$(this).closest(".dialog").dialog("close");
});
});
</script>
And here is my link in the same view:
#Html.ActionLink("Exports",
"List",
new { id = Model.Orga_Id },
new {
#class = "openDialog",
data_dialog_id="exportDialog",
data_dialog_title="Tous les exports"
})
All the code is of this view and the code of the view i'd like to show in the dialog is in the same Controller.
When i click on the link, my nav only change the page like a <a href="#"..></a>
Can you see what is wrong here? Do you need more information?
I believe your problem is your click handler.
$(".openDialog").on("click", "a", function (e) {
Your ActionLink is an A tag. The javascript you are using adds a click to an anchor tag that is a child of the object with the .openDialog class. But the anchor is the object with the .openDialog class, e.g. has no child anchor to attach a click handler to.
Try just
$(".openDialog").on("click", function (e) {
Refer to JQuery Documention for .on() for more detailed examples,
http://api.jquery.com/on/
Change your code as like below,
$(".openDialog").on("click", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this).attr("data-dialog-id"))
.appendTo("body")
.dialog({
title: $(this).attr("data-dialog-title"),
close: function () {
$(this).remove();},
modal: true,
height: 500,
width: 700
})
.load(this.href);
});
Perhaps trying the .live method instead of the .on
something like
('.openDialog').live('click', function (e) {
This solved a similar issue I was having recently, granted I am relatively new to JS/jQuery
Related
When I tried to refresh my controller view my page reload itself inside of the page with this code
$(function () {
$.ajaxSetup({ cache: false });
setInterval(function () {
$('#deneme').load('/veri/index/'); }, 500);
});
How can I solve this situation I attached as png ...
i m using asp.net forms this page i m working on has a masterpage it works great when autoopen is false but when autofalse is true i dont know why it doesnt work. code is ..
$(document).ready(function () {
$("#dialog").dialog({
autoOpen: false,
appendTo: "form",
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
buttons: {
Ok: function () {
$("[id*=btnmsgOk]").click();
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
and i call this function by this..
$('<%=btnSave.ClientID %>').click(function () {
$("#dialog").dialog("open");
});
but it dosent work.
I have tried following, it is working fine. Please note that , you have missed to put # in jquery selector. It should be $('#<%=btnSave.ClientID %>').click...
$(document).ready(function() {
$("#dialog").dialog({
autoOpen: false,
appendTo: "form",
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
buttons: {
Ok: function() {
$("[id*=btnmsgOk]").click();
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
});
$("#clicktoopen").click(function() {
$('#dialog').dialog('open');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/humanity/jquery-ui.css" type="text/css" />
<div id="dialog">DIV</div>
<button id="btnmsgOk" value="btn" style="display:none">Ok</button>
<button id="clicktoopen" value="click">Click</button>
Important thing you should know while using Jquery is PostBack property
When postback occurse JQuery code will get its original values..
So you should prevent postback to see the functionality of it..
e.preventDefaults();
i used animations which delays forms to be visible so i wasnt able to see dialog but i fixed it myself. thanks for everybody who responded to it.
what I want to do is when I click the image button, a popup window has to come up in the center of the page.below code mask it but doesn't create a popup window.one more question I want to put dynamic textbox and check box according to a store procedure from sql.shall I write the table records in a hiddenfield and how can I transfer it to the popup window?? thanks
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('.btncig').click(function (e) {
e.preventDefault();
var id = $(this).attr('href');
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$('#mask').css({ 'width': maskWidth, 'height': maskHeight });
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow", 0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top', winH / 2 - $(id).height() / 2);
$(id).css('left', winW / 2 - $(id).width() / 2);
$(id).fadeIn(2000);
});
$('.window .close').click(function (e) {
e.preventDefault();
$('#mask, .window').hide();
});
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
<td>
<asp:ImageButton ID="Imagecig" class="btncig" runat="server" ImageUrl="~/Images/selection.png" style="margin-left:13px" OnclientClick=""/>
css
#mask
{
position:absolute;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window
{
position:fixed;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
#boxes #dialog
{
width:375px;
height:203px;
}
You don't say which library you are using for your popup. If you are using jQuery UI, then your code should look like this:
<script>
$(document).ready(function () {
$("#dialog").dialog({ // <-- Initialize your dialog/popup
autoOpen: false,
modal: true});
$('.btncig').click(function (e) {
e.preventDefault();
$("#dialog").dialog("open"); // <-- show your dialog/popup
});
});
</script>
You also need some html to put your fields, again you can use a number of methods to create the content dynamically, ie ajax calls etc so your html should look something like this
<div id="#dialog">
<!-- Your dynamic content goes here -->
</div>
You need to ensure that in your page you reference both the jQuery and the jQuery libraries either through CDN or locally.
I hope this helps
I'm trying to open a jQuery UI dialog from my C# ASP.NET code based on a value being outside a certain range, rather than based on a button click or other client-side event. Here's the Javascript function that should create the dialog (at the top of the .aspx page):
<script type="text/javascript">
//Total out of range dialog
function ShowRangeDialog() {
$('#rangeDialog').dialog({
modal: true,
width: 'auto',
resizable: false,
draggable: false,
close: function (event, ui) {
$('body').find('#rangeDialog').remove();
},
buttons:
{
'OK': function () {
$(this).dialog('close');
}
}
});
}
</script>
Here's the dialog div itself (at the bottom of the .aspx page):
<div id="rangeDialog" style="display: none;" title="Total out of range">
<p>
Your line items total is out of the range allowed by the approval level you chose.
Please check the approval range and adjust the line items or quantities.
</p>
</div>
And here's the section of the C# code behind that attempts to display the dialog:
if (currTotal < lowerLim || currTotal > upperLim)
{
//Show jQuery dialog telling user that their line items total is out of range
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "dlgOutOfRange",
"ShowRangeDialog();", true);
}
The code in the if block is being reached and executed if I step through it in the debugger, but the dialog isn't being displayed. What am I missing?
I modified my function slightly, based on a question/answer I found at How do I open a jQuery UI Dialog from my c# code behind?, and now it works. Here's the modified function:
<script type="text/javascript">
//Total out of range dialog
function ShowRangeDialog() {
$(function() {
$('#rangeDialog').dialog({
modal: true,
width: 'auto',
resizable: false,
draggable: false,
close: function (event, ui) { $('body').find('#rangeDialog').remove(); },
buttons: { 'OK': function () { $(this).dialog('close'); }
}
})
}).dialog("open");
}
</script>
try this
if (currTotal < lowerLim || currTotal > upperLim)
{
//Show jQuery dialog telling user that their line items total is out of range
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "dlgOutOfRange",
"ShowRangeDialog();", true);
}
You should just be calling the function name.
Also, you may want to try startupscript instead of registerclientscriptblock. You have to be sure that your script gets added AFTER the function is defined, and not before.
if (currTotal < lowerLim || currTotal > upperLim)
{
//Show jQuery dialog telling user that their line items total is out of range
Page.ClientScript.RegisterStartupScript(this.GetType(), "dlgOutOfRange",
"ShowRangeDialog();", true);
}
Good morning.
I have a modal JQuery dialog that on Open calls and loads a Partial View. Good example can be seen here https://stackoverflow.com/a/4802423/1193841 but I'll re-paste:
<script type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: 'hi there',
modal: true,
open: function(event, ui) {
//Load the CreateAlbumPartial action which will return
// the partial view _CreateAlbumPartial
$(this).load("#Url.Action("CreateAlbumPartial")");
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#my-button').click(function () {
$('#dialog').dialog('open');
});
});
In my case ActionMethod "CreateAlbumPartial" takes an ID parameter that's passed from another page with onclick="" event.
How can I make that Id available to pass to an ActionMethod when its called as shown above ? Something like
$('#dialog').dialog('open',Id)
Would be awesome but I dont think that's how it works.
P.S. Right now I'm displaying my popup by doing $.post() to load .html(data) to div and then displaying that DIV in a .show().dialog('open').
However, instead of having my Action method call and Dialog related stuff separately I would really like to re-do it the way I'm asking to keep all logic in one place.
Thank you in advance.
Why dont you make a hidden control and assign the value to that and use it in the dialog