I am using Angular for the first time, and I have a collection of $scope.products.
Say I have this:
{{product.image_one}} which is not set yet, because a user has not uploaded an image. I would like to conditionally display an upload button using Angular.
What is the simples possible way to detect if product.image_one is undefined, and to display conditionally some dom using angular?
You can use the ngShow directive:
<div class="upload-button" ng-show="product.image_one">
....
</div>
Related
I'm using Laravel Nova, and I want to make "Save" button(on the Update view) unavailable while all required fields are empty.
Here's the part of the code of the "Update.vue" file that creates my form fields:
<div v-for="field in fields">
<component
#file-deleted="updateLastRetrievedAtTimestamp"
:is="'form-' + field.component"
:errors="validationErrors"
:resource-id="resourceId"
:resource-name="resourceName"
:field="field"
/></div>
Fields array fills with the data from backend.
So I can see this structure in the Vue dev tool. And when I change the input value it changes value of <form-text-field>, but I don't see this changes anywhere in my Update component.
So my question is - How I can get changes of my input fields dynamically?
In Vue data flows only one way, so the change of data in your Update component will be reflected on form-text-field, but not the other way around. To create 2-way data binding you should use v-model.
I suppose form-text-field is one of your custom components, in that case you should create a custom v-model for it. See: Customizing Component v-model
If you can't get it work post your implementation of form-text-field here, so we can help.
I am not sure if I am adding my JS assets correctly and would like some advice if I am not.
In octoberCMS I have created a custom formWidget that uses the Google Maps API.
I am using my formWidget inside a child form that is rendered via AJaX as a modal when required.
If I use the following code in my widget class:
public function loadAssets(){
$this->addJs("http://maps.googleapis.com/maps/api/js?key=myappkeyhere&libraries=places");
$this->addJs('js/geocomplete/jquery.geocomplete.min.js');
$this->addJs('js/addressinput.js');
$this->addCss('css/addressinput.css');
}
The JS loads with the Page load and not when the widget is rendered. This produces these issues:
The google-maps API returns an error saying it has been loaded multiple times.
Events tied to DOM elements in the child fail since the elements are not in the DOM until the form is called.
The workaround I am using is to embed my JS into the formWidget partial.
Is there a way to make the addJS method work for the formWidget when it is part of a child form?
After some investigation, I realised that my formWidget using the addJs() method would make the widget JS available globally to the entire page even before the formWidget existed or was even needed.
While I could have created an elaborate, fancy JS involving listeners for DOM insertions and blah blah blah, this was not ideal (mainly because the widget properties change based on implementation).
The quickest/safest way to include JS that is tightly bound to a complex formWidget is to include it in the partial. This ensures the form widget will work properly both in a standalone form and in situations where the widget is part of child form that is created via an Ajax load.
(If you know of a better way please let me know)
I am working with CKEditor 4.0.1.1 in an intranet and try to validate my code with W3C markup validation service.
The validation markup service find this error :
Error Line 547, Column 2455: there is no attribute "data-cke-saved-src"
<img alt="" data-cke-saved-src="http://portail-rep/Contents/images/Java…
How can i disable this functionnality of ckeditor protecting code to make my code ok for W3C validation ?
CKEditor uses many special attributes and elements to implement some of its features. However, they are used only internally and should be stripped out when getting data by editor.getData(). Therefore editor produces valid markup.
E.g. open http://ckeditor.com/demo, switch to source mode and you'll see that the image doesn't have the data-cke-saved-src attribute. However, if you'll use Firebug or Webkit's dev tools you'll find that the image has this attribute.
PS. In fact, data-cke-saved-src is a valid attribute in HTML5.
I had same problem now. This problem has been solved by using CKEDITOR config on blur event.
I'am using inline editing on element.
My ck config contain on blur event which have destroy method.
CKEDITOR.config.on = {
blur: function() {
this.destroy();
}
}
Using is simply:
On element click will create instance of new editor and it enable inline editing.
Now if user click outside of editor and on blur event invoked, editor destroy it self and if no editor instance exist, the content of the data is cleaned from data-cke attributes.
want to do multiple div elements hide using ajax helper on getting response.but not using like this complete=>element.hide(div1),element.hide(div2),element.hide(div3),element.hide(div4)
If your question is how to hide multiple elements after an ajax response, you'll need to set up some javascript to do this. It depends on the javascript library you're using, but basically, you'll set $options['complete'] to something like "doStuffAfterComplete()".
Then, create a javascript function, like you normally would with your js library of choice. Using jQuery? Then it would be something like:
function doStuffAfterComplete(data) {
$('div.whatevs').hide();
}
I'm building a custom module in Drupal 6 which display a block with a form and some other elements like text and images. When it's submitted, using AHAH, some logic takes place in PHP and then the result is passed to JQuery which will update the elements in the block. Mainly a few images and some text.
I can't wrap my head around using AHAH, but it seems like that's what I'm supposed to be using. Currently I have my form with the submit button implementing '#ahah' and the path is set to a path defined in my menu hook. The menu hook passes it to the callback function which performs the logic then I'm at a dead end. How do I get the results to jQuery?
Any ideas?
Howie
Figured out a solution using: http://drupal.org/project/examples.