Select2 multi-value: How to refresh - select2-rails

I'm using ajax in Rails 4 to load this form. Using select2-rails gem, it renders properly when the document loads:
After I click update, it loads the view partial:
but when I click on edit, the styling doesn't show up, and only the default bootstrap styling shows up:
How do I get this last image to show the select2 styling from the first image? I think it has to do with how select2 styling is loaded when the document is first loaded, but would appreciate a solution. Here is my stylesheet below:
$(document).ready(function(){
$("#e9").select2();
})

Allen:
Hello again by the way...
I had a similar problem in rails 4 and it had to do with turbolinks.
link: http://guides.rubyonrails.org/working_with_javascript_in_rails.html#how-turbolinks-works
In your JS file change your document ready to the function name below, then add the two commands just below the function, which are also below. This may be your issue as well because your page initially loads correctly, however when turbolinks is working, it tries to load only previously loaded files to quicken the load process and may skip your document ready function. Let me know if this helps... (Jake - DBC).
var select2Gem = function(){
$("#e9").select2();
};
$(document).ready(select2Gem);
$(document).on('page:load', select2Gem);

Related

Rendering a user modified page using PhantomJS

My use case is: a user goes onto a webpage and modifies it by either filling in a form, populating the page with data from the database, or dragging around some draggables on the page. He can then download the page he modified as pdf. I was thinking of using PhantomJS to do the conversion from html to pdf.
I understand the basic functionality of PhantomJS and got the basic example working but in all the examples I've seen, either a local file or a url is passed in. Example:
page.open('./test.html', function () { ... }
How would I render the page that is getting modified by a user using PhantomJS? I have 2 ideas:
Have the url change as the user modifies the page, and simply pass in the url. For example, the url contains the position of a draggable div.
Send the modified html to back-end, save it, and run PhantomJS
Do these solutions make sense? I'm hoping there would be a simpler way.

Using jquery for parsing causes image network traffic in Chrome extension?

I'm writing an extension that scrapes web pages using jquery. After a while I start getting net errors saying resources not available and errors in the console loading images in the pages I'm scraping. I thought it might be $.get() loading it as html somehow, but it still happens when I use a raw XMLHttpRequest and it appears even when I call $(text) with static text.
Looking in the application tab of my background page I can see that there are images, even though they don't exist in the html. For example run this in the console of any extension background page:
$('<div>Hello, world!<img src="https://www.gravatar.com/avatar/fdc806d0a8834e57b2d9309849dea8cd"/></div>')
And you can see the image was loaded on the Application tab in dev tools, though it isn't in the html of the page when inspected and but it's visible on the network tab:
I assume that jquery is creating dom elements to use the browser's capabilities for finding elements, and that chrome is happily pre-fetching that image even though the element isn't on the page and the page will never be visible anyway, but it is causing me errors besides the extra network traffic.
I've tried disabling 'precache' in chrome://flags but that didn't work. For now I'm replacing <img with <noimg which seems to work but is not ideal:
$(text.replace(/<img /g, '<noimg '))
Is there a way to keep this from happening? Is there another library besides jQuery (like cheerio in node) that wouldn't actually create dom objects?
Use the built-in DOMParser to parse the HTML into a detached document, then use jQuery on that document object:
var doc = new DOMParser().parseFromString(yourHTMLstring, 'text/html');
$('.some.selector', doc).attr('foo', 'bar');
In case there may be relative links in the HTML, add a base element explicitly:
$(doc.head).append('<base href="' + realFullURL + '">')

SPA approach not working if page contains b:carousel

Environment:
I'm writing a SPA with JSF2.2, Bootsfaces 0.9.1, Primefaces 6.0, JEE7 and Hibernate 5.2 in combination with MySQL 5.7 DB.
What I have:
My SPA has a navbar on the upper part and a specific menu based on the selection of the navbar on the left. On the right side and under the navbar I've my main "content page". Similar to this picture but with the difference that my menu is dynamic:
For updating the content page I'm using AJAX.
Everything around the navigation is working as I expected as long as my content page does not contain a b:carousel!
What I tried to do:
As I mentioned above my SPA and all navigation is working correctly unless I add a b:carousel to a content page.
Please consider following example:
I got 2 content pages. Page 1 contains a single label with some text. Page 2 contains a b:carousel with some images. Page 1 is the welcome page.
As soon as I navigate from page 1 to page 2 nothing happens. I need to completely refresh the whole page to see page 2 and even this is not working everytime.
My main question:
Is there any trick to update the content page with ajax if there's a b:carousel on it?
What am I doing wrong?
EDIT:
I created a sample project on github so you're able to see what I mean. I used Java 1.8, Tomcat 8.0.36 and Netbeans IDE, however the project is a Maven project an should work in eclipse, too.
Project: https://github.com/mweber96/stackoverflow39128418
SPA Approach I partly used: http://www.beyondjava.net/blog/single-page-applications-with-bootsfaces/
This question is related to my previous question: Use ui:repeat with b:carousel?
It's a combination of two bugs:
Your example at GitHub uses PrimeFaces, but it doesn't seem to use a PrimeFaces component. The effect is that PrimeFaces adds some fancy JavaScript to load the missing CSS files dynamically (which is great!), but it doesn't add the PrimeFaces core library, so Mojarra runs into an exception it silently hides. You can fix this by adding a (possibly hidden) PrimeFaces component to your page, by including the PrimeFaces core.js file directly (although I wouldn't recommend that) or - of course - by removing the PrimeFaces dependency if you really don't need it.
BootsFaces relies on the HTML attributes to initialize the carousel. To my surprise, this even works, at least partially. However, to start the sliding automatically, you still need to initialize the JavaScript widget manually. In your case, that's
$("#myCarousel").carousel();
BTW, I suggest you open a bug on our bug tracker to fix the latter point (https://github.com/TheCoder4eu/BootsFaces-OSP/issues). Thanks in advance!

Can I render all zones to an HTML string in a controller method

I'm trying to render the HTML for a content item to a string from within a controller action. Technically I just want to get the "body" part of it without any header/footer stuff. I want to do this so I can get a content item rendering the way I want once, and then display it as a normal orchard page OR by requesting the HTML for the content item via ajax to display it in a div in a JavaScript app. I don't want to have to manually render everything in the JavaScript as that would be duplicating the layout logic I already did. I want to re-use the bulk of the server side rendering so any changes are reflected in my normal orchard page and my JavaScript page. I've been digging into the code and searching everywhere and have gotten close but not all the way there.
I found these:
How to render shape to string?
Using FindView in Orchard
In my controller I have:
var shape = _contentManager.BuildDisplay(contentItem);
Using either of the two methods above, I can render that shape to an HTML string in my controller. All was golden. I was getting the body of that page and using it in JS. Then, I changed a placement file:
<Place Parts_Common_Body="Content:1" />
was changed to:
<Place Parts_Common_Body="/AsideFirst:1" />
The body moved where I wanted it (AsideFirst) in my normal Orchard page but disappeared from the HTML retrieved using the two methods above.
If I look at shape.Content.Items after the BuildDisplay call, I can see the item for the body is no longer there... why is it not rendering all the zones? Or, I guess a more specific question is why is the BuildDisplay method not building the complete shape? Is there a way I can make this work?
I tried a million different things and eventually got this working. Not sure I totally get it yet, but I think the problem had to do with the fact that I was using shape.Content and I'd moved stuff out of the Content zone. And maybe when I was looking at what the BuildDisplay method was returning I was just not looking at some newly created zone that actually did had the stuff I thought was missing. Clearly I need to learn more about zones and shapes... Anyway, I have a new zone called "MainInfo" now that I created in a placement file. I get a MainInfo property on the main shape returned form BuildDisplay and pass shape.MainInfo to the view rendering code and all seems to be working well now.

Orchard - access a content type through different URLs so they use different views

I'm trying to create a CSS documentation library in Orchard. I want to save a description, CSS snippet and HTML snippet against each content type. The first view would show the description and CSS and HTML code written out. The second view would show a preview of what the CSS and HTML look like rendered.
cssdocumentation.com/content/item1
cssdocumentation.com/content/item1/live-preview
I've created the content type and the first view. But I'm not sure how to create the second view. I can see if I can create the alternative URL I can use the Url Alternates module to create an overriding .cshtml
To create an alternative URL I've looked at the autoroute module but this only allows you to adapt a single URL (unless I'm missing something?) and I've looked at Alias UI but this forces me to manually create an alternative URL everytime I create a content item.
Is this possible in Orchard without writting too much C#? (I'm a frontend developer so I only dabble in the behind the scenes stuff)
Thanks for any help
Best solution is to do this within your own module. But as a secondary option instead of having a second page, combine this content with your first page and hide it with CSS. When the user clicks a button to navigate to the next step render the CSS/HTML result on the same page. You can do this in many ways, here are a few ideas:
Render the CSS/HTML result out straight away on the same page but hide it. Show it when the user clicks a button
using jQuery to render the result on the client side. More dynamic if you allow editing of the HTML and CSS.
Redirecting the user to the same page with specific url parameters which you can pick up in your alternate to modify the output.

Resources