Codemirror not compatible with Jquery Autocomplete - codemirror

I want to use Jquery Autocomplete for my codemirror editor. But Looks like its not compatible with it. I have following code working to display the list of options inside a textarea when the user hits the ctrl-enter key.
$("#textareaCodemirror").autocomplete({
source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"],
minLength: 0
});
$('#textareaCodemirror').keydown(function (e) {
if (e.ctrlKey && (e.keyCode == 13)) {
$("#textareaCodemirror").autocomplete("search","");
}
});
It works fine. The issue is sometimes when I hit ctrl-enter,the browser hangs for a some time and then I get a dialog box that asks me if I want to enter code here or continue the script.
The message in the dialog box says the following:
"A script on this page may be busy, or it may have stopped responding. You can stop the script now, or you can continue to see if the script will complete.
Script: "location1/codemirror/js/codemirror.js:958 "
In the above message,codemirror.js is another library I am using.
How can I resolve this issue?

Related

Accounts.ui.config: Can't set `passwordSignupFields` more than once

In one of my react components, I have this
<a href={'/application/' + username +'/' +appid}>My Application</a>
When I click on that link, I get the javascript error Accounts.ui.config: Can't set 'passwordSignupFields' more than once.
However, when I go to the directly to the url http://192.168.0.110:3000/application/john/X93ajdsfj by pasting the url into the browser address bar, then the page loads without errors. I only get an error when I load the page by click on the anchor tag.
I suspect that when I click on the link, I'm probably not doing a full HTTP page reload, and only parts are reloaded, and this javascript found in my myproject.jsx gets fired again:
// This code is executed on the client only
Accounts.ui.config({
passwordSignupFields: "USERNAME_ONLY"
});
I am completely new to meteor. What is the best way to avoid this problem?
I moved the code out of the React component and into the main .jsx file of the meteor project and wrapped it with a Meteor.isClient if statement like so:
if(Meteor.isClient)
{
// This code is executed on the client only
Accounts.ui.config({
passwordSignupFields: "USERNAME_ONLY"
});
}

Enable browser action for an event in Google chrome

I am writing a chrome extension for capturing the URL. This is the code for my js file.
chrome.tabs.getSelected(null, function(tab) {
myFunction(tab.url);
});
function myFunction(tablink) {
alert(tablink);
}
Now i can get the URL alert for the page by explicitly clicking on the browser action. I need it to popup the alert whenever i click on any tab in my browser.
Could you please let me know how to proceed with this?
PS: I am sure i have to use some kind of event listener.
chrome.tabs.getSelected is deprecated since Chrome 33. Use chrome.tabs.query instead if needed.
Base on your need to make popup the alert whenever you click on any tab in your browser. You can use chrome.tabs.onActivated.addListener.
The code I created is as below and it works with me. It popup the alert of current page's url whenever you click on any tab in your browser.
chrome.tabs.onActivated.addListener(function(activeInfo) {
//alert("popup");
chrome.tabs.get(activeInfo.tabId, function(tab){
alert(tab.url);
});
});
Also keep in mind to add "permissions": ["tabs"], in your manifest file since it requires access to the url. See here:https://developer.chrome.com/extensions/tabs

utilReplaceInResponse not showing changes in the browser

Working in FiddlerScript, I've got some changes being made in the OnBeforeResponse method that used to work on a different machine (now long gone) but aren't working for me now. I've boiled it down to the following basic example.
On the fiddler sandbox page, I'm trying to replace the word per item with the words per item URL: http://webdbg.com/sandbox/shop/
Fiddler script file modified from the original to have two new lines. 1 to decode the session and 1 to replace in the response as per all examples I've seen and what used to work for me.
static function OnBeforeResponse(oSession: Session) {
oSession.utilDecodeResponse(); //Added this.
oSession.utilReplaceInResponse("per item", "per item"); //Added this
if (m_Hide304s && oSession.responseCode == 304) {
oSession["ui-hide"] = "true";
}
}
After saving the above fiddlerscript file and refreshing the page, I'm not seeing the replaces show in the browser. If I look in the Fiddler inspector, I am seeing the replaces. This means that the OnBeforeResponse is indeed being called at some point and the utilReplaceInResponse is also executing.
Additional oddity, if I put breakpoints after all responses (Fiddler -> Rules -> Automatic Breakpoints -> After Responses) and refresh the page, the response hits the breakpoint as expected and I click Run to Completion and the browser does show the replacement. So: No breakpoint, page doesn't show replacements in the rendered page. With breakpoint and simply running to completion, the page does show the replacements.
Why isn't the page showing the changes in the browser even though it shows them in the Fiddler inspector, or if I have a breakpoint set?
.
SOLUTION Had the Stream option selected in the main toolbar - deselected that and it works as expected.
.
Environment: Fiddler v2.4.5.3 - 64-bit AMD64, VM: 114.00mb, WS: 132.00mb .NET 2.0.50727.5472 WinNT 6.1.7601 SP1
Seen on both IE9 and Chrome31
Solved myself.
I had the Stream option enabled in the toolbar. (Doh!) De-select that and the replacement in the OnBeforeResponse works as expected.
It may be a new Fiddler version feature, but I had to add the following line to get my find/replace to work:
oSession.utilDecodeResponse();

Skillbuilders save before exit with Skillbuilders modal page

I am having troubles trying to understand how to use "Save before Exit" plugin with the Modal Page plugin in Oracle ApEx v4.1.1.
I basically would like to know how to attached the 'X' close button to the "Save before Exit" plugin when a user makes a change to a select list or text area field on the page (I also have classes associated to these fields), used within the modal page?
Here are links to the two plugins that I am trying to link together:
http://apex.oracle.com/pls/apex/f?p=46685:MODAL_PAGE:0
http://apex.oracle.com/pls/apex/f?p=46685:SAVE_BEFORE_EXIT:0:::::
Important note: i tested this plugin with the latest version available: 3.0.2. The change detection routine there is modificationDetected, where in 3.0.0 it was changeDetected! Check which version you use!
When i have to integrate things like these, i want to avoid altering provided code such as the plugin code. Doing this will break your stuff if you don't remember in the future and install a new version (unless you're actually fixing something of course).
Create a dynamic action on the page that calls the modal dialog, fire on load:
var default_colorbox_close = $.colorbox.close;
$.colorbox.close = function(){
iframejQ = $("iframe").get(0).contentWindow.apex.jQuery;
iframeDoc = iframejQ($("iframe").get(0).contentWindow.document);
apex.debug("Colorbox close attempt - check changes");
var hasChange = iframeDoc.apex_save_before_exit("modificationDetected");
apex.debug('Modal contains changes: '+hasChange);
if(hasChange){
$( "<div title='Unsaved changes!'>There are unsaved changes. Close the popup anyway?</div>" ).dialog({
resizable: false,
height:140,
modal: true,
stack: true,
zIndex: 9999,
buttons: {
"Don't close": function() {
$(this).dialog( "close" );
},
"Close": function() {
iframeDoc.apex_save_before_exit("disableWarning")
default_colorbox_close();
$(this).dialog( "close" );
}
}
});
} else {
apex.debug('Close modal with default colorbox close');
default_colorbox_close();
};
};
The save before exit plugin works by using the browser window.onbeforeunload event. It does trigger when the popup is closed (at least in FF it does), but by then it is way too late: the popup is gone and the markup too.
My first thought was to simply tap that onbeforeunload event by redirecting the page to a generic page which would hold onload code to close the popup. The onbeforeunload would spring in action as soon as the redirect would be attempted. There would be no dynamic action or plugin altering. But oh well, i decided against that. (Note though: most of the code in this snippet would have to be reused in that case too, save change detection and dialog).
Instead i choose to check for changes in the iframe document when a close event happens, and display a dialog, which can be modified too, and clearly indicates that you are performing an action on the popup and not on "the page" (which could be interpreted as the parent page of the modal).
So what is needed is to catch the modal popup close event. Note that the plugin is based of the jQuery Colorbox plugin. The Skillbuilder modal does not provide a pre-close event and can not without altering the colorbox plugin.
Colorbox provides a close option in the form of the "X" and also the ESC-key. I want to catch both(/all).
I didn't opt for unbinding the click on the X and binding a new click.
what i did first is save the default colorbox close event, and
then override the default.
var default_colorbox_close = $.colorbox.close;
$.colorbox.close = function(){
Next up: this piece of code will get the jQuery instance of the modal
page. I then fetch the document element of the page with this jquery
instance
iframejQ = $("iframe").get(0).contentWindow.apex.jQuery;
iframeDoc = iframejQ($("iframe").get(0).contentWindow.document);
Next up is checking the iframe (modal popup) for changes
var hasChange = iframeDoc.apex_save_before_exit("modificationDetected");
So if the page has changes, a warning has to be displayed. I do this
by using jQuery-UI Dialog. It will have "Unsaved changes!" as title,
and 2 buttons ("Don't close" and "Close"). When closing, the save
before exit plugin has to have its default warning disabled! If not,
you'd still get prompted by the onbeforeunload message! Then the
colorbox has to be closed (which will remove the iframe). Finally
the dialog (prompt) has to be closed.
if(hasChange){
$( "<div title='Unsaved changes!'>There are unsaved changes. Close the popup anyway?</div>" ).dialog({
resizable: false,
height:140,
modal: true,
stack: true,
zIndex: 9999,
buttons: {
"Don't close": function() {
$(this).dialog( "close" );
},
"Close": function() {
iframeDoc.apex_save_before_exit("disableWarning")
default_colorbox_close();
$(this).dialog( "close" );
}
}
});
If there are no changes, then the modal can simply be closed.
} else {
apex.debug('Close modal with default colorbox close');
default_colorbox_close();
};
Hope some of that sticks ;)
Example on http://apex.oracle.com/pls/apex/f?p=11128:1
Edit:
And some big thanks to Dan McGhan for helping in the OTN thread :)
https://forums.oracle.com/forums/thread.jspa?threadID=2434115&tstart=0
I would like to add something to the answer. I've noticed that the items that changed are not highlighted. So I've added this line to the "Don't Close" right before closing the dialog box.
iframeDoc.apex_save_before_exit('modifiedItems', {highlight:true});
And it highlights the items as it should!

Debugging jquery mobile on Eclipse

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!