I am using Bootstrap tabs in my XPage application as follows:
<div class="bs-component">
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" data-toggle="tab">
PENDING REQUESTS
</a>
</li>
<li>
<a href="#tab2" data-toggle="tab">
ARCHIVES
</a>
</li>
</ul>
</div>
Upon clicking a given tab, I'd like to set a sessionScope variable. I tried substituting the li with an xp:panel (tagName="li") and an eventHandler attached but could not get it to write to sessionScope. I'm using Mark Leusink's debugger to check scope variables.
Would appreciate suggestions.
Thanks,
Dan
I think the best way it to add some JQuery code to add an onClick event, which triggers SSJS code. How to do this, see http://www.xpagetips.com/2011/11/running-ssjs-from-csjs-sometimes-its.html
This code should work. You must set id attribute for panel
<xp:panel tagName="li" id="XXX">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:sessionScope.XXX = "";}]]></xp:this.action>
</xp:eventHandler>
</xp:panel>
For attach to ssjs event XSP use this code(example):
XSP.attachEvent("view:_id1:_id3:_id12", "view:_id1:_id3:image2", "onclick", null, true, 2);
Where second parameter is target id attribute
Related
I'm attempting to create a custom widget in Sitefinity 11. The goal is to display tabs on the page, with panels of content below each clickable tab. I am using bootstrap to accomplish this which is simple enough.
My hope was to be able to add a Sitefinity placeholder to each tab, which would allow editors to drag and drop a widget, such as a content block to that tab. But it seems that when I try to do this, the placeholder area never displays in the CMS, like it would if I had added a placeholder to a custom template.
Is this possible?
Here is a short code example:
<div class="container mt-3">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li id="tab1" class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#panel1">#Model.Tab1Name</a>
</li>
<li id="tab2" class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel2">#Model.Tab2Name</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="panel1" class="container tab-pane active">
#Html.SfPlaceHolder("Panel1")
<p>here is text</p>
</div>
<div id="panel2" class="container tab-pane fade">
#Html.SfPlaceHolder("Panel2")
</div>
</div>
Appreciate any help.
You cannot put a SfPlaceHolder on a widget, it must be in your layout file (page template).
What you can do is to create a custom designer for your widget and put one or more content blocks in it, e.g. one for each tab you want to have.
Then in the view, you simply render the content.
https://www.progress.com/documentation/sitefinity-cms/create-custom-designer-views-mvc
EDIT: To achieve this you need:
Controllers / MyRichTextController.cs
public string RichText
{
get;
set;
}
Views / MyRichText / DesignerView.Default.cshtml
<div class="form-group">
<sf-html-field class="kendo-content-block"
sf-images-settings="#SettingsHelpers.GetMediaSettings("Image")"
sf-videos-settings="#SettingsHelpers.GetMediaSettings("Video")"
sf-documents-settings="#SettingsHelpers.GetMediaSettings("Document")"
sf-model="properties.RichText.PropertyValue">
</sf-html-field>
</div>
Views / MyRichText / DesignerView.Default.json
{
"priority": 1,
"components": [ "sf-html-field" ]
}
Another alternative could be to create a Layout widget with the above html structure and that will allow the user to put content blocks inside the areas of the layout.
You can just copy any of the existing layout widgets and work on that. Note, that with this approach you would probably have some css rules that hide all but the first tab panel, so you will need to have some additional css rules just for the backend in order to show all the panels so that users can drag widgets to them. That would make this approach a little bit more trickier.
I am trying to test my vuejs component via jest that contains materialize select.
When performing a component test, I get the following error in materialize.js:
TypeError: Cannot set property 'tabIndex' of null at Dropdown._makeDropdownFocusable
How fix this error?
This problem can happen when the input field is not wrapped inside a div with the class input-field:
<div class="input-field">
<input type="text" class="autocomplete"></input>
</div>
Adding a div with the class "input-field might solve this problem.
use id selector instead class selector. for example call dropdown like this :
html :
<a class='dropdown-trigger' id="dropdowner" href='#' data-target='dropdown1'>Drop Me!</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li>one</li>
<li>two</li>
<li class="divider" tabindex="-1"></li>
<li>three</li>
<li><i class="material-icons">view_module</i>four</li>
<li><i class="material-icons">cloud</i>five</li>
</ul>
js:
$('#dropdowner').dropdown();
Can only be used once.
data-target="name_target" must not be repeated
Exam1.❌
<nav>
<div class="nav-wrapper">
<ul class="right hide-on-med-and-down">
<li><a class="dropdown-trigger" href="#!" data-target="name_target1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-trigger" href="#!" data-target="name_target1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<!-- Dropdown Structure -->
<ul id="name_target1" class="dropdown-content">
<li>one</li>
<li>two</li>
</ul>
Exam2.✔️
<nav> <div class="nav-wrapper">
Logo
<ul class="right hide-on-med-and-down">
<li><a class="dropdown-trigger" href="#!" data-target="name_target2">Dropdown<i enter code here class="material-icons right">arrow_drop_down</i></a></li>
</ul> </div> </nav> <ul id="name_target2" class="dropdown-content"> <li>one</li> <li>two</li> </ul>
When I ran into this issue I was trying to create the whole dropdown list dynamically in JS. The fix for me was creating the list and any default list elements in HTML:
<div id="select1" class=\"input-field col s12\">
<select>
<option value="" selected>Default</option>
</select>
<label>Test</label>
</div>
Then appending any dynamic values in JS:
contents.forEach(function(content) {
var buffer = "<option></option>";
var template = $(buffer);
$(template).text(content);
$("select1").find("select").append(template);
});
$("select").formSelect();
pre 1.0.0 you would use data-activates, if data-target is not specified you will get this error
My problem was, that jQuery object was not attached to the DOM yet, so inner materialise code could not init element due to inability to find element by ID:
// materializecss initing dropdown (in my case for input autocomplete), where `t` is the input element
i.id = M.getIdFromTrigger(t),
i.dropdownEl = document.getElementById(i.id),
i.$dropdownEl = h(i.dropdownEl),
M.getIdFromTrigger(t) returned some random ID (not the one I provided) and dropdownEl was inited with null, and later method _makeDropdownFocusable failed on using it `this.dropdownEl.tabIndex = 0
So my problem code looked like this:
let root = $('#root'); // root in the DOM already
let wrapper = $('<div>'); // wrapper is just created and NOT attached to the DOM yet
let input = $('<input>').appendTo(wrapper); // creating input and attaching to the wrapper, but still not in DOM
initAutocomplete(input) // M.Autocomplete.init logic here FAILS
root.append(wrapper) // too late, error above
So the quick fix is to append elements first and only than do M.Autocomplete.init
I just stumbled this issue too while using Materializecss for my Vue project. As mentioned by sajjad, using id selector instead of class works. However, this is problem for initializing multiple dropdown, since each dropdown must have unique ID.
The way I solve this is just by selecting all the elements with the '.dropdown-trigger' class, and initialize every each of those. It works for me.
$.each($('.dropdown-trigger'), function(index, value) {
$(value).dropdown();
});
I am trying to automate a website.I am performing the following steps :
Login
LogOut.
I am able to log in successfully. After the Log in step, the Log Out option is present under a button/tab called as MyAccount. But the Log Out option is displayed when one hovers over the MyAccount button. I am trying to write the Selenium code for Log Out step. But i am consistently getting No Element Found Exception.I am using css Selector .The DOM structure of the Log Out element is :
<li class="_2sYLhZ _2mEF1S" data-reactid="31">
<a class="_1AHrFc _2k0gmP" data-reactid="32" href="/account/?rd=0&link=home_account">My Account</a>
<ul class="_1u5ANM" data-reactid="33">
<li class="_2f5Jjv" data-reactid="34">
<a class="_2k0gmP" data-reactid="35" href="/account/?rd=0&link=home_account">Account</a>
</li>
<li class="_2f5Jjv" data-reactid="36">
<a class="_2k0gmP" data-reactid="37" href="/account/orders?link=home_orders">Orders</a>
</li>
<li class="_2f5Jjv" data-reactid="38">
<a class="_2k0gmP" data-reactid="39" href="/account/wallet?link=home_wallet">Wallet</a>
</li>
<li class="_2f5Jjv" data-reactid="40">
<a class="_2k0gmP" data-reactid="41" href="/wishlist?link=home_wishlist">Wishlist</a>
</li>
<li class="_2f5Jjv" data-reactid="42">
<a class="_2k0gmP" data-reactid="43" href="/account/ebookslibrary">eBooks Library</a>
</li>
<li class="_2f5Jjv" data-reactid="44">
<a class="_2k0gmP" data-reactid="45" href="/profile?link=home_review">Reviews & Ratings</a>
</li>
<li class="_2f5Jjv" data-reactid="46">
<a class="_2k0gmP" data-reactid="47" href="/recommendations?link=home_recommendations">Recommendations</a>
</li>
<li class="_2f5Jjv" data-reactid="48">
<a class="_2k0gmP" data-reactid="49" href="/account/subscriptions?link=home_preferences">Email Preferences</a>
</li>
<li class="_2f5Jjv" data-reactid="50">
<a class="_2k0gmP" data-reactid="51" href="/account/Clickme">Click Me</a>
</li>
<li class="_2f5Jjv" data-reactid="52">
<a class="_2k0gmP" data-reactid="53" href="#">Log Out</a>
</li>
</ul>
Below is the peice of code that i am writing for the clicking the Log Out button.
driver.findElement(By.cssSelector("a[text='Log Out'])")).click();
Could someone please tell me what is the error in the css Selector code that I am using.
There is no such possibility in css selector to select element by child text node. You might use one of attributes as below:
driver.findElement(By.cssSelector("a[data-reactid='53'])")).click();
or to use search by XPath selector if you still want to use text content as identifier:
driver.findElement(By.xpath("//a[text()='Log Out'])")).click();
or by link text:
driver.findElement(By.linkText("Log Out")).click();
Try to move mouse over My Account button using selenium actions like this( Im writing c# code but am sure that methods and classes are the same in java, maybe they differ in case):
Actions action = new Actions(driver);
action.MoveToElement(myAccountElement).Perform();
Then, use webdriverwait and explicitly wait for some seconds.
Afrer waiting, find your element(logout button) and perform click.
But...instead of .click() method, use .sendKeys(keys.Enter) or .sendKeys(keys.Return)
click method sometimes do not work on elements(my personal experience on different sites)
PS: your logout link has href set to '#'.
Try this in your cssSelector:
a[href*='#'])
im trying to do a big dropdown menu but when i click on a main dropdown-toggle TEXT it only highlight but nothing happen... - check the picture
<li class="dropdown dropdown-large">
TEXT
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li>Available glyphs</li>
<li class="disabled">How to use</li>
<li>Examples</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li>Example</li>
<li>Aligninment options</li>
<li>Headers</li>
<li>Disabled menu items</li>
</ul>
</li>
</ul>
</li>
Only Highlight but do not show dropdown
I think this may be causing the problem : TEXT You don't want your toggle button to be a direct link, instead use the intended Bootstrap class
Check this JSFiddle, I think this is what you are trying to do : Answer
If this answer solves your problem, please do accept it.
I would like to change the active pill/tab on document load. I know you can set the active pill like I have below but for other reasons I want to change it after document load. I have tried various bits of JS but nothing seems to work. Here's the HTML and JS (I have also tried replacing data-toggle="pill" with data-toggle="tab" below and still doesn't work).
<div>
<ul class="nav nav-pills pillstyle">
<li class="active tabstyle"><a data-toggle="pill" href="#apple">Apple</a></li>
<li class="tabstyle"><a data-toggle="pill" href="#banana">Banana</a></li>
<li class="tabstyle"><a data-toggle="pill" href="#pear">Pear</a></li>
<li class="tabstyle"><a data-toggle="pill" href="#orange" >Orange</a></li>
</ul>
</div> <!-- nav pills close -->
<div class="tab-content">
<div id="apple" class="tab-pane fade in active"> `
.... content of tabs.
JS
$(document).ready(function(){
$('#banana').tab('show');
});
or
$(document).ready(function(){
$('#banana').pill('show');
});
You just need to change your jQuery selector to address the a element instead of the tab-pane div.
$(document).ready(function(){
$('a[href="#banana"]').tab('show');
});
If you need, you can find more detailed description about bootstrap tabs in the official documentation.
#Stu Here you go.
HTML:
Assign an ID myTab to UL element.
<ul class="nav nav-pills pillstyle" id="myTab">
JS:
$(function () {
$('#myTab a[href="#banana"]').tab('show');
});
Also refer to Bootstrap documentation on selecting different elements on load here. It will give you better understanding.
http://getbootstrap.com/2.3.2/javascript.html#tabs
Working demo: https://jsfiddle.net/tf9k9j27/
Note: Just to answer your trial and error.
You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling. (From bootstrap docs. read more to get better clarity)