How to get pass id value of button to jquery dialog on button click.
I don't want to pass value using query string.Is there any way that i can directly pass value using attributes or properties of jquery dialog.
View:
<input type="button" value="Create New" class="Create" id="1"/>
Jquery:
$(".Create").on("click", function (e) {
var Id=$(this).atrr('id');
$('#Load').empty();
//overflow: visible !important;
e.preventDefault();
$('#Load').dialog({
autoOpen: true,
modal: true,
draggable: true,
resizable: false,
height: 500,
width: 600,
position: { my: "center", at: "center", of: window },
dialogClass: 'fixed-dialog',
title: 'Create New Word',
open: function (event, ui) {
$(this).load("/Dictionary/_Create");
},
//close: function (event, ui) {
// window.location.href = window.location.href;
//}
});
return false;
});
You can change this line
var Id=$(this).atrr('id'); To BTW atrr is suppose to be attr
CurrentId = $(this).attr('id'); without the var
Then in the page /Dictionary/_Create you can simple access the CurrentId variable using javascript since it's global
Related
Iam creating a button "SampleTest", which wil have to show the model data and "GoBack" button in popup window.But it displaying the content in full screen popup also overriding.Like,
i have my jquery like,
$('#SampleTest').button().click(function () {
var options = {};
options.type = "POST";
options.url = "/Dashboard/SampleTest/";
options.dataType = "json";
options.contentType = "application/json";
options.success = function (data) {
alert(data);
$(".popup").html(data);
$(".trasparentDiv").show(data);
$(".popup").show(data);
};
$.ajax(options);
});
Do i need to include any function in my jquery for popup window.Kindly tell me what to do in this case.
Please include JQuery UI script with appropriate version into your page after JQuery core script file.
Jquery UI CDN Path from JQuery: https://code.jquery.com/ui/
More help about Jquery Popup: http://jqueryui.com/dialog/
i have rewritten the code like,
function LoadSampleTest() {
alert('sample');
$("<div></div>")
.attr('id','SampleQuestionDiv')
.appendTo("body")
.dialog({
modal: true,
Close: function () {
$(this).dialog("close");
},
Width: 1000,
height: 800,
title: "Sample Test"
}).load("/dashboard/sampletest/");
Its works good.Instead of OK button, i have given close option to close the popup.
I have a jquery ui dialog that has a radio button list on it. I need to call a server side method when the user clicks ok and I need to pass the selected value. I tried doing it by calling an ajax method on and passing the selected value as a parameter. This worked great (the value was passed) but I could not access a cookie from the method (got error - Request is not available in this context), which makes sense being that this is an ajax request. Here is the code:
$("#dialogReject").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Reject": function () {
var value = $(this).find('input:checked').val();
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/myPage.aspx/RejectDocumentWM",
data: "{'rejectReason':'" + value + "'}",
dataType: "json",
success: function (data) {
alert('success');
},
error: function (result) { alert('error'); }
});
$(this).dialog('close');
},
Cancel: function () {
$(this).dialog("close");
}
}
});
RejectDocument():
[WebMethod]
public static void RejectDocumentWM(string rejectReason)
{
MyNamespace.myPage page = new MyNamespace.myPage();
page.RejectDocument(rejectReason);
}
protected void RejectDocument(string rejectReason)
{
batch batch = (batch)Session["Batch"];
if (client.RejectDocument(batch.GetCurrentDoc().icn, rejectReason, Request.Cookies["username"].Value)) //here is where I get the error
{
NextDocument();
}
}
I tried doing it by putting the value into a hidden field and then calling a button click which calls a server side method. My problem here was that the hidden field's value was always blank even though it set properly in the client script. Here is the code for that:
$("#dialogReject").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Reject": function () {
var value = $(this).find('input:checked').val();
$('[id$="hdfRejectReason"]').val(value); //this sets properly
$('[id$="btnRejectDoc"]').click();
$(this).dialog('close');
},
Cancel: function () {
$(this).dialog("close");
}
}
protected void btnRejectDoc_Click(object sender, EventArgs e)
{
batch batch = (batch)Session["Batch"];
if (client.RejectDocument(batch.GetCurrentDoc().icn, hdfRejectReason.Value, Request.Cookies["username"].Value))
//hdfRejectReason.Value is blank
{
NextDocument();
}
}
Any ideas for me? I am at my wits end.
Thanks!
First of All, is this hf is in 'popup' or in 'main page' section?
Second, in stackoverflow, we discused and set other (better?) way to set hidden field value in jQuery:
<div class="hfFoo-wrap">
<asp:HiddenField runat="server" ID="hfFoo" />
</div>
function FooBarFunction() {
var hfFoo = $('.hfFoo-wrap input[type=hidden]');
hfFoo.val('Bar');
var isBar = hfFoo.val();
}
Maybe in btnRejectDoc_Click have other 'null' or 'empty' params?
Third: I prefere FrameDialog with 'aspx' page and 'callback delegate'.
create popup as 'aspx' page
open popup from 'main page' by jQuery as jQuery.FrameDialog
close dialog from 'aspx-popup' as 'close popup' (jQuery.FrameDialog.closeDialog();)
on 'main page' catch callback delegate (with params from popup) and set hidden field there
I am quite new to JavaScript and jQuery, although I have often used jQuery UI Components, I barely made any modifications before. In this case, I needed to adjust the jQuery Slider to adjust the date, and I created something as the following: http://jsfiddle.net/ryn_90/Tq7xK/6/.
I'm happy with that so far, and now that I got the slider working as I would like it to, I would like to be able to bind a C# HiddenValue from the JavaScript attribute or from the HTML so I can save the date I have. Unless there is any better method to get this value to the backend...
So far I have been able to bind a JavaScript value from c# variables, but have not found out how to do it the other way round.
This is my javascript code:
<script>
$(function () {
$("#dialog").dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
jQuery(function() {
var dlg = jQuery("#sliderPopup").dialog({
draggable: true,
resizable: true,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
width: 320,
autoOpen: false,
minHeight: 10,
minwidth: 10
});
dlg.parent().appendTo(jQuery("form"));
});
$("#popupOpener").click(function () {
$("#dialog").dialog("open");
});
$("#sliderPopupOpener").click(function () {
$("#sliderPopup").dialog("open");
});
});
$(function () {
$("#slider").slider({
max: 30,
min: -30,
value: 0,
slide: function (event, ui) {
$("#days").val(ui.value);
$("#date").text(addDaysToDate(parseInt($("#days").val())));
},
create: function (event, ui) {
$("#date").text(addDaysToDate(parseInt($("#days").val())));
}
});
});
$("#days").val($("#slider").slider("value"));
$("#days").change(function (event) {
var data = $("#days").val();
if (data.length > -30) {
if (parseInt(data) >= 0 && parseInt(data) <= 30) {
$("#slider").slider("option", "value", data);
}
else {
if (parseInt(data) < -30) {
$("#days").val("-30");
$("#slider").slider("option", "value", "-30");
}
if (parseInt(data) > 30) {
$("#days").val("30");
$("#slider").slider("option", "value", "30");
}
}
}
else {
$("#slider").slider("option", "value", "0");
}
$("#date").text(addDaysToDate(parseInt($("#days").val())));
});
function addDaysToDate(days) {
var mths = new Array("Jan", "Feb", "Mar",
"Apr", "May", "Jun", "Jul", "Aug", "Sep",
"Oct", "Nov", "Dec");
var d = new Date(<%=deadlineYear%>, <%=deadlineMonth%>, <%=deadlineDay%>);
d.setHours(d.getHours() + (24 * days));
var currD = d.getDate();
var currM = d.getMonth();
var currY = d.getFullYear();
return mths[currM] + " " + currD + ", " + currY;
}
jQuery(function() {
var dlg = jQuery("#sliderPopup").dialog({
draggable: true,
resizable: true,
show: 'Transfer',
hide: 'Transfer',
width: 320,
autoOpen: false,
minHeight: 10,
minwidth: 10
});
dlg.parent().appendTo(jQuery("form"));
});
</script>
This is the asp.NET Code:
<div id="sliderPopup" title="Modify Deadline">
<div id="slider"></div>
<input type="text" id="days" value="0"/>
<div id="date"></div>
<asp:HiddenField ID="ModifiedDeadlineDateFromSlider" />
<asp:Button ID="DeadlineDateSave" Text="Save Deadline" runat="server" OnClick="saveDeadline" />
</div>
Please let me know if you need any more information. I would appreciate your answers and comments.
You can set the date value to the hidden field by adding just single line of code. Add the following code inside the slide event and the create event of your .slider function
$("#ModifiedDeadlineDateFromSlider").val(addDaysToDate(parseInt($("#days").val())));
or
$("#ModifiedDeadlineDateFromSlider").val($("#date").text());
Your .slider function will look like this after the modification.
$(function () {
$("#slider").slider({
max: 30,
min: -30,
value: 0,
slide: function (event, ui) {
$("#days").val(ui.value);
$("#date").text(addDaysToDate(parseInt($("#days").val())));
$("#ModifiedDeadlineDateFromSlider").val($("#date").text());
},
create: function (event, ui) {
$("#date").text(addDaysToDate(parseInt($("#days").val())));
$("#ModifiedDeadlineDateFromSlider").val($("#date").text());
}
});
});
P.S. Add the mentioned line of code to create event only if you want to set date in hidden field value on creation of slider also. If you want to set only if date is changes then just add that code in slide event only.
Note: In this particular scenerio it was not working with the changes also. So after discussion and couple of trials we discovered one more thing which was minor but created the problem. asp hidden field's property ClientIDMode was not set to static due to which its ID was changed during rendering and as a result value was not available in code behind late
Hope that helps!
To pass javascript value to c# do this way:
<script type="text/javascript">
function abc()
{
var str = "yourValue";
document.getElementById("HiddenField1").value = str;
}
</script>
and then access HiddenField1.Value on code-behind.
To pass c# variable to javascript you can bind public variable like this:
<%=this.YourVariable%>
I just recently started in Asp.Net MVC and I am just clueless at the moment. So my task is to localise text in .js files. My problem is that I can't seem to display this dialog label in my browser, the text I want to replace is "Remove A to B". I have tried using my variable 'a' by going 'this.a' in the place of this text but it doesn't work.
function Remove() {
var a = "";
this.Load = function () {
...`enter code here`
});
this.InitEventHandlers = function () {
$("#updateRemove").click(function (e) {
amplify.publish("UpdateRemove");
e.preventDefault();
});
$("#removeA").click(function () {
$("#removeA").dialog({
title: "Remove A to B",
width: 300,
autoOpen: true,
modal: true,
draggable: false,
resizable: false,
dialogClass: "RemoveB",
open: function () { $(this).appendTo("RemoveC"); }
});
});
...
you need to store the reference of 'this' because in the object inside the remove function the context is the current object.
do this:
function Remove() {
var that = this;
that.a = "";
$("#removeA").click(function () {
$("#removeA").dialog({
title: that.a,
you can read a little bit more here: http://javascript.crockford.com/private.html
Having a jQuery dialog issue. I want to leverage ajax to render calendar content in a dialog window when a person clicks the the calDayContentEntry div. The following code works on the first click, but after closing the dialog I can no longer get the dialog to show again for that entry. Other entries work the first time as well, but secondary clicks will not open the dialog again.
Here is relevant code that I am having the issue with (all within the same asp.net mvc 3 razor view). Does anyone have some tweaks that could fix this issue?
...
<div class="calDayContent">
#foreach (var content in day.Contents)
{
<div class="calDayContentEntry">
<input type="hidden" value="#content.Entry.Id" class="hiddenId" />
<div class="#content.DisplayClass">#content.Entry.Hours.ToString() hrs</div>
</div>
<div class="leaveRequestPopup"></div>
}
</div>
...
<script type="text/javascript">
$().ready(function () {
$('.calDayContentEntry').click(function () {
getAndShowDialogContents(this);
});
// Register close event for dialog if overlay is clicked
$('.ui-widget-overlay').live("click", function () {
//Close the dialog
$currentDialog.dialog("close");
});
});
function getAndShowDialogContents(entryDiv) {
var entryId = $(entryDiv).find('input[type="hidden"]').val();
var contentdiv = $(entryDiv).next('.leaveRequestPopup');
var x = $(entryDiv).position().left + jQuery(entryDiv).outerWidth();
var y = $(entryDiv).position().top - jQuery(document).scrollTop();
$.ajax(
{
type: 'POST',
url: 'Request/GetCalendarDetails',
data: { id: entryId },
success: function (result) {
$(contentdiv).html(result);
$(contentdiv).dialog({
autoOpen: false,
modal: true,
title: 'Details',
width: 400,
height: 300,
draggable: false
});
$(contentdiv).dialog("option", "position", [x, y]);
$currentDialog = $(contentdiv).dialog('open');
}
});
}
</script>
Is this a valid statement?
$currentDialog.dialog("close");
I think that at this point it is out of scope.
Maybe if you define it outside before the $().ready
var $currentDialog;
$().ready(function () {
...
You need to reset the dialog.
contentdiv.dialog("destroy").dialog(....
Note: if you do
var contentdiv = $(entryDiv).next('.leaveRequestPopup');
then contentdiv is already a jQuery object so you say something like:
contentdiv.click(function(){
//code here
});
You don't need to wrap it in $(contentdiv) again.
when you call this function:
getAndShowDialogContents(this);
It will pass as argument the raw document object, not a jQuery one, use:
getAndShowDialogContents($(this));
to pass the current jQuery object
I think the weekend added a fresh perspective on the issue. The code that works is below. Basically, instead of using a popup div for every entry, I just used one div at the end of my page. That div is reused for every dialog. I use the global variable so I can refer to it when someone clicks outside the dialog to close it. Hope this helps someone else out.
...
<div class="calDayContent">
#foreach (var content in day.Contents)
{
<div class="calDayContentEntry">
<input type="hidden" value="#content.Entry.Id" class="hiddenId" />
<div class="#content.DisplayClass">#content.Entry.Hours.ToString() hrs</div>
</div>
}
</div>
...
<div class="leaveRequestPopup"></div>
...
<script type="text/javascript">
$().ready(function () {
$('.calDayContentEntry').click(function () {
getAndShowDialogContents(this);
});
// Register close event for dialog if overlay is clicked
$('.ui-widget-overlay').live("click", function () {
//Close the dialog
$currentDialog.dialog("close");
});
$currentDialog = $('.leaveRequestPopup').dialog({
autoOpen: false,
modal: true,
title: 'Details',
width: 400,
height: 300,
draggable: false
});
});
function getAndShowDialogContents(entryDiv) {
var entryId = $(entryDiv).find('input[type="hidden"]').val();
var x = $(entryDiv).position().left + jQuery(entryDiv).outerWidth();
var y = $(entryDiv).position().top - jQuery(document).scrollTop();
$.ajax(
{
type: 'POST',
url: 'Request/GetCalendarDetails',
data: { id: entryId },
success: function (result) {
$currentDialog.html(result);
$currentDialog.dialog("option", "position", [x, y]);
$currentDialog.dialog('open');
}
});
}
</script>