I'm working with the textpattern commenting system using the jQuery Mobile framework.
At the moment when loading the individual article page "http://www.elisabettaclaudio.com/maestro-conte" the form in the popup won't let me post the preview.
Instead the form works when getting to the article page, let's say from this URL "http://www.elisabettaclaudio.com/oh-my-blog" and then go the "http://www.elisabettaclaudio.com/maestro-conte" and I'm able to post the preview.
Any ideas? Thanks!
Related
I'm using a Rails 6 template (Jumpstart Pro) that has the new stuff hotwire, stimulus, webpacker. It works OK for basic stuff... scaffolding new models and make CRUD forms, etc.
However one of my pages uses a vendor's javascript widget, which also requires jquery.
Neither Jumpstart Pro template nor its Forum have any up-to-date documentation or support for adding jQuery via webpacker (e.g., no support for adding jquery the "right way").
So I've added jquery to the one page that needs it via a good old fashioned script tags in the header
%script{:src => "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"}
followed by the vendor's javascript to initialize the vendor's widget, inside $(document).ready(function(){ init_code_goes_here }); so the widget has time to load to the page.
Works: If I type the page's url into the browser "localhost:5000/cool_page" or "mydev.ngrok/cool_page", it works fine.
Broken: But clicking a link IN the app to go to the page (via link_to "cool page", "/cool_page") does not work:
jQuery is loaded (I have a little "hello world" jquery script that un-hides a div to confirm jquery is loaded)
the vendor widget does not load properly (browser console says widget object is null)
But if I then refresh the page, everything loads fine.
So the page works if "loaded" but not it reached via another page.
From this I infer that the magic behind hotwire/etc is interfering with a proper load of the page when I navigate to it.
So, the question: in a hotwire-enabled Rails 6 app, is there any way to have a nav link that, when clicked, simply tells Rails... skip hotwire shortcuts, load this page for real?
I believe your issue is just that you need to restore default (non-Hotwire) link behavior. There are 3 ways to do that.
See this answer: https://stackoverflow.com/a/68657223/2648054
In short:
1: Set the data-turbo attribute to false.
2: Set the target attribute to "_top".
3: Move the link outside any Turbo frame. Any link inside a Turbo frame, without one of the above attributes, will be handled by Turbo by default.
This is my first question on SO so i'll try and make it as clear and as understandable as possible.
I've recently started messing around with Angular JS and currently I am working on a mobile app using Angular JS and jQuery Mobile. So far I've not had any major problems and so far have no had a need to consider any external libraries for integration (such as the angular js + jquery mobile adapter). I've created a multi-page app (currently only two pages) and used separate controllers for each page (login + content page). The app itself is simple, it's just a list keeping app and i've created a quick jsfiddle based on the ui aspect of the content page: http://jsfiddle.net/G7JNV/4/
The app works as expected from the jsfiddle. However because the content page is a page in the same html document (index.html) as the login page, to navigate to the content page the url becomes:
.../index.html#mainpage
(mainpage being the page for the list keeper)
Thats when things start getting funny. When the url is like above, when adding an item to the list, the item is initially unstyled (it doesn't look like it's part of the list) but the css styling for that item comes back after adding another item. Of course the next item is then unstyled (and so on).
If you want to see what the issue looks like:
Everything however works fine if i don't have the hash page as part of the URL (I tested this by turning the two page app into just one page for the content so that .../index.html goes straight to the content page). The css is applied to the dynamic content fine as one would expect.
Of course I have no idea why it's doing this and I suspect that it's something to do with how angular and jqm treat the hash anchor in the URL (but bare in mind I don't have much experience in both Angular JS nor jQuery Mobile).
Any help from any of the more experienced Angular JS (and jQuery Mobile) users would be greatly appreciated!
You should be creating a directive that encapsulates the list and the logic that you have for it.
As suggested in the comments to your questions, a timeout can work. If you're having issues with the element "flashing" or "flickering", you can use the ngCloak directive to deal with this.
You may also want to check out the $locationProvider configuration in your app and turn off HTML5 mode or set the hash prefix.
I'm fairly new to jquery mobile, and am getting an error when trying to link a file in my jquery mobile project for download. I would like a user to be able to download a .zip file from the app, but get either a page loading error, or undefined displayed in a new page. I tried using an anchor tag to link the file to download, but it doesn't seem to work right. I know jquery mobile makes use of the anchor tag, so I don't know if there is something special that needs to be done. Any help?
You are likely getting the exception when jQuery Mobile assumes the link is a page and attempts an AJAX page load. Disable AJAX loading on the link.
Link
And I have no idea what the typical mobile browser will do with a link to zip file.
I've built a mobile web app with jQuery Mobile. In the index.php file, there're multiple pages declared as data-role="some_page_name" and their urls are like index.php#my_profile.
Now I want to use Optimizely to do A/B test on one of the pages. I created one variation and let it redirect index.php#my_profile to a new page, url: index_b.php#my_profile. But I have trouble linking this page to other not-in-test pages.
For example, if I have a link in index_b.php#my_profile like this:
My Favorite
It can't link to the favorite page in index.php. And sometimes if it does, you navigate to other pages, you'll never go back to the B version/variation.
Looks like Optimizely can't adapt to the jQuery Mobile multi-page structure.
Any solutions?
You can try to add more tag in href link, such as,
My Favorite
<a href="index.php#favorite" data-ajax='false'>My Favorite</a>
You also could use full link path with http:// prefix.
My Favorite
And an other option is add a link click JavaScript method. You can control the JavaScript content.
It should be okay on optimizely or visual website optimizer.
I have 2 application layouts: application.html.haml and application.mobile.haml. But when I switch from mobile to the non-mobile version the mobile layout is still used for the first load. In Firebug console I see that the non-mobile view was properly returned, however the browser and the Firebug HTML tab show the mobile layout. Any idea what's going? It's fine after a refresh.
The issue turned out to be caused by JQuery Mobile.
I found the answer here: http://jquerymobile.com/demos/1.0a3/docs/pages/docs-pages.html
JQuery Mobile doesn't do full page reloads unless it's told to, so although the full html was returned, JQuery Mobile just replaced the page portion.
The key portion from the docs is:
"It's important to note if you are linking from a mobile page that was loaded via Ajax to a page with multiple internal pages, you need to add a rel="external" or data-ajax="false" to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (#) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be a conflicts."
Recently, I encountered a similar problem.
In my case, Rails4's turbolinks suffered. Similarly as JQuery Mobile, turbolinks only updates the body part of a full page without updating the head part of the html when an intra-site link is clicked. I simply removed the require line for turbolinks in my application.js and the problem disappeared.