please I need you to help me with a problem in Server xampp, laravel 6 with axios, apparently it doesn't allow me to request ajax. attached image for more detail. Thanks in advance.
methods: {
loadEstados() {
axios.get(`http://localhost/estados/pais/${this.selected_pais}`).then((response) => {
this.careers = response.data;
})
.catch(function (error) {
console.log(error);
});
Route::get('estados/pais/{pais_id}', 'UsuarioController#getEstadosByPais');
public function getEstadosByPais($pais_id)
{
if ($request->ajax()) {
$estados = Estado::where('id', $pais_id)->get();
foreach ($estados as $estado) {
$estadoArray[$estado->id] = $estado->esta_nombre;
}
return response()->json($estadoArray);
}
//
}
browser error
I found the solution, the problem was how i put the address
in the web.php
Route::get('estados/pais/', 'UsuarioController#getEstadosByPais');
in the file js
if (this.selected_pais !="") {
axios.get(`http://127.0.0.1:80/estados/pais`,
{params: {pais_id: this.selected_pais} }).then((response) => {
this.estados = response.data;
document.getElementById('estado').disabled =false;
});
}
in the file controller
public function getEstados(Request $request)
{
if ($request->ajax()) {
$estados = Estado::where('id', $request->pais_id)->get();
foreach ($estados as $estado) {
$estadoArray[$estado->id] = $estado->esta_nombre;
}
return response()->json($estadoArray);
}
}
Including port if necessary
thank you very much
Related
In response to a click handler, i currently perform a:
axios.get("http://whatever.com/itemId").then(response => {
console.log(response);
});
theoretically, a user might click several times extremely quickly in succession. however, I need to process responses in the same order as the requests are made, and these responses are not always ordered.
Can anyone give any pointers?
Came up with the following, which seems to work well. Maybe such a thing should be part of the library itself. Hope others find it useful.
import axios from 'axios';
class OrderedAxios {
constructor() {
this.promises = []
}
get(url) {
var outsideResolve;
var outsideReject;
let promise = new Promise((resolve, reject) => {
outsideResolve = resolve;
outsideReject = reject;
});
promise.resolve = outsideResolve;
promise.reject = outsideReject;
this.promises.push(promise);
axios.get(url)
.then(response => {
promise.response = response;
this.processPromises();
})
.catch(error => {
promise.error = error;
this.processPromises();
})
return promise;
}
processPromises() {
let continueProcessing = false;
do {
continueProcessing = false;
if (this.promises.length) {
let promise = this.promises[0];
if (promise.response || promise.error) {
this.promises.shift();
if (promise.response) {
promise.resolve(promise.response);
} else {
promise.reject(promise.error);
}
continueProcessing = true;
}
}
} while (continueProcessing);
}
}
export default OrderedAxios;
I have a mobile app where the user needs to re-login after some time for security reasons. The thing is that the content that was open in the background needs to stay there, and open after the login. So, even if it was a modal.
What is the best way to do this.
Pushing the login view when a modal is open doesn't help, since the view is put behind the modal.
Thanks in advance!
on the current page
public openLogin() {
let loginModal = this.modalController.create(LoginPage, { modal: true });
loginModal.present();
loginModal.onDidDismiss(data => {
if (data) {
this.profileData = data;
} else {
}
});
};
on loginPage
this.userService.login(username, password)
.subscribe(
data => {
console.log(data);
if (data.success) {
var user = data.result;
this.userService.setSession(user);
if (this.itsModal) {
this.closeModal(data)
}
else {
this.gotoHome();
}
} else {
// error handling
}
},
error => {
console.log(error);
}
);
public closeModal(data: any = null) {
this.viewController.dismiss(data);
}
After testing pouchDB for my Ionic project, I tried to encrypt my data with crypto-pouch. But I have a problem with using design documents. I used the following code:
One of my design documents:
var allTypeOne = {
_id: '_design/all_TypeOne',
views: {
'alle_TypeOne': {
map: function (doc) {
if (doc.type === 'type_one') {
emit(doc._id);
}
}.toString()
}
}
};
For init my database:
function initDB() {
_db = new PouchDB('myDatabase', {adapter: 'websql'});
if (!_db.adapter) {
_db = new PouchDB('myDatabase');
}
return _db.crypto(password)
.then(function(){
return _db;
});
// add a design document
_db.put(allTypeOne).then(function (info) {
}).catch(function (err) {
}
}
To get all documents of type_one:
function getAllData {
if (!_data) {
return $q.when(_db.query('all_TypeOne', { include_docs: true}))
.then(function(docs) {
_data = docs.rows.map(function(row) {
return row.doc;
});
_db.changes({ live: true, since: 'now', include_docs: true})
.on('change', onDatabaseChange);
return _data;
});
} else {
return $q.when(_data);
}
}
This code works without using crypto-pouch well, but if I insert the _db.crypto(...) no data is shown in my list. Can anyone help me? Thanks in advance!
I'm guessing that your put is happening before the call to crypto has finished. Remember, javascript is asynchronous. So wait for the crypto call to finish before putting your design doc. And then use a callback to access your database after it's all finished. Something like the following:
function initDB(options) {
_db = new PouchDB('myDatabase', {adapter: 'websql'});
if (!_db.adapter) {
_db = new PouchDB('myDatabase');
}
_db.crypto(password)
.then(function(){
// add a design document
_db.put(allTypeOne).then(function (info) {
options.success(_db);
})
.catch(function (err) { console.error(err); options.error(err)})
.catch(function (err) { console.error(err); options.error(err);})
}
}
initDB({
success:function(db){
db.query....
}
)
I have tried numerous ways of adding a cast button to video.js player but cannot do this for the life of me. Can anyone help?
I'm using the hellovideo cms for videos and need plugins added but have no idea about jquery etc.. so please if anyone can help?
There is a really nice plugin for this: https://github.com/kim-company/videojs-chromecast
Just follow the setup instructions (adding the js and css to your page).
I tried kim-company/videojs-chromecast. It only works with an older version of videojs, I used 5.4.6. It's quite buggy. Another I tried was benjipott/video.js-chromecast, which claims to work with newer videojs, but I didn't like it at all. So I gave up on videojs, I always found the native HTML5 video player more reliable and easier to work with (videojs just wraps this anyway). For the chromecast stuff, I provide a nearby button that links to chromecast.link, where I wrote a full web chromecast sender app. Pass the video and poster URL in the fragment, per this example:
https://chromecast.link/#content=http://host/some.mp4,poster=http://host/poster.jpg,subtitles=http://host/webvtt.srt
I recently answered this question, you can check it out here: How to implement chromecast support for html5 player for more information
var session = null;
$( document ).ready(function(){
var loadCastInterval = setInterval(function(){
if (chrome.cast.isAvailable) {
console.log('Cast has loaded.');
clearInterval(loadCastInterval);
initializeCastApi();
} else {
console.log('Unavailable');
}
}, 1000);
});
function initializeCastApi() {
var applicationID = chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID;
var sessionRequest = new chrome.cast.SessionRequest(applicationID);
var apiConfig = new chrome.cast.ApiConfig(sessionRequest,
sessionListener,
receiverListener);
chrome.cast.initialize(apiConfig, onInitSuccess, onInitError);
};
function sessionListener(e) {
session = e;
console.log('New session');
if (session.media.length != 0) {
console.log('Found ' + session.media.length + ' sessions.');
}
}
function receiverListener(e) {
if( e === 'available' ) {
console.log("Chromecast was found on the network.");
}
else {
console.log("There are no Chromecasts available.");
}
}
function onInitSuccess() {
console.log("Initialization succeeded");
}
function onInitError() {
console.log("Initialization failed");
}
$('#castme').click(function(){
launchApp();
});
function launchApp() {
console.log("Launching the Chromecast App...");
chrome.cast.requestSession(onRequestSessionSuccess, onLaunchError);
}
function onRequestSessionSuccess(e) {
console.log("Successfully created session: " + e.sessionId);
session = e;
}
function onLaunchError() {
console.log("Error connecting to the Chromecast.");
}
function onRequestSessionSuccess(e) {
console.log("Successfully created session: " + e.sessionId);
session = e;
loadMedia();
}
function loadMedia() {
if (!session) {
console.log("No session.");
return;
}
var videoSrc = document.getElementById("myVideo").src;
var mediaInfo = new chrome.cast.media.MediaInfo(videoSrc);
mediaInfo.contentType = 'video/mp4';
var request = new chrome.cast.media.LoadRequest(mediaInfo);
request.autoplay = true;
session.loadMedia(request, onLoadSuccess, onLoadError);
}
function onLoadSuccess() {
console.log('Successfully loaded video.');
}
function onLoadError() {
console.log('Failed to load video.');
}
$('#stop').click(function(){
stopApp();
});
function stopApp() {
session.stop(onStopAppSuccess, onStopAppError);
}
function onStopAppSuccess() {
console.log('Successfully stopped app.');
}
function onStopAppError() {
console.log('Error stopping app.');
}
I am trying to work with jQuery in Zend Framework. And the use case I am facing problem is when I am trying to save data to the db. Always receiving ajax error though the data is being saved in the database.
The controller that I am using to add data is like below:
public function addAction()
{
// action body
$form = new Application_Form_Costs();
$form->submit->setLabel('Add');
$this->view->form = $form;
if($this->getRequest()->isPost())
{
$formData = $this->getRequest()->getPost();
{
if ($form->isValid($formData))
{
$costTitle = $this->_request->getPost('costTitle');
$costAmount = $this->_request->getPost('costAmount');
$costs = new Application_Model_DbTable_Costs();
if($costs->addCosts($costTitle, $costAmount))
{
echo "suces";
}
// $this->_helper->redirector('index');
}
else
{
$form->populate($formData);
}
}
}
}
And the jQuery that is passing data is as follows:
$('#cost').submit(function (){
data = {
"cost_title":"cost_title",
"cost_amount":"cost_amount"
};
$.ajax({
dataType: 'json',
url: '/index/add',
type: 'POST',
data: data,
success: function (response) {
alert(response);
},
timeout: 13*60*1000,
error: function(){
alert("error!");
}
});
});
I am getting always error.
What is the problem in this code?
Thanks in advance.
I would strongly recommend you implement the newest Zend/AJAX methods.
// Inside your php controller
public function init()
{
$ajaxContext = $this->_helper->getHelper('AjaxContext');
$ajaxContext->addActionContext('add', 'json')
->initContext();
}
public function addAction()
{
// action body
$form = new Application_Form_Costs();
$form->submit->setLabel('Add');
$this->view->form = $form;
if($this->getRequest()->isPost())
{
$formData = $this->getRequest()->getPost();
{
if ($form->isValid($formData))
{
$costTitle = $this->_request->getPost('costTitle');
$costAmount = $this->_request->getPost('costAmount');
$costs = new Application_Model_DbTable_Costs();
if($costs->addCosts($costTitle, $costAmount))
{
// The view variables are returned as JSON.
$this->view->success = "success";
}
}
else
{
$form->populate($formData);
}
}
}
// Inside your javascript file
// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.get("/index/add/format/json", function(data) {
alert(data);
})
.error(function() { alert("error"); });
For more information:
AjaxContext (ctrl+f)
jQuery.get()
I think you are getting an error on Session output. Why don't you disable the view-renderer, since you just need an answer for the request echo "suces" which is more than enough for your AJAX.