I am using Sencha Touch, I need post some data to a Server with a simple HTTP POST (NO AJAX)
At the moment I use
Ext.data.JsonP.request
Ext.Ajax.request
for my understanding both work with AJAX.
I would like to know how to disable the AJAX functionality and allow me to send some paramenters only via HTTP without using xhr and ajax.
You can create a form panel and then call the submit method with a url for the form to be submitted to:
// define your form
var form = Ext.create('Ext.form.Panel', {
...
// your form fields, etc
});
// later, in some handler for a button click, etc
form.submit({
url: 'url/to/submit.php',
method: 'POST',
success: function() {
// handle successful form submit
},
failure: funciton() { ... }
});
Related
I have added the hcaptcha widget to my login component using this package: https://github.com/hCaptcha/vue-hcaptcha. The challenge works as expected on the front end.
The response object as viewed in the network tab includes a token and looks like this:
expiration: 120
generated_pass_UUID: "P0_eyJ0eXAiOiJKV1QiLCJhbG...O9U"
pass: true
My question is how to pass that token with my email and password when I submit the login form.
Normally, I am using axios to make an explicit api call and I can define a variable like:
let response = axios.get('/whater_api')
and then use response.data to access whatever comes back. But I can't see how to do that here.
Have you tried the #verify="onVerify" event? it seems the result is emitted on that event, try to add methods onVerify on your vue instance like below:
methods: {
onVerify: function(e) {
console.log(e);
}
}
if it does return the response, you can make an object for the token, your email and password and the rest is just as usual.
Angular CLI: 7.3.3 | Node: 10.7.0 | OS: linux x64 | Angular: 7.2.6
I need server side pagination, sorting and filtering, my table will get 100.000 records easily.
Project example -> https://github.com/sibelly/angular-with-datatablesnet
This example consumes themoviedb API, it's just for testing, that is not my real scenario. Here in this project, I don't activate the server side option as I said is just for testing the calling to my interceptor, just to prove that with ajax directly the interceptor isn't called.
On my real scenario, I have a Laravel API, which has the methods that expect the pagination, sorting and filtering params, because I need it to be done server side to reach a better performance and usability.
When I call the API endpoint using HttpClient, it calls my error.interceptor.ts normally, but the pagination, sorting and filtering information isn't passing to the URL.
So, I concluded that I need to call it via Ajax when I call using the ajax the params are sent as expected.
But what happens is that the user token expire and I need to redirect to the login page again. And this is done using the interceptors of angular, that is not activated when calling using ajax directly because it is outside angular's scope.
To resume, how can I intercept my ajax calling from datatables.net framework in my angular project?
Or is there another way to make the server side pagination, sorting and filtering?
movie.component.ts
ngOnInit() {
//When calling this method the error.interceptor is activated normally
//this.getMostPopularMovies();
//But when I call direct using the AJAX, the interceptor doesn't work
this.dtOptions = {
ajax: {
url: 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=2ed54a614803785fce2d7fe401cc3b21',
params: {
api_key: this.moviedbService.apiKey
},
dataSrc: 'results'
//type: 'GET',
//headers: {"Authorization": 'Bearer ' + JSON.parse(localStorage.getItem('authUser'))["token"]}
},
columns: [
{ data: 'title' },
{ data: 'release_date' }
]
};
}
getMostPopularMovies(){
this.moviedbService.getMostPopularMovies().
subscribe((movies: any) => {
this.moviesList = movies.results;
console.log("====", movies);
}, (error: any) => {
console.error("Erro-> ", error);
});
}
Thanks, guys o/
i am trying to create status page which check database for the job status every 5 minutes and then updates the user about the status of the job..
So once the job is finished, I want to move from the current page to result page..
To update the status i m using JavaScript :
function() {
setInterval(function() {
var uuid =" \'${uuid}\'";
var jobid =" \'${jobid}\'";
console.log();
$('#checkstatus').load('/jobque/connectdatabase',{jobid:jobid,uuid:uuid});
}, 5000);
});
Checking status works correctly. I tried using redirect or forward but both these terms loads the result page into current page. I want to go to next page not load into current page ..
What are the other option available ?
Your javascript uses jquery to load the results of a call to a controller action into the named element.
Why not check the result of your call to the controller action and if it indicates success, then use javascript to redirect to your desired page.
controller action:
def checkStatus() {
if (status_check_ok) {
render 'url_of_page_for_redirect'
return
}
render status:409 // failure
}
javascript on web page:
$.ajax({
timeout:5000,
type: 'POST',
url: controller_action_url_for_checkStatus,
success: function(data){
window.location.href=data
},
error: function(data){
// do something else
}
});
I am trying to submit more than two forms in one button by using JS, how could i proceed to do this for yii active forms.
This is not specific to Yii. You can handle this using javacript. Write a function for on click event of the submit button. serialize the form1, serialize the form2. Concatenate two serialize results and pass it to an ajax request.
$('your_submit_button_selector').on('click', function(event){
event.preventDefault();
formData = $('your_form1_selector').serialize()+$('your_form2_selector').serialize();
$.ajax({
url: submitUrl,
data: formData,
type: 'POST',
success: function(data) {
...
}
});
});
Why don't you use this way...
jQuery('#yourForm1').submit();
jQuery('#yourForm2').submit();
Good Luck.
I have a web application built with jQuery Mobile and PHP (CodeIgniter framework). Now I'm trying to make a PhoneGap version of it as well, to make it distributable as a standalone app. However, the PHP web app. version uses Ion Auth, a CodeIgniter plugin for authentication. So when you go to a page that requires authentication, the app redirects you to the authentication controller login method. And after authentication it redirects you back to the home page (the jQuery Mobile page in this case). This works fine in the web app., since the home page is opened by the home controller in the first place anyway.
But here's the crux: in the PhoneGap version, the "home" page needs to be the index.html file in PhoneGap. Apparently you can load another url on startup by adding a value in PhoneGap.plist, but that is not acceptable by apple for submitting to app store. And if I do a redirect in the authentication, I can't get back to the index.html file after authentication...
So how should one go about authentication in a PhoneGap/jQuery Mobile app?
UPDATE:
I have tried this according to one of the answers, but the app still tries to navigate to the account/login page (which doesn't exist), when I just want to login through the post and return a value from the method:
$('#login_form').bind('submit', function () {
event.preventDefault();
//send a post request to your web-service
$.post('http://localhost/app_xcode/account/login', $(this).serialize(), function (response) {
//parse the response string into an object
var response = response;
//check if the authorization was successful or not
if (response == true) {
$.mobile.changePage('#toc', "slide");
} else {
alert('login failed');
$.mobile.changePage('#toc', "slide");
}
});
});
Here's the controller method:
function login()
{
//validate form input
$this->form_validation->set_rules('identity', 'Identity', 'required');
$this->form_validation->set_rules('password', 'Password', 'required');
$base_url = $this->config->item('base_url');
$mobile = $this->detect_mobile();
if ($mobile === false && $base_url != 'http://localhost/app_xcode/') //Only restrict if not developing
redirect('account/notAMobile');
else if ($this->form_validation->run() == true) { //check to see if the user is logging in
//check for "remember me"
$remember = (bool)$this->input->post('remember');
if ($this->ion_auth->login($this->input->post('identity'), $this->input->post('password'), $remember)) { //if the login is successful
//redirect them back to the home page
$this->session->set_flashdata('message', $this->ion_auth->messages());
echo true;
/*redirect($this->config->item('base_url'), 'refresh');*/
}
else
{ //if the login was un-successful
//redirect them back to the login page
$this->session->set_flashdata('message', $this->ion_auth->errors());
/*redirect('account/login', 'refresh');*/ //use redirects instead of loading views for compatibility with MY_Controller libraries
}
}
else
{ //the user is not logging in so display the login page
//set the flash data error message if there is one
$this->data['message'] = (validation_errors()) ? validation_errors()
: $this->session->flashdata('message');
$this->data['identity'] = array('name' => 'identity',
'id' => 'identity',
'type' => 'text',
'value' => $this->form_validation->set_value('identity'),
);
$this->data['password'] = array('name' => 'password',
'id' => 'password',
'type' => 'password',
);
}
}
I think I have removed or commented out any redirects that were there. So I don't know why it tries to load the view still? Does it have something to do with jQuery Mobile trying to navigate there because I post to that url?
The reason your form is still submitting and it's trying to change pages is because you have a syntax error in your submit handler Javascript. On line two, event is not defined so trying to call event.preventDefault() errors. Although the handler fails, the browser still submits the form using it's default action and method.
Either change your function signature to function(event) { or simply return false from the function. Returning false is equivalent to preventing default.
$('#login_form').bind('submit', function () {
//send a post request to your web-service
$.post('http://localhost/app_xcode/account/login', $(this).serialize(), function (response) {
//check if the authorization was successful or not
if (response == true) {
$.mobile.changePage('#toc', "slide");
} else {
alert('login failed');
$.mobile.changePage('#toc', "slide");
}
}, 'JSON');
return false;
});
You can make requests to your web-service (Ion Auth) from your app. with jQuery. Your login would look something like this:
//add event handler to the `submit` event for your login form
$('#login_form').bind('submit', function () {
//send a post request to your web-service
$.post('http://my-domain.com/my-auth/auth.php', $(this).serialize(), function (response) {
//parse the response string into an object
response = $.parseJSON(response);
//check if the authorization was successful or not
if (response.status === 'success') {
//do login here
} else {
//do error here
}
});
});
$(this).serialize() will add the login form's data to the post request. This example assumes your web-service will return JSON.
Have you looked at PhoneGap Plugin: ChildBrowser (iPhone, Android, other) and its locChanged method?
I have only coded apps that use OAuth (Twitter App) and OpenID (AppLaud App) for PhoneGap / Android, but the child browser plugin has what's needed for those. Sounds like Ion Auth may be similar: after auth driven by provider, return user to app seamlessly.