I am using VueJS for the first time and enjoying it. I am trying to POST to a page, GET works fine
In my routing file I have all the routes mapped out, I am trying to post to Contracts
{ path: '/contract/:id',
name: 'Contract2',
component: Contract,
props: true
},
If I do a GET /contract?id=1 or /contract/1 both work with GET
But POST (Postman for instance) I get
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot POST /contract/</pre>
</body>
</html>
My VueJS posting code (the redirect is not working either)
loadContract: function(contractId) {
axios
.post("/contract", {
id: contractId
})
.then(function(response) {
console.log(response);
//REDIRECT TERE
//router.go("/contract");
})
.catch(function(error) {
console.log(error);
});
},
What do you mean post to another page? If you're talking about passing data between pages with vue-router, you can actually pass params when you do a programmatic navigation. Please read up on it here
Example:
router.push({ name: 'contract', params: { contractId: 123 }})
Related
When I run this code in my localhost server and I click the Show Ad button in the #!/reward page, the reward ad shows but sends me back to the #!/ page. However, in this online code editor this SPA (single page app) works as intended: it plays the ad but leaves you on the reward page. Obviously this must have something to do with the fact that the application is running in an iframe on the editor, but why am I getting the "unexpected" behavior on my localhost and "expected" behavior in these online editors (I've also tested in jsbin and jsfiddle and same result).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
</script>
</head>
<body>
<div id="App"></div>
<script src="https://unpkg.com/mithril/mithril.min.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(() => {
googletag.enableServices();
googletag.pubads().addEventListener('rewardedSlotReady', event => event.makeRewardedVisible());
googletag.pubads().addEventListener('rewardedSlotClosed', event => googletag.destroySlots([event.slot]));
});
const Home = {
view: () => m('button', {
onclick: () => m.route.set('/reward')
}, 'Go to Reward Page >>>')
}
const Reward = {
view: () => [
m('button', {
onclick: () => m.route.set('/')
}, '<<< Return to Home Page'),
m('button', {
onclick: () => googletag.cmd.push(() => {
const rewardedSlot = googletag.defineOutOfPageSlot('/22639388115/rewarded_web_example', googletag.enums.OutOfPageFormat.REWARDED);
if(rewardedSlot)
{
rewardedSlot.addService(googletag.pubads());
googletag.display(rewardedSlot);
}
})
}, 'Show Ad')
],
}
m.route(document.getElementById('App'), '/', {
'/': Home,
'/reward': Reward
});
</script>
</body>
</html>
UPDATE (2022.08.03 11:16)
I can confirm that by placing this code into a subdirectory and then running it inside an iframe I get the expected behavior. I still need to understand why it doesn't work without the iframe. Here's a Glitch page that illustrates both scenarios. Click the View button on the preview pane to view it in its own window and note the difference.
The specific code for a rewarded ad appends #goog_rewarded to the end of the page's URL. This is what forces the unexpected behaviour to return to the default route of Mithril's router when using the default #! strategy. The added # triggers a hashchange event and Mithril cannot resolve the route. Setting the m.route.prefix to a different strategy (in my case m.route.prefix = '?') resolves the problem as it prevents the lookup from taking place.
I'm trying to get the pagseguro session id, but when I send a request via post, I get the status 200, but I get null, when I make the request via form I can get the id but by ajax it returns null to use laravel 8
//Route
Route::post('getsession', [\App\Http\Controllers\Pagseguro\PagseguroController::class, 'getSession'])->name('getsession');
//Controller
class PagseguroController extends Controller
{
public function getSession()
{
$response = Http::post('https://ws.sandbox.pagseguro.uol.com.br/v2/sessions?email=$email&token=$token');
dd($response->json());
}
}
//View
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body class="font-sans antialiased">
GET ID SESSION
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script>
//disparar no momento da compra - sign-plan
$('#sign').click(function(e){
e.preventDefault();
$.ajax({
type: "POST",
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
'Content-Type': 'application/json;charset=utf-8'
},
url: "{{ url('getsession') }}",
dataType: "json",
data: function (data) {
console.log(data);
},
});
});
</script>
</body>
</html>
You may not call /sessions directly in the frontend, as this would expose your e-mail and token. You must do this call in the backend side of your application. (It seems you already did that this way.)
With the result you may invoke PagSeguroDirectPayment.setSessionId('SESSION_ID');.
This is explained here in details and with examples.
And answering your question, it's most likely that Sandbox was out of service when you submitted the form. Specially if you did the test during the night. That's why you probably got a null result.
⚠️ PagSeguro Sandbox environment is not reliable and you may face this kind of issues, specially when obtaining the sessionId, credit card tokens and/or installments.
I have downloaded a vue.js template from the web. Whenever I build files via npm the title on the index.html keeps being swapped to the name of the template. Is there a way to change the default title?
As I understand your question - you need to configure your vue.config.js file something like this (pay attention on Webpack part) - these files are from working project, so you have maximum understanding on how it could look at the end:
module.exports = {
baseUrl: '/',
outputDir: (process.env.NODE_ENV === 'production' ? '../web/' : '../web/js/'),
indexPath: '../app/Resources/views/index.html.twig',
// Setting this to false can speed up production builds if you don't need source maps for production.
productionSourceMap: false,
// By default, generated static assets contains hashes in their filenames for better caching control.
// However, this requires the index HTML to be auto-generated by Vue CLI. If you cannot make use of the index HTML
// generated by Vue CLI, you can disable filename hashing by setting this option to false,
filenameHashing: false,
lintOnSave: false,
// https://cli.vuejs.org/ru/config/#devserver-proxy
devServer: {},
// https://cli.vuejs.org/ru/config/#chainwebpack
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = 'Ojok Deep Sales Platform';
args[0].template = './index.html.template';
return args;
})
}
};
And after you have updated your vue.config.js file, change your index.html template file to be like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title><%= htmlWebpackPlugin.options.title %></title>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900' rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="../js/go.js"></script>
<script type="text/javascript" src="../js/momentjs.js"></script>
<script type="text/javascript" src="../js/webphone/flashphoner.js"></script>
<script type="text/javascript" src="../js/webphone/SoundControl.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
Pay attention on what is being included in <title>-tag:
<title><%= htmlWebpackPlugin.options.title %></title>
After generating new index.html file your title should be set to whatever you have written into args[0].title option.
Hope this helps.
I'm still new at VueJS, but here were my findings. I'd love any suggested options or improvements. I went with option #2.
Option 1: set for Multiple Pages mode
vue.config.js
module.exports = {
pages: {
index: {
entry: 'src/main.js',
// template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
title: 'My Website Title',
},
}
}
Option 2: titleMixin (referenced from https://medium.com/#Taha_Shashtari/the-easy-way-to-change-page-title-in-vue-6caf05006863)
titleMixin.js added to mixins folder
function getTitle (vm) {
const { title } = vm.$options
if (title) {
return typeof title === 'function'
? title.call(vm)
: title
}
}
export default {
created () {
const title = getTitle(this)
if (title) {
document.title = title
}
}
}
added to main.js
import titleMixin from './mixins/titleMixin'
Vue.mixin(titleMixin)
Use in Component Pages
<script>
export default {
title: 'Foo Page'
}
</script>
Use in Vue instance with a function
<script>
export default {
title () {
return `Foo Page — ${this.someValue}`
},
data () {
return {
someValue: 'bar'
}
}
}
</script>
Option 1:
Edit your /public/index.html and replace this:
<title><%= htmlWebpackPlugin.options.title %></title>
with this:
<title>Your Title Here</title>
Option 2:
vue.config.js
module.exports = {
chainWebpack: config => {
config.plugin('html').tap(args => {
args[0].title = 'Your Title Here';
return args;
});
}
}
/public/index.html
<title><%= htmlWebpackPlugin.options.title %></title>
I have install Vue Devtootls but each time I have errors it doesn't show in the console I see o laracast they have like [vue: warn] and the error. I put this code but nothing.
catch(function(error){ console.log(error.message); });
}
I think you have a misunderstanding on vue-devtools, vue-devtools is a browser extension used as a debugging tool. You can check your components, events and more information via it. Please have a look at its introduction on GitHub.
On the other hand, messages like [vue: warn] ... are produced by Vue itself. The reason that you didn't get the messages is simply because you used vue.min.js instead of vue.js, I think. Save following code as a html file and then open it in chrome. You should be able to see the warning message in Chrome's console.
<!DOCTYPE html>
<html>
<head>
<title>Vue test</title>
</head>
<body>
<script type="text/javascript" src="https://unpkg.com/vue#2.4.2/dist/vue.js"></script>
<div id="app">
<span>{{ message }}</span>
<component1></component1>
</div>
<script>
// Vue.component('component1', {
// template: '<button>{{ message }}</button>',
// data: function() {
// return {
// message: 'I am a test button'
// };
// }
// });
var vm = new Vue({
el: '#app',
data: {
message: 'hello'
},
});
</script>
</body>
</html>
So I'm working on a site where the user logs into my Soundcloud app and automatically follows me. I am able to login but it doesn't follow. I can't seem to figure this out.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://connect.soundcloud.com/sdk/sdk-3.0.0.js"></script>
<script>
SC.initialize({
client_id: '551f515f1sa1f51sa51f65sa165',
redirect_uri: 'http://mydomain/callback.html'
});
SC.connect().then(function() {
// Follow user with ID 3207
SC.put('/me/followings/3207');
});
</script>
</head>
<body>
<img onclick="SC.connect()" src="http://connect.soundcloud.com/2/btn-connect-sc-l.png">
</body>
</html>
Any help would be appreciated!
Try doing this:
<script type="text/javascript">
SC.initialize({
client_id: "551f515f1sa1f51sa51f65sa165",
redirect_uri: "http://mydomain/callback.html",
scope: "non-expiring"
});
function SC_login()
{ SC.connect(function() {
SC.get("/me", function(me) {
/* Follow */
SC.put('/me/followings/215527712');
});
});
}
</script>
and on your image
<img onclick="SC_login()" src="http://connect.soundcloud.com/2/btn-connect-sc-l.png">
Also, could you post your callback.html so I could take a look at it?