I have a sencha touch 2 app which is working flawlessly without deployment. However, when I deploy to either testing, production or native, I have several buttons inside a navigation view with tap events which won't work anymore. No errors are shown. I cannot understand why this is happening only after deployment.
Here is the relevant code:
Controller:
control: {
'#main-function': {
tap: 'loadFunction'
},
loadMyBoat: function() {
this.getProducts().up().push({
xtype: 'myxtype',
})
Ext.getStore('Items').getProxy().setUrl('myurl');
Ext.getStore('Items').load();
},
View:
Ext.define('MyBoat.view.ItemList', {
extend: 'Ext.navigation.View',
xtype: 'myxtype',
config: {
title: 'My Title',
styleHtmlContent: true,
defaultBackButtonText: 'Items List',
items: {
xtype: 'list',
itemTpl: '{Field_Name}',
title: 'Tap on a boat to access further details',
store: 'Boats'
}
}
})
Anyone ever encountered this? Any help would be greatly appreciated.
Open up your DOM editor (in chrome, F12 I believe). Your control selector is selecting #main-function, so you'll want to make sure this is a valid selector.
On the console of your developer tools window, type:
Ext.ComponentQuery.query('#main-function')
This should be what the controller is trying.
After lots of debugging I managed to fix the problem. Turns out that using the following code to generate any component will not work well after deployment:
new Ext.button({.....})
Instead you have to use xtypes rather than the new keyword. I think this has something to do with the fact that the deployer stores all the js code in one file and thus since I was using the new keyword, it was being created somewhere in the js file when it actually won't exist in the context. The weird thing is that it does not show any errors so hopefully this will help other folks.
Related
I have a client React app I'm instrumenting in appinsights, and I'm using both the React plugin and the new ClickAnalytics plugin. Everything works, telemetry is flowing, however I'm having trouble getting the data-*-id custom event feature working properly.
The docs say:
The id provided in the data-*-id will be used as the customEvent name. For example, if the clicked HTML element has the attribute "data-sample-id"="button1", then "button1" will be the customEvent name.
I instrument an element as follows (using Semantic UI React):
<Button
data-custom-id="AddDealButton"
as={Link}
color="blue"
icon
labelPosition="right"
size="huge"
>
Clicking that button causes the custom event to record but the name, "AddDealButton", doesn't flow through. I always get not_specified as the event name:
Reading the docs, there is this warning regarding the plugin configuration:
If useDefaultContentNameOrId is false, then the customEvent name will be "not_specified".
So I am initializing the plugin this way:
...
extensions: [reactPlugin, clickPlugin],
extensionConfig: {
[reactPlugin.identifier]: { history: browserHistory },
[clickPlugin.identifier]: { autoCapture: true, useDefaultContentNameOrId: true }
}
...yet the name does not pass. Am I misconfiguring? Any idea what I'm doing wrong?
It turns out the problem was in the initialization configuration I showed above. It should be set up as follows:
...
extensions: [reactPlugin, clickPlugin],
extensionConfig: {
[reactPlugin.identifier]: { history: browserHistory },
[clickPlugin.identifier]: { autoCapture: true, dataTags: { useDefaultContentNameOrId: true } }
}
The resulting event name is not being pulled from my data-custom-id but rather pulled from the content of the Icon element of the Button component, so the event name becomes "Create new deal", but I can figure that out.
Microsoft's docs show a different samples for the npm install method vs the "snippet" method, and so I missed the dataTags sample.
I am writing e2e Testcases on Cypress for webshop, we have integrated PayPal and I am unable to click on the PayPal button with in the iframe.
I always get an error in finding the element in iframe.
someone have an idea how can I do that?
code
cy.get('iframe')
.getframe3D()
.find('paypal-button-number-0')
Command
Cypress.Commands.add('getframe3D', { prevSubject: 'element' }, $iframe => {
return new Cypress.Promise(resolve => {
$iframe.ready(function() {
resolve($iframe.contents().find('body'));
});
});
});
Interacting with iframe is quite tricky in Cypress however it's possible. Your custom command looks correct and it worked for me as well. However, you can also try below way and check if it is working for you.
Here provide CSS selector for the iframe as an argument getIframeBody() function.
cy.getIframeBody('iframe').find('paypal-button-number-0').click()
Custom Commands
Cypress.Commands.add('getIframeBody', (iframe) => {
return cy.get(iframe).then($iframe => {
const $body = $iframe.contents().find('body')
cy.wrap($body)
})
})
For more info you can follow the cypress blog to interact with iFrame
Your custom command to get the iframe body is fine, you just have the wrong selector for the button.
Since it's a class, you need a . prefix
cy.get('iframe')
.getframe3D()
.find('.paypal-button-number-0')
I'm very new to tinyMCE (and to JavaScript), so I'm sorry if the answer to my question is obvious. (I'm also working on code and files that another developer created and that I'm not overly familiar with.)
I need to use an external template file for tinyMCE4, and I can't get it to work. I've looked at the tinyMCE4 documentation, but I don't understand where I'm going wrong.
The tinyMCE init is in an index.cfm file, and the list of templates is in a separate file, template_list.js.
Contents of template_list.js:
var tinyMCETemplateList = [
["Name", "templates/file1.cfm", "Name."],
["Name2", "templates/file2.cfm", "Name2."],
...
];
In index.cfm, I've included "template" in the plugins line.
To pull in the templates to appear as a list in a drop-down so the user can choose a template, I've tried:
template_external_list_url: "tinymce/js/tinymce/template_list.js"
With this, when I run the program and click the Insert Template button I get a "No templates defined" error.
I've also tried:
templates : [{url:"tinymce/js/tinymce/template_list.js"}]
With this, the Insert Template dialog box appears, but the drop-down is empty, and the raw code from template_list.js appears in the text area under the drop-down. I get the same result if I change the code in template_list.js to:
[
{title: "Name", url: "templates/file1.cfm", description: "Name."},
{title: "Name2", url: "templates/file2.cfm", description: "Name2."},
...
]
...and also if I add quotations around "title", "url", and "description".
Again, sorry if the answer is obvious, but as a beginner I appreciate any help.
Per the documentation the TinyMCE configuration object expects you to pass an array containing one object for each template. At a high level it would look like this:
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "template",
menubar: "insert",
toolbar: "template",
templates: [
{title: 'Item 1', description: 'Desc 1', content: 'My content'},
{title: 'Item 2', description: 'Desc 2', url: 'development.html'}
]
});
You will note that the templates configuration option is passed an array of objects - this is what TinyMCE expects so no matter what you have to return an array of objects.
You can insert the template HTML directly (as shown in the first example above) or you can point to a URL that the browser can fetch when TinyMCE is initialized (as shown in the second example above). There is no template_external_list_url configuration option so that is not working because its not valid.
If you want to externalize the templates outside the TinyMCE configuration you can place the data in a file and reference that via a URL. For example:
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "template",
menubar: "insert",
toolbar: "template",
templates: "/path/to/the/file/templates.php"
});
The URL referenced there must return an array of objects as that is ultimately what TinyMCE is expecting. Your example above seems to imply your external file is returning a JavaScript variable named tinyMCETemplateList - but that means nothing to TinyMCE so while the file may be loaded what is "returned" is not an array of JavaScript objects.
I would suggest you start by getting things to work without externalizing the templates (just make sure you get the basics working). Then externalize the content to a separate file and make sure that the file returns an array of objects. I would note that your example using tinyMCETemplateList seems to return an array of arrays which is not what TinyMCE is expecting.
I found this really frustrating and fiddly to get working at all. Eventually what I'm doing is calling a function in another js file that returns an array that I give to the templates parameter.
function GetTemplateArray()
{
return new Array(
{
title: "2 Columns",
url: "templates/template1.html",
description: "Adds a 2 column table"
},
{
title: "3 Columns",
url: "templates/scf/template2.html",
description: "Adds a 3 column table"
}
);
}
Then in the tinymce.init code:
tinymce.init(
{
...
templates: GetTemplateArray(),
...
I'm creating a simple WordPress plugin that requires wp_enqueue_media() to be called from a TinyMCE pop up in order to upload and/or select an image.
The issue im having is wp_enqueue_media() and wp_enqueue_script() don't appear to work with the TinyMCE pop up modal.
I am including wp-load.php in my modal window.
Is there a way to utilize native WordPress script loading within a TinyMCE modal?
Here is an example of what I am doing.
http://return-true.com/adding-tinymce-button-to-wordpress-via-plugin-part-2/
Like I already said in my comment, I think the best approach is to use an inline modal (no iframe).
It is very simple: using the 1st part of the article (http://return-true.com/adding-tinymce-button-to-wordpress-via-a-plugin/) as a basis, just replace the JavaScript with the following (copied from TinyMCE guidelines):
(function() {
tinymce.PluginManager.add('example', function(editor) {
// Add a button that opens a window
editor.addButton('example', {
text: 'Example',
icon: false,
onclick: function() {
// Open window
editor.windowManager.open({
title: 'Example plugin',
body: [
{type: 'textbox', name: 'title', label: 'Title'}
],
onsubmit: function(e) {
// Insert content when the window form is submitted
editor.insertContent('Title: ' + e.data.title);
}
});
}
});
});
})();
After that, you have a simple modal, with no iframe, thus using the native Wordpress script loading.
If the content must be in an iframe (which I doubt), one option is to create a 'blank' page in Wordpress with a page template of its own and use that page as the modal content. I actually tested that it works, but it is clearly more complicated (requires something like a blog post to explain).
The issue was that I was not including wp_head() and wp_footer() in the modal window html.
Adding these functions solved the enqueue issues.
I am using the autocomplete plugin but for some reason it is not getting to the controller when I start typing in the text box.
Has anyone used this? or worked with this? or got a working example? I've tried changing the url to /Referral/Get but still does not work
$("#uxSearch").tokenInput("../Referral/Get",
{
hintText: "Type in something",
noResultsText: "No Results",
searchingText: "Searching",
classes: {
tokenList: "token-input-list-facebook",
token: "token-input-token-facebook",
tokenDelete: "token-input-delete-token-facebook",
selectedToken: "token-input-selected-token-facebook",
highlightedToken: "token-input-highlighted-token-facebook",
dropdown: "token-input-dropdown-facebook",
dropdownItem: "token-input-dropdown-item-facebook",
dropdownItem2: "token-input-dropdown-item2-facebook",
selectedDropdownItem: "token-input-selected-dropdown-item-facebook",
inputToken: "token-input-input-token-facebook"
}
});
You might show us your global.asax.cs routes. Avoid using ../ in relative URLs with ASP.NET MVC. Rather use it like this with a helper method:
$("#Products").focus().autocomplete('<%=Url.Action("GetProducts", "Product") %>', { ...
(the above is from my autocomplete request)
As Zhaph said, try browsing to the URL manually through browser to see if controller actions work fine.