I am trying to get AutoComplete to work on a website application I am making. I have stripped my code down to the bare essentials and I still cannot get it to work. I got the source file from http://www.phpguru.org/static/AutoComplete.html and I have done my best to implement it exactly how they did on their website demo. My test code is below:
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>test</title>
</head>
<body>
<script language="javascript" type="text/javascript" src="/Management/AutoComplete.js"></script>
<div id="content">
<script type="text/javascript">
if (location.href.indexOf('/JavaScripts/AutoComplete') != -1) {
window.onload = function(){
data = ['Joes Plumbing1','Joes Plumbing2','Joes Plumbing3','Joes Plumbing4'].sort();
AutoComplete_Create('customers', data);
}
}
</script>
<form id="form" action="" method="post">
<table border="0">
<tr>
<td>Customer Search</td>
</tr>
<tr>
<td><input type="text" id="customers"/></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Here is a bit more back ground info that may help you help me:
My server works fine with other .js files.
I copied and pasted the AutoComplete.js (NOT AutoComplete.old.js) file I downloaded from the site mentioned above, and didn't touch it at all.
Why isn't this working?
#Goran answered my question correctly in his comment to my question so props to him. The problem was my if statement:
if (location.href.indexOf('/JavaScripts/AutoComplete') != -1)
Once I made the string /JavaScripts/AutoComplete match what was in my address bar everything worked fine!
Related
Hello I want to autofill data in iframe on cross domain.I have a code but it's not working. please help me.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function autoFill() {
var f=fm.document.forms[0];
f.form-control.value='Zanne';
f.submit();
}
</script>
</head>
<body>
<div>
<button type="button" onclick="autoFill();">autoFill</button>
</div>
<iframe name="fm" id="fm" src="url.com" width="100%" height="100%"></iframe>
</body>
</html>
the input filled:
Have any way to do this.
This is going to be a CORS violation.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
There are some workarounds to this. You have to use the postMessage API. Your parent window would need to send JavaScript events to the iFrame, which would need to have an event listener and react to it.
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
Spent hours on this and don't understand that behavior. Any advice would be appreciated.
If you look below you load this code you will see the toolbar for sharing with add to any plugin that is what the page.js is including control for.
You can see I have commented out a foo bar at the bottom. That works just fine after load. I hit the button and the foo turns into a bar. When I load the entire div though I am trying to change the text ultimately by what I put in the insert form. An odd thing happens the entire add to any button dissapears. Any idea why? Is the page reloading and cannot grab the .js file or something bizarre like that?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="//static.addtoany.com/menu/page.js"></script>
<script>
function second(){
//document.getElementById('hello').innerHTML = 'bar';
document.getElementById('hello').innerHTML = '<div class=\"a2a_kit a2a_kit_size_32 a2a_default_style\"> <a class=\"a2a_dd\" href=\"https://www.addtoany.com/share\"></a></div>';
};
</script>
</head>
<body>
<form>
<input type="text" name="foo" id="foo"></input>
<input type="button" onClick="second();first();"></input>
</form>
<div id="hello"></div>
</body>
<script type="text/javascript">
document.getElementById('hello').innerHTML = '<div class=\"a2a_kit a2a_kit_size_32 a2a_default_style\"><a class=\"a2a_dd\" href=\"https://www.addtoany.com/share\"></a></div>';
//document.getElementById('hello').innerHTML = 'foo';
</script>
</html>
I'm trying to make a text input field where visitors can enter a value and then hit go or submit.
Based on the digit number they would be send to a new page.
For example if they enter 123 and hit submit it would send them to http://www.example.com/page/123
Could anybody please help me get this up and running?
Thank you
Here we go have fun. just copy the code and save it as html. you don't need php or such. it is way too simple to need a server side code.
<!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>Untitled Page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function(e) {
var inputvalue = $("#input").val();
window.location.replace(" http://www.example.com/page/"+inputvalue);
});
});
</script>
</head>
<body>
<input type="text" value="11" id="input">
<button type="button" id="button">Click Me!</button>
</body>
</html>
In the script below (live example is located at http://jsbin.com/aliket/1/ with source code located at http://jsbin.com/aliket/1/edit), I created two dialogs, where one (#dialog2) is a child within the other (#dialog1). If I create #dialog2 before #dialog1, open #dialog1 and then open #dialog2, the TinyMCE plugin no longer works. By not working, I mean TinyMCE's text box is shaded out and any previously entered HTML is gone. Is this a problem with the order of the two dialogs, or TinyMCE? Why is it happening? I do know how to fix it,however: just create #dialog1 before #dialog2. Thanks
<!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=ISO-8859-1" />
<title>Testing</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
</head>
<body>
<button id="click1">Click 1</button>
<div id="dialog1" title="dialog1"><div id="tinymce"></div><button id="click2">Click 2</button></div>
<div id="dialog2" title="dialog2">Hello</div>
</body>
<script>
tinymce.init({selector: "#tinymce"});
$(function() {
$('#click2').click(function(){$("#dialog2").dialog("open");});
$("#dialog2").dialog({autoOpen:false,resizable:false,height:300,width:240,modal:true});
$("#click1").click(function(){$("#dialog1").dialog("open");});
$("#dialog1").dialog({autoOpen: false,modal: true});
});
</script>
</html>
I think the problem here is that you did not shut down your editor instance before you opened another one with the same id. Use the mceCommand mceRemoveControl to shut such an editor instance down.
I'm designing a web application where a large portion of the site will be displaying user-generated documents. Now, I've already implemented LaTeX source code and pdf rendering on the website, but I am still can't render Microsoft Word files (.doc and .docx) on the site. I've looked around and found a similar question (here), but it was never answered. I'm wondering whether or not using a web-based solution like Google Docs or doing it programatically on the server with OpenOffice are viable solutions. A pure JavaScript solution would be ideal though.
Based on Vikram's answer, you could use Google Docs Viewer in order to render the files. This way it should work on all browsers.
Instead of
Doc 1
use
Doc 1
But you have to urlencode the URL. For example,
http://research.google.com/archive/bigtable-osdi06.pdf
becomes
http%3A%2F%2Fresearch.google.com%2Farchive%2Fbigtable-osdi06.pdf
You can go to https://docs.google.com/viewer in order to generate the links easily.
Moreover, Vikram's code is old and ugly. You should use something like:
<!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" />
<title>Open Doc</title>
<style type="text/css">
/*<![CDATA[*/
.clear{clear:both;}
#list{float:left;margin-right:50px;}
#wrapper{overflow:hidden;}
#awindow{width:100%;height:440px;}
/*]]>*/
</style>
</head>
<body>
<ul id="list">
<li>Doc 1</li>
<li>Doc 2</li>
<li>Doc 3</li>
</ul>
<div id="wrapper">
<iframe id="awindow" name="awindow" src="title.html"></iframe>
</div>
<div class="clear"></div>
</body>
</html>
Have you tried something like this already?:
<html>
<head>
<title>Open Doc</title>
</head>
<body>
<DIV align="CENTER">
<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="1" WIDTH="100%">
<TR>
<TD WIDTH="25%" ALIGN="left" VALIGN="TOP">
Doc 1<br>
Doc 2<br>
Doc 3
</TD>
<TD WIDTH="75%" ALIGN="CENTER" VALIGN="TOP">
<iframe name="awindow" frameborder=2 width=580 height=440 src="title.html"></iframe>
</TD></TR></TABLE></CENTER>
</DIV>
</body>
</html>
modify the href attributes to path on your server where you will place these documents