Develop Reference

jquery seems not to work inside bootstrap 4 popover

I want to send data via jquery (jquery-3.2.1.min.js) and ajax from inside of a bootstrap popover.
The popover works fine, but I cannot get the submit to work.
I initialized the popover with
$(document).ready(function() {
$(function(){
$("[data-toggle=popover]").popover({
html : true,
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
});
});
This is the html trigger:
<span tabindex="0" role="button" data-toggle="popover" data-placement="right" data-popover-content="#comment230" data-original-title="" title="">
<img src="/ds/img/comment.svg" alt="comment" height="16px">
</span>
And this is the html inside the popover:
<div id="comment225" style="display:none;">
<div class="popover-heading">Comments</div>
<div class="popover-body">
<div class="commentbody">
<div>
<fieldset>
<div class="input text">
<label for="comment">Comment</label>
<input name="comment" id="comment" type="text" />
</div>
</fieldset>
<button class="submittest" id="acomment225button">Test</button>
</div>
</div>
</div>
</div>
For testing reasons I did this:
$(".submittest").click(function(e) {
alert('test');
e.preventDefault();
});
The alert does not work from buttons inside the popover, but from buttons placed on the rest of the page.
How can I get this to work?

Those DOM elements are not present at the time you are subscribing to the event.
You need to hook up to events in this fashion:
$(document).on("click", ".submittest", function(e){
alert("test");
});

Why an ionic modal freezes the UI when it is closed or submitted?

I have a popover which two options -Add Favorite and Add Comment-, the first options is working correctly: it does not freeze the user interface; but the second one once the form is omitted or submitted freezes the interface. This is what is happening:
Note how when I close the form the interface does not respond.
This is the code I have used to create the popover and and modal:
$ionicPopover.fromTemplateUrl('templates/dish-detail-popover.html',{
scope: $scope})
.then(function(popover){
$scope.popover = popover;
});
$scope.openPopover = function($event){
$scope.popover.show($event);
}
$scope.closePopover = function() {
$scope.popover.hide();
};
$ionicModal.fromTemplateUrl('templates/dish-comment.html', {
scope: $scope
}).then(function(modal) {
$scope.commentModal = modal;
});
// Triggered in the reserve modal to close it
$scope.closeAddComment = function() {
$scope.commentModal.hide();
};
// Open the reserve modal
$scope.showCommentModal = function($event) {
$scope.closePopover();
$scope.commentModal.show($event);
};
The template for dish-detail-popover.html:
<ion-popover-view>
<ion-content>
<div class="list">
<a class="item" ng-click="addFavorite(dish.id)">
Add to favorites
</a>
<a class="item" ng-click="showCommentModal()">
Add Comment
</a>
</div>
</ion-content>
</ion-popover-view>
and the template for dish-comment.html:
<ion-modal-view>
<ion-header-bar>
<h1 class="title">Submit Comment on Dish</h1>
<div class="buttons">
<button class="button button-clear" ng-click="closeAddComment()">Close</button>
</div>
</ion-header-bar>
<ion-content>
<form id="comentDishForm" name="comentDishForm" ng-submit="doComment()">
<div class="list">
<label class="item item-input item-select">
<span class="input-label">Rating</span>
<select ng-model="comment.rating">
<option ng-repeat="n in [1,2,3,4,5]" value="{{n}}">{{n}}</option>
</select>
</label>
<label class="item item-input">
<span class="input-label">Your Name</span>
<input type="text" ng-model="comment.author">
</label>
<label class="item item-input">
<span class="input-label">Your Comment</span>
<input type="text" ng-model="comment.comment">
</label>
<label class="item">
<button class="button button-block button-positive" type="submit">Submit</button>
</label>
</div>
</form>
</ion-content>
</ion-modal-view>
NOTE: When the form is called from the Add Comment button (the green one), it works correctly. The failure is related when it called from the popover.
Some suggestions, or ideas,... to solve this?

The screen gets freezed because despite closing the popover before opening the modal, the body tag remains dirty with the class 'popover-open'. A quick solution, but not the neatest, is to close the popover again when closing the modal. This way, ionic framework will remove the class 'popover-open' from the body tag. Example:
$scope.$on('modal.hidden', function() {
$scope.closePopover();
});
Hope it helps.

I also ran into the same issue and had no idea why this was happening. Reading the Ionic docs about ionicPopover, I found that the .hide() method is actually returning a promise which will resolve once the popover is animated out. So, what you can actually do is setup your closePopover() method as follows:
$scope.closePopover = function () {
return $scope.popover.hide();
};
As for the method to be executed when someone clicks the "Add Comment" option, you can implement that as follows:
$scope.addComment = function addComment() {
$scope.closePopover()
.then(function() {
$scope.openAddCommentModal();
});
};
This will ensure that the modal is only shown once the popover is completely animated out and those classes are removed from the body tag. This will clear the dirty states and make the app respond.

How can I make switching between Boostrap tabs dependent on a confirmation dialog box?

I've tried two things that I thought would work, and naturally, neither of them do. Here are the two ways I'm currently trying, with some JSFiddle sample code (I'm using JQuery 2.2.1).
The HTML sample:
<ul class="nav nav-tabs" id="myTabs">
<li class="active">About</li>
<li>Contact</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="about">
<div class="form-group">
<label for="txtAbout">About me: </label>
<input type="text" class="form-control" id="txtAbout">
</div>
</div>
<div class="tab-pane" id="contact">
<div class="form-group">
<label for="txtContact">Contact me: </label>
<input type="text" class="form-control" id="txtContact">
</div>
</div>
</div>
My current attempt: https://jsfiddle.net/0noo2bwg/3/
var isDirty = false;
$(".form-control").change(function () {
isDirty = true;
});
$('#myTabs a').click(function (e) {
e.preventDefault();
if (!isDirty) {
$(this).tab('show');
}
});
As is (thankfully?) evident in the fiddle, e.preventDefault() doesn't stop the link even when isDirty is true. I stripped the dialog code out of here since it wasn't affecting the result.
Here's the other attempt (with the dialog HTML and JS logic included): https://jsfiddle.net/kLe75gtr/3/
var isDirty = false;
$(".form-control").change(function () {
isDirty = true;
});
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
if (isDirty) {
e.preventDefault();
$('#dialog-confirm').dialog({
resizable: false,
modal: true,
buttons: {
"Leave": function() {
$(this).dialog("close");
isDirty = false;
$(e.target.text).tab("show");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
}
});
e.preventDefault() has to happen first or the tab will switch while the dialog is being addressed. Here, $(e.target.text).tab("show") just doesn't switch the tab. Possibly because it's being prevented in the same function...idk.
Anyone have an idea to make one of these work? Or a different route? Web dev isn't my strong suit so maybe I'm missing something simple. Apologies if I've left out any other crucial info, started drinking in hopes that would help my thinking capacity..

Update the leave function of dialog with the following line.
$(e.target).click();
I have updated the jsfiddle : https://jsfiddle.net/kLe75gtr/5/

How to disable clicking of ng-repeat rows?

My title says it all. How can I disable the clicking of the ng-repeat rows? Or is it even possible.
Here is a sample code I created:
<div ng-controller="MyCtrl" class="grid">
<div class="header">
<div class="cell">Id</div>
<div class="cell">Name</div>
</div>
<div class="gridBody">
<div ng-class-even="'even'"
ng-class-odd="'odd'"
ng-class="{current: row.current == true}"
ng-click="clicked(row)"
ng-repeat="row in topics" class="row"
ng-disabled="disabled == true">
<div class="cell">{{row.id}}</div>
<div class="cell">{{row.name}}</div>
<div class="cell">{{row.current}}</div>
</div>
</div>
</div>
I also created this jsfiddle to show what I'm struggling with.
Edits:
I have edited my jsfiddle to show more of what im trying to achieve. Hope its clearer now.
http://jsfiddle.net/2jxea6qw/8/

you can do that using a custom directive and a captured event.
The concept is that you subscribe to the $element in link phase of your ClickDisablerDirective the following way:
$element.addEventListener("click", function(e) {
e.stopPropagation()
e.preventDefault()
}, true)
Notice the 'true' param as the last to the addEventListener method: that allows the handler to be notified before any other lower level (bubbling wise) handlers.
Here is the directive in length:
myApp.directive('disableClick', [function() {
return {
restrict:'A',
link: function(scope, element) {
element[0].addEventListener("click", function(e) {
e.stopPropagation()
e.preventDefault()
}, true)
}
}
}])
I updated your fiddle to show how:
http://jsfiddle.net/2jxea6qw/6/

$.mobile.loading refusing not to work

As the title suggests I'm looking to call the $.mobile.loading method when a user clicks a button to sign them up. Now this has worked a good 50+ times around the website but for some reason the code below doesn't open the $.mobile.loading dialog but it runs the code though. Not to sure why this is happening on this particular situation.
<div id ="diaglogfacebookuserdetails" data-role="dialog" data-theme="a">
<div data-role="header">
<h3 class="headerdialog">Almost Done</h3>
</div>
<div data-role = "content">
<center>
<div class="alert-message info">
<div class="box-icon"><img src="css/images/info.svg"></div>
<div id="diaglogfacebookuserdetailsmessage"></div>
</div>
<input type="text" name="diaglogfacebookuserdetailscell" id="diaglogfacebookuserdetailscell" placeholder="Enter your Cell Number" />
<select id="diaglogfacebookuserdetailsuni" class = "searchuniversity">
</select>
<select name="diaglogfacebookuserdetailscampus" id="diaglogfacebookuserdetailscampus" class = "signupuniversitycampus">
</select>
<input type="submit" id ="facebookuserdetailsbutton" name="facebookuserdetailsbutton" value="SUBMIT" data-theme="a"/>
</center>
</div>
</div>
Here is the JS:
$(document).on('pageinit',"#diaglogfacebookuserdetails",
function(){
$("#facebookuserdetailsbutton").click(
function()
{
$.mobile.loading( 'show', {
text: 'Signing you Up!',
textVisible: true,
theme: 'a',
html: ""
});
//lots of Code
$.mobile.loading( 'hide' );
});
});

Because you hide the loading dialog right after showing it. Try delaying closing it (as in this demo) or hide when data is successfully uploaded to server.
setTimeout(function () {
$.mobile.loading('hide');
}, 1000);