I'm new to JavaScript and I am stuck on exactly how to start in my text editor? I've tried googling but I'm getting mixed answers.
I'm trying to make four interactive buttons in a browser. I just don't know how to start? My file is open and the text editor is aware I am using JavaScript.
Now, do I need to start with a script tag? Then what should be the next steps? If anyone could provide me with a little guidance on how I should be thinking in my steps id greatly appreciate it.. Thank you very much
Start with the Hello World of using a Button HTML tag and script that handles a click event.
For example -- here is the Button defined in HTML.
<button type="submit" class="btn btn-primary btn-xl" id="HelloButton">Say Hello</button>
Now in a separate JS Script, you can handle the click event:
$(function() {
$("#HelloButton" ).click(function($e) {
alert("Say Hello");
} );// END of the button click event
} );
This uses JQUERY as well (in case you want to follow it).
Here is a very simple starting page - without using any libraries (like jQuery) or frameworks (like react or vue)
// define the button actions here:
document.querySelectorAll("button").forEach(btn=>btn.onclick=ev=>console.log(`Hey, you have clicked the ${btn.textContent} button!}`));
<button>one</button>
<button>two</button>
<button>three</button>
<button>four</button><br>
<textarea>edit your text here ...
</textarea>
In order for the script to work it needs to run after the page has loaded. In Stackoverflow snippets (see above) that is always the case. However, in your page you need to either put the <script> tag after your <body> element or put it into the callback function of the window.onload() event.
Related
I'm studying for a HTML, CSS, JS exam and found various resources to help me study. In doing a practice quiz, I found this question.
You are creating a page that contains detailed employee information for a company portal. The page uses a jQuery library. The page contains a hidden button named btnEdit that is defined by the following code.
<button id="btnEdit" style="display: none;">Edit</button>
The button is not displayed by default.
The button must be displayed only if the user is logged on.
You need to add code to the document.ready() function to meet the requirements for the button.
Which line of code should you use?
A. $ ('#btnEdit').appear();
B. $ ('#btnEdit').visible = true;
C. $ ('#btnEdit').show();
D. $ ('#btnEdit').Visible();
The quiz telling me that option A is correct.
I haven't use appear() method before.
My question is:
.appear(), Is this function really as a part of jQuery library?
I could not find .appear() function in jQuery doc. No results in jQuery API
Is that option A is correct? If it is correct can anyone tell me why?
As of my conscience option C is correct(If I'm wrong correct me).
Can anyone please tell me difference between appear() and show()?
And when to use appear(), when to use show()?
Show is a function to show a selected element.
e.g:
<i id='element' style='display:none;'></i>
to show hidden element
$('#element').show()
As Jquery says disappear/appear is a custom event you can fire once the element is shown. so it should look something like -
$('#element').appear(function() {
... code goes here
});
For jQuery reference
show - http://api.jquery.com/show/
appear/disappear - https://plugins.jquery.com/appear/
Edit - i think it's also safe to say that show is packed with options and a 'complete' callback which is fired once the element has finished shown.
I have my own custom non-jQuery ajax which I use for programming web applications. I recently ran into problems with IE9 using TinyMCE, so am trying to switch to CKeditor
The editable text is being wrapped in a div, like so:
<div id='content'>
<div id='editable' contenteditable='true'>
page of inline text filled with ajax when links throughout the site are clicked
</div>
</div>
When I try to getData on the editable content using the examples in the documentation, I get an error.
I do this:
CKEDITOR.instances.editable.getData();
And get this:
Uncaught TypeError: Cannot call method 'getData' of undefined
So I figure that it doesn't know where the editor is in the dom... I've tried working through all editors to get the editor name, but that doesn't work-- no name appears to be found.
I've tried this:
for(var i in CKEDITOR.instances) {
alert(CKEDITOR.instances[i].name);
}
The alert is just blank-- so there's no name associated with it apparently.
I should also mention, that despite my best efforts, I cannot seem to get the editable text to have a menu appear above it like it does in the Massive Inline Editing Example
Thanks for any assistance you can bring.
Jason Silver
UPDATE:
I'm showing off my lack of knowledge here, but I had never come across "contenteditable='true'" before, so thought that because I was able to type inline, therefore the editor was instantiated somehow... but now I'm wondering if the editor is even being applied to my div.
UPDATE 2:
When the page is loaded and the script is initially called, the div does not exist. The editable div is sent into the DOM using AJAX. #Zee left a comment below that made me wonder if there is some other command that should be called in order to apply the editor to that div, so I created a button in the page with the following onclick as a way to test this approach: (adapted from the ajax example)
var editor,html='';config = {};editor=CKEDITOR.appendTo('editable',config, html );
That gives the following error in Chrome:
> Uncaught TypeError: Cannot call method 'equals' of undefined
> + CKEDITOR.tools.extend.getEditor ckeditor.js:101
> b ckeditor.js:252
> CKEDITOR.appendTo ckeditor.js:257
> onclick www.pediatricjunction.com:410
Am I headed in the right direction? Is there another way to programmatically tell CKEditor to apply the editor to a div?
UPDATE 3:
Thanks to #Reinmar I had something new to try. The most obvious way for me to test to see if this was the solution was to put a button above the content editable div that called CKEDITOR.inlineAll() and inline('editable') respectively:
<input type='button' onclick=\"CKEDITOR.inlineAll();\" value='InlineAll'/>
<input type='button' onclick=\"CKEDITOR.inline('editable');\" value='Inline'/>
<input type='button' onclick=\"var editor = CKEDITOR.inline( document.getElementById( 'editable' ) );\" value='getElementById'/>
This returned the same type of error in Chrome for all three buttons, namely:
Uncaught TypeError: Cannot call method 'equals' of undefined ckeditor.js:101
+ CKEDITOR.tools.extend.getEditor ckeditor.js:101
CKEDITOR.inline ckeditor.js:249
CKEDITOR.inlineAll ckeditor.js:250
onclick
UPDATE 4:
Upon further fiddling, I've tracked down the problem being related to json2007.js, which is a script I use which works with Real Simple History (RSH.js). These scripts have the purpose of tracking ajax history, so as I move forward and back through the browser, the AJAX page views is not lost.
Here's the fiddle page: http://jsfiddle.net/jasonsilver/3CqPv/2/
When you want to initialize inline editor there are two ways:
If element which is editable (has contenteditable attribute) exists when page is loaded CKEditor will automatically initialize an instance for it. Its name will be taken from that element's id or it will be editor<number>. You can find editors initialized automatically on this sample.
If this element is created dynamically, then you need to initialize editor on your own.
E.g. after appending <div id="editor" contenteditable="true">X</div> to the document you should call:
CKEDITOR.inline( 'editor' )
or
CKEDITOR.inlineAll()
See docs and docs.
You can find editor initialized this way on this sample.
The appendTo method has different use. You can initialize themed (not inline) editor inside specified element. This method also accepts data of editor (as 3rd arg), when all other methods (CKEDITOR.inline, CKEDITOR.replace, CKEDITOR.inlineAll) take data from the element they are replacing/using.
Update
I checked that libraries you use together with CKEditor are poorly written and cause errors you mentioned. Remove json2007.js and rsh.js and CKEditor works fine.
OK, so I have tracked down the problem.
The library I was using for tracking Ajax history and remembering commands for the back button, called Real Simple History, was using a script called json2007 which was intrusive and extended native prototypes to the point where things broke.
RSH.js is kind of old, and I wasn't using it to it's full potential anyway, so my final solution was to rewrite the essential code I needed for that, namely, a listener that watched for anchor (hash) changes in the URL, then parsed those changes and resubmitted the ajax command.
var current_hash = window.location.hash;
function check_hash() {
if ( window.location.hash != current_hash ) {
current_hash = window.location.hash;
refreshAjax();
}
}
hashCheck = setInterval( "check_hash()", 50 );
'refreshAjax()' was an existing function anyway, so this is actually a more elegant solution than I was using with Real Simple History.
After stripping out the json2007.js script, everything else just worked, and CKEditor is beautiful.
Thanks so much for your help, #Reinmar... I appreciate your patience and effort.
My friend done this below coding for custom control
click
now i want to show confirm dialog box while click this anchor link.
Is it possible?. i want to write script as inline.
Do this :
click
But at some point, you'd want to stop using only inline code and have a look at other clearer ways to add javascript in your code.
You may use a script block like this in the HEAD of your HTML file :
<script>
function doOnClick(){
if (window.confirm('Really?')){
__doPostBack('id','msg');
};
}
</script>
And then your link becomes
click
Of course, this doesn't feel much simpler with only one function but it helps you put all your functions in the same place and make lighter and clearer html.
An alternative would be to use jQuery, so that you may totally avoid putting javascript in the html part.
The html is then
<a id=myLink>click</a>
And your script, now at the end of the body, is this one :
<script>
$(document).ready(function(){
$('#myLink').click(function(){
if (window.confirm('Really?')){
__doPostBack('id','msg');
};
});
// other codes will come here
});
</script>
You're not at all required to code it this way now, as you only have a very light function, but if your code grows I suggest you start considering it and look at the jquery tutorials.
Of course. Here is a small snippet, not elegant but it works...
click
I actually had to look this up because I haven't used confirm, alert and prompt in a very long time.
confirm returns true/false depening on what the user selected (OK/Cancel, respectively).
So your resulting code would be
click
i have some trouble to connect an link inside an dijit.dialog.
Iam calling an "other" html file inside the Dialog (dialog.href="xxx.html") inside this file iam trying to connect some links by id, to fire an alert box. But nothing happens ? Possible that this isnt possible ??
Thats the part from my xxx.html file..
<script type="text/javascript">
dojo.addOnLoad(function( ) {
dojo.connect(dojo.byId('testLink'), 'onClick', alert('xx'));
}); </script>
TEST
Dialog is extended from ContentPane so it supports all the same parameters (href, etc.). With that said, when a page is included via the href property any <script> tags are not evaluated they are just added to the DOM. This leaves you with two choices:
refactor xxx.html, so the script can be run by the dialog's onLoad handler
embed the event handlers into the html tags; i.e. <input type="button" onClick="alert('xx');" />
Another option would be to use dojox.layout.ContentPane. It'll parse <script> tags. It's in dojox though so it's liable to change in future version. And another downside is that this would require creating your own Dialog class that's a subclass of dojox.layout.ContentPane.
There's also an article on dojocampus about executing javascript in content panes which talks a little bit about using dojox.layout.ContentPane to roll your own Dialog widgets.
I am busy writing a simple Adobe Air app using HTML, jQuery and some jQuery plugin to load RSS feeds.
The problem I am having is that I am generating a section of HTML components (buttons) so that I can execute specific code on button click. But when the page is displayed the button never executes; I have tried using the built-in log function as well as alert, but none of them execute. The weird part is when I copy the HTML component into a part of the page that is not generated it executes fine.
I insert the following into a div using jQuery and it does not execute.
'<input type="button" onclick="LoadPage()" value="Test" />'
If I just insert it into the HTML it works fine.
I am using version 1.3.2 of jQuery; I am also using this plugin to load the data into a div, and I have modified line 82 to include the html component above.
I should note that when I inspect the page using AIR's introspector the HTML is valid.
What could be going wrong?
I don't see the problem. The following works fine for me:
$(document).ready(function() {
$('#mainDiv').html('<input type="button" onclick="LoadPage()" value="Test" />');
});
function LoadPage()
{
alert("Hello");
}
If you want to use jquery to handle the click you can use the live event.
I also had that problem some time ago, and this solved the problem.
If you give your button an id would look something like this:
$("#YourButtonId").live("click", function (){....
Got the same problem with 'onClick' instead of 'onclick' ?
Also check if the function isn't called 'Loadpage' instead of 'LoadPage'.
I sometimes have case sensitive problems in javascript, not sure if it are functions that are case sensitive.