Develop Reference

Is there an event in an MVC 5 View or jquery raised when a partial view has been loaded and its elements are accessible

I have an MVC 5 view that acts as a parent view. Based on certain activities a user performs, I will load a partial view into the parent view. The partial view is loaded as part of a javascript function call. In my javascript call, I am loading my partial view with the content returned in the "data" variable below:
$.get(url, function (data) {
$('#id-ContainerForMainFormPartialView').html(data);
});
The data is written to an HTML div as follows:
<div class="container" id="id-ContainerForMainFormPartialView">
</div>
Immediately after the $.get call I run the following statement to disable a button that is part of the view that has been returned and written to the div:
$('#idAddLineItem').prop("disabled", true);
When the javascript function has completed the button is not disabled. Yet, I am able to disable the button using the same disable statement above using a button. I think that after the $.get invocation has written the partial view it is too soon to try and do something to any elements that are part of the partial view.
Is there an event I can hook into or something that will signal me when the time is right to try and do something to any of the elements of the partial view that has been loaded such as disabling a button which is what I am trying to do? Something like the javascript addEventListener() method that allows you to run code when certain events happen but in this case I need it to fire after a partial-view load is considered completely rendered and ready to use. An example would be greatly appreciated.
Thanks in advance.

Based on blex's statement the solution is as follows:
The correct way to disable a button that's part of a partial view being output:
// Correct Approach
$.get(url, function (data) {
$('#id-ContainerForMainFormPartialView').html(data);
$('#idAddLineItem').prop("disabled", true);
});
The incorrect way to disable a button that's part of a partial view being output:
//Incorrect Approach
$.get(url, function (data) {
$('#id-ContainerForMainFormPartialView').html(data);
});
$('#idAddLineItem').prop("disabled", true);
I originally had the disable statement outside the $.get call which allowed the code to run past it before the view was ready due to the asynchronous nature. Placing it inside the $.get allows it to not run until the partial view is done being output.

Reload event of ASP gridview

I am trying to fix some issues in an old asp.net application which uses ASP GridView. There are several events bound to the grid. Say sort, row click etc. I want to execute some js function after load/reload completes, (like after sort using header click etc.).
I tried
JQuery's ready function, which fires only on page load.
Placed a script block next to the grid
Placed a RegisterStartupScript in grid_sort (where DataBind happens)
none of them fires on grid reload after sort.

Server-side events always cause a full page lifecycle. But if there are UpdatePanels in the mix then you may get a partial page postback which won't trigger a page load event. Keep in mind the full page lifecycle happens regardless.
When you want to execute some client side code after handling some sort of server side event, you need a way to pass some information to the JS/jQuery after the page fully renders. Usually this is done by using 1 or more <asp:HiddenField> controls.
Typically I will set its ClientIDMode to static to make life easier on the JS side of things. So for example if you have this:
<asp:HiddenField ID="hfSomeData" runat="server" ClientIDMode="Static"
Value="Something set after handling some gridview event"
then you can do this on the javascript side to access the value:
$("#hfSomeData").val();
The following code will execute PostBackHandler based on either the jquery ready event or call from endRequest as issued by an UpdatePanel partial page update
// Handle Full Page postbacks
$(function () {
PostbackHandler(0);
});
// Handle Partial Page postbacks
// i.e. when Gridview embedded in an UpdatePanel
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function(sender, args){
PostbackHandler(1);
});
//PostBackType : 0 for Full Postback
// : 1 for Partial Postback
function PostbackHandler(PostBackType) {
var passed_in_data = $("#hfSomeData").val();
if (PostBackType === 0)
// do postback stuff
else
// do partial postback stuff
}

Delaying ASP.Net async postback until my code completes - trouble with placeholder polyfill in webforms

Because of a third-party product we're building upon, I'm forced to work in ASP.Net webforms for a web application I'm working on. The project owners are very insistent on using placeholder text in the textboxes, even though our primary userbase is running IE9, which doesn't support placeholder text in textboxes. For this reason, I'm trying to use a jQuery plugin to add this behavior. Right now I'm using Simple-Placeholder.
This would work great on an MVC style site, which does normal submits, as it binds to the form's submit function, and clears out all the placeholder text before submitting. This prevents the placeholder text from being sent back to the server.
In our WebForms project, we're using lots of UpdatePanels to prevent the entire page from refreshing all the time. This presents a problem for placeholders. These async postbacks are sending back the placeholder text to the server... so the "Name" field sends back a value of "Enter name here" for example.
So... when an async postback happens, I need to clear all the placeholder text from my textboxes before letting the postback continue.
I'm getting close to a solution. I'm adding a "beginRequest" handler that clears the placeholder text:
<script type="text/javascript">
$().ready(function () {
// add function to handle simple placeholders before async postbacks
Sys.Application.add_init(appl_init);
function appl_init() {
var pgReqMgr = Sys.WebForms.PageRequestManager.getInstance();
pgReqMgr.add_beginRequest(
$.proxy($.simplePlaceholder.preventPlaceholderSubmit, $(document))
);
}
});
</script>
However, this happens asynchronously, so the postback continues on before I'm done updating the controls on the page. As a result, the placeholder text gets sent on to the server anyway.
What I really want to do is wait for my function to return before continuing on with the postback.
I have another potential solution. I'm modifying the __dopostback function to run my code first:
<script type="text/javascript">
$().ready(function () {
__doPostBack_old = __doPostBack;
__doPostBack = function (args) {
if ($.proxy($.simplePlaceholder.preventPlaceholderSubmit, $(document))()) {
__doPostBack_old(args);
}
};
});
</script>
While this works, it smells bad... I'm concerned that there may be some other mechanism that might kick off an async postback that doesn't call __dopostback.
Hope that all made sense. Any thoughts, ideas, or insights would be appreciated.

By the time beginRequest fires PageRequestManager has already grabbed the textbox values for the AJAX request. That is why changing the textboxes in beginRequest event doesn't work.
Have you tried calling your preventPlaceholderSubmit in the initializeRequest event instead? I believe this event fires before PageRequestManager builds the request. The only problem is that the user can cancel the async postback, clearing the placeholder text without submitting the form.

CKEditor submitting empty content to the form.

I've started using CKEditor v3 few weeks ago.using it in a php project.i've been using it with jquery (using jquery adapter) and all this while using $.ajax (because can't handle for errors when using jquery form) to submit and i thought everything was alright .
So here pops up a case where i need to use normal form mechanism to submit the ckeditor content and all the other information of the form.
To my surprise the content was empty so i started google and apparently it's a known issue.
i haven't seen any thing YET that could let me post my content to php side. so i've come up with a workaround.
I know onclick will always fire before the onsubmit so i've written this.
function returntoSubmit(){
myForm = document.forms[0];
myForm.elements["content"].value = $("#content").val();// note that the textarea name and id are all the same "content"
}
// html here
<input type="submit" value="Save" onclick="returntoSubmit()" />
that does the work for me.But truly and a little uncomfortable with this, isn't there any better method to solve this issue?
Thanks

I'm running a large application with some nasty legacy code and needed something that worked across the whole app as non-intrusively as possible. In my case it wasn't feasible to listen for submits on each page individually, and even when I did I occasionally had race conditions where the submit still occurred before the click event code had a chance to do it's thing. The following seems to do the trick for me when ran after page load at a global scope:
for(var i in CKEDITOR.instances) {
CKEDITOR.instances[i].on('blur', function() { this.updateElement(); });
}

May this help
CKEDITOR.instances[content].getData()

Just ran across this problem too... it seems that the best way to update all the textareas is:
for(var i in CKEDITOR.instances) CKEDITOR.instances[i].updateElement();
http://cksource.com/forums/viewtopic.php?f=11&t=15877

I have actually added my own twist that works nicely as I was having trouble today with the same issue.
I used your function call, but instead do this i give my textarea the ID of ckeditor:
function returnToSubmit() {
$('#ckeditor').val(CKEDITOR.instances['ckeditor'].getData();
}

I used this in a jquery ready event for all forms:
$('form').on('submit',function(){
for(var i in CKEDITOR.instances) {
CKEDITOR.instances[i].updateElement();
}
});
Later I add another specific form submit event handler to do the actual custom submit logic for each form.

Trigger a page change based on a textbox edit

My problem is that, I want to call a code behind function from a JS. So that I can implement TextBox on Click event. I am NEW in JS so bear with me on this one...What I heard is that from the client side scripting you cannot call anything to the server (code behind). Here is my code:
<script type="text/javascript">
function callCodeBehind() {
<% txtAgentName_TextChanged(); %>
}
</script>
This is my Textbox:
<asp:TextBox ID="txtAgentName" runat="server" Onclick = "callCodeBehind()"></asp:TextBox>
This is my code behind:
protected void txtAgentName_TextChanged()
{
}
This function is getting fired on Page_Load(), which I don't want it to.
All I want is that to call this function txtAgentName_TextChanged() when user clicks on txtAgentName textbox.
Help!

For simplicity, you can use page methods. Check below articles for exact instructions.
Using Page Methods in ASP.NET AJAX
Using jQuery to directly call ASP.NET AJAX page methods

I think what you are looking for is AJAX. Check out the sample in the link.

You CAN call code behind from server using AJAX and jQuery library, just google it. e.g.
http://blogs.sitepoint.com/ajax-jquery/
A second issue is that the btn.click() will not work cross-browser.

you can insert a code behind method like this:
<% method(); &>