Menu sub-items not showing on mobile (understrap theme) - mobile

I'm building a website using understrap-child theme.
I've got a navbar with a lot of items and sub-items (up to three levels). I've set the navbar depht to 0 since, according to the documentation, it should allow all the sub items to show in the menu.
<!-- The WordPress Menu goes here -->
<?php wp_nav_menu(
array(
'theme_location' => 'primary',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'navbarNavDropdown',
'menu_class' => 'navbar-nav ml-auto',
'fallback_cb' => '',
'menu_id' => 'main-menu',
'depth' => 0,
'walker' => new Understrap_WP_Bootstrap_Navwalker(),
)
); ?>
It seems to be working fine on the desktop version, but once I switch to mobile, I am only able to see the first sub-items and not all those that come after that. E.g. ABOUT (first item) --> ABOUT US (sub item) --> OUR ALLIANCES (sub-sub-item). in the mobile version nothing shows after "ABOUT US". Is there a way to solve this problem?
Any suggestion would be really appreciated!
THANK YOU!

try to put depth => 2 instead of 0.
may be then your problem will be solved.

Related

React dropdown selected value is not filtered after refresh page

i have some problems, i am using devextreme(Tagbox) dropdown, i have a list of my grid and filtered very well. but when i am refreshing the page filter is gone(the grid behavior seems like selectall from to my db) i am research on stack overflow this issue, some people says use localstorage, and i did it, but couldn't find any solutions i don't know whats the best way doing that,
i did selected target value and then pass to data my state, after that i don't know what will i do right now.. Thank you!
this my code;
<TagBox
dataSource={this.getRegions}
displayExpr="name"
valueExpr="id"
onValueChanged={this.onRegionChanged}
/>
onRegionChanged = (e) => {
LS._setItem("FilterRegion", e.value);
const FilteredRegion = LS._getItem("FilterRegion");
this.setState((prevState) => ({
...prevState.FilteredRegion,
FilterRegion: FilteredRegion,
}));
console.log(this.state.FilterRegion);

How to delete Material UI chip element based on Material UI's github label picker example

I was playing with Material UI autocomplete component's github label picker example and modified it as per sandbox below:
https://codesandbox.io/s/material-demo-hwi3l?file=/demo.js
The Autocomplete works fine. When I select company names from the list they show up as chip elements after closing and when I deselect them individually, they get hidden as well. However, I am unable to figure out how to delete individual elements by clicking on chip's close button. I am unable to figure out what exactly to put in the chip's onDelete prop?
{
value.map((company, index) => (
<Chip
label={company.name}
onDelete={(event, newValue) => {
//setPendingValue(company);
}}
color="primary"
className={classes.selectedCompanies}
/>
))
}
Since the Chip as per sandbox is inside the value array, I am not sure how I could delete something from inside it while looping through it. Any help would be greatly appreciated.
One way to delete from an array is to filter where each iterated item is not the deletable item. Doing so returns a new array that omits the deletable item. So in your example:
The delete-handler:
const handleDelete = name => {
const newValue = value.filter(company => company.name !== name);
setValue(newValue);
};
The chip element:
{value.map((company) => (
<Chip
key={company.name}
label={company.name}
onDelete={() => handleDelete(company.name)}
The codesandbox with the solution
Note, in React, you should include the iterated key in each list item.

CakePHP onClick for form->end

I would like to include a javascript function for preventing user from submiting form twice, but I just cannot call the function on submit click. Here is what I have tried:
<?php echo $this->Form->end(__('Save'), array('onclick'=>'submit();'));?>
I went through the documentation and it seems that the Form->end does not take such parameters, which is really odd. Can that be true?
Any information or help is much appreciated
you need to do in this way : -
$options = array(
'label' => 'submit',
'div' => FALSE,
'onclick'=>'submit()'
);
echo $this->Form->end($options);
This will generate :-
<input type="submit" value="submit" onclick="submit()">
Documentation : Click Here
An alternative solution is to use onSubmit in $this->Form->create()
$this->Form->create('Model', array(
'onsubmit' => 'return submit();',
//other create options
)
And in your JavaScript use a flag to keep track if the form was submitted, and return false if it has. If it hasn't return true and the form will submit.
You might also want to disable the submit button the first time the form is submitted to make it clear to the user that the form can't be submitted again.

Cakephp add form inside modal window while in index view

New to cakephp here.. wondering how i could have a button whilst in my index view to open an add form ( for the same model ). once i submit this form i'd like the modal to disappear and the new record to be show in the index view. I was thinking of putting the add form in a cake element? but not sure how to put this in a modal window. any advice would be great thanks.
What #savedario says makes perfect sense. I blogged about this just before Christmas and have copied the relevant bits below:
View/Users/index.php:
<!-- overlayed element -->
<div id="dialogModal">
<!-- the external content is loaded inside this tag -->
<div class="contentWrap"></div>
</div>
...
<div class="actions">
<ul>
<li>
<?php echo $this->Html->link(__('Add user', true), array("controller"=>"users", "action"=>"add"), array("class"=>"overlay", "title"=>"Add User"));
</li>
</ul>
</div>
...
<script>
$(document).ready(function() {
//prepare the dialog
$( "#dialogModal" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 500
},
hide: {
effect: "blind",
duration: 500
},
modal: true
});
//respond to click event on anything with 'overlay' class
$(".overlay").click(function(event){
event.preventDefault();
$('#contentWrap').load($(this).attr("href")); //load content from href of link
$('#dialogModal').dialog('option', 'title', $(this).attr("title")); //make dialog title that of link
$('#dialogModal').dialog('open'); //open the dialog
});
});
</script>
Views/Users/add.ctp:
echo $this->Form->create('User');
echo $this->Form->input('name');
echo $this->Js->submit('Save', array( //create 'ajax' save button
'update' => '#contentWrap' //id of DOM element to update with selector
));
if (false != $saved){ //will only be true if saved OK in controller from ajax save above
echo "<script>
$('#dialogModal').dialog('close'); //close containing dialog
location.reload(); //if you want to reload parent page to show updated user
</script>";
}
echo $this->Form->end();
echo $this->Js->writeBuffer(); //assuming this view is rendered without the default layout, make sure you write out the JS buffer at the bottom of the page
Controllers/UsersController.php:
function add() {
...
$this->set('saved', false); //false by default - controls closure of overlay in which this is opened
if (!empty($this->request->data)) {
$this->User->create();
if ($this->User->save($this->request->data)){
$this->set('saved', true); //only set true if data saves OK
}
}
...
}
You'll need to have included JQuery 1.9+ and JQuery UI js files in the layout used by your index.ctp and add.ctp.
Actually I have now switched to Bootstrap modals in my own code because I think they look nicer but the approach is very similar.
CakePHP does not have a built-in functionality to do what you want.
Using Elements here does not necessarily help, unless you find yourself writing the same code in different places...
I could not find anything already written to handle this, so I wrote my own javascript functions that work but I doubt could be used as a plugin.
To explain the whole thing would be a bit too long here.
I suggest you start looking at Jquery UI Dialog.
Your index view will need an 'onclick' on the 'add' action button to open the dialog.
The content of the dialog itself could come from the same add() action you would normally use, loaded via an ajax call.
I used bootstrap 3 for my cakephp project which included modals, but that may be overkill for your project.
You have to use bootstrap or jquery to do this. CakePHP does not have a built-in functionality to do what you want.
Typo
<div class="contentWrap"></div>
must be
<div id="contentWrap"></div>
or
$('#contentWrap').load($(this).attr("href"));
must be
$('.contentWrap').load($(this).attr("href"));

Drupal webform programmatically creating composite components

I have successfully created a custom webform component for a specific type of data. The data comes in various sections so I need to create additional but existing component types which will be sub-components to my custom component.
Basically, I am trying to create a composite of webform components programmatically.
My problem is, the code all executes successfully - I get my custom component gets created and I get feedback saying my sub-components were also successfully created.
However, the sub-components do not show-up in my webform.
At the point when my custom component is created and inserted in to the DB, I am attempting to create all the necessary sub-components via the following code:
function my_module_webform_component_insert($component){
if($component['type'] == 'my_component'){
$node = node_load($component['nid']);
$address_fields = array("my_sub_component1", "my_sub_component2");
foreach ($address_fields as $key => $address_field) {
//fetch next available component ID
$next_id_query = db_select('webform_component')->condition('nid', $component['nid']);
$next_id_query->addExpression('MAX(cid) + 1', 'cid');
$next_cid = $next_id_query->execute()->fetchField();
_create_sub_component($component['nid'], $address_field, $next_cid, $component['cid']);
}
}
}
My _create_sub_component function is defined below:
function _create_sub_component($nid, $new_component, $cid, $pid){
$node = node_load($nid);
$processed_name = str_replace(' ', '_', strtolower($new_component));
// Create the webform components array. Not sure if we need all these
// values, but let's be sure.
$component = array(
'cid' => (int)$cid,
'pid' => 0,#(int)$pid,
'nid' => (int)$node->nid,
// I don't trust the admin to make a key based on input :)
'form_key' => $processed_name,
'name' => $new_component,
// I want all lines to be numeric type component.
'type' => 'textfield',
'value' => '',
'extra' => array(),
'mandatory' => '0',
'weight' => 0,
'page_num' => 1,
);
array_push($node->webform['components'], $component);
node_save($node);
drupal_set_message("{$new_component} component successfully created in {$node->title}");
}
My guess is the call to node_save is causing the problem but I don't know exactly how.
Got it!
Replace:
array_push($node->webform['components'], $component);
node_save($node)
With:
webform_component_insert($component);

Resources