I am using nicEdit in its iframe format.Everytime the user write anything in the editor(keyup event), I need to run another js/jquery function. How to add this custom keyup action to the desired iframe?
The answer actually lies in the js code. In the nicEdit.js search for :
var nicEditorIFrameInstance = nicEditorInstance.extend({
Inside this, in the initFrame function,
look for this.frameDoc.addEvent.
This is where the events are being added(via addEvent). To this include your keyup statement :
addEvent('keyup',this.YOURFUNCTIONAME.closureListener(this))
You need to add closureListener(this) to get this working.Then create YOURFUNCTION after initFrame function like this :
YOURFUNCTIONAME: function() {
//Do what you like. Probably call any JS function that lies in the file where
//you have included the nicEdit.js
},
This method worked for me. Hope it does for you too. nicEdit is by far the worst documented third party stuff I have ever come across.
Related
I'm using CodeceptJS and I'm trying to write a custom helper that asserts an text and clicks "OK". This dialog pops up as a iframe modal to consent with cookies.
If I write following steps in my scenario
I.amOnPage('/some-path');
within({frame: '#iframeID'}, () => {
I.see('Headline text for dialog');
I.click('OK');
});
// ...
...my test seems to work just fine.
But when I make an custom helper out of that and configure it properly so I can use it:
const { Helper } = codeceptjs;
class CookieConsent extends Helper {
consentWithCookies() {
const { Puppeteer } = this.helpers;
within({frame: '#iframeID'}, () => {
Puppeteer.see('Headline text for dialog');
Puppeteer.click('OK');
});
}
}
module.exports = CookieConsent;
...and use it as a step:
I.amOnPage('/some-path');
I.consentWithCookies();
// ...
...it doesn't seem to work as the consent dialog doesn't get clicked away as it was when implementing this directly in the scenario. According to some console.log() debugging the within callback doesn't get called at all. Console doesn't throw any errors about undefined within or anything suspicious.
I suspect that using within in a custom helper isn't working or I'm doing something wrong that I can't figure out from the documentation.
This warning at documentation doesn't really clarify when within is being used incorrectly, and using await doesn't help the problem.
within can cause problems when used incorrectly. If you see a weird behavior of a test try to refactor it to not use within. It is recommended to keep within for simplest cases when possible. Since within returns a Promise, it may be necessary to await the result even when you're not intending to use the return value.
iFrames can be a pain to work without when it comes down to automation. There are a number of factors that can make an iFrame unreachable to a framework such as cross-domain iFrames, commonly used for increased security on the content served.
Now to fix your issue, all you have to do is use switchTo() - Docs in CodeceptJS which is a function available for all helpers made available. The order should be
I.switchTo('your iframe');
..... some actions here;
I.switchTo(); // You do this so that you get out of the iFrame context when done
I have an FileUpload control on a page. I need to change some values based on the filename once a user selects a file. I'm trying to find out the best way to do this. The only option I can see is listening in JavaScript for a change event and then either..
a) forcing a post back and updating the form
b) updating things on the client side using JavaScript and some back end async calls.
Is there any other options and if not which of this is preferable?
Thanks
If you are using jquery, you can attach a function to the change of the file upload.
Consider the following example html:
<input id="myFile" type="file">
<p><label id="myLabel">No File</label></p>
And let's say we wanted to update the label with the name of the selected file. To do that, we'd use the following javascript:
$(document).ready(function () {
$("#myFile").change(function () {
$("#myLabel").html($(this).val());
});
});
Here's a fiddle in action: http://jsfiddle.net/ffkuL/1/
If you aren't using jquery, you can do something like this:
var upload = document.getElementById("myFile");
upload.onchange = function (e) {
var label = document.getElementById("myLabel");
label.innerHTML = this.value;
};
And here's a fiddle for that one: http://jsfiddle.net/8PYwK/
(Honestly, though, I find that it's far simpler in the long run to use jquery in the long run when dealing with ASP.NET controls.)
Obviously, the label changing in my samples are just examples. Following that pattern, though, you can make whatever changes you need to on the client side (rather than needing to post back).
Is it mandatory to write $(document).ready(function () {... }) every time ?
Can't we do it without this line?
The reason for placing your code inside this function is that it will get called once the DOM has loaded - meaning that all the elements are accessible. Calling jQuery selectors without this function means that the elements have not necessarily been loaded into the DOM and might not be accessible (and you'll see weird results or nothing at all from your code).
So in essense, yes, it is necessary.
$(document).ready makes sure your code runs when the document is ready (i.e. fully loaded). If you don't need to interact with the document, you don't need this. If you put your Javascript at the end of the document, you probably don't need it either. You should put your code into a function () { } though to namespace it either way.
$(document).ready means the code inside this box will be executed once the all document is ready (loaded). It is considered as safe programming but not mandatory.
For example you call a function in script tag do_something(); and this function is in a js file which is not loaded yet then you will get javascript error.
If you put function like this
$(document).ready(function () {
do_something();
});
you are making sure that when function get called all js files will be there to server.
If you don't use that line, and just include the javascript in your body, it will execute as soon as it's loaded. If it's trying to act on DOM elements that have not yet loaded, unpredictable results will occur.... better to be safe than sorry.
jQuery's ready() function is run after the page's content is loaded. This is relatively equivalent to using <body onload="function1();function2();">
If you want to call multiple functions when the page is done loading, you can do the following:
$(document).ready(function() {
function1();
function2();
});
In order to use javascript, you must call it somewhere. This can be in body "onload", jQuery's ready() function, or an event, like a mouse click event.
No you don't always have to do this. You only use it if you want to make sure whatever is inside the ready function loads before the page is displayed in the browser. If you do not care to load the script before page load, then you can just put the script at the end of the page before the closing body tag.
Also As a shortcut to $(document).ready(function () you can do $(function()
Scenario is : old site which has lots of JS code already written. If user want to change all the alert messages to new age jazzy Div based alert which are very common using JQuery, YUI, Prototype... etc.
There are mainly tree JS dialogs
1. alert
To changes this its simple we just have to write new function which will show the div popup and show the message, after that override the window.alert
function showDivAlert(strMessage){
//div popup logic and code
}
window.alert = showDivAlert;
2. prompt
This too look easy to write function to accept the string and show the text box for input value. Now as return action is based on the click of "OK" button life is easy here.
function shoDivPromp(strMessage){
//div pop up to show the text box and accept input from the user
}
window.prompt = shoDivPromp;
3. confirm
Now above two were easy to override and modify the default dialogs but there is complication with the confirm.
However default JS confirm dialog stops JS execution and when user click OK or Cancel execution is resumed by determining the return value (true/false). But if we user div popup the execution is not stopped which is problem. We can still implement the confirm but in that case we have to bind methods for OK and CANCEL case which will be attached to OK and CANCEL button. With this function signature will be like.
function newConfirm(msg, fun OkAction(), fun CancelAction)
Now this is problem that this cant help me change the confirm dialog across the site as we did with alert();
Question
I am not sure whether its possible or not to achieve but i think can be using some JS pattern. So let me know if its possible.
Now this is problem that this cant help me change the confirm dialog across the site as we did with alert();
That's correct. It's not possible to reproduce the synchronous nature of the alert/confirm/prompt functions in native JavaScript. There is the non-standard method showModalDialog which can do it using a separate pop-up document, but it's not supported by all browsers and it's generally considered highly undesirable.
So the plug-in-replacement strategy isn't going to work. You are going to have to change every place you called these methods in the rest of the script.
The usual pattern is to do it using inline anonymous functions, to preserve the local variables using a closure, eg. replace:
function buttonclick() {
var id= this.id;
if (confirm('Are you sure you want to frob '+id+'?'))
frob(id);
wipe(id);
}
with:
function buttonclick() {
var id= this.id;
myConfirm('Are you sure you want to frob '+id+'?', function(confirmed) {
if (confirmed)
frob(id);
wipe(id);
});
}
If you need this to be preserved you would need to look at a further nested closure or function.bind to do it. If you have your call to confirm in a loop things get considerably more difficult.
Obviously you also have to ensure that critical global state doesn't change whilst the confirm box is up. Usually this risk is minimised by greying out the rest of the page with an overlay to stop clicks getting through. However if you have timeouts they can still fire.
All 3 methods actually stop js execution, not just the confirm, because they're all modal dialogs. Personally, I would try to keep everything as asynchronous as possible as modal dialogs prevent interaction with the current document.
Your best bet is to use callback functions from the new confirm popup as you suggested yourself.
I'm having a hard time understanding exactly what you want to achieve. It sounds like you want to do something like the following:
Run some javascript code
Display a "confirm" box
Wait until the ok button or cancel button is clicked
Continue code when user clicks ok, return when user clicks cancel.
The reason you want to do this is that overriding the function with something that makes use of callbacks would require rewriting each section of code that uses the confirm function. If you want my advice, I would go ahead and rewrite the code so that it performs asynchronously. There's no way you can delay script execution without locking up the document which includes the OK and Cancel actions of your dialog.
if you changed the roles Alert / Prompt / Confirm. slows the execution pending user interaction to run the following code.
Overriding these functions, the code continues its execution.
To achieve this you have to modify each part of the code and work as if you were with asynchronous functions.
Then you can use any plugin for windows as sexy-alert-box, and overwrite Alert / Prompt / Confirm
The function signature would simply be:
function newConfirm(msg, okAction, cancelAction);
and would be used as:
function newConfirm(msg, okAction, cancelAction){
var ok = doWhateverPromptIsNecessary();
if (ok) {
okAction();
} else {
cancelAction();
}
}
That is, to pass function "pointers" in to a function as arguments, simply pass in the function name without the (). The function signature is the same.
I wonder why I can't get value from FCKEditor with this javascript? I work with asp.net so I know the controls get different names, mine is in a placeholder and in a usercontrol. How should I approach it to find the FCKEditor?
thx
function test()
{
var oEditor = FCKeditorAPI.GetInstance('FCKeditor1');
var pageValue = oEditor.GetHTML();
alert(pageValue);
}
This should work, but the problem is that using this approach you can not have this function in external JavaScript file. It has to be inline in your asp.net page.
function test()
{
var oEditor = FCKeditorAPI.GetInstance(<%= FCKeditor1.ClientID%>);
var pageValue = oEditor.GetHTML();
alert(pageValue);
}
FCKeditorAPI.GetInstance('<%=FCKeditor1.ClientID%>')
ASP.NET generates different IDs to the ones you use based on their position within the DOM. You should use the ClientID from within the client code to get at the actual ID, but without seeing the mark-up I can't tell for sure.
i tried this code an it work
FCKeditorAPI.GetInstance('ctl00_ContentPlaceHolder1_ctl00_FCKeditor1');
i tried
FCKeditorAPI.GetInstance('<%=FCKeditor1.ClientID%>')
thing that last wont work cause i got page - usercontrol - fckeditor
so the intellesence wont show the fckeditor. i would like to make it work with the last one
so i dont have to put the "ctl00_ContentPlaceHolder1_ctl00_FCKeditor1"