To reduce load blocking I decided to convert the following google custom adsense search code...
<form action="http://www.google.ru" id="cse-search-box" class="form-search">
<div>
<input type="hidden" name="cx" value="partner-pub-7920375793574512:1188291711" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="55" />
<input type="submit" name="sa" value="Найти" class="btn btn-info" />
</div>
</form>
<script type="text/javascript" async src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("elements", "1", {packages: "transliteration"});</script>
<script type="text/javascript" async src="http://www.google.com/cse/t13n?form=cse-search-box&t13n_langs=en"></script>
<script type="text/javascript" async src="http://www.google.ru/coop/cse/brand?form=cse-search-box&lang=ru"></script>
... to (I just removed scripts to require js load style)
<form action="http://www.google.ru" id="cse-search-box" class="form-search">
<div>
<input type="hidden" name="cx" value="partner-pub-7920375793574512:1188291711" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="55" />
<input type="submit" name="sa" value="Найти" class="btn btn-info" />
</div>
</form>
... and require js module:
var scripts;
scripts = ['http://www.google.com/jsapi', 'http://www.google.com/cse/t13n?form=cse-search-box&t13n_langs=en', 'http://www.google.ru/coop/cse/brand?form=cse-search-box&lang=ru'];
define(scripts, function() {
return google.load("elements", "1", {
packages: "transliteration"
});
});
And got unpredicted result:
when page is loading first it is ok, but then I see white screen without any html element and no errors in google chrome console.
So loading google scripts in require js module breaks all html. Why it is so?
I added window. in line
return google.load("elements", "1", {packages: "transliteration"});
so got line:
return window.google.load("elements", "1", {packages: "transliteration"});
And all works fine.
Full code of require.js module:
var scripts;
scripts = ['http://www.google.com/jsapi', 'http://www.google.com/cse/t13n?form=cse-search-box&t13n_langs=en', 'http://www.google.ru/coop/cse/brand?form=cse-search-box&lang=ru'];
define(scripts, function() {
return window.google.load("elements", "1", {
packages: "transliteration"
});
});
Related
Even though it is mostly from the netlify site, I can't seem to figure out why the file upload doesn't work. What I get on the other end is all the fields, but the file upload comes back blank with no error in the console. Looked at videos and online instructions and don't see what the difference is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Contact</title>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<!-- A little help for the Netlify post-processing bots -->
<form name="contact" netlify hidden>
<input type="text" name="name" />
<input type="text" name="CompanyName" />
<input type="text" name="Address" />
<input type="text" name="PrimaryContact" />
<input type="text" name="SecondaryContact" />
<input type="email" name="email" />
<textarea name="message"></textarea>
<input type="file" name="myFile"/>
</form>
<div id="root"></div>
<script type="text/babel">
const encode = (data) => {
return Object.keys(data)
.map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
.join("&");
}
class ContactForm extends React.Component {
constructor(props) {
super(props);
this.state = { name: "",CompanyName:"",Address:"",PrimaryContact:"", SecondaryContact:"", email: "", message: "" , myFile:""};
}
/* Here’s the juicy bit for posting the form submission */
handleSubmit = e => {
fetch("/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: encode({ "form-name": "contact", ...this.state })
})
.then(() => alert("Success!"))
.catch(error => alert(error));
e.preventDefault();
};
handleChange = e => this.setState({ [e.target.name]: e.target.value });
render() {
const { name,CompanyName, Address, PrimaryContact,SecondaryContact,email, message,myFile } = this.state;
return (
<form onSubmit={this.handleSubmit} data-netlify-recaptcha="true" data-netlify="true">
<p>
<label>
Your Name: <input type="text" name="name" value={name} onChange={this.handleChange} required/>
</label>
</p>
<p>
<label>
Company Name: <input type="text" name="CompanyName" value={CompanyName} onChange={this.handleChange} />
</label>
</p>
<p>
<label>
Address: <input type="text" name="Address" value={Address} onChange={this.handleChange} />
</label>
</p>
<p>
<label>
Primary Contact: <input type="text" name="PrimaryContact" value={PrimaryContact} onChange={this.handleChange} />
</label>
</p>
<p>
<label>
Secondary Contact: <input type="text" name="SecondaryContact" value={SecondaryContact} onChange={this.handleChange} />
</label>
</p>
<p>
<label>
Your Email: <input type="email" name="email" value={email} onChange={this.handleChange} />
</label>
</p>
<p>
<label>
Ticket Discription: <textarea name="message" value={message} onChange={this.handleChange} />
</label>
</p>
<p>
<input type="file" name="myFile" placeholder="Upload File" />
</p>
<p>
<button type="submit">Send</button>
</p>
</form>
);
}
}
ReactDOM.render(<ContactForm />, document.getElementById("root"));
</script>
</body>
</html>
I had a similar issue and was able to solve it using this checklist from the Netlify community:
6. Make sure that you POST your form request (not GET) with a Content-Type of application/x-www-form-urlencoded in most cases. However, if and only if you are submitting the form with a file upload then the Content-Type needs to be multipart/form-data instead.
from: [Common Issue] Form problems, form debugging, 404 when submitting
Moving to a different Content-Type solved a similar issue for me. Then again I'm not using fancy Javascript/Ajax form submission so all it took was to add an enctype="multipart/form-data" attribute to my form tag. In your case it will require reworking your encode function.
I also had a similar issue.
Removing the headers option from the fetch() function did it for me.
Ex:
fetch("/", {
method: "POST",
// headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: encode({ "form-name": "contact", ...this.state })
})
I'm trying example from this site. It works fine. But if i separate views,models,routers into separate file it gives me a problem. There is 3 views. WineList view, WineListItemView and winedetails view. WineList view takes collection of wine models as model and winelistItem and winedetails view takes wine as a model.
Router's code is like this
var app = app || {};
app.AppRouter = Backbone.Router.extend({
routes:{
"":"list",
"wines/:id":"wineDetails"
},
initialize:function () {
$('#header').html(new app.HeaderView().render().el);
},
list:function () {
this.wineList = new app.WineCollection();
this.wineListView = new app.WineListView({model:this.wineList});
this.wineList.fetch();
$('#sidebar').html(this.wineListView.render().el);
},
wineDetails:function (id) {
if(this.wineList == undefined)
{
this.wineList = new app.WineCollection();
this.wineListView = new app.WineListView({model:this.wineList});
this.wineList.fetch();
$('#sidebar').html(this.wineListView.render().el);
}
this.wine = this.wineList.get(id);
if (app.router.wineView) app.router.wineView.close();
this.wineView = new app.WineView({model:this.wine});
$('#content').html(this.wineView.render().el);
}
});
On page load it fetches models from server and displays list of wines in sidebar div of page. When i click on particular wine item its details will be displayed in content div of page. That all works fine. But when i reload that page which now contains details of particular,wine model of Winedetails view gives undefined .
I'm intializing the router on main page like this
app.js
var app = app || {};
$(function() {
})
app.router = new app.AppRouter();
Backbone.history.start();
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Backbone Cellar</title>
<link rel="stylesheet" href="../css/styles.css" />
</head>
<body>
<div id="header"><span class="title">Backbone Cellar</span></div>
<div id="sidebar"></div>
<div id="content">
<h2>Welcome to Backbone Cellar</h2>
<p>
This is a sample application part of of three-part tutorial showing how to build a CRUD application with Backbone.js.
</p>
</div>
<div>
Next page
</div>
<!-- Templates -->
<script type="text/template" id="tpl-header">
<span class="title">Backbone Cellar</span>
<button class="new">New Wine</button>
</script>
<script type="text/template" id="tpl-wine-list-item">
<a href='#wines/<%= id %>'><%= name %></a>
</script>
<script type="text/template" id="tpl-wine-details">
<div class="form-left-col">
<label>Id:</label>
<input type="text" id="wineId" name="id" value="<%= id %>" disabled />
<label>Name:</label>
<input type="text" id="name" name="name" value="<%= name %>" required/>
<label>Grapes:</label>
<input type="text" id="grapes" name="grapes" value="<%= grapes %>"/>
<label>Country:</label>
<input type="text" id="country" name="country" value="<%= country %>"/>
<label>Region:</label>
<input type="text" id="region" name="region" value="<%= region %>"/>
<label>Year:</label>
<input type="text" id="year" name="year" value="<%= year %>"/>
<button class="save">Save</button>
<button class="delete">Delete</button>
</div>
<div class="form-right-col">
<img height="300" src="../pics/<%= picture %>"/>
<label>Notes:</label>
<textarea id="description" name="description"><%= description %></textarea>
</div>
</script>
<!-- JavaScript -->
<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/underscore.js"></script>
<script src="js/lib/backbone.js"></script>
<script src="js/models/WineModel.js"></script>
<script src="js/collections/WineListCollection.js"></script>
<script src="js/Views/WineListView.js"></script>
<script src="js/Views/WineListItemView.js"></script>
<script src="js/Views/WineDetailsView.js"></script>
<script src="js/Views/HeaderView.js"></script>
<script src="js/routers/routers.js"></script>
<script src="js/app.js"></script>
</body>
</html>
I'm new to this backbone technology. please tell me what am i missing
this.wineList.fetch();
fires an asynchronous request to your server, which means that the content will arrive (or not) at some point after executing this line, but your application execution continues whether the response arrived or not. On page reload (assume you have wines/:id in the URL) first you have to fetch the complete list of wines before accessing any particular wine from the collection.
You have to wait until is download the collection, and access the wine with id, after this request is finished.
So after initiating the request continue your application logic in the success callback:
this.wineList.fetch({
success: function(model) {
...
this.wine = model.get(id);
...
}
});
Please consider the following (Issue is, the results of the Google Search on our page is not registering within our Google Analytics Account):
HTML FORM:
<div style="float:right; margin-right:12px;">
<form id="cse-search-box" name="srchfrm" action="http://google.com/cse" target="_blank" onsubmit="validatesearch()">
<input value="999999999999999999999:srraaaaaaaa" name="cx" type="hidden"/>
<input id="q" name="q" type="text" onKeyPress="return submitenter(this,event)" placeholder="Search"/>
<a href="javascript:;" onmouseover="MM_swapImage('go','','/btn_go_on.gif',1)" onmouseout="MM_swapImgRestore()" />
<input type="image" src="/btn_go.gif" alt="Go" width="20" height="21" border="0" align="top" id="go"/>
<input value="UTF-8" name="ie" type="hidden"/>
</form>
</div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('search', '1');
google.setOnLoadCallback(function() {
google.search.CustomSearchControl.attachAutoCompletion(
'999999999999999999999:srraaaaaaaa',
document.getElementById('q'),
'cse-search-box');
});
</script>
URL ON EXECUTING A SEARCH:
http://www.google.com/cse?cx=999999999999999999999:srraaaaaaaa&q=test+search&x=12&y=11&ie=UTF-8&oq=&gs_l=#gsc.tab=0&gsc.q=test%20search&gsc.page=1
QUERY PARAMETERS BEING USED:
q
query (I read in another post to try this)
Thank you for all the help in advance!
By changing:
action="http://google.com/cse"
within,
<form id="cse-search-box" name="srchfrm" action="http://google.com/cse" target="_blank" onsubmit="validatesearch()">
to redirect to a page within the website, this resolved the issue.
Working code:
<div style="float:right; margin-right:12px;">
<form id="searchbox_99999999999999999999:srraaaaaaaa" name="srchfrm" action="/search" target="_self" onsubmit="validatesearch()">
<input value="99999999999999999999:srraaaaaaaa" name="cx" type="hidden"/>
<input id="q" name="q" autocomplete="off" type="text" onKeyPress="return submitenter(this,event)" placeholder="Search"/>
<input name="ie" value="UTF-8" type="hidden"/>
<a href="javascript:;" onmouseover="MM_swapImage('go','','/btn_go_on.png',1)" onmouseout="MM_swapImgRestore()" />
<input type="image" src="/btn_go.png" alt="Go" width="20" height="21" border="0" align="top" id="go"/>
</form>
</div>
The Search Page itself has the following code as per Google documentation:
HEAD:
<script>
(function() {
var cx = '99999999999999999999:srraaaaaaaa';
var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
</script>
BODY:
<gcse:searchresults-only></gcse:searchresults-only>
I followed the http://msdn.microsoft.com/en-us/library/cc264294%28v=office.12%29 making a new SP project with the under _layouts. the control renders fine, and i can select files, however when I click upload it shows the little loading icons. with no files uploaded.
<LINK REL="stylesheet" TYPE="text/css" HREF="/_layouts/1033/styles/ows.css">
<SCRIPT LANGUAGE="javascript">
function MultipleUploadView() {
document.all.idUploadCtl.SetTreeViewColor("#FF0000");
document.all("idMultipleView").style.display = "inline";
}
function DocumentUpload() {
document.all.idUploadCtl.MultipleUpload();
}
</SCRIPT>
<FORM NAME="frmUpload" METHOD="post"
ACTION="upload.aspx?RootFolder=& Source=http://jono-pc/Shared Documents/Forms /AllItems.aspx">
<SharePoint:FormDigest ID="FormDigest1" runat="server" />
<INPUT TYPE="hidden" NAME="Cmd" VALUE="Save">
<INPUT TYPE="hidden" NAME="NextUsing"
VALUE="http://jono-pc/Shared Documents/Forms/AllItems.aspx">
<INPUT TYPE="hidden" VALUE="New">
<INPUT TYPE="hidden" NAME="putopts" VALUE="true">
<INPUT TYPE="hidden" NAME="destination"
VALUE="http://jono-pc/Shared Documents">
<INPUT TYPE="hidden" NAME="Confirmation-URL"
VALUE="http://jono-pc/Shared Documents/Forms/AllItems.aspx">
<INPUT TYPE="hidden" NAME="PostURL"
VALUE="http://jono-pc/_vti_bin/shtml.dll/_layouts/upload.aspx" />
<INPUT TYPE="hidden" NAME="VTI-GROUP" VALUE="0">
<P CLASS="ms-toolbar">
<A HREF="javascript:MultipleUploadView()"
TARGET="_self">Upload Multiple Files</A>
</P>
<DIV ID=idMultipleView style='display:none'>
<P CLASS="ms-toolbar">
<A HREF="javascript:DocumentUpload()"
TARGET="_self">Save and Close</A>
</P>
<OBJECT id=idUploadCtl name=idUploadCtl
CLASSID=CLSID:07B06095-5687-4d13-9E32-12B4259C9813
WIDTH='100%' HEIGHT='350px'>
</OBJECT>
</DIV>
</FORM>
Finally found the answer to this dilemma (hint provided by an old SP bug: http://support.microsoft.com/kb/2489168) The input values must be relative URLS because SharePoint Office 2010 appends the http:// to all the values. so if you have a full URL it will append the http:// twice. Once I changed to relative paths, it uploaded fine.
My popup.html:
<!doctype html>
<html>
<head>
<form name="orderform">
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
<INPUT TYPE="button" NAME="button1" Value="Read" onClick="readText(this.form)">
</form>
<!-- JavaScript and HTML must be in separate files for security. -->
<script src="popup.js"></script>
</head>
<body>
</body>
</html>
popup.js
console.log("In");
function readText (form)
{
TestVar =form.firstname.value;
console.log(TestVar);
chrome.tabs.create({"url":"http://www.google.co.in","selected":true}, function(tab){
});
}
Unfortunately the above code does not print the value of a first name. Could someone please tell me what i am doing wrong here.
Your form is in the <head> section; move it in the body
don't use form.field, use the DOM id property in conjunction with document.getElementById().
Use var to define local variables; like this:
First name: <input type="text" id="firstname" /><!-- note the use of id=... -->
<script type="text/javascript">
var TestVar = document.getElementById('firstname').value;
</script>
use alert() for strings and numbers
Here's the full code:
popup.html
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
<form name="orderform">
First name:
<input type="text" name="firstname" id="firstname" />
<br />
Last name:
<input type="text" name="lastname" id="lastname" />
<input type="button" name="button1" value="Read" onclick="readText()">
</form>
</body>
</html>
popup.js
function readText(){
var TestVar = document.getElementById('firstname').value;
console.log(TestVar); alert(TestVar);
chrome.tabs.create({"url":"http://www.google.co.in","selected":true}, function(tab){ });
}