I'm using ExtJS 4.1 and it's a lot faster but yet sometimes loading a view may take a while so I want to show some kind of Loading image which will tell the user that he should wait. I suspect that it's something pretty standard but yet some advices on how and where to do it would be very helpful.
Thanks
Leron
Search for LoadMask in their documentation. It is pretty standard thing.
i did like this:
into index.html
<div id="page-loader">
<img style="display: block;margin-left: auto;margin-right: auto; width=50%; height=100%;" src="data/xxxxx.gif" />
<br/>
Initializing...
<br/>
</div>
into app.js
launch: function() {
Ext.create('Pwallet.view.Videata');
if (Ext.get('page-loader')) {
Ext.get('page-loader').remove();}
}
Related
When wiring together Trix editor content with Livewire, I am stumbling into problems. I believe that the issue is that when Livewire receives content from Trix, the content is swapped out and Trix becomes disabled. Is there a better way?
What I have done, that works, is as follows. At the moment, the page is the redirected to itself in order to reboot Trix (defeating the whole point of Livewire, but it's being used for other things too).
<div>
<input
id="newCommentTextTrixContent"
type="hidden"
wire:model="newCommentText"
>
<trix-editor
id="newCommentTextTrixEditor"
input="newCommentTextTrixContent"
></trix-editor>
<button wire:click="addComment(document.getElementById('newCommentTextTrixEditor').innerHTML)">Add Comment</button>
</div>
I have tried
wire:model on the hidden input -- nothing happens
x-on:trix-change="$set('comment', $event.target.innerHTML) -- this works, but Trix goes grey and ceases to work after the first keypress (reboot problem?)
I'm sure something like the latter is better, but with Trix somehow being rebooted each time. It all seems a bit messy - so the question is, what's the right way to do this?
I got it working. With up to date Livewire and Alpine installations, the code is roughly as follows.
<div wire:ignore>
<trix-editor
class="formatted-content"
x-data
x-on:trix-change="$dispatch('input', event.target.value)"
x-ref="trix"
wire:model.debounce.60s="newCommentText"
wire:key="uniqueKey"
></trix-editor>
</div>
Why does this work?
You need wire:ignore on the parent node, because Trix inserts the toolbar above the text area. wire:ignore stops Livewire from worrying about it and therefore not removing it or messing with it on the next cycle.
You need a wire:key because the DOM moves around a bit, and this helps Livewire to keep track of it.
I propose the long debounce, which is a hack as the .lazy modifier doesn't work well with text. Also, waiting for Ajax on each key press is painful.
The alpine event ensures that Trix events (like bold, italics etc) are still fired
That's it. I use this above to repetitively submit comments onto the end of a comment stream, and everything seems to work fine. Good luck!
Note, I also have CKEditor working similarly, as described here.
As an extension on #Kurucu 's answer, and the comment under it from #Rehan;
This seems to work very well. But when I apply styles like li or bold
it doesnt retain in the wire:model. Ex:
<div>foo<br>bar<br>foobar</div> I applied the Bullets here the tags
are missing. Did you face this issue? – Rehan
To fix the issue of not having an updated value when pressing buttons bold, italic, or quote for example, add the following part to the trix editor (note the x-on:trix-change="$dispatch('input', event.target.value)"):
<div wire:ignore>
<trix-editor
class="formatted-content"
x-data
x-on:trix-change="$dispatch('input', event.target.value)"
wire:model.debounce.1000ms="newCommentText"
wire:key="uniqueKey"
></trix-editor>
</div>
The above option works but wasn't getting the data back from my field, Here's what worked for me with a little tweak using AlpineJS's #entangle.
Below is my working solution:
<div class="mb-2" x-data="{ description: #entangle('description').defer }"
x-init="$watch('description', function (value) {
$refs.trix.editor.loadHTML(value)
var length = $refs.trix.editor.getDocument().toString().length
$refs.trix.editor.setSelectedRange(length - 1)
}
)" wire:ignore>
<label class="form-label">Job Description <span class="text-danger">*</span></label>
#error('description')
<span class="error d-inline-block"><i class="mdi mdi-alert-circle"> </i> {{$message}}</span>
#enderror
<input name="description" id="description" type="hidden" x-model="description">
<div x-on:trix-change.debounce.1000ms="description = $refs.trix.value">
<trix-editor x-ref="trix" input="description" class="overflow-y-scroll"
style="height: 20rem;"></trix-editor>
</div>
</div>
I got it to work by using Trix's built-in events.
<input id="about" name="about" type="hidden" value="{{ $about }}">
<trix-editor input="about" class="wysiwyg-content"></trix-editor>
<script>
var about = document.getElementById("about")
addEventListener("trix-change", function(event) {
console.log(about.getAttribute('value'));
#this.set('about', about.getAttribute('value'))
})
</script>
I would like to know what's the effect of "ui-g-nopad".
I see it a lot in the code of an application and I can't understand what it does exactly, cause the result is always the same if I put it or not.
<div class="ui-g ui-g-nopad">
...
</div>
I read doc (https://www.primefaces.org/showcase/ui/panel/grid.xhtml) but it's not really explicit neither...
Thank you for your help.
from the primeng.css file:
.ui-g-nopad {
padding: 0;
}
This means it uses CSS to set padding to zero.
I took this example implementation of using React with Meteor and wanted to add something simple like adding a blaze login:
https://github.com/reactjs/react-meteor/tree/master/examples/leaderboard
Following this tutorial I added the Wrapper and placed it render of my app.jsx
https://www.meteor.com/tutorials/react/adding-user-accounts
render() {
return (
<div className="outer">
<AccountsUIWrapper />
<div className="login">Login</div>
<div className="logo"></div>
<h1 className="title">Title</h1>
<div className="subtitle">Subtitle</div>
<Dashboard tasks={this.data.tasks}
selectedTaskId={this.state.selectedTaskId}
onTaskSelected={this.selectTask} />
{this.getBottomBar()}
</div>
It compiles correctly with no errors but nothing shows up. Can someone help a newb out?!
Nevermind. Silly me forgot to add
blaze-html-templates to my packages.
**note I had to remove static-html because they conflicted.
I've got this structure:
<div id="d1">
Text
<div id="d2">Word</div>
My other text
</div>
Now, I want that on click to #hide:target, div#d2 disappear.
Can I do this with CSS?
You can do this with CSS!
If you change your HTML markup a little bit you can achieve this by using CSS :target
#d2:target {
display: none;
}
<div id="d1">
Text
<div id="d2">Word
My other text
</div>
You can do this with CSS but you need to use javascript to change the CSS (style) of the element.
This solution requires no plug ins (such as jQuery).
<div id="d1">
Text
<div id="d2">Word</div>
My other text
</div>
If you would like it to be completely functionless.
<div id="d1">
Text
<div id="d2">Word</div>
My other text
</div>
You should probably use javascript or jQuery to accomplish this.
$('#object').click(function(){
$('#tohide').hide();
});
To make it specific for this (local scope)
if($('#d2 a').attr('href')=='#hide'){
$('#d2 a').click(function(){
$('#d2').hide();
});
}
But that isn't the proper way to do it. Use classes.
You can do this with jQuery simply:
$(document).ready(function(){
$("a").click(function(){
$("#d2").hide();
});
});
I strongly believe that CSS is for style, and Javascript is for function (and HTML is for markup).
I have made the mistake of using :target and building functionality with CSS where it shouldn't be, and trust me, you are going to make a nightmare for yourself with these bad habits down the road. jQuery is going to be your best friend in situations like this. It works on ALL browsers (that support javascript) and you won't have your functionality breaking down in edge-cases and your users pissed off. Do what Jack says and use some simple jQuery. you can also use .addClass and .removeClass to change the css in other ways than just hide/show.
With css I think it isn't possible, but you could use this code that I am letting here, it is based in javascript, that can be really usefull in this situations. I am not so good at explaining but for these type of questions I recomend learning Javascript.
<div id="d1">Text</div>
<div id="d2">Word</div>
<a onclick="hide()">My other text</a>
This is your HTML file for now, I created a DOM event, when you click the , a function called hide() will run in our js file. TIP: Don't forget to link the html with de javascript file. You can do that with:
<script src="yourfilegoeshere"><script>
Now let's head in the css:
#d1 {
opacity: 1;
}
#d2 {
opacity: 1;
}
Based with this css both of them are visible. Now let's go to our Js file:
function hide() {
var d2 = document.getElementById('d2')
d2.style.opacity = '0'
}
Now if you click in your a the d2 will not be visible
I hope I helped!
I am new to bootstrap and I watched some tutorials (ASP.NET).
I created a button with a CssClass:
But the button looks bugged? It must look like the first button, but my button is the second:
I have no clue what I am doing wrong!
This is my container:
<div class="container">
<div class="row">
<div class="span2">...</div>
<div class="span8">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="span2">
<asp:Button ID="btnSignup" runat="server" Text="Button" CssClass="btn btn-large btn-success" />
</div>
</div>
<h1>Bootstrap starter template</h1>
<p>Use this document as a way to quick start any new project.<br/> All you get is this message and a barebones HTML document.</p>
</div>
Did you modify Bootstrap CSS in any way or are you loading any additional CSS?
What browser are you seeing this in?
It would help if you posted your code on jsfiddle.net
Anyway, this issue happens when you remove background-image from the normal (mouse out) button state of the .btn-success class. Bootstrap uses transition to shift background-position by 15px in hover state and this is what you end up with.
Found the answer!
I downloaded the customized bootstrap files with full features via this link:
http://twitter.github.io/bootstrap/customize.html
Then I am getting that bug.
But when I download bootstrap from below, and replace the css file from the customized bootstrap with the new downloaded css:
http://twitter.github.io/bootstrap/
Then I don't have any bugs!
Just to complement your own answer, since you are using bootstrap + Visual Studio, you may have to know that there's a bug on Visual Studio that edits some CSS3 properties.
You should keep an backup from bootstrap.css, because this issue may happen again when editing an .aspx, .htm that uses this stylesheet.
I just know the bug, but I don't have any solutions for it