AMP Add a class after an event - events

The only relevant thing I have is the "toggle" event, but nothing related to just add a class when I trigger an event in AMP.
I have a form to submit, and I want to add a class to a father element to change the color of the background so that I can show a different "look" for the success than the form.
How to do that?

<amp-state id="className">
<script type="application/json">
{
"changeClass": ""
}
</script>
</amp-state>
<p
class="beforeclick"
[class]="className.changeClass == 'newClass' ? 'afterclick' : 'beforeclick'
">Hello World
</p>
<button on="tap:AMP.setState({className:{changeClass: 'newClass'})">Click</button>
When u click to the button it will look for the changeClass varibale to ClassName state and assign the newClass value to it .
And that value will assign to dynamic [class] and change the class value to new value.
it is pretty simple.

Related

How to determine view is backed in Kendo Mobile?

Is there any way to know that view is open by back?
For example
<div data-role="view" id="view-test" data-show="show">
<!-- View content -->
</div>
<script>
var show = function(e){
if(e.view.isBack())
{
console.log("Back")
// do something
}
}
</script>
Is there any method or property like e.view.isBack() ?
There are many ways to handle this, maybe you can use a global variable where you keep the last visited page or even you can add a back button handler and get the view from which the back button was pressed. Another solution would be to pass a parameter along with page navigation when going back, for example:
<a data-role="button" href="#foo?back=true">Link to FOO with back parameter set to true</a>
And on the visited page on show event you can get the parameter like this:
function fooShow(e) {
e.view.params // {back: "true"}
}
Now depending on what the parameter value is you can detect if the back button was pressed or not before reaching the page.

angular js template logic to remove repeater item

I have a repeater that looks like
<ion-item ng-repeat="obj in data">
{{obj.value}}
</ion-item>
which displays an item list of the numbers 1 through 10. When an odd number shows up I want that particular item to be hidden. Is this something I can do within the view it's self? Regardless what's a good way to do this?
You have to control your data set in your controller:
$scope.ProId = "";
$scope.HideOdd = function (){
-- create a function to hide DATA
}
and on your ion tag ad ng-hide="HideOdd"

Required help on javascript

I have this piece of javascript code
<script language="javascript">
function editRecord(email){
window.open('CompleteProfileDisplay.jsp?email='+email);
f.submit();
}
</script>
My question is how to hide the email value in address bar while calling CompleteProfileDisplay.jsp page through window.open function.One more thing CompleteProfileDisplay.jsp accepting the email value as request.getParameter method.Please help me if anybody is having idea.
The open() method takes a second name parameter which you can use as the target of a post, so you can create a hidden form with a target, open about:blank with a the target name and submit that form.
Or you can have a form that submits to the special '_blank' target which also opens a window. Similarly you programmatically fill and submit the form.
Edit: I said '_new' which is wrong....
You can follow this outline to accomplish your goal:
Create a small form within your HTML, with its action property set to CompleteProfileDisplay.jsp, containing an input field named email, with a target of _blank, and a method of post.
Have your function set the value of the email input field of this form to the given email address and submit the form.
A popup window will open containing the same results as your original request, but the data (email address) will be submitted as a POST request without being visible in the URL.
Like this:
<!-- make sure this form isn't nested with another form in your page -->
<form action="CompleteProfileDisplay.jsp" target="_blank" method="post">
<input type="hidden" name="email" id="hiddenemail" />
</form>
<script>
function editRecord(email){
var e = document.getElementById('hiddenemail');
e.value = email;
e.form.submit();
}
</script>
(Your question does not show that you are customizing the popup window's appearance in any way, so I am not considering that in my answer.)

how to set the radio button's 'checked' attribute dynamically.

I've developed a Joomla 2.5 component that does ALMOST exactly what I want it to do. I have a form that contains a fieldset with 2 radio buttons (for "am" and "pm"). I have been unable to figure out how to set the appropriate button's 'checked' attribute based upon other information. It is trivial to set a default within the xml file that defines the form fields, but I don't see how I to do this dynamically.
It is possible? Have I missed something in the documentation that would explain how to do this??
In case you load the form from the view: in the display() method of view.html you will be loading your form:
$this->form = $this->get('Form');
This is invoking a model which in turns extends joomla.application.component.modelform; its getForm method loads the form:
$form = $this->loadForm('com_yourcomp.model', ...
This is what I gather from your description. If this is not the case you might want to move the suggested code below right after you load the form: this is the complete snippet that allows you to set the value of a field:
/// Load the form from the model:
$this->form = $this->get('Form');
// Check for errors.
if (count($errors = $this->get('Errors'))) {
throw new Exception(implode("\n", $errors));
}
//... some logic ...
$this->form->setValue('businessid',null,$businessId);
$this->form->setFieldAttribute( 'businessid', 'readonly', 'true' );

How to use the template function in the grid using kendoui

I am using a template to display some button. I have written the following code :
template: kendo.template($("#edit-template").html())
And in the edit template I have written :
<script id="edit-template" type="text/x-kendo-template">
<a class="k-grid-edit" style="visibility:hidden;" id="edit">Edit</a>
</script>
Initially it will be hidden mode. On databound function, I will show or hide the button. If the permission is shown then I write
$(".k-grid-edit").show();
Whenever I am updating the grid then the edit button is disappearing again. This is because the button is in hidden state initially. After updating also I need to display that in visible mode. How can i do that.
Regards
What about transforming your template into:
<script id="edit-template" type="text/x-kendo-template">
# if (isVisible) { #
<a class="k-grid-edit">Edit</a>
# } else {#
<a class="k-grid-edit" style="display:none">Edit</a>
# } #
</script>
and then have a variable:
var isVisible = false;
Then toggling it to visible is:
isVisible = true;
$(".k-grid-edit").show();
while hiding it is:
isVisible = false;
$(".k-grid-edit").hide();
Basically the variable isVisible stores the state and the template checks it using JavaScript.
NOTE The template might be more compact but I think this is more readable.
One more question (styling) I removed the id from the anchor a in your template since id must be unique and you were setting the same id for all kendoGrid rows.

Resources