show ajax html response in a whole webpage - ajax

I have an ajax response -> success : function(response) .
This response is in HTML, and I want to display this response in a web page ( not a part of the page div..) but the whole page.
please help me with this issue.

If you're using JQuery, you can do :
success: function(response) {
$("body").html(response);
}
To replace the body of your HTML by your response.

Related

Laravel ajax login empty fields

I'm using Laravel 5.2 and its Auth scafolding.
I'm trying to make the default login form, to work with Ajax (without reloading page).
I'm using reqwest.js for ajax requests.
Here's my ajax code:
<script data-cfasync="false" type="text/javascript" src="{{asset('js/lib/reqwest.min.js')}}"></script>
<script type="text/javascript">
var thisForm = document.querySelector('#authLogin');
thisForm.addEventListener('submit', function(f){
f.preventDefault();
reqwest({
url: thisForm.getAttribute('action'),
method: thisForm.getAttribute('method'),
contentType: 'application/json',
headers: {
'X-CSRF-TOKEN': document.getElementById('csrf_meta').getAttribute('content')
},
data: '_token='+thisForm.elements._token.value+'&email=myemail#live.com&password=12345',
success:function (response){
}
});
});
</script>
It uses \vendor\laravel\framework\src\Illuminate\Foundation\Auth\AuthenticatesUsers.php login() function to handle the login requests: https://i.gyazo.com/bfe6790934f711f4c1d35f6670c20caa.png
Here's the problem:
1) when I use the default normal login form /login (without ajax), $request->all() in the above class returns all the form fields that were submitted (great, this is perfect)
2) but when I submit the same form /login via an Ajax POST request, $request->all() returns empty array: https://i.gyazo.com/44e2fc6f438bba27a2baab9f7d3b38d6.png
Can anyone tell what I'm doing wrong here? I'm going insane and have no idea what may going wrong. I have searched everywhere for a solution, still nothing.
Thanks.
Sorry, I'm stupid, I figured out the reason it returns empty array.
In my ajax request I had contentType: 'application/json', but my form data was not in JSON format but string params format.

Ajax POSt not working in IE11

I have a button in my webpage which calls an ajax method a s below
$.ajax({
cache: false,
type:'POST',
data: 'type='+userType +'&user='+user ,
url:' ".\yii\helpers\Url::to([$program.'/'.$url.'/setcustomer/'])." ',
success: function(data) {
console.log('Hii');
$('#phoneErr').html(data);
}
});
This works in all browsers except IE11
I get the following error when i click on the button:
SCRIPT7002: XMLHttpRequest: Network Error 0x800c0008, The download of the specified resource has failed.
Has anyone faced this issue and what is the solution to this?
There is a redirection in my PHP code in the setcustomer action. Can this issue be related to it?
My ajax response body says Key Value
Response HTTP/1.1 302 Found
and not actually redirecting to the required page
is the problem related to IE ajax cannot handle 302 redirect within an ajax response as success.
I make the next solution:
in js:
$(document).ajaxComplete(function (event, xhr, settings) {
var url = xhr && xhr.getResponseHeader('X-Redirect');
if (url) {
window.location = url;
}
});
in php (yii2) (ie not understand 302 via ajax, we send 200) :
$this->redirect(['index', 'id' => $model->id], 200);

POST Django form with AJAX and JavaScript

I would like to get some data within a Django form
In order to do that, I define a javascript which is:
$(document).ready( function() {
$('#newcase_form').on('change', function() {
pathology_type = ($('input[name="pathology_type"]:checked','#newcase_form').val());
console.log(pathology_type);
$.ajax({
url:"/pathology/",
type :'POST' ,
data : {'pathology_type' : pathology_type},
success : function(data){
console.log(date.resultat);
}
});
});
});
It works, I can retrieve the parameter inside the form
but I am unable to post it in the URL i always have an Error 500 and the paramater is not send to the URL .
here is my URL.py
url(r'^pathology/(?P<pathology_type>[A-Z]{1})/', 'myapp.views.pathology'),
Inside my form, I have a submit with another ajax, so I send an ajax request to another URL
Am I wrong, or is it possible to post to 2 different URL in the same form?
Thanks in advance for your help
I am not sure to understand your problem, but it think your javascript and url.py are inconsistent.
If you keep your javascript, the url should be:
url(r'^pathology/', 'myapp.views.pathology'),
and then get pathology_type from request.POST of your view
If you keep your url, javascript should be:
...
$.ajax({
url:"/pathology/" + pathology_type + "/",
success : function(data){
...

Cross-domain AJAX - not getting the desired result

I am trying to ajax a form to a different domain using the jquery.xdomainajax.js plugin and having issue getting the desired HTML back (follow up to this question: Display form result in same page with only client-side script possible?)
The destination script checks the user id against the membership database, and redirects to an error page if the user has already submitted the form, or redirect to a thank you page if the entry is valid.
Using the script below, I get back the HTML of the ORIGINAL page on which the form is displayed, not the error page or the thank you page. If I change the dataType from "text" or "html" to "jsonp", I get a parse error as expected, but the associated HTML is actually desired HTML. I am not quite sure why.
Any help would be much appreciated!
PS: I do not have control over anything in the remote server.
$.ajax({
type: settings.postType, //GET
url: settings.tourl,
data: aForm.serialize(),
dataType: settings.type, //text or HTML
crossDomain: true,
success: function(data, textStatus, jqXHR){
alert(data.responseText);
settings.success(data);
},
error: function (jqXHR, textStatus, errorThrown){
//alert(errorThrown);
console.log(textStatus);
settings.error();
}
});
Should your request type be a POST instead of a GET? Generally form info will be sent with a POST.

jQuery Ajax request failed for get request to other domain

I want to send a request to other domain like
http://ccv.viatelecom.com/services/?item=viacall&aid=XXXX&gid=XXXX&sid=XXXX&&num=XXXXXX
I have used Ajax request as below:
$.ajax({
type: "GET",
url:'http://ccv.viatelecom.com/services/?item=viacall&aid=XXXX&gid=XXXX&sid=XXXX&&num=XXXXXX',
success:function(data){
alert(data);
},
error:function(XMLHttpRequest, textStatus, errorThrown){
alert("XMLHttpRequest="+XMLHttpRequest.responseText+"\ntextStatus="+textStatus+"\nerrorThrown="+errorThrown);
}
});
but it does not go to success function and the alert erro is:
XMLHttpRequest=
textStatus=error
errorThrown=
if I write same url address bar it display message not in Ajax request.
Is this the correct way to send request or is there another way or something I am missing?
You can not perform a cross domain ajax call.
Work around for this
Method 1
JavaScript
Create a function
function getMyData(data) {
alert(data);
//Do the magic with your data
}
Server side
On server end wrap your data inside function syntax
getMyData("Enter your data here");
JavaScript
Then create a script tag and add a link to your cross-domain page
<script type="text/javascript"
src="cross ref url">
</script>
For reference: wikipedia
Method 2
Another option is Create a proxy on your domain. ie create a page in your domain which internally calls the cross-domain page and return the same data to your Ajax call.

Resources