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
Related
I want to show DetailTemplate for Kendo UI Grid by conditions.
I tried the following cases:
detailTemplate: '#if(ResultDate!= null){ =kendo.template($("#detailRequestTemplate").html()) }#',
and
detailTemplate: function (e) {
if (ResultDate != null)
{
return kendo.template($("#detailRequestTemplate").html());
}
},
both of them don't work correctly
Try putting this logic inside the template instead.
<div id="grid"></div>
<script type="text/x-kendo-template" id="detailRequestTemplate">
#if(ResultDate !== null) {#
//...your template html
#}#
</script>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
detailTemplate: kendo.template($("#detailRequestTemplate").html()),
});
});
</script>
For a more complete example, look at this dojo.
Also take a look at Telerik's Templates Overview documentation.
I found a solution for it:
dataBound: function (e) {
var items = e.sender.items();
items.each(function () {
var row = $(this);
var dataItem = e.sender.dataItem(row);
if (ResultDate !== null) {
row.find(".k-hierarchy-cell").html("");
}
})
},
This code removes an "arrow", if condition is false
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
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);
}
I have a jquery function where upon clicking on a more link I display more information of a specified summary.
I am relatively new to jQuery and I was hoping for a pointer as to where I am going wrong as it is not working as it is.
$(document).ready(function () {
$('#more').on("click", function () {
"$('#more').hide(); $('#content').show();"
});
});
This is my C# code on code behind
topicGenerator.InnerHtml += summary.Substring(1, 100);
topicGenerator.InnerHtml += "<a href='#' id='more'> more...</a>";
topicGenerator.InnerHtml += "<div id='content' style='display:none;'>"+summary+ </div>";
Kind regards
Try changing
"$('#more').hide(); $('#content').show();"
to
$('#more').hide();
$('#content').show();
You don't need to wrap these statements in "quotations".
You could also condense .hide() and .show() into .toggle():
<script>
$(function(){
$("#more").click(function(){
$("#content").toggle();
});
});
</script>
See fiddle.
this will swap between show and hide and change the <a> to less then again more
$(document).ready(function () {
$('#more').click(function () {
$('#content').toggle();
if($('#more').html()=='more...'){
$('#more').html('less...');
}else{
if($('#more').html()=='less...'){
$('#more').html('more...');
}
}
});
});
I am developing an ASP.NET web application in which I am going to use CKEditor or any other rich text editor in the jQuery pop up, but the problem is this, I don't know anything about the jQuery pop up. I have visited this link but can't understand.
You can use jQuery UI Dialog box. To do this, just include jQueryUI in your html.
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-ui-1.8.17.min.js"></script>
You can then make the dialog using jQuery as follows:
var txt = '<div class="my-dialog-div"> <textarea id="myTextField"/></div>';
var $dialog = $(txt)
.dialog({
modal: true,
buttons: {
"Add Annotation" : function() {
// My function definition
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
var editor = CKEDITOR.instances['myTextField'];
if (editor) {
editor.destroy(true);
}
}
});
$('#myTextField' ).ckeditor();
If you want use CKEditor for Asp.net follow http://ckeditor.com/blog/CKEditor.NET_released.