I am new to MVC4 and trying to call a partial view to display a pop up to add details. I have a search view which has a link to upload check details. The view and controller for check upload is different than search controller. The action link click event fires when I open the link in new tab (using mouse right click) but the action link does not work when I click on it.Kindly let me know what I am missing. Thanks in advance.
#Html.ActionLink("Upload Check", "CheckUpload", "Transaction", new { #sbiCustSid = Convert.ToString("1"), ordrID = "1", checkDetailID = Convert.ToString("1") }, new { #class = "chkupldlink" })
Updating the answer:
I have a class chkupldlink which loads the pop up.
$(".chkupldlink").click(function () {
loadurl = $(this).attr('href');
$("#dialog-confirm").dialog('open');
return false;
});
Added the div and works fine.
<div id="dialog-confirm">
</div>
You are implementing pop up in wrong way just do as :
$(".chkupldlink").click(function (e) {
e.preventDefault();
loadurl = $(this).attr('href');
//make a ajax call here and get html from partial view and append html in your div
$("#dialog-confirm").dialog('open');
});
Related
I saw similar questions but unfortunately did not find an answer I was looking for.
I have Kendo Confirmation dialog that I need to be displayed under a certain condition when clicking on an "Update" button:
<button class="k-button k-primary" id="btnSave" type="button" #*name="action:Save"*# onclick="CheckSplitCondition()">Update</button>
function CheckSplitCondition()
{
var newResolvedAmount = $('#ResolvedAmount').val();
var isSplit;
var diff = #Model.Amount - newResolvedAmount;
var msg = "Difference between Resolve Amount and Ticket Amount is:" + diff + ".\nThis Amount is going to be put in newly created ticket.\nPress 'OK' to proceed, press 'Cancel' otherwise.\n";
var dispResult = $("#displayResults");
if ((Math.abs(newResolvedAmount) <= Math.abs(#Model.Amount)) && newResolvedAmount != 0) {
//$("#displayResults").css("display", "block");
$("#displayResults").kendoConfirm({
width: "400px",
title: "Alert",
closable: true,
modal: true,
content: 'Are you sure?',
okText: "OK"
}).data("kendoConfirm").result.done(function () { SaveData(); }).fail(function () { alert('2') });
}
else {
SaveData();
}
}
After clicking on "Cancel", confirmation box is not showing and I have JavaScript error telling
"Unable to get property 'result' of undefined or null reference"
Not sure why that happens.
Kendo Confirm is based on Kendo Dialog, which according to the documentation removes the HTML elements from the DOM when it is destroyed:
destroy
Destroys the dialog and its modal overlay, if necessary. Removes the widget HTML elements from the DOM.
This is why it only works the first time around, and you receive a null reference on the second pass because the <div> no longer exists. This behaviour is typical of Kendo widgets which have been destroyed.
The quickest solution would be to call the kendo.confirm() method, as in this demo. Unfortunately, that is a very simple helper method which only allows you to specify the message text as an argument.
Alternatively, you could use jQuery to create a new <div> each time, and then turn that into a Dialog like so (which retains the flexibility to completely customise the Dialog):
var confirmDialog = $('<div />').kendoConfirm({
content: "Are you sure that you want to proceed?",
title: "Custom Title"
}).data('kendoConfirm').open();
confirmDialog.result.then(function () {
kendo.alert("You chose the Ok action.");
}, function () {
kendo.alert("You chose to Cancel action.");
});
Hope this helps.
I have a bootstrap modal dialog on which I have a textbox that I want to leverage the functionality of jQuery UI Autocomplete widget. However the autocomplete widget isn't being fired at all. I know this as I placed a breakpoint on the action on my controller that should return the Json to be rendered by the autocomplete textbox. The action is never hit
Out of curiosity that I was doing something wrong, I copy pasted the textbox onto a View and to my dismay, the breakpoint on my action in the controller is hit. I have narrowed this down to the fact that may be the textbox is never wired to use the autocomplete feature once the DOM has loaded.
Here is the textbox on my modal
<input type="text" name="someName" id="autocomplete" data-autocomplete-url="#Url.Action("Autocomplete", "warehouses")" />
Here is the action method that returns the Json
public ActionResult Autocomplete(string term)
{
string[] names = { "Auma", "Dennis", "Derrick", "Dylan", "Mary", "Martha", "Marie", "Milly", "Abel", "Maria", "Bergkamp", "Arsene", "Alex", "Mwaura", "Achieng" };
var filtered = names.Where(a => a.IndexOf(term, StringComparison.OrdinalIgnoreCase) >= 0);
return Json(filtered, JsonRequestBehavior.AllowGet);
}
And here is how I wire up the textbox to use the autocomplete widget
$(document).ready(function () {
$('#autocomplete').autocomplete({
source: $(this).data('autocomplete-url'),
data: {term: $(this).val() }
});
});
I have seen similar questions asked but none of them was due to the action not being hit.
As per the documentation for Bootstrap 3, they expose a set of events that you can hook into with most of their JS features.
In this case the events are:
show, shown, hide, hidden and loaded
The following code will initialize your autocomplete input field after the modal has been shown. (replace myModal with the id of the modal you are going to show)
$(document).ready(function () {
$('#myModal').on('shown.bs.modal', function (e) {
$("#autocomplete').autocomplete('destroy'); //remove autocompete to reattach
$('#autocomplete').autocomplete({
source: $(this).data('autocomplete-url'),
data: {term: $(this).val() }
});
});
});
If you are fetching a partial that contains the input field and appending it to the modal during the toggle, it will be better to do this initialization in the callback from that ajax request.
I know there are a lot of questions that cover jquery mobile / knockoutjs integration, however I couldn't find a thread that solved my issue. I have a master view model which contains child view models, and so I initialize this on page load, as that event is only fired on application load:
var viewModel = null;
$(function () {
console.debug("running init");
viewModel = new ViewModel();
ko.applyBindings(viewModel);
});
This works great on the first page of my app, however when I go to a child page, the knockoutjs content doesn't show up because jquery mobile has loaded the html dynamically and knockout doesn't know to update the binded content. I'm trying to tell it to update dynamically by using the $(document).delegate function, however I'm struggling with how it's supposed to be implemented.
<ul id="speeding" data-role="listview" data-bind="foreach: speeding.items">
<li>
<h3 class="ui-li-heading" data-bind="text: Address"></h3>
<p class="ui-li-desc" data-bind="text: Address2"></p>
<p class="ui-li-desc" data-bind="text: PrettyDate"></p>
<p class="ui-li-aside" data-bind="text: SpeedMph"></p>
</li>
<script type="text/javascript">
var loaded = false;
$(document).delegate("#page-speeding", "pagebeforecreate", function () {
if (!loaded) {
loaded = true;
ko.applyBindings(viewModel);
}
else {
$("#speeding").trigger("refresh");
}
});
</script>
</ul>
I'm putting the delegate function within the page it's being called on, as apparently that's a requirement of using delegate. Then on first load of this child page I call ko.applyBindings (I only wanted to call this on application load but I couldn't get trigger("create") to work. On subsequent calls it would call trigger("refresh") (which doesn't work for me.) The issue though is that the delegate function gets added each time I go to the child page. So on first load of the child page, it will call the delegate callback function once. If I go back to the main page, then back to the child page, it will call the delegate callback twice, and so on.
Can someone please provide guidance of the recommended approach to refreshing the knockoutjs bindings on child pages?
This is what ended up working for me. I have no idea if there's a better way or not...
var viewModel = null;
$(function () {
console.debug("running init");
viewModel = new ViewModel();
ko.applyBindings(viewModel);
var pages = [
"scorecard", "speeding", "leaderboard"
];
_.each(pages, function (page) {
$(document).on("pagebeforecreate", "#page-" + page, function () {
console.debug("applying " + page + " bindings");
ko.applyBindings(viewModel, $("#page-" + page)[0]);
});
});
});
with the below code, I'm able to add a page fragment to an other page. The page contains a form to be posted to a certain action method.
$("#ul-menu a").click(function () {
$.get($(this).attr("href"), function (response) {
$("#dialog-div div").replaceWith($(response));
});
return false;
})
Instead of having the form anywhere in the page, I'd like to get it as a modal JQueryUI dialog.
How can I do that.
Thanks for helping.
This will work for you. Also, I've added a better method of preventing the original click. Instead of returning false, which kills all bubbling, you should use event.preventDefault();
$("#ul-menu a").click(function (event) {
event.preventDefault();
$.get($(this).attr("href"), function (response) {
$(response).dialog({ modal : true });
});
})
You don't even need to insert the response into the page.
You can just do this:
var myDialog = $(response).dialog();
EDIT
Not the above snippet won't create a modal dialog, I assumed you know you need to pass in { modal: true } as part of your configuration.
I have the following ajax.actionlink. i want to add click event to this actionlink. How can i do that
<%= Ajax.ActionLink("text", "textaction", new { param = 1}, new AjaxOptions
{
OnSuccess = "updatePlaceholder",
UpdateTargetId = "result"
})%>
The click event handler is already added to this link because you are using the Ajax.ActionLink helper method. This click event handler will cancel the default action and send an AJAX request to the address this link is pointing to. You may try setting the OnBegin option.
And if you use jquery in your project you could have a normal link (without all the javascript added to your markup by the Ajax.ActionLink helper):
<%= Html.ActionLink(
"text",
"textaction",
new { param = 1 },
new { id = "mylink" })
%>
and then in a separate javascript file attach the click event handler:
$(function() {
$('#mylink').click(function() {
// here you could execute some custom code
// before sending the AJAX request
$('#result').load(this.href, function() {
// success function
});
return false;
});
});
This way will achieve a clear separation between your markup and javascript files. As javascript will be in separate files which will be cached by client browser you will reduce bandwidth.
You need to change the code:
$('#mylink').click(function(e) {
e.preventDefault();
....do what ever you want