I have a simple vue app based on this official example
What I've added is this template for the login page. When displaying the login page directly by URL it is being rendered correctly:
But when I got it via the link from another page it is being sized incorrectly:
How could it be fixed? Thanks!
ps: sorry, I could not make an online example, just the entire source code on github
Related
Can someone tell me why the following component is loaded when I refresh the browser?
Sandbox link: https://codesandbox.io/s/lucid-darkness-vwklt?file=/pages/index.vue
Let me explain.
What I want to happen and my expected output:
1.) Click "doss" --> Profile and Settings --> [The Profile Page with data is shown]
2.) Then, REFRESH/RELOAD the browser, the profile page is STILL shown with the same data
3.) The URL did not change.
What actually happens and the unexpected output:
1a.) Click "doss" --> Profile and Settings --> [The Profile Page with data is shown]
2a.) Then, REFRESH/RELOAD the browser, the profile page is NOT shown but instead another component is loaded with the title "The Post Detail Page" .
3a.) The URL did not change.
Why does #2a happen? The URL has not changed but the component did.
What am I doing wrong? Here is my NuxtJS folder structure:
To add a dynamic route in Nuxt, create a file starting with a dash. You already did that, which is totally fine, like;
_myPage.vue or add a folder named _myPage containg a index.vue file inside.
But your example won't work because nuxt is missing the "doss" route from your link / menu item.
Working example;
https://codesandbox.io/s/holy-voice-6pofd?file=/pages/doss/_displayName/index.vue
URL path will result in /doss/xxx
Also see; Nuxt dynamic pages
I want to insert the publicly available embed code, provided by Instagram for one post, into my vue.js app.
Instagram provides an embed snippet for any post in the 3 dots at the top right of any Instagram post.
If I paste this in my Vue template I get this error:
"Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed."
What does this mean and how can I get round it in Vue?
I have looked at several npm packages for embedding Instagram posts in Vue, but they all appear to have stopped working with Instagram's new nightmare authentication process. If I paste this into a vanilla html page (without Vue) it works fine.
I am using Gridsome with Vuetify.
Remove <script from embed code and import it in this way https://gridsome.org/docs/head/
I don't know if you figured this out already, but loading the script (as in the accepted answer) and executing this in the component solved this problem for me:
if (window.instgrm) window.instgrm.Embeds.process()
i'm trying to add Pinterest share button on my page template. I've followed the guidelines of Pinterest by adding the script before the tag, and the right link in my page.
Both in development or production mode, the button is correctly updated by the script. But when i change page, and load another post, the button remains as "default", not updated.
working version (at first page load) :
Non working version when I change page :
Pinterest script is (i think) loaded the way they ask on their website (before tag) :
and this is how i load it in metaInfo() :
i've tried everything, dynamically create script tag in mount cycle, with or without the button
i'm always facing this one shot working button, and i can't figure out why
the only strange thing i can see, is that i have this script in : https://assets.pinterest.com/js/pinit_main.js?0.8287268902280864
script that i do not call in my template
but it's also present when the button is working
any help will be appreciated ;)
thanks
I am getting this error most of the time when I submit my form. I am using Sitefinity 6.2 with ASP.NET MVC 4.0 and JQuery Mobile.
As I have Sitefinity in Hybred mode I am using the #Html.BeginFormSitefinity() command to create the form. On the Controller I have my action with the [HttpPost] attribute. The code always hits my default action on the controller with no problem. No matter what I put in the form when I submit I only get an error message on the page...never hits the HttpPost action.
I've looked around and there are many pages with fixes for the MAC failed issue, but none are working for me. I have a machine key in the web.config and I am NOT going to set enableViewStateMac to false as that is a security hole.
OK I tried working with both of the below solutions but they are both really bad. Here is what I am doing now, which is still not great, but I have Sitefinity, MVC, and JQuery Mobile all on the same page and forms are not giving me View State Exceptions anymore.
First thing is that adding data-ajax="false" is not enough, for this to work you need to disable Ajax before JQuery Mobile starts. So, to do this you need to add in this script BEFORE the JQuery Mobile File loads but after the JQuery file loads.
$(document).bind("mobileinit", function () { $.mobile.ajaxEnabled = false; });
After doing this I then do not use the Sitefinity Begin Form, I just JQuery to change the form on the main page to have the correct action.
<script>
$("#aspnetForm").attr("action", "Home/Login");
</script>
Together this means that there is a complete page load for each page change, and form posts use the form declared in my WebForms Master Page.
-Old Answer -
Actually...what I have below is not working. What I am
currently doing is really ugly but is usually working.
As long as the user enters the site from the home page then the home
page is the Jquery Mobile first page. The view state errors that I
was getting was because it saw the current page as the first page and
the form submit was to the active page. What if the controller for
the home page was just set to handle ALL HTTPPost calls? I have
removed the #Html.BeginFormSitefinity() from all the views with forms
and am just using the form on my top level masterpage. Then I add in
code on the view to change the action of this form to point to the
main page controller. ex
<script>
$("#aspnetForm").attr("action", "Home/Login");
</script>
Once I made this change the forms are not throwing view state
exceptions...as long as the home page is the Jquery Mobile first page.
If the user comes in from a different page then all is scrambled.
Don't have an answer for that yet.
Really Old Answer -
OK, think I have found it. I read somewhere, lost the link now, a
list of issues that can cause the error message. One of them is the
form being submitted from a different page.
I looked at the error message I was getting with Fiddler and noticed
that the Referer was my home page but the URL of the form post was the
URL for the page with my form. In stead of browsing through my site
to the page with the form I typed the URL in the address bar. I tried
submitting my form again and now it works!
So, this is an issue of Sitefinity and JQuery Mobile fighting it out.
When asp.net MVC is run in Hybred mode in Sitefinity it is actually
run in a Web.Forms master page that contains a form. When you use the
#Html.BeginFormSitefinity() to add a form to the view it is actually
just adding a div and then using AJAX to submit the form on the
Web.Forms master page.
JQuery Mobile loads up the first page that you visit, but later pages
are just injected into the existing page. So, there are multiple
data-role="page" divs loaded up in the DOM, inside of the Sitefinity
Web.Forms Master Page.
This all together is causing the form to post with the URL of the
active data-role="page" but the server sees that it is being refered
from the original page I loaded up. So, if I went to the page with
the form first all would work, start at any other page it does not
work.
Now that I know this I can put in data-ajax="false" on the link to the
page with the form and all looks to be working. This will cause
JQuery Mobile to not inject the target page into the current page but
will load all fresh with the target.
data-ajax="false" is the answer!
I am very new to orchard CMS... i am trying to make a site in orchard CMS as this is my first site in orchard... i am facing a fair bit of problem and hindrances to over come... my background of the CMS for creating websites is wordpress/PHP....
but now there in this project i have a problem for the slider in the home page! how could i implement a slider in the home page... after searching a bit i have found to use the featured image slider.. i have tried to implement it... i have installed the module and made the featured group... now MY PROBLEM IS WHERE I CAN ADD THE IMAGES IN THE SLIDER... AS THE FEATURE ITEM FROM THE MENU ONLY SHOW THREE FIELDS HEADLINE,SUB-HEADLINE, AND LINKURL...
kindly let me know where do i can add the images in this slider and show them on the home page of my site....
Thanks alot in advance....
After hell of the search i have got the solution for that purpose... i am elaborating my answer step wise so that the new guys like me should understand that without an inconvenience...
normally orchard CMS uses nivo slider bydefault... if you want to use other sliders follow the same path as pasted below...
1: if you have download the Orchard CMS there will be a Jquery function in the layout.cshtml and the jquery file will also be linked in the script tag, pointing to the package of Jquery in Js or anyother folder...
2: Get the name of the div for which the Jquery is pointing to... normally the name will be "slider".... Copy that name and paste it in your home from CMS... but make sure to keep the name of the div same as the Jquery function narrates which is ("slider").
3:Link your images in the Div...
and browse the site in the browser and enjoy the slider...
I have a fantastic tutorial on pepfry.com for this issue. I have a complete tutorial where I show you all the steps to successfully install the 'Featured Item Slider' with screenshots.
I also have a video on YouTube where you can see the Image slider working successfully.
Regards!
Sumesh M.S