Ajax calls without AjaxHelper in aspnet core 2 - ajax

I was trying to implement an asynchronous call with ajax in my aspnet core 2.0 project, using "Ajax.BeginForm", but then I discovered according to these threads on github and stackoverflow that there's no support to this class in aspnet core, nor MVC 6.
Is there any other way to use ajax assynchronous calls, in aspnet core, besides the old way, with $.ajax function? My problem with this, is that, with AjaxHelper class, I could do everything with razor, in the view file, and keeping everything organized in one place.
Why would i use the razor language to make a loop, and print a list, or whatever, if i have to to make the ajax call, in the js file (or in a < script > tag)? I could work with the data right there, with js, and keep everything there!
How are you guys solving this right now? Thanks for your help.

This baffled me a bit too. I was like where is my lovely #Ajax helper that saved me allot of time in JS hell.
As #sam linked they have changed the API to be more HTML 5 semantic - Not sure why but OK
<form asp-controller="Home" asp-action="SaveForm"
data-ajax-begin="onBegin" data-ajax-complete="onComplete"
data-ajax-failure="onFailed" data-ajax-success="onSuccess"
data-ajax="true" data-ajax-method="POST">
<input type="submit" value="Save" class="btn btn-primary" />
<div id="Results"></div>
</form>
You can also do the same on anchors and don't forgot the tag to enable it
<a data-ajax="true" data-ajax-begin="alert('Hello!')">TEST</a>
And then I suppose you could create TypeScript files per page similar to Angular or one TypeScript per site, or just put the script on the page, example
var onSuccess = function(context){
alert(context);
};

Related

AntiSamy is not allowing me to input form fields

I have a RichTextArea from CKEditor. And I recently made some changes to sanitize HTML input.
Normal things go through fine but any form fields like checkboxes, textareas, radio buttons etc are stripped out.(I am using getValidSafeHTML to sanitize my HTML).
I have tried different policy files like this thing here which is supposed to allow everything
http://code.google.com/p/owaspantisamy/downloads/detail?name=antisamy-anythinggoes-1.4.4.xml
For example,
<form method="get" name="sampleform"><input name="radio" type="radio" /> </form>
becomes
<form method="get" name="sampleform"> </form>
Anybody have any idea why this is happening?
Thanks in advance
I just found the reason why this is happening... I was using the antisamy-1.3.jar. This looks like a bug in this version of antisamy. I needed to upgrade to antisamy-1.5.3.
So just check the versions of your antisamy jars. You might be facing the same issue

how to send file data using Dajaxice?

I am using ajax for my website. I have successfully used jQuery.ajax() to asynchronously upload file to server. I am using Dajax and Dajaxice therefore I plan to use these application for file upload as well. I tried this example. It is working fine. But if I add file field into my html form, it does not send file to server. My html form looks like
<form id="myform" action="/file/" method="post" enctype="multipart/form-data">
<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='AaSmyBEwQLSD3YghRAD9Cf2uxEjzESUe' /></div>
<p><label for="id_docfile">Select a file</label> max. 42 megabytes</p>
<p><input type="file" name="docfile" id="id_docfile" /></p>
<p><input type="submit" value="Upload" /></p>
</form>
This question has been asked at many place but never answered.
Afaik there is currently no provision within dajax / dajaxice to upload files.
I have used dajax in a few projects and have got round this by using blueimp/jquery-file-upload and a django view that accepts a POST of the upload file and return a JSON string to the client.
This is a less than perfect solution not least because the jquery-file-upload button is styled differently from normal html form elements, it is possible to style the whole form using jQuery-ui, although this is a lot of additional work.
Both, dwr which is pretty much dajax for Java, and tasty pie for django do offer file uploading, so in theory it should be possible to implement it.
I'm happy to post a sample of my ajax solution if anyone would find them useful.
I've also faced this problem recently. So, I've digged a little and discovered some answers.
It is working fine. But if I add file field into my html form, it does not send file to server.
There's serialize() method used in the doc example. But according to the jQuery doc:
Data from file select elements is not serialized.
Also, there's no clear way to get ajax file upload, because JS doesn't have access to the outside of the client browser. So, I don't think it's possible to make using dajaxice.
The easiest hack, I've found is to post form to the invisible iframe using target option:
<form method='POST' action='/upload' enctype='multipart/form-data' target='submit-iframe'>
so, only the iframe will be refreshed. Using js you than can get data from it catching the load() event.
More detailed process described here

AJAX call fails depending on position in code, browser fires document.ready mid-call. Twitter Bootstrap issue?

I am chasing a nasty issue. An AJAX call in an onclick handler does not complete, as the browser fires document.ready mid-call. When tracing the readystate and status in the Firebug console I get:
READYSTATECHANGE:1 STATUS:0
READYSTATECHANGE:2 STATUS:0
READYSTATECHANGE:4 STATUS:0
Document Ready (-> this is the
second firing, breaking everything as the UI is rewired )
I believe I am not facing a cross-domain security block as the same AJAX call will complete correctly when called elsewhere in the page.
I am using Jquery 1.8.1 and I have tried multiple variations of AJAX client calls (i.e.
$.getJSON
$.ajax
as well as using the standard XMLHttpRequest object.
Has anyone seen this before? Pointers for deeper debugging would be fantastic.
After having debugged the issues I now have a work around. My AJAX call was invoked from a click handler linked to a Twitter Bootstrap Button. Clicking the button triggered the AJAX call but also a window.load event, which refreshed the JS application.
My work around was to replace the <button>..</button> with an <input>..</input> field, see below:
<form class="form-search">
<label>Enter search string:
<input id="SearchString" type="text" class="input-medium search-query">
<!-- Broken: <button id="SearchAction" type="submit" class="btn btn-primary"> Search </button> -->
<!-- This works: -->
<input type="button" id="SearchAction" value="Go Find"/>
<img id="RssAction" style="vertical-align:bottom" src="images/feed-icon-14x14.png">
</label>
</form>
This may not be the root cause yet.

AJAX Wordpress Site with Difficult URL settings

On this WordPress theme utilizing AJAX, proves to be difficult. The developer of the theme cannot seem to find the issue or solution to it.
This site runs beautifully, if, and only IF, you type is this complete URL "http://www.geigerandwood.com/#!//" if you type in the .com site alone, it will appear but will be disfunctional.
I have made attempts in 301 redirects, even creating a static page with a redirect but still no luck. Is there something that I can add or change in the code to make this work properly?
FYI - it has been tested on the common web browsers on both OSX & Windows.
Here is a video of my presented issue. http://www.screenr.com/D1G8
What theme do you use?
My quick examination of your page source code is that I only can find something related to the #!// is in here
<div id="contentBoxScroll">
<a id="closeButton" href="#!//"></a>
<div class="dragcontainer">
<div id="contentBoxScrollDragger" class="dragger">
<div class="scroll_up"></div>
<div class="scroll_down"></div>
</div>
</div>
</div>
I assume it must be something inside the script from which that HTML is generated. I can say more since I can't see the full source.

valuehchange listener, ajax

I am using a JSF page in a portal environment. If I use a valueChangeListener, the method is not called in the backing bean unless I use onclick="submit()". This submits my page which I don't want. Same is the case with actionListner.
Also, if I use ajaxRefreshSubmit, my whole page is submitted rather than submitting the specified part on which the ajaxRefreshSubmit is used.
Why this behaviour? Is it because we are using it in a portal environment, or did we miss something in the configuration files?
The valueChangeListener runs indeed only when you submit the form to the server. It's indeed one of the major JSF beginner's misconceptions to think that it runs at the client side. It's not part of HTML or JavaScript code which runs in the webbrowser. It's part of Java/JSF code which runs in webserver. So the client has to send a request from webbrowser to webserver somehow. Submitting the form is one of the ways.
For the remnant, I don't have anything to say about ajaxRefreshSubmit since that's specific to the IBM component library which I don't use (and also can't because it's not open source nor freely available). If you don't get more respons here at Stackoverflow, then your best bet may be posting the question at their own forum at developerworks. It's only not as active and high-quality as here.
<h:form id="toilclaimform">
<h:panelGroup id="container">
<!-- Read only version -->
<hx:commandExButton type="button" id="testButton2" value="Submit" styleClass="hideRefreshToil" onmousedown="$.resourceManUtilities.formRefreshCookie()" >
<hx:behavior event="onclick" id="behavior3" behaviorAction="get" targetAction="container" ></hx:behavior>
</hx:commandExButton>
<hx:commandExButton onmousedown="runToilVal()" onmouseup="$.resourceManUtilities.formSubmitCookie()" type="submit" id="testButton" value="Submit" styleClass="rmButtons" action="#{toilClaimBean.submit}">
<hx:behavior event="onclick" id="behavior2" behaviorAction="get" targetAction="container" ></hx:behavior>
</hx:commandExButton>
</h:panelGroup>
</h:panelGroup>
<hx:ajaxRefreshSubmit id="ajaxRefreshRequest1" onstart="$.resourceManUtilities.ajaxLoadingStarting('form')" oncomplete="$.resourceManUtilities.ajaxFormSubmit('hideRefreshToilList')" target="container"></hx:ajaxRefreshSubmit>
</h:form>
When using this library you know longer use the standard command buttons, you instead use the hx command button, there is an example in the code above. Using this button will ensure that you don't get a full pagr refresh and will update the desired portlet.
Cheers

Resources