I created one button manually like below in foundation joy ride, in-order to disable the foundation joy ride completely.
neverShowJoyRide: function(){
$(document).foundation('joyride', 'hide'); //hide the joy ride on trigger
},
render: function () {
var self = this;
return (
<ol className="joyride-list" data-joyride>
<li data-id="startJoyRide" data-text="Next" data-options="prev_button: false; tip_location: left">
<p>Welcome to XXXX - Would you like to take a guided tour of the site ?</p>
<button className="small button" onClick={this.neverShowJoyRide}>Never show this Again</button>
</li>
</ol>
);
}
I am using this code in react. When i render this code in my react component, it is not showing any error. But when i click on the button "never show this again" then i am getting an error message like:
invariant.js:42 Uncaught Error: Invariant Violation: ReactMount: Two valid but unequal nodes with the same data-reactid: .0.0.5.0.2.0.0.1
Does any one have any idea about this? please help me. Thanks in advance.
Related
tap:AMP.setState not working at times but it works when i reload the page.
<div class="padTop20">
<a [class]="model.nextStep.expand ? 'hide' : 'show'" role="button" class="show" on="tap:AMP.setState({model:{nextStep:{expand: true}}})" id="showmore">Show more</a>
<a [class]="model.nextStep.expand ? 'show' : 'hide'" role="button" class="hide" on="tap:AMP.setState({model:{nextStep:{expand: false}}})" id="showless">Show less</a>
</div>
Here's my default state:
<amp-state id="model">
<script type="application/json">
{
"nextStep":{
"expand":false
}
}
</script>
</amp-state>
Is it something because of network that makes it behave like this?? Appreciate for any help! thanks!
You should try;
[class]="(model.nextStep.expand == 'true') ? 'hide' : 'show'"
and
[class]="(model.nextStep.expand == 'false') ? 'show' : 'hide'"
On page load, as soon as the DOM is loaded, your initial state (false) is fired and [class] is rendered because of amp-bind.
You didn't post much in terms of any console errors or validation errors you might be facing with AMP (which will affect the functionality if you did something weird/wrong)
I am currently working within SharePoint 2013 and was wondering if there was a way to create a button on a home page that when pressed, opens a list form in a modal window? (or in a non modal window).
I understand the method of using "Embed code" to code a button; however, it doesn't seem to allow me to link it to a list form, or edit what the button actually does.
Example:
1. An employee lands on the home page and wants to initiate a Purchase Request through the company.
2. The employee clicks on a button labeled "Click here to submit a Purchase Request".
3. After clicking, the Purchase Request form opens from the Purchase Request list (pre-created).
Thank you for your assistance!
You can use something like this in a CEWP to redirect to the new item form:
<button onclick="formRedirect(); return false;">New Form</button>
<script>
function formRedirect() {
window.location = "/test/Lists/LinkList/NewForm.aspx"
}
</script>
To display it in Modal form you will need to use the NewItem2 JS function:
<button onclick="NewItem2(event, "https://Your.SP.Site/_layouts/15/listform.aspx?PageType=8&ListId=%7B59E6FE0C%2D02C6%2D4B00%2D9B6A%2D87116A2DF594%7D&RootFolder="); return false;">New Form</button>
To get this to work you will need the list web part on the page where the button is located, though it can be hidden from view by setting th chrome to none and minimizing it. You can copy the function from the new item button in the list you wish to display, it is stored as an 'OnClick' property.
I know I am late to this but I just figured how to do this for the "Upload Document" for a document library. It took me a while but I stumbled upon it through trial and error using F12. I will provide both script for a "LIST and LIBRARY" form.
FOR A LIST:
<a href="#" onclick="openDialog('YourSiteURL/Lists/YourListName/NewForm.aspx');">
<img src="YourSiteImageURL" alt="NameofYourImage">
</a>
<script>
function openDialog(pageUrl) {
var options = {
url: pageUrl,
title: 'NameofYourForm', /* Enter the name you want for your form */
allowMaximize: false,
showClose: true,
width: 1225, /* Modify for your needs */
height: 800 /* Modify for your needs */
};
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
}
</script>
FOR A LIBRARY:
This is for use with a button:
<a class="ms-addnew" id="idHomePageNewDocument" onclick='NewItem2(event, "YourSiteURL/_layouts/15/Upload.aspx?List={YourListID}&RootFolder="); return false;' href="YourSiteURL/_layouts/15/Upload.aspx?List={SameListID}&RootFolder=" target="_self" data-viewctr="702">
<img src="URLforYourButtonImage" alt="NameofYourButton">
</a>
This is for use with text:
<a class="ms-addnew" id="idHomePageNewDocument" onclick='NewItem2(event, "YourSiteURL/_layouts/15/Upload.aspx?List={YourListID}&RootFolder="); return false;' href="YourSiteURL/_layouts/15/Upload.aspx?List={SameListID}&RootFolder=" target="_self" data-viewctr="702">Add document
</a>
I have the need to load random items in my Ember application. To do this, I do the following:
Test.ApplicationRoute = Ember.Route.extend({
events: {
randomItem: function() {
var route = this;
$.getJSON('item/random.json', function(data) {
Test.Item.find(data).then(function(item) {
route.transitionTo('items.show', item);
});
});
}, // ..... etc
This works fine, except for one thing: nested-sideloaded data is not shown. When items.show is visited via a {{#linkTo 'items.show' item}}, the item's child data is also loaded and visible. However, when this randomItem event is fired, only the direct children are shown. The children of the children are not.
Why is this and/or how do I fix this?
It turns out, the reason the artifacts are not being shown is that I try to listen to controller.content.isLoaded to adapt the view to show a loading image if the content is still loading.
For some reason, the following shows the loading... text and icon forever on subsequent usages of the route:
{{#if controller.model.isLoaded}}
<div class="row">
</div>
{{#each artifact in controller}}
{{render "artifacts.show" artifact}}
{{else}}
<span class="muted">There are no artifacts.</span>
{{/each}}
{{else}}
<i class="icon-spin icon-spinner icon-large"></i> Loading...
{{/if}}
If anyone knows why, please let me know, so I can solve this problem.
I have a master/detail page that I am trying to test. There is a list of things, which, when you click renders the route for the thing.
The following test finds the thing to click, but doesn't seem to click it.
#exists = (selector) ->
!!find(selector).length
...
test "things expand to show a detail view", 1, ->
visit("/").then(->
click(".things li:contains('Example Thing')")
).then ->
ok(#exists("h2")) # a tag in the detail view
...
<ul class='things'>
{{#each controller}}
<li>{{#linkTo 'thing' this}}{{title}}{{/linkTo}}</li>
{{/each}}
</ul>
{{outlet}}
...
<div class='thing'>
<h2>{{title}}</h2>
</div>
This raises with: Failure/Error: Element h2 not found. Does anybody know what I am missing/how to get this test to pass?
I am using teaspoon (formerly known as teabag) in the browser as a test runner, if that makes a difference. Should I be able to see the interaction happening as the test clicks around?
You shouldn't click the <li> element, but the <a> element instead.
The linkTo helper in handlebars generate an <a> tag in the DOM.
Something like click(".things li:contains('Example Thing') a ") should works.
I'm working on an Ember app (using RC1) and am having a problem with IE (surprise). We have a series of nested views that can show either a trip's summary, details, or edit. The trip view looks (roughly) like this:
{{#if tripController.showSummary}}
{{template "view/TripSummaryView"}}
{{/if}}
{{#if tripController.showDetails}}
{{template "view/TripDetailView"}}
{{/if}}
{{#if tripController.showEdit}}
{{template "view/TripEditView"}}
{{/if}}
On the div surrounding the trip summary view, I have an action:
<div {{bindAttr id="tripController.tripId"}}
class="card single-line"
{{action "toggleDetails" tripController on="click"}}
style="cursor:pointer">
And the controller handles the action:
toggleDetails: function(tripController) {
if (this.get('showDetails')) {
this.set('showDetails', false);
this.set('showSummary', true);
} else {
this.set('showDetails', true);
this.set('showSummary', false);
}
},
All pretty vanilla, and it works perfectly in Chrome, FF, and Safari. But when I run it in IE, it bombs in the metamorph's realNode() function (line 17264 in ember.js):
var realNode = function(start) {
while (start.parentNode.tagName === "") {
start = start.parentNode;
}
return start;
};
with this error:
SCRIPT5007: Unable to get value of the property 'parentNode': object is null or undefined
When I put a breakpoint in the code, it appears that Ember is trying to remove 2 metamorphs, but that the second is inside the first and so start is null the second time around. I put a breakpoint in that function in Chrome, but it doesn't ever appear to get called.
I've tried reducing this down to a JSFiddle, but I can't seem to get it to break - so there must be something in the way we've got our views set up that's causing a problem. Any suggestions on how to go about debugging this would be most appreciated!
Thanks,
Scott
You can achieve the same using ContainerView but I am also facing similar problem where childviews are not receiving model/controller. Here is a [similar post] (An example of ContainerView required where childViews are binded with their respective controllers "containerview's childviews controller binding")