I have an MVC view with a few dropdown lists. There is some custom validation on there that under certain conditions will show an action link by the side of the drop down list. These action links will pop up a modal window with information related to the choice made in the dropdown list.
My problem is that I can seem to see how to take the value chosen from the dropdown and get it in to my ajax request!!
Here is my code: (dropdown)
<div id="holderlist">
#Html.DropDownListFor(i => i.holderid, (SelectList)ViewData["holdersList"], "", new { #class = "chosenlist" })
</div>
(action link)
<div id="add" style="display:none;">
#Html.ActionLink("Actions", "existingOfficers", "Roles",
new { id = ?????<how do I get DDL chosen ID here> },
new { #class = "openDialog", dialog_id = "productDetail", dialog_title = "Workflow Centre" })
</div>
(ajax request)
<script type="text/javascript">
$.ajaxSetup({ cache: false });
$(document).ready(function () {
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this).attr("dialog-id"))
.appendTo("body")
.dialog({
title: $(this).attr("dialog-title"),
close: function () { $(this).remove() },
modal: true,
width: 706,
height: 300
})
.load(this.href);
});
$(".close").live("click", function (e) {
e.preventDefault();
$(this).closest(".dialog").dialog("close");
});
});
What I cant do is get the ID set to the ID of the value chosen in the DDL. The DDL value isn't at this point stored in the database as this is essentially a new input form.
Any help would be greatly appreciated :-)
jQuery(function($) {
$('.helpButton').each(function() {
$.data(this, 'dialog',
$(this).next('.helpDialog').dialog({
autoOpen: false,
modal: true,
title: 'Info',
width: 600,
height: 400,
position: [200,0],
draggable: false
})
);
}).click(function() {
$.data(this, 'dialog').dialog('open');
return false;
});
});
You can test here
Related
I want to display a pop-up box once I click the "Add Component" Link. The first time it's clicked, it will display a proper dialog box, but if I click again and again it will go that URL without the pop-up box, The pop-up box contains another view page. If I close that box, it should say "Closed", and if I click "Add Component" again the pop-up should show. Here is my JavaScript and HTML Code:
<script>
$(document).ready(function () {
$('#lnkCreate').on('click', function (e) {
var url = $(this).attr('href');
$("#dialog-edit").dialog({
title: 'Add Component',
autoOpen: false,
resizable: false,
height: 455,
width: 500,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function () {
$(this).load(url);
alert(url);
},
close: function () {
$(this).dialog('close');
alert("closed view");
}
});
});
</script>
<p style="padding-left:18em;padding-top:1em">
#Html.ActionLink("Add Component", "Create",null, new { id = "lnkCreate" })
</p>
There is a student table, if the student is pass then i want to delete the record from the table on a click on link otherwise not and for that i am checking status and showing popup. But in both the cases it is showing me both the popup.
Bellow is my anchor tag :
<a data-dialog-href="#" id="delete-#Model.StudentId" href="#" data-status="#Model.Status">Delete</i></a>
and Jquery :
<script>
jQuery('body').on('click', '[data-dialog-href]', function (e) {
var studentStatus = jQuery(this).attr('data-status');
if (studentStatus == "Completed") {
$("#dialog-delete").dialog({
resizable: false,
modal: true,
title: "Confirm Delete",
height: 250,
width: 400,
buttons: {
"Yes": function (e) {
$("dialog-confirm").css("display: block");
$(this).dialog('close');
},
"No": function () {
$(this).dialog('close');
}
}
});
}
else
{
$("#dialog-ok").dialog({
resizable: false,
modal: true,
title: "Inforamtion",
height: 250,
width: 400,
buttons: {
"OK": function () {
$("dialog-confirm").css("display: block");
$(this).dialog('close');
}
}
});
}
});
</script>
div for popup :
<div id="dialog-delete">
Are you sure you want to Delete Student?
</div>
<div id="dialog-ok">
The student is not pass, Cant Delete this student.
</div>
dialog-ok is getting executed first then dialog-delete.
Please help me out. Thanks in advance.
You are getting value in studentStatus variable and you are using status variable in the rest of your code.
I have a dialog with a WebGrid that displays a list of items:
#if (Model.ItemsByLocation != null)
{
#grid.GetHtml(
tableStyle: "table",
fillEmptyRows: true,
headerStyle: "header",
footerStyle: "footer",
mode: WebGridPagerModes.All,
firstText: "<<First",
previousText: "<Prev",
nextText: "Next>",
lastText: "Last>>",
htmlAttributes: new { id = "grid"},
columns: new []
{
//grid.Column("ItemNumber", "Item"),
grid.Column(header: "Item Number", format: (item) => Html.ActionLink((string)item.ItemNumber, "ShowItem", "Inventory", new { id = item.ItemNumber.ToString()}, new {onclick = "GetItemDetails(" + item.ItemNumber.ToString() + ");"})),
grid.Column("ItemDescription","Desc"),
grid.Column("ItemSerialNumber","SN"),
grid.Column("itemLocationSite","Site"),
grid.Column("ItemLocationBuilding","Bldg"),
grid.Column("ItemLocationFloor","Flr"),
grid.Column("ItemLocationOffice","Off"),
grid.Column("ItemTypeDescription","Type"),
grid.Column("FirstName","First"),
grid.Column("LastName","Last")
})
}
else {
<p><i>No item to display</i></p>
}
This is a dialog itself from another page - no problem with this. When I click on the link the JS function is called:
function GetItemDetails(id) {
var test = id;
$.ajax({
type: 'GET',
url: '#Url.Action("ShowItem")?id=' + id,
success: function (data) {
$("#divDetails").html(data);
$("#divDetails").dialog("open");
$("#divDetails").show();
}
});
return false;
}
This responds with another dialog on top of the first dialog, but only for a second or two and then both dialog close and the data in the second dialog is displayed full page in the browser. Any ideas why this is?
This is the dialog for the details:
$(document).ready(function () {
//debugger;
$("#divDetails").dialog({
autoOpen: false,
width: 'auto',
resizable: true,
title: 'Item Details',
modal: true,
closeOnEscape: false,
show: {
effect: 'drop', direction: 'up'
},
buttons: {
"OK": function () {
$(this).dialog("close");
}
}
}).prev("ui-dialog-titlebar").css("background", "#FF3300");
$(".dialog").click(function () {
$("#divDetails").dialog("open");
});
});
<div id="divDetails" style="display:none" class="ui-dialog-titlebar ui-widget-header">
</div>
I put some breakpoints in the code and after the second dialog is displayed the controller Index function is called. How does that happen? It does this if I remove the ShowItem from the link, But if I put that back in, it calls the ShowItem function twice. Why?
I still do not know what the problem was but if I change the webgrid column to this, it works just fine:
grid.Column(header: "Item Number", format:##item.ItemNumber.ToString()),
I just want to display following reviews which I got from my database on the Jquery UI dialog box on loading but it displays nothing:
{"results":[{"review_text":"good"},{"review_text":"not bad"},{"review_text":"great"}]}
Could you please check my code below and help me to find my mistake.
Here is my view:
<?php
$data = array(
'name' => $item_id,
'class' => 'all_reviews',
'content' => 'Reviews'
);
echo form_button($data);
?>
<div id="see_all_reviews">
<div id="load_reviews"></div>
</div>
Here is my JS file:
$(".all_reviews").click(function() {
var self = this;
var id = $(self).attr("name");
$.post('filter/get_reviews', { id: id }, function (data) {
var my_obj_review = data;
$.each(my_obj_review, function (i) {
var reviews_text = my_obj_review[i].review_text;
$("#load_reviews").text(reviews_text);
});
}, "json").error(function() { $( "#load_reviews" ).text(data.message);
});
$( "#see_all_reviews" ).dialog({
autoOpen: false,
title: "Reviews",
modal:true,
draggable:false,
width: 600,
height: 600,
close:function(){ $(this).dialog('destroy'); }
});
});
You primary issue is that your AJAX call is returning a data object not a data list. Replace:
var my_obj_review = data;
with:
var my_obj_review = data.results;
Additionally, this:
$(self).parent().find("#see_all_reviews").text(review_text);
can be replaced with this:
$("#see_all_reviews").text(review_text);
In either case, your each loop is going to replace that element with the last item in the list. Are you trying to append reviews to that div?
Finally, you may need to initialize your dialogue:
$("#see_all_reviews").dialog({
autoOpen: false,
show: "blind",
hide: "blind"
});
Here's your code refactored slightly:
$(document).ready(function() {
$(".all_reviews").click(function() {
var item_id = $(this).attr("name");
$.post('contr/get_reviews', { item_id: item_id }, function (data) {
$.each(data.results, function (n, result) {
$("#see_all_reviews").text(result.review_text);
});
// Above loop equivalent to:
$("#see_all_reviews").text(data.results[data.length-1].review_text);
}, "json")
.error(function(data) {
$("#see_all_reviews").text(data.message);
});
$("#see_all_reviews").dialog();
});
});
And here's a fully functioning fiddle: http://jsfiddle.net/klenwell/d7r7s/
I am trying to achieve something but I don't know is it possible.
I have a link that point to /ControllerName/ActionName.
When I click on it view is opened and url is like:
localhost:xxxx/ControllerName/ActionName
or
localhost:xxxx/ControllerName/ActionName/9879878927
Now, when I use JQuery UI modal dialog to display the same view it opens in modal view but url isn't changed.
Is this possible in this way that I am making? Am I on the right direction or I did something completely wrong?
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this).attr("data-dialog-id"))
.appendTo("body")
.dialog({
open: function (event, ui) {
window.setTimeout(function () {
jQuery(document).unbind('mousedown.dialog-overlay')
.unbind('mouseup.dialog-overlay');
}, 100);
},
title: $(this).attr("data-dialog-title"),
close: function () { $(this).remove() },
modal: true,
width: 600,
height: 'auto',
resizable: false, position: 'top'
}).load(this.href);
});
...
#Html.ActionLink("about", "About", "Home", null,
new { #class = "openDialog", data_dialog_id = "test" })