I have to create multi page angular framework using ng boilerplate. We have modular component based approach and single component can be created multiple times on same page. For example I can have 2 instance of carousel component on home page and there configuration and slides parameter for image path etc are coming from ajax. Now challenge is that this ajax url is dynamic and there is no fixed pattern so I cant hard code in my js. is there any way I can pass this dynamic url from template to my $http request?
Something like this in
<div ng-controller="CarouselCtrl" carouselUrl="<dynamic url>">
<div class="container slider">
<ul>
<li ng-repeat="slide in slides">//..</li>
</ul>
</div>
</div>
You can pass attributes to controllers only in directives. Moreover, you might rethink having your CarouselCtrl logic in separate directive, as this is clearly the case where this should be done.
Related
I have Laravel app that I wrapped in a Vue entry point, <div id="app-shop"></div>. I have Vue components I can use in the layout blade with no problem. In the layout blade, I have #yield('content') to display other content. One such section is the shopping cart, such as /cart route which yields my cart.blade file. When I try to use the same component in the cart.blade though, it doesn't show.
Cart.blade.php
#section('content')
<div>
<checkout-component></checkout-component>
</div>
#endsection
Attempting to use it like this does not work. I see no errors in the console but the component doesn't render.
I am using ReactJS to render a like/unlike component for an object in a django project. I have a list page where I have a list of objects and for each object I render a LikeUnlike component as follows:
<div class="object">
<span id="likes-service-{{service.pk}}"></span>
<script type="text/jsx">
React.render(<LikeUnlike object_id="{{service.pk}}" app_label="providers" model_name="providerservice" like_count="{{service.like_count}}" liked="{% user_has_liked 'providers' 'providerservice' service.pk request.user.pk %}" />, document.getElementById("likes-service-{{service.pk}}"));
</script>
</div>
On the very first page every thing works. The component renders and works as expected. The issue comes in when I scroll down and the second page is loaded via ajax (as I am using django-endless-pagination). For any pages loaded via ajax, the component is not rendered and all I see is a blank <span id="likes-service-{{service.pk}}"></span> element.
I have tried logging document.getElementById("likes-service-{{service.pk}}") and few other things and seems like the element, React library etc. are available.
I can't figure out why the component is not rendered when the page is loaded via ajax. Any Ideas ?
I'm having problems the default Html.ValidationSummary() in MVC 3.
As default it adds this code:
<ul>
<li style="display:none"></li>
</ul>
And that empty <ul> causes space I would like to get rid of.
Is there some way to work around this problem? Make it toggle some div around it or similar?
how about conditionally showing ValidationSummary
if(!ViewData.ModelState.IsValid)
{
#Html.ValidationSummary()
}
important if you do this you won't be able to use client-side javascript validation (as the div wont be present)
You can create your own validation summary, for example, like here: Custom ValidationSummary template Asp.net MVC 3
I am developing a web app using asp.net mvc 3. I have a main layout page which contains jquery ui tabs.
I am using knockout.js binding tool. My issue is from my tabs how can I go the relevant controller to return the view. Example is I click on tasks project so in the container for the view it should show the tasks page as rendered by the tasks controller
Any help would be good
Thanks
The simplest solution is to us RenderPartial. Then you can either bind each tab via knockout, or bind the whole lot of them.
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<% Html.RenderPartial("TabOne", Model);%>
</div>
<div id="tabs-2">
<% Html.RenderPartial("TabTwo", Model);%>
</div>
<div id="tabs-3">
<% Html.RenderPartial("TabThree", Model);%>
</div>
This assumes that the html content doesn't vary based off of the data, or at least not so much that knockout can't take care of it. If your html varies a lot you can use a routing system like Crossroads.js (http://millermedeiros.github.com/crossroads.js/) and fetch the data for the div using ajax.
I've been scratching my head like crazy over this all day, there seems to be a hundred different ways to get what I want done but I want it done a certain way - which I can't find.
Here's what I'm working on: http://schmidtbrotherscutlery.com/dev/mySchmidt/myCutlery/
My setup is one view with four different pages, each filtered by category. Default page above lists all three categories at once, and the Category sublinks in the menu take you to the three other view pages that are filtered by a single category. What I need is each of the category sublinks to load their respective view pages with AJAX instead of page by page refresh like it is now. I realize I can effectively achieve the same thing with an exposed filter on the categories but I want these specific menu sublinks to load the view pages, not filter one view on it's own with an exposed form. This really doesn't seem to be that difficult and I don't know why I haven't been able to figure it out yet but I don't have much experience with Drupal+AJAX integration. Help please!
From what I've read it sounds like you should be able to put each of the views within a jQuery tab container. So for example:
<div id="tabs">
<div class="tab">
<?php views_embed_view('viewname', 'block_1')?>
</div>
<div class="tab">
<?php views_embed_view('viewname', 'block_2')?>
</div>
<div class="tab">
<?php views_embed_view('viewname', 'block_3')?>
</div>
</div>
This would allow you to cycle through each content piece without refreshing the page.