Problem:
Vue component renders on screen as <!---->
Setup:
Application is in C# Core 2.0
Vue version 2.5.16
Use gulp to copy static js files to /wwwroot
gulp.src('./node_modules/vue/dist/vue.min.js')
.pipe(gulp.dest('./wwwroot/dist/'))
Call to load Vue in HTML
<script src="~/dist/vue.min.js" asp-append-version="true"></script>
I have four components. Two use string literal templates and two use <template>. Of the later, only one displays.
<template id="paging-template"></template>
<template id="modal-template"></template>
Vue.component('modal',{ template:'#modal-template'});
Vue.component('paging',{ template:'#paging-template'});
Modal is called with <modal></modal> and Paging with <paging></paging>.
Modal displays properly. Paging displays as <!----> but using the Vue debugger addon in Chrome I can see the model and everything for the Paging component is there.
What am I missing?
Edit:
JSFiddle Link
This css is not mine, just the default on the Vue template they provide
There are a number of things wrong with your example(All of them are visible in the console tab of the browser):
Your class binding syntax is incorrect. All instances where you are trying to bind classes as follows:
v-bind:class="'disabled': previousDisabled"
Should be updated to:
v-bind:class="{disabled: previousDisabled}"
isNumber is not a method. It can be replaced with !Number.isNaN(
Updated JSFiddle
Related
I have a website in asp.net and I am working on creating AMP pages at http://mywebsite.com/amp/......
I was able to make all the necessary changes for AMP except the following error.
The attribute 'action' may not appear in tag 'FORM [method=POST]'
the Form tag in my website looks like this
<form name="form1" method="post" id="form1">
AMP tutorial suggest to use action-xhr=/default.aspx instead of action="default.aspx
here is the source: https://ampbyexample.com/components/amp-form/
Now, the thing is how to remove action attribute and add action-xhr attribute in asp.net.
I tried following code in cs file but no luck.
this.Page.Form.Attributes.Remove("action");
Please note JavaScript and jQuery are not allowed in AMP
Take a look at the MSDN documentation, where it talks about an ActionlessForm. You basically inherit HtmlForm, and replace the form tag on the aspx page with your new control. You'll have to replace a bit of code like they suggest with the following:
base.Attributes.Remove("action");
writer.WriteAttribute("action-xhr", this.Action);
Worked like a charm for me. You may need to replace this.Action with this.Page.Request.Path, and you may find that you need to also add a target attribute, but this will definitely put you on the right path.
Add this script in the head tag (this will make your form to amp-form):
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
Now, your form can have action-xhr attribute.
<form name="form1" method="post" id="form1" action-xhr="__url__">
and
I have a textarea tiny_mce such as
<textarea id="Textarea1" name="abc" rows="15" cols="80" style="width: 80%">
</textarea>
I want to set it in page load.
If i add runat server , this change to "pure textarea" that is not tiny_mce control.
How can i set content from c sharp?
Keep in mind that TinyMCE is a JavaScript-based editor that runs 100% in the client - there are no server side APIs to talk to TinyMCE.
The API to load content is a JavaScript API that runs in the browser:
https://www.tinymce.com/docs/api/tinymce/tinymce.editor/#setcontent
If you want to use this API you need to pass the data from the server to the browser and then call setContent() with that data. You can throw the data into a JavaScript variable, make an AJAX call to fetch the data as the page loads - you have several choices.
If you want to do this server side the only option is to place the HTML inside the <textarea> tag. Something like:
<textarea>
<p>text < text</p>
</textarea>
A major complication with this approach is that the HTML you place in the <textarea> needs to be escaped as in my example above. This is not a requirement when using the setContent() API.
UPDATE: If refreshing sometimes make this work you likely have a timing issue - you are likely trying to use TinyMCE APIs before the editor is initialized. If your goal is to load content when TinyMCE is loaded you can use something like this in the TinyMCE configuration:
setup: function (editor) {
editor.on('init', function () {
// Your AJAX call to get the content
this.setContent(variableWithTheContent);
});
}
This function will not get called before the editor is initialized so you can be sure that APIs like setContent() will work at that point.
On my master page (for all pages in my site) I have a ToolkitScriptManager.
On my content page, there are a series of hyperlinks and divs for collapsible functionality.
The code to show/hide the panels work like the following:
$(document).ready(function() {
// Hookup event handlers and execute HTML DOM-related code
$('#nameHyperLink').click(function() {
var div = $('#nameDiv');
var link = $('#nameHyperLink');
if (div.css('display') == 'none') {
link.text('Hide Data');
div.show('100');
}
else {
link.text('Show Data');
div.hide('100');
}
});
});
If I include a ScriptReference to the jQuery 1.4.2 file in the toolkitscriptmanager, the javascript code is executed incorrectly on the page (only the text for the hyperlink is changed, the div is not actually shown.) However, if I don't include the jQuery file in the ToolkitScriptManager and instead include it in the content page, it works correctly.
I'm a Javascript/jQuery newbie, and this makes no sense at all. What's going on here?
Positioning of the script include is important for the jQuery ref. If you look at your generated source I would bet the tag is below the script function(). You should make sure that the jQuery reference comes as early as you can get it in the page source.
Try moving the jQuery library reference into the head of your master page, that should work. Otherwise post up some source!
Like Tj says... should probably be in the head section of your master page. Also, it's nice to link to Google's version of this library, because chances are your users will already have it cached. For instance, look at the source for this very page.
The two most probable causes here are $ not being defined yet (see Tj's answer) and $ getting defined by another library, such as prototype.
I would highly suggest you look into using Firebug's javascript debugger, or at least take a look at Firefox's built in error console (Tools -> Error console). That will give you a much better clue what is going on other than "it's not working."
Style sheet in master page is not working for one web page of asp.net application but it works for another web page.
If you are referencing a css file from a master page you should ensure it has an absolute path, that way it will work everywhere. For example:
<head runat="server">
<link type="text/css" rel="stylesheet" href="~/_styles/mystylesheet.css" />
</head>
The important thing to note here is that the head tag has the runar="server" attribute and that i am specifying the full virtual path using a tilde ("~").
Are none of its style elements being included? Is it being over ridden( they are Cascading Style Sheets)? Does it have the correct CSS include statement?
Are your pages in different levels of folders ?
For example,
..\main.css
..\folder1\MasterPage.master
..\folder1\css_working.aspx
..\folder1\folder2\css_not_working.aspx
in this scenario you should define your css in masterpage as :
<link rel="stylesheet" type="text/css" href="../main.css" />
And take your pages to same level, like that :
..\main.css
..\folder1\MasterPage.master
..\folder1\css_working.aspx
..\folder2\css_not_working.aspx
If you are using update panels there are some cases where the styling may be lost for AJAX toolkit controls. To fix this you need to put hte full name of hte class items into the stylesheet instead of letting hte toolkit handle this.
Also be sure to use a relative url where possible so that if a file moves it won't loose it's mapping.
Use Firebug or Debug Bar, these tools will show you all the styles being employed on each element, so you can see what stylesheets it is using and which ones it is not.
Also, when you build check for any warnings about stylesheets that it can't reference etc.
it could be a permission issue on the folder... if you have deny users="?" in your web config.. make sure you have an allow users on the folder where you have your style sheets
I have run in to a bit of a problem and I have done a bit of digging, but struggling to come up with a conclusive answer/fix.
Basically, I have some javascript (created by a 3rd party) that does some whizzbang stuff to page elements to make them look pretty. The code works great on single pages (i.e. no master), however, when I try and apply the effects to a content page within a master, it does not work.
In short I have a master page which contains the main script reference. All pages will use the script, but the parameters passed to it will differ for the content pages.
Master Page Script Reference
<script src="scripts.js" language="javascript" type="text/javascript" />
Single Page
<script>
MakePretty("elementID");
</script>
As you can see, I need the reference in each page (hence it being in the master) but the actual elements I want to "MakePretty" will change dependant on content.
Content Pages
Now, due to the content page not having a <head> element, I have been using the following code to add it to the master pages <head> element:
HtmlGenericControl ctl = new HtmlGenericControl("script");
ctl.Attributes.Add("language", "javascript");
ctl.InnerHtml = #"MakePretty(""elementID"")";
Master.Page.Header.Controls.Add(ctl);
Now, this fails to work. However, if I replace with something simple like alert("HI!"), all works fine. So the code is being added OK, it just doesn't seem to always execute depending on what it is doing..
Now, having done some digging, I have learned that th content page's Load event is raised before the master pages, which may be having an effect, however, I thought the javascript on the page was all loaded/run at once?
Forgive me if this is a stupid question, but I am still relatively new to using javascript, especially in the master pages scenario.
How can I get content pages to call javascript code which is referenced in the Master page?
Thanks for any/all help on this guys, you will really be helping me out with this work problem.
NOTES:
RegisterStartupScript and the like does not seem to work at any level..
The control ID's are being set fine, even in the MasterPage environment and are rendering as expected.
Apologies if any of this is unclear, I am real tired so if need be please comment if a re-word/clarification is required.
Put a ContentPlaceHolder in the head section of the master page, then add a asp:Content control on the content page referring to the placeholder and put your script in that control. You can customize it for each page this way.
Also, the reference by ID may not be working because when you use Master Pages, the control IDs on the page are automatically created based on the container structure. So instead of "elementID" as expected, it may be outputting "ctl00_MainContentPlaceHolder_elementID" View your source or use firebug to inspect your form elements to see what the IDs outputted are.
Isn't it possible to do with clean javascript ?-)
-- just add something similar to this inside the body-tag:
<script type="text/javascript">
window.onload = function(){
MakePretty("elementID");
}
</script>
By the way the script-tag has to have an end-tag:
<script type="text/javascript" src="myScript.js"></script>
Why not use jQuery to find all the controls? Something like this:
$(document).ready(function(){
$("input[type='text'], input[type='radio'], input[type='checkbox'], select, textarea").each(function(){
MakePretty(this);
});
});
This way you'll get all elements on the page, you can wait until the page is ready (so you don't modify the DOM illigally). The jQuery selector can get the elements in a bit more of a specific format if you need (ie, add a root element, like the ID of the body div).
It'd also be best to modify the MakePretty method so it takes the element not the ID as the parameter to reduce processing overhead.
Once you use Master Pages, the ids of controls on the client side aren't what you think they are. You should use Control.ClientID when you generate the script.
When using master pages, you need to be careful with the html attribute ID, since .NET will modify this value as it needs to keep ids unique.
I would assume your javascript is applying css styles via ID, and when you are using master pages the ID is different than what is in your aspx. If you verify your javascript is always being added, your answer needs to take into account the following:
ALWAYS set your master page id in page load (this.ID = "myPrefix";)
Any HTML element in your master page will be prefixed by the master page id (i.e.: on the rendered page will be "myPrefix_myDiv")
Any HTML element in your content place holder id will be prefixed with an additional prefix (i.e. myPrefix_ContentPlaceHolderId1_myDiv)
Please let me know if I can clarify anything. Hope this helps!