ASP.NET MVC : unobtrusive-ajax for dynamically added forms - asp.net-mvc

I'm loading an Ajax Form inside a popup. the popup content is written client side.
unobtrusive-ajax is not triggered by the form. and its events are not called.
This is because of loading the Ajax Form dynamically. and unobtrusive-ajax is not binded to it.
Is there any method for binding dynamically loaded ajax forms with unobtrusive-ajax ?
Is there any way to fix that?

You need to reset validation for validating dynamically loaded form. after loading form in popup window
reset validation:
var form = $('your form');
form.removeData('validator');
form.removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse(form);

I found the problem. unobtrusive-ajax is working with dynamically added forms. and events are binded. Problem was about copying my markup inside popup and I had two items with same ID. jquery selectors was not working.
I removed my original markup (that I was copying inside popup). and everything is ok now.

Related

On ajax option partial view is loading on new window [duplicate]

I have a partial view that needs to get loaded between two div but when the ajax.actionlink is invoked it open the content in the partial view in a new browser window. I use UpdateTargetId = "ajaxReplace"
Regards
Did you include/reference all the necessary javascript files?
You say you use MVC 3.
If you have UnobtrusiveJavaScriptEnabled then you'll need:
jQuery
jquery.unobtrusive-ajax.js
if you also use client side validation, you'll need;
jquery.validate.js
jquery.validate.unobtrusive.js
These files can all be found when you create a new MVC3 project.
[OutputCache(Duration=0)]
on the controller method. I had this with an AJAX.ActionResult which worked well in FF but not in IE8. IE8 must send back some stuff that lets the caching engine just return the value.

How to check div tag contains partial view?

As we know window.onload event will fire only when the page is completely loaded.
I want to perform some action when a partial view loaded completely into div tag
how to check that?
like : $('divID').__ ??
You need something like:
$('#divID').ajaxComplete(function(){
// do something
});
That is of course providing I am correct in my assumption: that you are using both AJAX to populate the DIV and also the Unobtrusive Ajax library rather than the Microsoft MVC Ajax libraries.
If the Partial is simply rendered on page load, then $(document).ready(function(){}) will serve you well.

How to make form elements read only in GSP?

Hi i have a form in GSP and I want to make all the form elements read only after submit.
Is there any way to do it. I have form elements like textboxes, dropdowns attachment field......
I am using G:Form
I am also using java script in my GSP.
Please help me out
Thanks.
Keep in mind that even if you set the tags as readonly on the server side, users can still change them through a variety of means, and whatever the value on the form is before it gets sent back to you.
You can use an onsubmit event in the form tag, calling a JavaScript function which will disable any form elements you want to affect. Since GSP is server pages, not the browser, it will not normally be able to help you in this respect.
Certainly the easiest way is client-side with jQuery:
$(function() {
$('input, select, textarea').attr('disabled', 'disabled');
});

How to check if a <div> is valid with unobtrusive javascript

I have a form which loads a div on client side. I have hard coded textbox controls with all validation attributes, similar to what it renders when loaded from server. Inside the div there is submit button, but when I click on submit all validations messages on the form are displayed. I just need only the div elements validation messages to be shown. Telerik Grid control in ajax mode, does similar thing, i.e., appends textboxes with hardcoded validation attributes on client side, but it manages to fire validations only for the grid not entire form. I think I am missing something here.
$('#div').valid() --> doesn't work
$('#form').valid() --> works
You need to parse the validation rules of the containing form once you add the div to the DOM:
var form = $('#div').closest('form');
form.removeData('validator');
form.removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse(form);
and here's a live demo.

How can i return a form using ajax into a view ASP.Net MVC

i just started building a small test app to help me learn MVC. i have a view that displays user comments. Under each comment i would like to have a reply action link. Clicking on the link should return a small form for adding a comment directly above the reply link.
What is the general approach for this? I'm imaging the form would be a partial view that i can somehow return using the reply link. Thanks for any help!
Using jQuery to retrieve and post the forms in partial views is how I would do it.
Just return partial view to be loaded by jQuery load:
$('#comment').load('/MyController/ActionReturnsPartial');
You should not have to retrieve anything from the server if the user is not providing any extra information along with the retrieval.
Instead of retrieving the form when the user clicks, just let the page render a form below each comment. Put the form in a div with style="display: none;". Then, when the user cliks the link, use jQuery to show the form. Something like
$('.commentlink').click(function(){
$(this).closest('div').find('.formdiv').show();
});
You may also be able to use jQuery's .toggle() method.

Resources