Have been trying to add a custom button for about 2 hours and I just can't get it to work. I don't know much about javascript maybe that's why. I did manage to get the button to show up and open a popup, but that's as far as I got.
I want the button to insert t he following into the HTML section of tinymce:
'
Here is my dialog.js file:
tinyMCEPopup.requireLangPack();
var InsertQuoteDialog = {
init: function () {
var s = tinyMCEPopup.editor.selection.getContent({ format: 'text' });
if (s.trim().length > 0) {
document.forms[0].blizzQuote.value = s.trim();
}
},
insert: function () {
var s1 = '<p class="blizzardQuote" ';
s1 += Encoder.htmlEncode(document.forms[0].blizzQuote.value.trim()) + '</p>';
tinyMCEPopup.editor.execCommand('mceInsertContent', false, s1);
tinyMCEPopup.close();
}
};
String.prototype.trim = function () {
return this.replace(/^\s*/, "").replace(/\s*$/, "");
}
tinyMCEPopup.onInit.add(InsertQuoteDialog.init, InsertQuoteDialog);
And my Dialog.htm file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{#example_dlg.title}</title>
<script type="text/javascript" src="../../tiny_mce_popup.js"></script>
<script type="text/javascript" src="js/dialog.js"></script>
</head>
<body>
<form onsubmit="InsertQuoteDialog.insert();return false;" action="#">
<p>Blizzard Quote</p>
<p>Blizzard Quote: <input id="blizzQuote" name="blizzQuote" type="text" class="text" /></p>
<div class="mceActionPanel">
<div style="float: left">
<input type="button" id="insert" name="insert" value="{#insert}" onclick="InsertQuoteDialog.insert();" />
</div>
<div style="float: right">
<input type="button" id="cancel" name="cancel" value="{#cancel}" onclick="tinyMCEPopup.close();" />
</div>
</div>
</form>
</body>
</html>
Basically when I click on insert nothing happens.
Thanks.
A quick look at the javaScript console should show you that you are getting a JavaScript error on the dialog with the Encoder object not being known.
Simply include the JS file that defines Encoder on your dialog and it should all be good.
Related
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var i = 1;
window.onunload = function() {
debugger;
}
function Para() {
i = i + 1;
var Source = document.getElementById('P').src;
document.getElementById('P').src = Source.replace(i - 1, i);
}
</script>
</head>
<body>
<div><img alt="image" id="P" src="Images/Para/P-1.jpg"></div>
<div><img id="Q" src="Images/Q/P-1-Q-1.jpg" </div>
<div><img id="A" src="Images/A/P-1-Q-1-A-1.png"></div> <input id="Button1" type="button" value="Next Parigraph" onclick="Para()" /> <input id="Button2" type="button" value="Next Question" /> <input id="Button3" type="button" value="Next Answer" /> </body>
</html>
actually I want a create html page which can load images. But this code returns load failed p-3.jpg. i could not understand why this is happening.First it loads P-1.jpg after p-2.jpg and after clicking Second time it not load and gives load Failed.Please Help
If i understand correctly then i think the problem is here with you replace() function , js replace() function replace the first parameter with its second parameter . so when you are taking the src of img object by
var Source = document.getElementById('P').src;
it is taking the whole src of the object , according to this here you have image path also correct ?
which is Images/Para/P-1.jpg , so when you are replacing the src by using replace function , in the next it retain only the value of i = i + 1; ,
i think you can try something like this
Source.replace("Images/Para/P-"+i - 1+".jpg", "Images/Para/P-"+i+".jpg");
to suggest you about something i can say please follow the convection of variable declaration , here you used var Source there is reserved keyword Source in JavaScript. it may conflict with the reserved keyword ,
please let me know you get it done correctly . if not then feel free to ask me again
This works by me.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var i = 1;
window.onunload = function() {
debugger;
}
function Para() {
var previous = i;
var previousP = "P-" + previous.toString();
i = i + 1;
var Source = document.getElementById('P').src;
var newP = "P-" + i.toString();
var res = Source.replace(previousP, newP);
document.getElementById('P').src = res;
}
</script>
</head>
<body>
<div><img alt="image" id="P" src="/Images/Para/P-1.jpg"></div>
<div><img id="Q" src="/Images/Q/P-1-Q-1.jpg" </div>
<div><img id="A" src="/Images/A/P-1-Q-1-A-1.png"></div> <input id="Button1" type="button" value="Next Parigraph" onclick="Para()" /> <input id="Button2" type="button" value="Next Question" /> <input id="Button3" type="button" value="Next Answer" /> </body>
</html>
function MyConfirm(message, callback) {
console.log("In My Confirm");
var ids = document.getElementById("mymodal");
$('#MyText').html(message);
ids.style.display = "block"
$('input[id^=cfrm_]').click(function (e) {
e.preventDefault();
console.log("In Click Event");
if (typeof callback === 'function') {
callback($(this).attr('value'));
}
ids.style.display = "none"
});
}
var as="My Test Message";
function mytest(){
var na = MyConfirm(as, function (result) {
console.log("Result: "+result)
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" onclick="mytest()" value="button" /></div>
<div id="mymodal" style="display:none">
<div id="MyText"></div>
<input id="cfrm_btnYes" type="button" value="Yes" />
<input id="cfrm_btnNo" type="button" value="No" />
</div>
</form>
</body>
</html>
I am using the above code to mimic the default confirm dialog window action. The function is working fine. But upon clicking the the button mytest() is called and it makes the div #mymodal visible with two buttons as expected. But when you click the Yes or No button it makes the div hidden but it loops through the MyConfirm function multiple times. It can be seen in console. Can any one please explain me why I am getting this weird response. My aim is to create an alternate for confirm() fn. with a return value.
The problem is that you bind a new click event to confirm buttons each time MyConfirm() function executes. click event binding doesn't override old bindings but adds a new function to that event.
You can add $('input[id^=cfrm_]').off('click'); to delete old bindings before binding new one.
function MyConfirm(message, callback) {
console.log("In My Confirm");
var ids = document.getElementById("mymodal");
$('#MyText').html(message);
ids.style.display = "block"
$('input[id^=cfrm_]').off('click');
$('input[id^=cfrm_]').click(function (e) {
e.preventDefault();
console.log("In Click Event");
if (typeof callback === 'function') {
callback($(this).attr('value'));
}
ids.style.display = "none"
});
}
var as="My Test Message";
function mytest(){
var na = MyConfirm(as, function (result) {
console.log("Result: "+result)
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" onclick="mytest()" value="button" /></div>
<div id="mymodal" style="display:none">
<div id="MyText"></div>
<input id="cfrm_btnYes" type="button" value="Yes" />
<input id="cfrm_btnNo" type="button" value="No" />
</div>
</form>
</body>
</html>
Please try with return. Maybe it will be ready.
I am trying to display the content just like in facebook.but i dint get it.i used iframe.can some one help me with this without using iframe.i want it to get independently ..like if user1 post it must be seperated from user2 ..but i didnt get it using iframe ii just got a linebreak ..
i here by attaching two images for idea sake facebook layout
this is my outcome.it would be helpful if u solve ...Thanks in Advance..atleast the working ui would be helpful
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<div id = "midle">
<div id="posts" >
<h1>WHAT'S UP?</h1>
<tr> <form method="POST" action="tryy.php" target="iframe_a" >
<textarea name="post" rows="5" cols=110" target="iframe_a" ></textarea>
<td><input id="button" type="submit" name="submit" value="POST" ></td>
</form>
<iframe width="100%" height="590" src="tryy.php" name="iframe_a"></iframe>
</div>
</div>
</html>
You can use ajax.
(replace the iframe with a div that for this example has the id "status")
<div id="status"></div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$.get(
'tryy.php',
function(response){
$("#status").html(response);
}
);
</script>
Inserted into your example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
#status {
background:#555;
width: 100%;
height: 590px;
}
</style>
</head>
<body>
<div id="midle">
<div id="posts">
<h1>WHAT'S UP?</h1>
<tr>
<form method="POST" action="tryy.php" target="iframe_a">
<textarea name="post" id="statusBox" rows="5" cols=110 target="iframe_a " ></textarea>
<td><input id="button" type="submit" name="submit " value="POST " ></td>
</form>
<div id="status"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js "></script>
<script>
function updateStatusList(){
$.get(
'tryy.php',
function(response){
$("#status").html(response);
}
);
}
$("#button").click(function(e) {
e.preventDefault();
updateStatusList();
return false;
});
$("#statusBox").keydown(function(e) {
if(e.keyCode == 13){ // when return was pressed
updateStatusList();
}
});
</script>
</body>
</html>
PS:
Since you are new some hints:
You should use <!DOCTYPE html> instead.
Use a closing </body> tag ;)
Don't use td, tr elements without a table element (and you shouldn't actually use tables at all for layouting)
Function: Enter a phone number (ex: 555-555-5555) into a text field. The text field prints the number out flat (hidden by CSS). Then Javascript picks up that number by ID and splits it apart by the hyphens and injects the array split up into a FoneFinder URL search string to display the results from that site in a pop-up window.
Problem: The pop-up is working fine, however when I click on the link to spawn the link it opens in the main page as well as the pop-up. The main page should not change.
The pop-up code works fine on other pages and doesnt overwrite the main page. It has to be how the javascript is injecting the html link into the page that is messing it up, but I cant figure out why.
Any help or insights would be appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
#target_num_result {
display: none;
}
#target_num_search {
font-size: small;
}
</style>
<!-- NewWindow POP UP CODE -->
<script LANGUAGE="JavaScript">
function NewWindow(mypage, myname, w, h, scroll) {
var winl = (screen.width - w) / 2;
var wint = (screen.height - h) / 2;
winprops = 'height='+h+',width='+w+',top='+wint+',left='+winl+',scrollbars='+scroll+',resizable'
win = window.open(mypage, myname, winprops)
if (parseInt(navigator.appVersion) >= 4) { win.window.focus(); }
}
</script>
<!-- Script to read the target phone number and split it by hyphens and show a Search link to Fonefinder.net -->
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#target_num').on('keyup', function() {
var my_value = $(this).val();
$('#target_num_result').html(my_value);
var arr = my_value.split('-');
$("#target_num_search").html(" <a href=http://www.fonefinder.net/findome.php?npa=" + arr[0] + "&nxx=" + arr[1] + "&thoublock=" + arr[2] + "&usaquerytype=Search+by+Number&cityname= title=FoneFinder onclick=NewWindow(this.href,'FoneFinderLookup','740','680','yes');>!BETA!FoneFinder Search!BETA!</a>");
});
});//]]>
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table cellpadding="2" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 180px">Phone #:</td>
<td><label> <input class="text" type="text" name="target_num" id="target_num" /></label><span id="target_num_result"></span><span id="target_num_search"></span></td>
</tr>
</table>
<label>
<input class="button" type="submit" name="submit" id="submit" value="Create" />
</label>
</form>
</body>
</html>
what you need to add is the following:
$('#target_num_search').on('click', 'a', function (event) {
event.preventDefault();
var url = $(this).attr('href');
NewWindow(url,'FoneFinderLookup','740','680','yes');
})
This way you can remove the onclick attribute and move the function call to js. See the working jsfiddle
you should return false for prevents default action to go link 'href' when onlick event.
(please notes , - comma operator to whatever Function returns... It's just hack. don't use.)
BTW,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
#target_num_result {
display: none;
}
#target_num_search {
font-size: small;
}
</style>
<!-- NewWindow POP UP CODE -->
<script LANGUAGE="JavaScript">
function NewWindow(mypage, myname, w, h, scroll) {
var winl = (screen.width - w) / 2;
var wint = (screen.height - h) / 2;
winprops = 'height='+h+',width='+w+',top='+wint+',left='+winl+',scrollbars='+scroll+',resizable'
win = window.open(mypage, myname, winprops)
if (parseInt(navigator.appVersion) >= 4) { win.window.focus(); }
}
</script>
<!-- Script to read the target phone number and split it by hyphens and show a Search link to Fonefinder.net -->
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#target_num').on('keyup', function() {
var my_value = $(this).val();
$('#target_num_result').html(my_value);
var arr = my_value.split('-');
var html_tpl = " <a href=http://www.fonefinder.net/findome.php?npa=" + arr[0] + "&nxx=" + arr[1] + "&thoublock=" + arr[2] + "&usaquerytype=Search+by+Number&cityname= title=FoneFinder onclick=\"return NewWindow(this.href,'FoneFinderLookup','740','680','yes'), false\" target='_blank'>!BETA!FoneFinder Search!BETA!</a>";
$("#target_num_search").html(html_tpl);
});
});//]]>
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table cellpadding="2" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 180px">Phone #:</td>
<td><label> <input class="text" type="text" name="target_num" id="target_num" /></label><span id="target_num_result"></span><span id="target_num_search"></span></td>
</tr>
</table>
<label>
<input class="button" type="submit" name="submit" id="submit" value="Create" />
</label>
</form>
</body>
</html>
I must not understand how to change the content of my <div> tag.
Here is my html file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="simple.js"></script>
<title>simple</title>
</head>
<body>
<div id="results" name="results"><!-- Results are displayed here -->
<form method="post" name="start">
<p>Enter url: <input type="text" name="myurl" size="100" /></p>
<button onclick="myFunction()">Click me</button>
</form>
</div>
</body>
</html>
Here is my .js file:
function myFunction() {
alert('hey');
document.getElementById("results").innerHTML = "Hello World";
}
When I click the button the alert pops up but the html does not change to "Hello World". It just stays the same :(
What am I doing wrong here.
Update: Thanks everyone! Here is what I have working now:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>simple</title>
</head>
<body>
<div id="results"><!-- Results are displayed here -->
<form method="post" name="start" target="_blank">
<p>Enter url: <input type="text" id="myurl" size="100" /></p>
</form>
<button id='clickme'>Click me</button>
<button id='noclickme'>No Click me</button>
</div>
<script src="simple.js"></script>
</body>
</html>
My .js file:
function say_something(s) {
document.getElementById("results").innerHTML = s;
}
document.getElementById("clickme").addEventListener("click", function(){
var url = document.getElementById('myurl').value;
if (url==null || url=="") { alert("Please supply a url"); return false; }
say_something( "Hello World [" + url + "]");
});
document.getElementById("noclickme").addEventListener("click", function(){
var url = document.getElementById('myurl').value;
if (url==null || url=="") { alert("Please supply a url"); return false; }
say_something( "Goodbye [" + url + "]");
});
A button's default behaviour is to submit the form. In this case, the action being blank, it will try to submit to the current URL. You need to prevent that from happening. Also it's bad form to put Javascript inside your HTML like that - use addEventListener instead:
document.querySelector("#results button").addEventListener("click", function(e) {
e.preventDefault();
alert('hey');
document.getElementById("results").innerHTML = "Hello World";
});
Note you'll need to include your script before the </body> rather than in <head> when using this method, or use the DOMContentLoaded event listener.
Example jsFiddle
The reason is the form label.
when you click the button, the form will take an action,but you did not have a certified action, so the chrome will take the defautl action,ie reload the html.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>simple</title>
<script src="simple.js"></script>
</head>
<body>
<div id="results" name="results"><!-- Results are displayed here -->
<form method="post" name="start" target="_blank">
<p>Enter url: <input type="text" name="myurl" size="100" /></p>
<button onclick="myFunction()">Click me</button>
</form>
</div>
</body>
</html>