Been a while since I done this but I must be doing something wrong.
I am using asp.netcore 2.1
I have a view with a button on it.
The button makes an ajax call to get the contents of a html page.
But, despite triple checking the uri the console error tells me it cannot find the page with a 404 error.
The html page is just a div structure.
this is my ajax call:
$.ajax({
type: 'GET',
url: '/Helper/Dialogs/CreateClient.html',
dataType : 'html',
success: function(data) {
dialogObj.setProperties(
{ content: data }
);
}
});
In case people get tripped up by this I was storing my html page in a sub-folder off the root off my solution. Because I am using asp.net core all 'adhoc' content has to be under the wwwroot folder in the solution.
It is obvious to me now but I thought I would post my answer in case people find it useful.
Related
I read the manual about location hash, but seems I didn't understand it.
I do like this:
$.ajax({
url: "/tst.htm",
success: function(data){
$("#center").html(data.content);
location.hash="#ACHTUNG";
}
});
and when I press 'back' in the browser, I return to the blank browser page, not to the page I created to test how location hash works.
I need a simple answer how to workaround this most common and simple ajax-based task, not please again a reference to the manual.
This is in reference to http://jsfiddle.net/DLy6j/
var echoHTML = '<img src="URL-TO-MY-IMAGE.JPG"/>';
$.ajax({
type: 'post',
url: '/echo/html/',
data: {
html: echoHTML,
delay: 2
},
beforeSend: function () {
$('#slider0-4').html('Loading...');
},
success: function (markup) {
$('#slider0-4').html(markup);
$('#slider0-4 img').on('load', function () {
//$(this).after('<div>Image loaded</div>');
alert('Loaded');
});
}
});
(jQuery wait till AJAX page is fully loaded).
This is my first attempt trying to use $.ajax
I cannot get my image to load. I have changed the echoHTML to the image-URL on my server, AND have tried uploading my html on there thinking it might not work offline, but to no avail.
My guess is that somethings wrong here "url: '/echo/html/',". Have tried using my image in the JSFiddle above there and it loads just fine.
Somebody show me the correct way to do this?
I think you've just been a little mislead by that jsfiddle example.
When the url '/echo/html' is being passed in, it is sending a request to that url, which handles the data that you pass through, and then passes something back to the success function. jsFiddle allows you to simulate ajax requests because they have an Echo API which has these pages built.. but when you call it, it is trying to call http://www.bilalbinsaeed.com/echo/html/, which does not exist.. which is throwing an error, which means the success function will not run properly.
You will need to create another file which handles your ajax request. I would recommend doing a little more research into what AJAX is, and how it works.
It loads an image for me. It is a little unclear what you are asking, but it seems like you are getting hung up on getting it to load from JSFiddle to your site. Don't try to do that. Cross-Origin Resource Sharing won't work on JSFiddle without changing the headers on your site.
There is a big chunk of html + js code. The goal is to load and show it only on a specific button click, so, there is no need in pre-loading it every time.
Normally, we can include a partial view dynamically by using jquery/ajax, but as far as I know it requires a controller. In this scenario, there is no need for a controller, as the data is static.
So, the question is: is it possible on a specific event (like button click) to include a partial view without going through a controller?
What we tried was giving the ajax request an address of partial view. However it didn't help.
<div class="reportWindow"></div>
<script type="text/javascript">
$("#feedback").click(function () {
$.ajax({
url: "#Url.Content("_Feedback")",
type: 'GET',
cache: false,
success: function (result) {
$("#reportWindow").html(result);
}
});
});
</script>
a Partial view that have cshtml extension is still a Razor view, even if the content inside of it is static, the server still needs to read it and convert its content to html (even if that means copy it exactly the way it is and send it back)
What you need is an html file, which in turn you can load dynamically with javascript or jQuery:
$("#feedback").click(function () {
$("#reportWindow").load('feedback.html');
});
Note that this will still ask the server for feedback.html, typically this won't match to any route then IIS will resolve the request by looking for a static pages called feedback.html!
I have trouble doing this, I've been looking for some manuals, but they don't seems to work for me (they're either or detailed enough or I'm too stupid, probably something from both).
So I want to start an AJAX call from my Fluid View HTML file by some event, then it should go for the action in some controller and return some value (any value would be fine for the moment, I just can't seem to get anything to work here when it comes to AJAX in Extbase).
With no details I can only guess what is your problem
First and most important thing is ... using FireBug to check what the problem with AJAX call is. It can be just wrong URL (action, controller etc...) or some problem in your action which doesn't return required output. FireBug will allow you to check where it stacks.
But most probably...
There is VERY important thing to remember while writing JS/CSS code directly into your Fluid view and unfortunately it's almost never mentioned:
Fluid uses braces to indicate that the string is a variable: {someVar}, therefore if you put AJAX or other JavaScript function into the Fluid template it will be most probably considered just as Fluid variable. This sample pasted to the template:
$.ajax({
url: "index.php"
data: "tx_myextension_plugin[controller]=MyController&tx_myextension_plugin[action]=getData&type=89657201"
success: function(result) {
alert(result);
}
});
Will be rendered just as:
$.ajax(Array);
Solution:
Escaping it directly in the template is hard, therefore it's definitely easier just to save all your JavaScript into separate file under Resources/Public directory of your extension, and include it with common HTML tag:
<script type="text/javascript" src="typo3conf/ext/yourext/Resources/Public/ajaxFunctions.js"></script>
$("#searchFach").change(function(){
$.ajax({
type: 'POST',
url:"fragen/controller/Question/searchQuestions",
data: {mainCategoryId:$("#searchFach").val()},
success: function(response) { $("#searchCategory").html(response);
},
});
});`
I need a ajax submission system without page refresh, I found one from the submit-a-form-without-page-refresh-using-jquery script site
After remove jquery-ajax\images\form_bg.png, How to empty the search box after submit the data? Can anyone add a small code for me? Thanks.
Try this:
$.ajax({
type: "POST",
url: "your-php-file.php",
success: function(get_ajax_return_value){
$('#yoursearchbox_id').val('');
}
});
Try this:
$('#searchbox_id').val('');