Foundation pop up is not closing on call of function - javascript

The problem that we are having is closing the Foundation for apps popup when the 'give feedback' button is clicked.
<a class="align-center app-student-icon"
zf-popup-toggle="{{'popup-' + $index}}">
<span ng-bind="getMemberById(assessment.user).fullname"></span>
<i class="icon icon-pencil-no-fill"></i>
</a>
<zf-popup id="{{'popup-' + $index}}" class="padding text-center">
<h5>Question Feedback</h5>
<textarea name="name"
rows="4"
placeholder="Leave feedback here"
ng-model="assessment.test.tutorFeedback"></textarea>
<button type="submit"
class="button expand"
ng-click="closeAndSavePopup('popup-' + $index, assessment)">Give feedback</button>
</zf-popup>
The 'Give Feedback' button triggers the below scope function:
scope.closeAndSavePopup = function (popupId, object) {
saveFeedback(object);
setTimeout(function () {
FoundationApi.closeActiveElements();
});
};
We've dependency injected the foundationApi so we can access the module functions foundation has given us. We have used the example above as well as
FoundationApi.publish(popupId, 'close')
However when clicked the foundation popup doesn't seem to want to close. We have also used toggle instead of close to see if this would make a difference.
Has anyone else come into this problem and found a solution?

After looking in the foundation code we realised that this was a bug/poor documentation of our version of foundation for apps.
The answer is to wrap the 'close' in square brackets.
FoundationApi.publish(popupId, ['close'])
The reason being is because in the foundation javascript it is expecting a array for popups and pretty much anything else a string.. So stupid..
cheers

Related

Add popup based on class (most likely)

I'm trying to use Tampermonkey to add a popup on pages in the Canvas LMS. It's a forum, and after each post there is a "Reply" option, which is what I want to add the popup to. But when I click the "Reply" link, no popup appears. It opens the Reply box, as normal, but my popup is nowhere to be seen.
The code looks roughly like this:
<div class="entry-controls hide-if-collapsed hide-if-replying">
<div class="notification" data-bind="notification"></div>
<a role="button" class="discussion-reply-action entry-control" data-event="addReply" href="#">
<i class="icon-replied"></i>
<span aria-hidden="true">Reply</span>
<span class="screenreader-only">Reply to Comment</span>
</a>
</div>
The JS code I'm trying to add is:
document.querySelectorAll('.discussion-reply-action').forEach(item => {
item.addEventListener('click', event => {
alert("Popup text here");
})
})
In addition to .discussion-reply-action, I've tried using .entry-controls, .notification, .entry-control, even stuff like span[aria-hidden="true"]. Nothing seems to work.
I know the Tampermonkey script itself is applying correctly, because it has other functionality that is showing up as usual.
Any idea why this bit isn't working for me? I'm a complete JS noob, for what that's worth.
This got answered in the replies, but just wanted to formally note that it came down to delaying my code injection. I was trying to attach to elements that loaded after the doc. Once I got behind them, it worked fine.

Knockout Click event not working

I am working on a weather page for myself (and maybe others in the future) and having an issue with a button that will show and hide weather alerts. You can view the page to see what I'm trying to do. (Sorry, I'm picking on FL, but they have a lot of alerts right now).
Page Source
JS Source
I have my alerts coming into an array and for each item, I need a button that will show and hide the alerts. My page source contains:
<div data-bind="foreach: alertsViewModel.features">
<div class="col-12">
<div class="alert alert-danger" role="alert">
<p>
<strong data-bind="text: properties.headline"></strong>
<button type="button" class="btn btn-link" data-bind="click: $root.showHideAlert">Show</button>
</p>
<div data-bind="attr: {id: properties.id}" style="display: none;">
<p data-bind="lineBreaks: properties.description"></p>
<p><strong>Instructions</strong></p>
<p data-bind="lineBreaks: properties.instruction"></p>
</div>
</div>
</div>
</div>
And my ViewModel looks like:
// ==================
// Alerts View Model
// ==================
var alertsViewModel = {
features: ko.observableArray([]),
hwoUrl: ko.observable(""),
hwoText: ko.observable(""),
showHideAlert: function(data, event){
alert('you clicked');
/*$('#hwo').toggle('slow',function(){
if ($('#showHwo').text() == "Show")
{
$('#showHwo').text("Hide");
}
else
{
$('#showHwo').text("Show");
}
});*/
}
};
ko.applyBindings(weatherViewModel, document.getElementById('weather-alerts'));
I have tried a few different methods and I can't get anything to work. (Thus the commented code and the alert). Which is strange, since I have done this a few times in the past with no issues. I'm sure it's something simple I missed. Any help would be appreciated.
Could it perhaps be because you used the weatherViewModel in your call to ko.applyBindings instead of alertsViewModel?
I think the $root in the button's bindings refers to weatherViewModel since that's the VM applied by ko.
Perhaps try changing the location of the function or simply use alertViewModel instead.

Jquery works clearly Firefox, but not in Chrome and Explorer [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
i have simple jquery code on my page for show and hide two panels. it works clearly Firefox, but not in Chrome and Explorer.
when i click "Next" button later "Back" button, All the design of the page is distorted .
And i added "show alert" button. When alert is show page is distorted again.
$(function() {
$("#button").click( function()
{
alert('button clicked');
}
);
});
plaese refer problems link: http://bit.ly/1v982qc
<script>
$(function () {
$("#adm2").hide();
$("#adm3").hide();
});
$('#button1').click(function () {
if ($('#year1').prop('checked') == false && $('#year2').prop('checked') == false) { }
else {
$('#adm1').hide(); $('#adm2').show()
if ($('#year1').prop('checked')) {
$("#ruckpanel").show();
}
else {
$("#ruckpanel").hide();
}
}
});
</script>
Thank You!
INITIAL - From start the page look like this:
After clicking "Next" button it looks like this:
After clicking "Back" button it looks like this:
There are probably multiple errors, but this is too big for a comment:
The click handlers in one block look like this:
<span class="pull-left"><div style="width:100px"> <button type="button" class="btn btn-default btn-block" onclick="$('#adm3').hide();$('#adm2').show();"> Back <i class="fa fa-arrow-circle-left fa-lg"> </i></button></div></span>
<span class="pull-right"><div style="width:150px"> <button type="button" class="btn btn-primary btn-block" onclick="$('#adm2').hide();$('#adm3').show();">Next <i class="fa fa-check fa-lg"> </i> </button></div></span>
i.e. the relevant part looks like:
onclick="$('#adm3').hide();$('#adm2').show();"> Back <
onclick="$('#adm2').hide();$('#adm3').show();">Next <
That first one should probably be:
onclick="$('#adm2').hide();$('#adm1').show();"> Back <
as it makes no sense to hide the next page and show the current one!
Suggestion:
I imagine there are many other maintenance problems in this type of coding, so I strongly suggest you unload the gun you have pointed at your own head and stop using onclick= attributes for event handlers! Use jQuery instead for all of them as per your example (you obviously know how to use them that way).
once your code is all in one place error like that will become obvious and you will spot much simpler ways to code the page behavior.

Clicking a button on a webpage using JQuery or Javascript

I've been rummaging through the web to how to click buttons for a project I'm working on with Javascript+JQuery(Still not very good). Luckily I was able to find my answer and figured out how to click basic HTML buttons that looked like this(Cut off some of the code just to get the point across).
<div class="ui-block-a">
<input type="submit" value="Buy Now" data-theme="d">
</div>
But now I've come across a button like this.
<div id="BuyWithRobux">
<div data-expected-currency="1" data-asset-type="T-Shirt" class="btn-primary btn-medium PurchaseButton " data-se="item-buyforrobux" data-item-name="Donations" data-item-id="170938328" data-expected-price="2" data-product-id="20832770" data-expected-seller-id="180359" data-bc-requirement="0" data-seller-name="Clone3102">
Buy with R$
<span class="btn-text">Buy with R$</span>
</div>
</div>
Just based off of what I know I don't think I can use what I used to click the last button which was...
$("input[type='submit']").click();
So my question is how can I click this "button"? I've tried using my old code on it to no avail. I rather not use Selenium, or anything if at all possible. Could anyone help me out with this? If you need anymore information just say what and I'll do my best to provide it, fairly new to this so don't know what to include sadly.
Thank you in advance.
By "clicking this button" If you meant to trigger a click on div#BuyWithRobux , You can do so like
$("#BuyWithRobux").click();
or
$("#BuyWithRobux").trigger("click");
The syntax for triggering a click remains the same, all you've to do is to use the right selector to target the element on which you need to trigger the event.
You can learn more about jQuery selectors here

Knockout enable binding not working

I can't get the enable binding to work in Knockout JS. With the enabled property set to false, the button is not disabled and I can still click it.
see fiddle
<a class="btn btn-xl btn-primary"
href="#"
role="button"
data-bind="enable: enabled, click: clicked, visible: isVisible">
<i class="icon-only icon-ok bigger-130"></i>
</a>
var ViewModel = function(){
var self = this;
self.enabled = ko.observable(false);
self.isVisible = ko.observable(true);
self.clicked = function(){
alert('You clicked the button');
};
};
$(function(){
var model = new ViewModel();
ko.applyBindings(model);
})
Enable binding does not work with anything you want.
This is useful with form elements like input, select, and textarea
It also works with buttons. Like in my example http://jsfiddle.net/5CbnH/1/
But it does not work with your link. You are using twitter bootstrap and they enable/disable their "buttons" with css classes. So you have to use css binding like this:
data-bind="css: { yourClass: enabled }"
Check what class is responsible in bootstrap for showing your "button" and modify your code accordingly with css binding.
Right:
✅ enable✅ disable
Wrong:
❌ enabled❌ disabled
Make sure you use disable instead of disabled and enable instead of enabled.
<input type="text" data-bind="value: foo, enable: isEditing"/> YES!!
<input type="text" data-bind="value: foo, enabled: isEditing"/> NO!
Easy mistake to make :-)
For people who might find this in a search:
I had a problem getting the enable binding to work as well. My problem was trying to use a complex expression without referencing the observables like functions:
<input type="button" data-bind="enable:AreAllStepsVerified && IsFormEnabled, click:SubmitViewModel"/>
Should have been:
<input type="button" data-bind="enable:AreAllStepsVerified() && IsFormEnabled(), click:SubmitViewModel"/>
See: https://stackoverflow.com/a/15307588/4230970
What Salvador said in his answer.
You must understand that the enabled and disabled binding in knockout work by putting a disabled attribute on the target DOM element. Now if you look at the HTML documentation you'd notice that not all HTML element support this attribute.
Actually only form elements (e.g. <button>) do. <a> does not.
I got it to work by changing the anchor tag to a button, not really sure why this makes it work, but it works nonetheless.
Updated fiddle.
<button class="btn btn-xl btn-primary"
role="button"
data-bind="enable: enabled, click: clicked, visible: isVisible">
<i class="icon-only icon-ok bigger-130"></i>
</button>

Categories