How to do an AJAX post to an Umbraco Web Api - umbraco8

I am using Umbraco 8.17 and I am trying to do an ajax post to an umbraco web api. I know from the Umbraco documentation that I need to make a new controller that extends UmbracoApiController. I also know that when I want to call a method in this controller I need to put "/Umbraco/Api/" at the head of the url. So if my controller is in the base folder of controllers and my controller is named myController and the method I want to call on that controller is MyMethod, the url would be something like "https://localhost:44305/Umbraco/Api/myController/MyMethod" if I were to be running the code from debug in Visual Studio.
Now from a partial view I want to trigger a javascript function that does a AJAX call to that method "assume the method takes no parameters:. My AJAX call in my partial view (cshtml) file would look like this.
function MYAJAXCAll() {
alert("In the function call");
$.ajax(
{
type: "POST",
url: "/Umbraco/Api/myController /MyMethod",
success: function (response) {
alert(response);
}
});
}
Note that at this point I am just trying to get the method call to work. once I have that done I can go back and make it actually do something meaningful.
The problem is that the ajax call is not working. It doesn't even seam to be firing. I will get the alert but nothing else. note that I do have a breakpoint in the method that should be catching if the method is called and that is not happening.


Ok I got the simple web api call to work using jQuery.
Here is the code that I used to make it work:
$(document).ready(function() {
$.getJSON("/Umbraco/Api/myController/MyMethod")
.done(function (data) {
alert(data);
});
});

Related

How can I detect clicks on a JavaFX WebView from the main application?

Currently I do this by adding a Javascript event handler to the HTML content which sets a global variable according to the clicked item:
<script>
var clicked="";
</script>
<span onmousedown="clicked='me';">me</span>
then from the main application I query the content of this variable in the webview's mouse clicked handler:
webview.setOnMouseClicked(new EventHandler[MouseEvent]{
def handle(mouseEvent:MouseEvent){
if(mouseEvent.getEventType().toString()=="MOUSE_CLICKED"){
val clicked=webview.executeScript("clicked").toString()
}}})
This happens to work but it feels like a hack. Is there a legitimate way by which the webview can request the application to refresh its content based on the element that was clicked?

As I do not know Scala, I can only provide you with an approach in Java, but you can probably figure out, how to transform it to Scala.
Register a bridge between the Java (or in your case Scala) code and JavaScript. The basics are described in this article by Oracle. The JavaScript in your page can make a call to the application, notifying it that a certain button was clicked:
public class MyBridge {
public void callbackFromJavaScript(String what) {
...
}
}
JSObject jsobj = (JSObject) webEngine.executeScript("window");
jsobj.setMember("java", new MyBridge());
Then you can make the call when an element is clicked and callbackFromJavaScript will be executed:
<span onmousedown="java.callbackFromJavaScript('me');">me</span>
From your callbackFromJavaScript you can then easily call a JavaScript function and pass along an object (e.g. JSON) and the JS function will update the page, or you can load a completely different content.

Typo3 Neos Cannot Load Custom Plugin JS On Backend, Must Refresh To Make It Works

i'm trying to load my custom plugin on backend, e.g. datatables.js. But the JS is not working, i must refreshing the page once to make it works, there is also no error on the backend webbrowser console. How to solve this?
Any help would be much appreciated! thanks.

I don't think you should use document ready as this event is only fired once in the backend (unless you refresh the entire be). Instead you should use Neos.PageLoaded.
if (typeof document.addEventListener === 'function') {
document.addEventListener('Neos.PageLoaded', function(event) {
// Do stuff
}, false);
}
You can find documentation here:
http://docs.typo3.org/neos/TYPO3NeosDocumentation/IntegratorGuide/InteractionWithTheNeosBackend.html

May be your database.js is loaded before the dom a totaly loaded.
So i suggest to add a event onload to your body to load the Constructor or init function.
//jquery
$(document).ready(function(){
//INIT CONSTRUCTOR FUNCTION
});
//JS
document.body.onload = function(){
//INIT CONSTRUCTOR FUNCTION
};

How to call user defined jquery or ajax function calls in Jqtouch

I am trying to add some functionality in a wordpress theme based on JQtouch. I want to run an ajax call to replace the content of a div. But the jQtouch not allowing me to run the code. It runs its default event.
i Have used this code to bind the function, where listArticles() will call my Ajax request.
$(function(){
$('a[href="#articles"]').bind('click', listArticles());
});

Your callback is wrong, it should either point to the function or be an anonymous function itself.
$(function(){
$('a[href="#articles"]').bind('click', listArticles);
});
or
$(function(){
$('a[href="#articles"]').bind('click', function() { listArticles() });
});

Sharethis button does not work on pages loaded via ajax

I am trying to use the sharethis button on a page which is loaded via ajax.
The buttons do not show up. Please help.
Regards,
Pankaj

After adding the new content to the dom, call
stButtons.locateElements();
// or if you want to be a bit defensive about whether the lib has been
// loaded or not:
if (window.stButtons){stButtons.locateElements();} // Parse ShareThis markup
Article another another

Updated 09/2017 Answer
The stButtons object doesn't exist anymore, now you can use
window.__sharethis__.initialize()
To reinitialize the buttons

Updated 03/2020 Answer
As found in The Ape's answer above: https://stackoverflow.com/a/45958039/1172189
window.__sharethis__.initialize()
This still works, however there is a catch if your URL changes on the AJAX request, you need to make sure the URL you want shared is set as a data attribute (data-url) on the inline sharing div. You can also update the title using data-title attribute.
<div class="sharethis-inline-share-buttons" data-url="http://sharethis.com" data-title="Sharing is great!"></div>
Use case:
I'm using a WordPress/PHP function to generate specific content based on a query string. If you don't set the data-url attribute on the ShareThis div, ShareThis will hold the first URL that was clicked to share, regardless of the URL update on AJAX request.

This solution will also work for NodeJS based frameworks, like Meteor.
stButtons.locateElements();
is needed in the rendered callback of a template, to ensure that the shareThis buttons will appear on a page redirect.

I was facing the same problem with sharethis and Ajax pagination.
The buttons was not showing after posts loaded by Ajax so I've searched and found this.
I've just added the function stButtons.locateElements(); on Ajax success:
something like success: stButtons.locateElements();
Hope this will be helpful for someone like me.
Thanks
Ibnul

For the new API following solution worked for me
if (__sharethis__ && __sharethis__.config) {
__sharethis__.init(__sharethis__.config);
}
Add this code after loading ajax content.

do this:
window.__sharethis__.load('inline-share-buttons', config);
and config your buttons with javascript.

The following should work with current ShareThis javascript. If sharethis js isn't loaded, the script loads it. If it is already loaded, ShareThis is re-initialized using the current URL so that it works on pages loaded via Ajax. Working fine for me when used with mounted method on Vue component.
const st = window.__sharethis__
if (!st) {
const script = document.createElement('script')
script.src =
'https://platform-api.sharethis.com/js/sharethis.js#property=<your_property_id>&product=sop'
document.body.appendChild(script)
} else if (typeof st.initialize === 'function') {
st.href = window.location.href
st.initialize()
}
Make sure you use your property id provided by ShareThis in the script src url.

In Drupal you can achieve this by adding following code:
(function($){
Drupal.behaviors.osShareThis = {
attach: function(context, settings) {
stLight.options({
publisher: settings.publisherId
});
// In case we're being attached after new content was placed via Ajax,
// force ShareThis to create the new buttons.
stButtons.locateElements();
}
};
});

I found the following solution on one of the addThis forums and it worked great for me.
I called the function as a callback to my ajax call. Hoep this helps
<script type="text/javascript">
function ReinitializeAddThis(){
if (window.addthis){
window.addthis.ost = 0;
window.addthis.ready();
}
}
...
$('#camps-slide .results').load(loc+suffix, function() {ReinitializeAddThis();});
</script>

How to call action of Controller outside the controller in Zend Framework?

I am using Xajax in Zend Framework. I need to call action of particular controller in function of Xajax Class I have created.

Can you not place the action code you need to call into the model and then call it from there within the action and wherever else like:
$model = new Model;
$model->methodToCall();

Use jQuery. It makes AJAX easy.
$.ajax({
url: '/my-controller/my-action',
success: function(data) {
alert('Successful response');
}
});
In Zend Framework, create a controller action that you want to call using AJAX and send a response body that you want to use (either XML, JSON, or HTML for example).