I want to block my UI and show a spinner while it is blocked.
I tried to use the following :
blockUI.start("<div class='dots-loader'>Minions are Working!</div>");
// some code that fetches data from server
blockUI.stop();
here 'dots-loader' is taken from the css provided by : http://www.css-spinners.com
on suceess, it does block the ui and display the message, but it displays my html as text.
is there any way to achieve this spinner thing inside the blockUI custom message??
although this is not a good solution to customize a library file but I have to do this to achieve loading image instead Loading text.Because angular-block-ui.ng.html has only Loading.. see below link
https://github.com/McNull/angular-block-ui/blob/master/src/angular-block-ui/angular-block-ui.ng.html
here the html
<div class="block-ui-overlay"></div>
<div class="block-ui-message-container" aria-live="assertive" aria-atomic="true">
<div class="block-ui-message" ng-class="$_blockUiMessageClass">
{{ state.message }}</div>
</div>
in your project open angular-block-ui.js file or min file. go to below the file and found this code below.
// Automatically generated.
// This file is already embedded in your main javascript output, there's no need to include this file
// manually in the index.html. This file is only here for your debugging pleasures.
angular.module('blockUI').run(['$templateCache', function($templateCache){
$templateCache.put('angular-block-ui/angular-block-ui.ng.html', '<div class=\"block-ui-overlay\"></div><div class=\"block-ui-message-container\" aria-live=\"assertive\" aria-atomic=\"true\"><div class=\"block-ui-message\" ng-class=\"$_blockUiMessageClass\">{{ state.message }}</div></div>');
}]);
now add your code <div class='dots-loader'>Minions are Working!</div>
after {{state.message}} finally it look like .
$templateCache.put('angular-block-ui/angular-block-ui.ng.html', '<div class=\"block-ui-overlay\"></div><div class=\"block-ui-message-container\" aria-live=\"assertive\" aria-atomic=\"true\"><div class=\"block-ui-message\" ng-class=\"$_blockUiMessageClass\">{{ state.message }}
<div class='dots-loader'>Minions are Working!</div></div></div>');
}]);
then just give a blank space text
blockUI.start(' ');
hope you will find better solution. Thanks
Related
I am using TinyMCE in my HTML Textarea to format content and then save them in MySQL Database. All is working fine. But when I try to get the saved content from database in other page it is showing with all the HTML tags and CSS attributes. What I need is to show the content with same formatting as it was saved.
I am using following code to initilize the TinyMCE in my form.blade.php file.
<script>
tinymce.init({
selector: '#requestDescribe'
});
</script>
Below is the text area where I am using TinyMCE.
<textarea required name="requestDescribe" id="requestDescribe"
cols="30" rows="5" maxlength="600" class="form-control"
value="{{old('requestDescribe')}}">
After saving such type of content is being saved in database.
<p><strong>dfg <span style="text-decoration: underline;">fkjg gkjdfhgkfg </span> <em>gdfgf</em></strong></p>
When I get data in some other page it shows with all the html and css code like this:
I have used PHP stray_tags but it didnt work. Mybe because the code has both html and css. Please Help. TIA
Ok I have found the answer. If you are using PHP (Which is the case with me) so just use echo. :)
I having HTML code like this
<div class="owl-carousel owl-theme owl-loaded">
<div class="owl-stage-outer">
<div class="owl-stage" *ngFor="let product of products; let i=index;">
<div class="owl-item">
<carouselFixture [stream]="product.stream" *ngIf="product.viewModelType == 'ProductSummary'" ></carouselFixture>
</div>
</div>
</div>
This is working fine. The problem I face is when the new product is added immediately it has to be shown in the owl carousel... actually it is loading but wrongly as shown in the image below
So to solve the problem we need to call the below add function in ngFor
$('#add').on('click', function () {
var html = '<div class=\"item\"><carouselFixture
[stream]="product.stream" *ngIf="product.viewModelType ==
'ProductSummary'" ></carouselFixture></div>';
console.log(html);
owl.trigger('add.owl.carousel', [html, 0])
.trigger('refresh.owl.carousel');
});
Can anyone tell me how to call this 'add' function...
AngularDart doesn't allow for dynamic components to be added to the page using pure html like that. This is for security, and performance reasons. It doesn't actually put the full angular engine in the page at runtime.
It does have other ways of doing this tho. The easiest is to add another entry onto the list and it will be displayed in the for loop.
The other possibility is to use the ComponentFactory to add it to the page https://webdev.dartlang.org/api/angular/angular/ComponentFactory-class
I'm not sure what owl is doing exactly in its call, but you could add the html without the angular component and use the component factory to insert it in the right place after owl does it's thing.
I have an Angular 6 application where a component is used to display a message on the page. Some of the messages contain hyperlinks embedded in them (in HTML markup). However, when the messages are displayed on the page, they are getting displayed in plain text (hyperlinks are not rendered, but the markup is displayed to the user instead).
You can visit Stackblitz # https://stackblitz.com/edit/angular-jj5nms for a sample application that I created to explain the issue.
Expected message display:
Click here.
Actual message display:
Click <a href='http://www.google.com'>here</a>
If you want to render HTML a then you need to bind to the innerHTML property of an element, for example:
<p [innerHTML]=“message | async”></p>
Where message is your observable from the service.
Using handlebars to render message is just rendering plain text, binding to innerHTML and using the async will render your html content
You can use innerHTML
In your component:
linkHtml = "Click <a href='http://www.google.com'>here</a>"
In your template:
<div [innerHTML]="linkHtml"></div>
You can use like that:
in your .ts file :
dummyLinkText: string = "Click <a href='https://www.google.com'>here</a>";
and in your .html file:
<div [innerHTML]="dummyLinkText | translate"></div>
I just started using Mustache and I like it so far, but this has me perplexed.
I am using the GitHub gist API to pull down my gists, and part of what I want to do is include the embedding functionality into my page. The problem is Mustache seems to not want to have anything to do with my dynamic script tag.
For example, this works fine:
<div class="gist-detail">
{{id}} <!-- This produces a valid Gist ID -->
</div>
Additionally, this works perfect:
<div class="gist-detail">
<script src='http://gist.github.com/1.js'></script> <!-- Produces the correct embed markup with Gist ID #1 -->
</div>
If I try to pull these together, something goes terribly wrong:
<div class="gist-detail">
<script src='http://gist.github.com/{{id}}.js'></script> <!-- Blows up! -->
</div>
Chrome Inspector shows this:
GET https://gist.github.com/%7B%7Bid%7D%7D.js 404 (Not Found)
... which looks like to me something is weird with escapes or whatnot, so I switch over to the raw syntax:
<div class="gist-detail">
<script src='http://gist.github.com/{{{id}}}.js'></script> <!-- Blows again! -->
</div>
And I get the same result in Inspector:
GET https://gist.github.com/%7B%7B%7Bid%7D%7D%7D.js 404 (Not Found)
How do I get the correct values to embed in the script tag?
EDIT
I am injecting the template as follows (in document.ready:
function LoadGists() {
var gistApi = "https://api.github.com/users/<myuser>/gists";
$.getJSON(gistApi, function (data) {
var html, template;
template = $('#mustache_gist').html();
html = Mustache.to_html(template, {gists: data}).replace(/^\s*/mg, '');
$('.gist').html(html);
});
}
The actually template is inside of a ruby partial, but it is wrapped in a div (not a script tag, is that a problem?) (that's hidden):
<div id="mustache_gist" style="display: none;">
{{#gists}}
<!-- see above -->
{{/gists}}
</div>
I assume a div is ok rather than a script because in either case, I'm pulling the .html(). Is this a bad assumption?
To avoid automatic escaping in Mustache use {{{token}}} instead of {{token}}.
It seems like your template is in HTML and trying to retrieve the template using html() results in a pre-URL-escaped template to be returned. Try placing your template inside a <script type="text/html"> tag instead.
When you embed your template inside an HTML element that excepts more HTML elements as children, it may get processed by the browser as HTML. Escaping may occur. By using a <script> tag with a non-script content type, you're basically telling the browser not to touch your template.
It looks like your script is getting requested before Mustache has a chance to update the src property. What you want to do is define the template in a way that it's not parsed as part of the DOM. A common approach is to define your template inside of a <textarea> tag. This will preserve formatting and prevent character escaping.
<textarea id="gist-detail-template" style="display:none">
<script src='http://gist.github.com/{{id}}.js'></script>
</textarea>
Now, to instantiate the template:
var template = $('#gist-detail-template').val();
var html = Mustache.to_html(template, yourTemplateData);
Here's an official example: http://mustache.github.com/#demo
This is more like a auto-click link problem. But my problem is this link is generate by google's script.
http://translate.google.com/translate_tools
If you choose "translate a section" , there will be a link generate inside the goog-trans-control class
Original script:
<div class="goog-trans-section">
<div class="goog-trans-control">
</div>
Original Text here.
</div>
Script code after execute (Check Component):
<div class="goog-trans-section">
<div class="goog-trans-control">
<div class="skiptranslate goog-te-sectional-gadget-link" style="">
<div id=":1.gadgetLink">
<a class="goog-te-gadget-link" href="javascript:void(0)">
<span class="goog-te-sectional-gadget-link-text">Translate</span>
</a>
</div>
</div>
</div>
Original Text here.
</div>
How would I auto-click (or execute) the Translate link after this page is totally loaded?
For some reason, jsfiddle is not working with my script, though I still post this for your convenience.
http://jsfiddle.net/Wb7tE/
Really appreciate for your time and help.
Edited:
I tried Google translate API, but there is a limitation of 5000 words at a time.
My translations include whole html with tables and scripts, so it reach the limit with no exception.
I have a similar problem, and I solved it temporally like this
google_initialized = false;
function google_auto_translate()
{
if(google_initialized)
{
$('a.goog-te-gadget-link')[0].click();
}
else if(google.translate)
{
google_initialized = true;
setTimeout(google_auto_translate, 500);
}
else
setTimeout(google_auto_translate, 100);
}
window.onload = google_auto_translate;
but on slower connection, in 50 % of time google doesn't load on time, and script already clicks before loading is done. So if anyone know any other way to do this, via some events or something similar please add it here...
P.S. Don't use Google Translation API it's Deprecated and will be removed till the end of this year.