I hope I am just missing something here, but I've been tearing my hair out over trying to include scripts from a .NET MVC Partial View when using jQuery Ajax to load the view.
I have a form whose HTML gets replaced via a callback function on a jQuery ajax get request:
$.get('/My/Partial/View', function(result) {
$form.html(result);
});
The partial view contains several tags, which are not being seen by the browser. How can I use jQuery Ajax to load a partial view to the page in a way that the tags are executed?
Related
In order to make our application SPA, we have used a third party library Page.js along with ASP.NET MVC.
Page.js Reference: https://visionmedia.github.io/page.js/
We perform basically two tasks by making use of Page.js library.
First, we hit some controller/action (partial view) on MVC application & then inject the returned HTML into DOM.
Secondly, at the same time, we change the URL of the browser using this library.
All the Partial Views which we are fetching through Page.js also has the reference to <script/> tag. So whenever we inject the returned HTML into DOM, we start seeing the deprecation issue in browser's console tab.
[Deprecation] Synchronous XMLHttpRequest on the main thread is
deprecated because of its detrimental effects to the end user's
experience. For more help, check https://xhr.spec.whatwg.org/.
Application Flow:
Below picture explains the flow of our application.
Currently, all the child partial views are also having their own script & that script gets executed as soon as they are injected in DOM.
Attempted approach as a solution to fix this Deprecation issue:
On each partial view(not the child one), that is injected via Page.js library, we are writing below code to load all the dependencies asynchronously. And in the callback function (once all the dependencies are loaded), we are executing the page-specific javascript code like below.
HTML of the Page that is injected into DOM via Ajax (i.e. Page Partial View):
<div>
......
......
</div>
<!-- This part causes issue -->
<!--<script type="application/javascript" src="/script1.js"></script>
<script type="application/javascript" src="/script2.js"></script>-->
<script>
$(function () {
$.getMultiScripts(["#scriptFile1", "#scriptFile2"]).done(function () {
onPageLoad();
});
function onPageLoad() {
// 1. Defer kendo scripts
#Html.Kendo().DeferredScripts(false);
// 2. Initialize partial view 1
partialView1.init();
// 2. Initialize partial view 2
partialView2.init();
// 3. Initialize partial view 3
partialView3.init();
}
});
</script>
Important: $.getMultipleScripts was taken from here - How to include multiple js files using jQuery $.getScript() method
The script at the end of child Partial View looks like below:
<script>
window.partialView1 = (function() {
var init = function() {
// 1. Initialize partial control
tabControl.initControl();
// 2. Initialize partial control
common.bindEvents();
};
return {
init: init
};
})();
</script>
Note: For this, we have also stopped child partial views to execute the javascript code as soon as they are loaded. In fact, we are now just providing the javascript definitions (in the form of module pattern) in partial views & controlling the whole execution from the main page (parent partial view).
I know that this is not a good approach. We could have used some frontend framework. But at this stage, we can't take that decision to make the entire framework shift.
From this post, I just wanted to know, whether this approach is good or there could be a better approach to resolve this issue. If yes, please share.
On my ASP.Net MVC Web application, I am loading the following scripts on the _Layout.cshtml file:
#Scripts.Render("~/Scripts/modernizr-2.6.2.js")
#Scripts.Render("~/Scripts/jquery-2.2.3.js")
#Scripts.Render("~/Scripts/bootstrap.js")
#Scripts.Render("~/Scripts/respond.js")
#Scripts.Render("~/Scripts/toastr.js")
#Scripts.Render("~/Scripts/jquery-ui-1.11.4.js")
#Scripts.Render("~/Scripts/easyResponsiveTabs.js")
#Scripts.Render("~/Scripts/jquery.validate.js")
#Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.js")
#Scripts.Render("~/Scripts/jquery.validate.unobtrusive.js")
Everything looks good until my first Post, that's when things get messy. When I post (via ajax) a form with client-side validations (for instance: an empty textbox marked as required) I do not see any validation error and the form is submitted to the server with errors on it.
However, if I call the last script once again:
#Scripts.Render("~/Scripts/jquery.validate.unobtrusive.js")
on every view with a form inside of it, everything works like a charm.
Do you have any idea about what might be happening? I believe I should not be forced to include the script back again on every partial view with a form I want to post...
So I am currently trying to implement AJAX functionality to my webapp.
I currently have all the Tag Library, Tag Handlers, set up properly, so that if I call the Tags when the page is fully refreshing. All these custom tags work.
However, I have actually never implemented ajax in my life and is currently stuck on how to proceed to call these tags dynamically based on the changes in the webpage.
E.X:
Custom Tag library under -->/WEB-INF/tld
Tag Handlers --> classes/ClassHandlers/Tag1...TagXXX
With the above calling the following tag in the JSP file works perfectly:
<tagLib:tagName Attribute1="" Attribute2="">
However, how can I get this to be dynamically inserted by Ajax?
Please let me know if I can provide any more details.
Well, I would said that it is impossible. AJAX and JSP are two incompatible technologies. JSP tags can be used only on server side (during generating HTML) while AJAX is a client side technology (it runs in user browser). You can read more about client-server model here.
I have an ajax call which I need to then load an instance of swfupload on. As far as I'm aware, swfupload has to be loaded on window load and code stuck in the head of the document.
Does anyone know how to load swfuploader from an ajax call?
Thanks!
It's amazing what a bit of sleep can do...
Here is how to load swfupload via an ajax (ish) call.
Scenario:
I call some html via AJAX and write it to my document. This HTML contains the elements for swfupload. Once the elemtns are written to the document, I then create the settings var and call a new SWPUpload instance (swfu = new SWFUpload(settings)). You need to ensure that all the js libraries are included within the parent page which the ajax is being called from. Easy!
in my application, i have implemented ajax 4.0 client templates
currently my templates resides on same .aspx page. (say Main.aspx)
but i want to externalize them.(ie all the HTML would go on another page)
for that i have used $.get() like
$.get("/Module/getTemp/" + TemplateName, function(result) {...
now, i want getTemp function in Module to return the HTML (ie whatever that page contains) of the page having same name as Parameter 'TemplateName' has
into Main.aspx page (use c# in controller)
its like.. copy what other .aspx page contains and return it in calling (above)function from Main.aspx page
pls help
Have you tried using a partial view to return the html? You can setup a "templates" controller that serves up these templates. You can then have action methods for various templates. You would then be able to use routes like "/Templates/TemplateName" to fetch the html in your $.get call. If the template is only going to change once per page load, then I would be tempted to push parameters to my action method to be used in a view model.