I would hide an html element when a condition occurs.
I try to implement this code in coffeescript:
if byName == username
document.#prv-btn.style.display = 'none'
I have already tried this code but don't run.
The element #prv-btn is my html element. In my page i have some users and for each of them i have this #prv-btn. For example if i have ten users, i have ten #prv-btn, but only one i want that i see, each user see the button near his name.
How can I do?
There are a couple of issues:
You need to indent the body of if clauses in CoffeeScript.
You need to use getElementById() to actually select the button by its ID.
Also, I recommend using jQuery for DOM work such as this. It works just fine with the compiled CoffeeScript.
Code:
if byName == username
document.getElementById("prv-btn").style.display = 'none'
Here is a link to a jsFiddle that I made for this: http://jsfiddle.net/jonathanporta/tw3nn/1/
Related
I have an ant design table. One of its columns is something like this:
which contains three icons and one "AutoComplete" component showing some names. In editing mode, I have put all these four components ( 3 icons and one autocomplete) in a "Form.Item" tag. But the autocomplete component does not work properly in editing mode.( I mean when it is clicked for edit, the name inside it is cleared and the new selected name will not put in autocomplete input). But when I remove the three icons from the code, the autocomplete works fine.
Why this happens? can any body help on this?
As far as I know Form.Item need to have one child element because he implicitly pass to child value and onChange props. You probalby can create wrapper for your Autocomplete component, something like following (it's just idea):
function Autocomplete (props) {
return (
<div>
<Icon1/>
<Icon2/>
<Icon3/>
<AntdAutocomplete value={props.value} onChange={props.onChange}/>
<div/>
);
}
I'm working on a Squarespace website in developer mode where I can create the website with code.
In the file site.region, I noticed that I can insert a footer block using this code:
<squarespace:block-field id="footerBlocksMiddle" class="Footer-blocks Footer-blocks--middle sqs-alternate-block-style-container" columns="12" label="{localizedStrings.footerMiddleBlocks}" />
However, I haven't been able to figure out how to insert a form block preferably so that I can set it as email storage.
I tried <squarespace:block-form but that does not work.
The error looks like this on the squarespace configuration page:
"Something went wrong."
How do I write out this code?
What's actually going on in the footer code you mentioned, is that a block field is being inserted. Within that block field, you can add whatever blocks in whatever arrangement you like.
So to accomplish your goal, you'll insert a block field and then add only a form block to it. Then, in other places where you want that form block to appear, you add the block field (containing the form block) into the code.
As long as you use the same id, the same block field will be reused, allowing you to edit the form in whatever area you happen to be in, and changes will affect everywhere else the block field was placed.
<squarespace:block-field id="myFormOnlyBlockField" columns="1"/>
Place that where you want the form block to appear. Of course, initially, you have to add the form block to it and configure it. From then on, adding the code above throughout your site template will show the form, and changing any instance of the block will affect all instances.
Note that I've set 'columns' to '1' in the example above, figuring that you're just adding a single block so no need to have more columns. you could set it to something else and it'd work just as well. Also note that the areas where you add the block field might have a bit too much spacing/padding/margin around it, so you may need to CSS to adjust for that.
Alternatively, it is possible to execute JavaScript within a code block to make an AJAX/Fetch request to the page with the form block on it, and have that form block replace the code block within which the JavaScript is executed. Such an approach would work even without developer mode.
I have a number of form inputs inside an element as they are repeated in other forms, however it does not output the content of the element when i include it in a view. I can place "Die();" within the element and it will show everything up until that point including the inputs within the element. When checking the source code (without the "Die();") it seems to have disregarded everything within the element including formatting such as DIV's.
The only thing i can think is that cakephp does not like you setting a form in a view then including inputs to the form using elements, does any one know if this is the case, or know the actual reason why this is happening?
The answer is i'm an idiot and forgot to echo the element.... yeah.
My problem seemed easy at first but i got stuck.
I have some containers (divs) in my page with some custom attributes.
<div class="myclass" myattr1="blah" myattr2="text1-text2-text3-text4-"></div>
myattr1 and myattr2 are defined by me.
All divs are visible on page load.
Now, depending on user selection from a list, i want to show only the divs with myattrib1="blah" and hide the rest.
I tried the following code, with no success at all
$('#mySelectID').change(function()
{
var startName = $(this).val();
$(".myclass").not('[myattrib1!="+startName+"]').toggle();
});
The same approach will be used to filter results by attrib2, but there i will use myattrib2|="+startName+" ( i think this is correct - thats why i have the extra - on the end of myattr2="text1-text2-text3-text4-").
Can anyone advice me on how to properly achieve this kind of filtering?
thank you!
You are close, but as you can see form the syntax highlighting, your are not performing string concatenation. +startName+ will be taken literally. Fix the quotes and your fine:
.not('[myattrib1!="' + startName + '"]')
Note that you should be using data-* attributes instead of custom ones.
I have divided form in to two sections: sec1 and sec2. Each section is part of a div named as sec1Div and sec2Div. Based upon some selection one of div is hidden. But the problem is that still fields in hidden section are submitted. Please suggest a way so that all of fields in a div are not submitted on submit.
There are several ways to do that. You can hook a function to the form submit's event, or you can remove the name attributes of the fields inside the hidden div. You can also disable the fields, by setting disabled="disabled".
If you are using jQuery, you can do those examples.
To disable all fields in the hidden div, you can do something like:
function hideDiv(el) {
$('input', el).each(function(){
$(this).attr('disabled', 'disabled');
});
$(el).hide();
}
And, the appropriate show div function:
function showDiv(el) {
$('input', el).each(function(){
$(this).removeAttr('disabled');
});
$(el).show();
}
Please remind that this is just a code example. But you can take the idea from that.
The reason this is happening is because the elements are still within the form element. Hiding a div using CSS won't change this - they're still present in the DOM.
It would likely be easiest to add a hidden input field to each div that can be used to identify server side which one you should be processing. You can then simply ignore the data from the hidden form.
If you really must stop the data from being posted, it's a little messy but you could move the hidden div's contents outside of the form element so that the fields won't be submitted. If you wanted to display the div again, you'd then need to move the fields back in. Depending on how complex your CSS is, this could cause problems in some browsers, so I'd advise using my first suggestion.