So my boss was requesting for me to have the accordions only clickable based on the course title: and not the labels or the rest of the row http://new.omegadesignla.com/courses/math.php
would this even be possible and would it even be worth the work? How would this even be done? I'm assuming i'd have to edition the foundation.js file for the accordion section.
Optional Javascript Configuration
JS
$(document).foundation({
accordion: {
// specify the class used for accordion panels
content_class: 'content',
// specify the class used for active (or open) accordion panels
active_class: 'active',
// allow multiple accordion panels to be active at the same time
multi_expand: false,
// allow accordion panels to be closed by clicking on their headers
// setting to false only closes accordion panels when another is opened
toggleable: true
}
});
Related
I'm trying to open a modal and populate a form field with a model value.
The button to open the modal is embedded in the datatable config js and I'm thinking Livewire is running before the table is built.
The datatable uses ajax to populate and columnDefs to configure rows.
The JS for the config of the datatable is in a #push('scripts') in the component blade file.
The (simplified) render function for the row is:
var datatable = thetable.DataTable({
.....
render: function (data, type, full, meta){
return ('Edit');
},
.....
})
Clicking the button opens the modal but no XHR is made to the components edit function.
If I create an anchor in the same blade file as "normal" html:
<a href="#" wire:click="edit({{ 25 }})">test</button>
The XHR is called as expected.
So, I'm assuming Livewire doesn't know about the button - perhaps it ran before the table was built. Is there a way to force Livewire to wait?
I have tried to emit a Livewire event instead of wire:click = also no XHR.
I have seen the couple Laravel packages for Datatables. They don't suit.
I got this done with emitted events and component listeners.
jQuery's on to bind to the future elements clicks which livewire.emit the events.
protected listeners[] in the component respond to the emitted events.
Trying to build a D.R.Y. list of vocabulary terms with React Bootstrap (v.2.2.3) using Bootstrap 5.1.
I bring in my data:
import vocData from '../data/vocData'
My component:
const VocList = () => {
const [show, setShow] = useState(false)
const handleClose = () => setShow(false)
return (
<ul className="list-inline">
{Object.keys(vocData).map((item, key) => (
<React.Fragment key={key}>
<li className="list-inline-item voc-item">
<Button>
<small>{vocData[item].title}</small>
</Button>
</li>
<Modal
show={show}
onHide={handleClose}
backdrop="static"
keyboard={false}
aria-labelledby={`contained-modal-title-${vocData[item].href}`}
centered
>
<Modal.Header closeButton>
<Modal.Title id={`contained-modal-title-${vocData[item].href}`}>
{vocData[item].title}
</Modal.Title>
</Modal.Header>
<Modal.Body>{vocData[item].content}</Modal.Body>
</Modal>
</React.Fragment>
))}
</ul>
)
}
I can see my list of vocabulary terms is working but my modal is not appearing when I click the button. I've tried to research and read through:
React-Bootstrap Multiple Modal
React-bootstrap Modal component opens/closes all modals when I map through a list
How do I get my react app to display object information in my bootstrap modal when they click on a list item?
How to use React-Bootstrap modals inside a map array method to display AJAX data on button click in React?
how to show react bootstrap modal inside the function
but I'm unable to find an answer.
How can I dynamically setState and be able to render my modal for that vocabulary term in my list?
Try to use Modal only once and not render it many times. You can show only one Modal at time anyway. I have created a subcomponent for clarity.
There are many ways how to play with state. Here the initial state is null and hides the modal. When we click on button we set state with one vocData entry. This also toggles the visibility of Modal.
Finally, when we close its again, we set our state to null. In this way we use one state for two purposes - control vision and rendering of Modal and holding data for it.
I am opening a Modal in ionic2, to search the values from a list. After search, I want to get the selected values back in my parent screen.
searchRooms(){
let modal = this.modalCtrl.create(RoomSearch);
modal.present();
}
This opens my search Modal and there I have list of available rooms. If user click on any room then I want to return back the value to parent page. I am not sure how to do this.
From documentation I feel NavConroller.pop can be used to pass back the values but I don't know how to use that.
Thanks in advance.
You can use onDidDismiss method explained in the Modal Controller.
In the page that opens your modal you can do :
let modal = this.modalCtrl.create(RoomSearch);
modal.onDidDismiss(data => {
// Do things with data coming from modal, for instance :
console.log(data);
});
modal.present();
And this in your modal controller, to close the modal :
this.viewCtrl.dismiss({"foo" : "bar"});
How to force to re-render a custom textfield view?
I create a:
App.Select2View = Ember.TextField.extend({didInsertElement:function() {//plugin called here}});
It's included in a template form and when the form is open and I select another/different item, this custom textfield view (based on select 2) doesn't re-render but stays the same.
I have nested routes/resources. Company under companies. When I select a company I have readonly info and edit button that if clicked calls action on the Company controller to "isEditing" state, in this state a form is open. If I change the state to false it goes back into read only model (viewing the company info).
It's fine if I set it back to read only mode first, and then open another item and the select2 is rendered with this companies data.
But if it's in the isEditing state, with form open and I navigate to another company item all form input fields change according to model (such as name will change because it's binded to the name key value of the company model), but the select2 stays the same as previous.
I'm not sure how to re-render this in Ember.
This is defined as partial in template under the main company template view:
<script type="text/x-handlebars" id="company/_edit">
<p>{{input type="text" value=name}}</p>
<p>
{{view "select2"
prompt="Search for companies"
resource="results"
displayKey="text"
onSelect="addCompany"
onDeSelect="removeCompany"
}}
</p>
</script>
Any pointers are appreciated.
I'm new to Ember and my answer might not be apt, but based on my experiments the problem is that Ember caches as much as possible. So it won't re-render the view completely with the select2, only when view is in a certain state previous state followed by next state will it automatically re-render.
The solution atleast for now seems to be to add a "valueChange" method with observer on "value" change on the select2 custom TextField and make the same call as in "didInsertElement" (which executes when the view is rendered):
valueChange: function() {
Ember.run.scheduleOnce('afterRender', this, 'setupSelect2');
}.observes('value'),
Now even if I'm in the "edit" state, it will update this select2 as well, not just the standard form inputs tied specifically to the model. I can now navigate to any item in "edit" state which has form open for each item selected and values change correspondingly in the select2.
I build a basic emberjs app, the app lists posts, and every post has a star / unstar event.
I would like to list all starred posts in the sidebar, without server side communications. What is the best way to do that? My first idea is that: I create a star action to PostsController, which add starred posts to an array, and I will list this array in the template.
The simplest solution I can think for this is to set an attribute star on the post model which will be false by default, then you can set star to true when you want and render in the sidebar all post filtered by star attribute.
Code would be something like this (coffeescript) :
App.Post = DS.Model.extend
title: DS.attr('string')
star: false
App.Post.reopenClass
stared: ->
#filter (post) -> post.get('star') is true
From this you can render App.Post.stared() array in your sidebar.