Have a problem that is driving me insane! I suspect I am doing something wrong...
I am using jQuery mobile with multiple pages in the same HTML file.
I have a page #mainregister on which I check for any user changes. If they try to navigate away, I stop the navigation using this code (using info I found here on SO):
$(document).on("pageinit", '#mainregister', function(){
$(document).on('pagebeforechange', function(e, data){
ResetTimeOutTimer(); // Reset inactivity timer
if (typeof data.toPage != "string") {
if (isDirty) {
var to = data.toPage.attr('id');
to = '#' + to;
console.log(to);
if(to !== '#mainregister')
{
var confirmationMessage = 'It looks like you have been editing something. '
+ 'If you leave before saving, your changes will be lost.';
e.preventDefault();
e.stopPropagation();
isDirty = false;
console.log(to);
$("#leavebutton").on('click', function(){
changePage(to, false);
return false; // This is to prevent events bubbling up and causing double page flips
// See https://github.com/jquery/jquery-mobile/issues/2369#issuecomment-4830800
// and https://css-tricks.com/return-false-and-prevent-default/
});
$("#leavetext").html(confirmationMessage);
$('#confirmLeave').popup('open');
return false;
}
}
}
});
});
This brings up a popup asking the user if they wish to Save or Leave. This popup is defined as:
<!-- Leave Warning Popup -->
<div data-role="popup" id="confirmLeave" data-overlay-theme="a" data-theme="a" style="max-width:400px;" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Info</h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content" id="leaveContent">
<h3 class="ui-title" id="leavetext"></h3>
<input type="button" value="Save" onclick="SaveRegister()"/>
<input type="button" value="Leave" id="leavebutton"/>
</div>
</div>
<!-- End Leave Warning Popup -->
Now, if the user goes 'back' from #mainregister the navigation is stopped and the popup is shown. If the user chooses save, the save occurs but the URL still changes even though we're still on `#mainregister' page.
So, user is on index.html/#mainregister, hits back button, popup comes up, user chooses to save, popup closes, page shown is still #mainregister but URL is now index.html but should be index.html/#mainregister.
So, now the URL and the actual page do not match; and navigation is a little broken from here.
Am I using the wrong page event? Or something else?
Also (perhaps related) I notice that if I go back after a popup (in other use cases) I get the same URL twice - e.g. `\index.html#\index.html (is this because I am testing from file:// or something else)?
Related
I'm trying to figure out how to link a button to open a new HTML component but no matter which method I've tried I cannot get it to work
First I tried a JS Function:
function openNext(){
window.location = '../nextpage.html';
}
on this button code:
<div class="content">
<button type="button" ng-click="openNext()" class="nextBtn mat-raised-button"> Next!</button>
</div>
But that didn't do anything, so tried a simple href link, still nothing.
So I thought it was something perhaps with the routing
Notice that you are only asking to load a component on the click of a button. Nothing simpler:
<div class="content">
<button type="button" ng-click="openNext()" class="nextBtn mat-raised-button"> Next!</button>
<the-html-component-you-want-to-open
ng-if="isMyComponentOpen == true"
></the-html-component-you-want-to-open>
</div>
In your controller:
$scope.isMyComponentOpen = false;
$scope.openNext = function() {
$scope.isMyComponentOpen = true;
}
On the other hand, if you are looking into switching pages in your application, or loading external dialogs/modals containing other components, then you are asking the wrong question.
The way I've understood it, the tag is used to open and close content like a popup alert. What I fail to understand is what advantages the tag has compared to just using a "div" and styling it with css and adding functionality to it with js. It also seems counter intuitive to manipulate the "open" property in order to show/hide the content instead of using display:none/block; with css.
I also don't understand exactly which scenarios would be considered a dialog box. Is a form login box a dialogbox? What about a popup telling you to disable adblock? Are all popups that can be hidden considered dialog boxes?
The traditional, hacky way to create a dialog, via designing a div via CSS only seems to be intuitive for you because you are used to it. However, you need to implement every functionality related to it, such as:
opening it
closing it
Also, in the future, this will be enhanced by standard functionalities, so, while it's not urgent for already existent code, but when you write code, especially when you start a project, it makes sense to start using it. Let's see an example from [Mozilla's page][1]:
var updateButton = document.getElementById('updateDetails');
var favDialog = document.getElementById('favDialog');
var outputBox = document.querySelector('output');
var selectEl = document.querySelector('select');
var confirmBtn = document.getElementById('confirmBtn');
// "Update details" button opens the <dialog> modally
updateButton.addEventListener('click', function onOpen() {
if (typeof favDialog.showModal === "function") {
favDialog.showModal();
} else {
alert("The <dialog> API is not supported by this browser");
}
});
// "Favorite animal" input sets the value of the submit button
selectEl.addEventListener('change', function onSelect(e) {
confirmBtn.value = selectEl.value;
});
// "Confirm" button of form triggers "close" on dialog because of [method="dialog"]
favDialog.addEventListener('close', function onClose() {
outputBox.value = favDialog.returnValue + " button clicked - " + (new Date()).toString();
});
<!-- Simple pop-up dialog box containing a form -->
<dialog id="favDialog">
<form method="dialog">
<p><label>Favorite animal:
<select>
<option></option>
<option>Brine shrimp</option>
<option>Red panda</option>
<option>Spider monkey</option>
</select>
</label></p>
<menu>
<button value="cancel">Cancel</button>
<button id="confirmBtn" value="default">Confirm</button>
</menu>
</form>
</dialog>
<menu>
<button id="updateDetails">Update details</button>
</menu>
<output aria-live="polite"></output>
However, at the time of this writing (February the 3rd, 2022), this is not supported in all browsers, so it is perfectly feasible to avoid using it for now, until it will become supported everywhere.
[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
I am installing this modal dialog on a client's website, with practically no modifications.
However, I could not find how to make the modal dialog display on page load in the documentation.
Right now it just says:
<!-- Link to open the modal -->
<p>Open Modal</p>
But I am sure there is a way to make it just open on load.
I am using a hosted version of jQuery (jquery.min.js, jquery.modal.min.js) so I'm not trying to add/edit code in the JS file.
http://github.com/kylefox/jquery-modal Method 2: Manually:
$(function() {
$('#login-form').modal();
});
You need to create on your html a div like this:
<div ng-include="'/Somepast/busyModal.html'" ng-show="isLoading"></div>
<div> after load</div>
Then in your javascript you create:
function init() {
$scope.isLoading = true;
SomeFunction().then(function (data) {
$scope.isLoading = false;
}, onError);
};
that's it.
I have a custom directive placed on a Kendo UI treeview widget.
It seems to be working fine side-by-side, except that I'm trying to simply display the custom icons next to the tree node which is clicked on (see sample image below).
So my directive is data-toggle-me, placed next to the Kendo k-template directive as follows :
<div class="reports-tree" kendo-tree-view="nav.treeview"
k-options="nav.treeOptions"
k-data-source="nav.reportsTreeDataSource"
k-on-change="nav.onTreeSelect(dataItem)" >
<span class="tree-node" k-template data-toggle-tree-icons>{{dataItem.text}}</span>
</div>
and the directive code here inserts some custom icons next to the tree node when a user clicks on that tree node :
.directive('toggleMe', function ($compile) {
// Kendo treeview, use the k-template directive to embed a span.
// Icons appear on Click event.
return {
restrict: 'AE',
transclude: true,
template: '<span ng-show="nav.displayIcons" id="myIcons" class="reptIcons" style="display:none;width:50px;align:right;">' +
' <a title="add new folder" ng-click="nav.addAfter(nav.selectedItem)"><i class="fa fa-folder-open"></i></a> ' +
'<a title="add report here" ng-click="nav.addBelow(nav.selectedItem)"><i class="fa fa-plus"></i></a> ' +
'<a title="remove" ng-click="nav.remove(nav.selectedItem)"><i class="fa fa-remove"></i></a> ' +
'<a title="rename" onclick="showRename(this);"><i class="fa fa-pencil"></i></a>' +
'</span>',
link: function (scope, elem, attrs) {
var icons = elem.find("#myIcons");
elem.on('click', function (e) {
$('.reptIcons').css('display', 'none');
icons.css("display", "inline");
icons.css("margin-left", "5px");
});
}
}
})
My biggest problem at this point is getting the icons to appear on the treenode which is clicked on. Then once the user clicks on a different node, the icons will only render again on the newly-clicked node.
This fiddle represents a partially-working example but the icons are appearing on every single treenode - click tree item to show icons
**** UPDATED TREE IMAGE - All child nodes now show icons (not what I want) ****
I'm not sure to understand your issue, you should try to reduce the code to the minimum and have a snippet/jsfiddle that works.
If all you want is not trigger click events when $scope.disableParentClick is set to true, simply add
elem.on('click', function (e) {
// Do not execute click event if disabled
if (!$scope.disableParentClick) { return; }
...
});
Now that seems all not very angular friendly to me. You should externalize your HTML in either the template or templateUrl of your directive, potentially adding to it a ng-if="displayTemplate" which would only display the node when a click would set $scope.displayTemplate = true;
Also, instead of listening for click events this way, you should use the ng-click directive. Everything is doable with directives. I can give more information when you better understand your problem: I suspect you are not approaching it the right way.
UPDATE: if all you want is display the icons list of the clicked element, you could do it way easier. You actually don't need the toggle-me directive, but even if you keep it you can solve all your troubles the angular-way, which is by using ng-click, ng-repeat, etc. Please have a look at the following jsFiffle to see one way of doing that. There are many other ways, but really try using ng-click to avoid troubles:
http://jsfiddle.net/kau9jnoe/
Events in the DOM are always bubbling up. That is a click on a link would trigger an onclick handler on every element up the hierarchy, e.g. also the body element. After all the click happened within body.
The same is true for your directive. Any click within your element triggers its event handler. To circumvent this either attach the event handler somewhere else or ignore clicks from the links.
The event object has a target property that tells you what element initiated the event. So you could do something like this:
elem.on('click', function (e) {
if (e.target.nodeName.toLowerCase() == 'a') return; //ignore click on links
I am developing simple html update page.
I have button in one page and clicking on that new window should open.
In the new window i need to show "Processing..." text for few seconds and show text "Data Updated" new page.
Please help me.
Regards,
Sandy
HI,
Actually this is next part of question. I am able redirect between pages with new window.
But After displaying the "Data Updated" Page in new window. Now If I close the "Data Updated" Page I want redirect to the original page to in the original window.
Please Help Me.
Regards,
Sandeep
which technologies are you using? Basicly you could use some timer object and when few seconds pass automaticly redirect user to new page with text "Data updated"
first page:
<FORM>
<INPUT TYPE="BUTTON" VALUE="Test" onclick="window.open('http://www.test.com/processingPage');" >
</FORM>
processing page:
<div id="proccessContent">
Processing...
</div>
<meta http-equiv="refresh" content="5; url=next_page.html">
data updated page:
<div id="updateContent">
Data updated
</div>
this is not complete code but its something to go from.
On First Page you need to have only a button
<input type="button" value="Next Page" onclick="window.open('nextpage.html');" />
On next Page you need a div and a javascript interval as following
<div id='urdiv'>Processing... </div>
<script>
var yourdiv = document.getElementById('urdiv');
setInterval(function() { yourdiv.innerHTML = 'Data Updated'; },5000);
</script>
Or if you want to clear the interval (to avoid repetion of no use). Then
<script>
var yourdiv = document.getElementById('urdiv');
var myinterval = setInterval(function() { myFunction(); }, 5000);
function myFunction()
{
yourdiv.innerHTML = 'Data Updated';
window.clearInterval(myinterval);
}
</script>
Actually this is next part of question. I am able redirect between pages with new window.
But After displaying the "Data Updated" Page in new window. Now If I close the "Data Updated" Page I want redirect to the original page to in the original window.