I am working on a project where I need to use a messaging system.
I have an inbox: When I used the $state.reload() to show the newly sent message but when the state gets reloaded the header bar gets disappeared and doesn't gets visible until i do the manual refresh. I am using ionic 1.1.1 version
I searched a lot but didn't get any suitable reason that why it is happening. Kindly suggest me on this.
So, after searching a lot for ways to solve this problem, that I am also stuck on, I found out there is not! Unfortunatelly updating to the new version of Ionic did not help, and the workaround provided at Ionic's GitHub desn't work for me. It is:
$scope.$on('$ionicView.enter', function(e) {
$ionicNavBarDelegate.showBar(true);
});
But if you have custom buttons in your header, this code doesn't work as expected. There are some jQuery solutions too, but I think it's not what we really need.
Source: https://github.com/driftyco/ionic/issues/3852
EDIT
So, I've worked on a pure Javascript solution, for my situation, and here it is. Hope it can help.
$scope.$on('$ionicView.enter', function(e) {
$timeout(function() {
showHeader();
}, 1000);
function showHeader() {
// Having the nav-bar in your template, set an ID to it.
var header = document.getElementById('header_id');
if (header.classList) {
if (header.classList.contains('hide')) {
header.classList.remove('hide');
}
}
}
});
For me what was causing that issue came from the solution of this problem:
https://github.com/ionic-team/ionic-v1/issues/119
Once i removed this line:
$ionicConfigProvider.views.maxCache(0);
from my config phase the action bar started to work again.
I have this flow in my ionic app... login.html page(which is a "ion-view")->side-menu page(side-menu from ionic framework)->page2.html page(which is a "ion-view"). Now i want to implement "ion-nav-bar" with "ion-nav-back-button" in it. Normally when i want to go back from page2.html the app should sent me to side-menu page....instead, my app, sent me to login page. Seems like side-menu does not have "ion-view" in it and it is not recorded in app flow. Any suggestion how can i solve that ? thank you
There is no a state for side menu, you can not 'go back' to open side menu.
In the normal, for the login view, you should disable the state temporally. Then the app will not 'go back' to login view. You can do it like this:
$scope.doLogin = function () {
Auth.login($scope.loginData, function () {
console.log('login success');
$ionicHistory.nextViewOptions({
disableBack: true
});
$state.go('home');
});
};
And you can also clear the view history of ionic to avoid going back with:
$ionicHistory.clearHistory();
$state.go('user.home');
I am creating a CKEditor plugin, using version 4.2.1. I am trying to follow the tutorial on a Simple Plugin. However, the text inputs in my dialog window are not editable / clickable in the dialog, even when I just copy in the entire abbr plugin from the tutorial with no changes.
I can still click the dialog tabs, OK / Cancel buttons, and drag the dialog around. I have added in other elements (like selects) to the dialog in my custom version, and I can interact with those.
When I check the text input elements in Chrome's Dev Tools, I can add text via the Console / jQuery and it appears. I get no failures in the Console.
$('#cke_229_textInput').val('help');
Will add text to the text input and display it on the screen. But I can't interact with the element via mouse / keyboard / browser. Is there something obvious in the CKEditor configuration that I am missing? Sorry if this is a really stupid question--first time working with CKEditor. I have also searched the CKEditor forums and Google, without finding any related issues.
This happens in both Chrome 30 and FF 24.
My call to create the editor:
var me = document.getElementById('resource_editor_raw');
editor = CKEDITOR.replace(me, {
fullPage: true,
removePlugins: 'newpage,forms,templates',
extraPlugins: 'abbr',
allowedContent: true
});
Thanks for any tips or hints!
Update #1
Thinking this might be related, I have also tried setting the z-index of the text element to very high, using Chrome's Dev Tools. No luck, it is still not editable / highlightable...
Update #2
This seems to be this conflict with jQuery UI. The suggested fix doesn't work for me yet, but will poke around...leaving this up for anyone who might stumble across it.
Final Update
So Brian's tip helped me. Both the Bootbox modal backdrop (what I am using to generate the original dialog) and the CKEditor dialog backdrop have tabindex=-1, so they conflict somehow. Manually turning off the Bootbox backdrop (i.e. setting tabindex='') works with Chrome dev tools, so I think I can hack something together with jQuery or whatnot. Amazing stuff...thanks for the help!! Not sure why I got this working in a jsFiddle...if I recall correctly, I might not have had a backdrop on those dialogs.
Also, for reference, a tabindex of -1 makes things untabbable, which makes sense for a backdrop.
The modal html attribute tabindex='-1' is what seems to be causing the issues for me.
The tabindex='-1' is actually in the bootstrap documentation and is needed for some reason that I am unaware of.
Use the 100% working script..
<script type="text/javascript">
// Include this file AFTER both jQuery and bootstrap are loaded.
$.fn.modal.Constructor.prototype.enforceFocus = function() {
modal_this = this
$(document).on('focusin.modal', function (e) {
if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select')
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_textarea')
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
modal_this.$element.focus()
}
})
};
</script>
Note: Include this file after both jQuery and bootstrap are loaded.
OMG I have been googling this for hours and finally fond some code that works!!
Stick this in your dialog page that will have a ckeditor in it:
orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
$.ui.dialog.prototype._allowInteraction = function(event) {
if ($(event.target).closest('.cke_dialog').length) {
return true;
}
return orig_allowInteraction.apply(this, arguments);
};
I found the fix here:
https://forum.jquery.com/topic/can-t-edit-fields-of-ckeditor-in-jquery-ui-modal-dialog
Not sure if anyone else is having this issue now. I was ripping my hair out trying to create a hack. It was a pretty simple solution after a while of digging and search the web. This fix helped me. Just place it on the same page where you want to place your editor - when loading from jQuery. The issue is conflicting tabindex, so I simply removed that attribute from the modal.
<script>
$(function(){
// APPLY THE EDITOR TO THE TEXTAREA
$(".wysiwyg").ckeditor();
// FIXING THE MODAL/CKEDITOR ISSUE
$(".modal").removeAttr("tabindex");
});
</script>
I am using Semantic UI and fix this problem by create an instance of CKEDITOR after create Modal.
$('#modal-send').modal('attach events', '.btn-close-modal').modal('show');
var ckeOptions = {
entities: false,
htmlEncodeOutput: false,
htmlDecodeOutput: true
}
CKEDITOR.replace('message', ckeOptions);
CKEDITOR.config.extraPlugins = 'justify';
I also faced this issue when I updated the CKEditor into 4.14
I found the fix in here - http://jsfiddle.net/kamelkev/HU8Qt/3/
In this case,
$.widget("ui.dialog", $.ui.dialog, {
_allowInteraction: function (event) {
return !!$(event.target).closest(".cke").length || this._super(event);
}
});
It will return false, so the textbox gets disabled/ unfocused (losing focus)
As a solution, we need to return true or need to modify the class .cke in the return statement into .cke_dialog
return !!$(event.target).closest(".cke").length || this._super(event);
I tried to upload images to server from CK Editor[without CKFinder] and on positive side i am able to do. whenever we are trying to create some dialog, they are creating one div on the fly which will hold your dialog box. Better you check the CSS property for your text box using chrome and change it. Hope this will help you.
So I'm learning jQuery Mobile and I'm trying to run the following code below in my Android emulator. What I was trying to do is to use $.mobile.changePage() method to navigate to my Contacts page (contact.html). Obviously I'm doing something wrong, because I'm not even seeing the alert() call I placed into my JS.
I'm using jquery.mobile-1.0.min.css, jquery-1.6.4.min.js, and jquery.mobile-1.0.min.js in my html file.
I have an html5 button tag with an id of "html5Btn" in my code. I have wrapped that button in a "div" with a data-role='content' attribute.
Can someone explain...
What I'm doing wrong in my code?
How do I debug JS in Eclipse? I'm not seeing any errors in my LogCat? Is this where I even look for jQuery errors?
//CHANGE PAGE USING changePage()...placed this code
$("#html5Btn").bind('click', function(event) {
alert("in JS");
$.mobile.changePage('contact.html');
}, false);
try
//CHANGE PAGE USING changePage()...placed this code
$("#html5Btn").live('click', function(event) {
alert("in JS");
$.mobile.changePage('contact.html');
}, false);
For debugging, firebug is your friend! Also, I'm using intellij 11 ultimate... I must say the javascript debugger is nice!
I'm working on a webapp for iPad. What I want is provide a "save & quit" option. When the user presses the quit button, I safely update my database and show a screen who thanks the user for using the webapp.
What I want to do now is actually close the webapp. As window.close(); doesn't seems to work I have found a workaround with links.
Clicking on a link in a webapp closes the fullscreen app and opens safari. So far I tried to embed an hidden link in my mage and trigger it with link.onclick(); but it doesn't work, and document.location= doesn't open safari.
Here's the HTML example:
<body onload="leave();">
Modifications saved, goodbye!
<a id="goodbye" href="www.mahsite.com" style="display:none;"> </a>
And the JS:
function leave() {
window.close();//Doesn't work
window.setTimeout(function e(){document.getElementById('goodbye').onclick();},1000);
return true;
}
Can someone give me an idea? I'm aware that the onclick() won't work unless I have a onclick handler attached to my link, but I don't have any other idea.
Try
self.close();
or
self.window.close();