I am trying to do a simple Google Search where I just get back the titles linked to the pages. I have bought the business search and I have everything working (see code below) - I just want to get the full title of the page, not the truncated title. Can anyone help me?
In my head I have:
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
// Load the Search API
google.load('search', '1');
// Set a callback to load the Custom Search Element when you page loads
google.setOnLoadCallback(
function(){
var customSearchControl = new google.search.CustomSearchControl('011927268382499158334:cuvurabmo-o');
// Use "mysite_" as a unique ID to override the default rendering.
google.search.Csedr.addOverride("mysite_");
// Draw the Custom Search Control in the div named "CSE"
customSearchControl.draw('cse');
},
true);
</script>
In the body I have:
<div style="display:none">
<!-- Return the unescaped result URL.-->
<div id="mysite_webResult" >
<div class="gs-webResult gs-result"
data-vars="{longUrl:function() {
var i = unescapedUrl.indexOf(visibleUrl);
return i < 1 ? visibleUrl : unescapedUrl.substring(i);}}">
<!-- Build the result data structure.-->
<table width="50%" cellpadding="0" cellspacing="0" >
<tr>
<td valign="top">
<!-- Append results within the table cell.-->
<div class="gs-title">
<a class="gs-title" style="color:#990000;font-family:'Times New Roman',serif;font-size:8.0pt;font-decoration:underline;" data-attr="{href:unescapedUrl,target:target}"
data-body="html(title)"></a>
</div>
<!-- Render results.-->
<div data-if="Vars.richSnippet && Vars.richSnippet.action" class="gs-actions"
data-body="render('action',richSnippet,{url:unescapedUrl,target:target})"></div>
</td>
</tr>
</table>
</div>
</div>
<!-- Div container for the searcher.-->
<div id="cse"></div>
Related
I'm using the survey monkey PHP API to retrieve a list of surveys in the account. Passing in a $params variable, I can retrieve the survey ID and the survey name. Using the response, I am building two separate picklists as shown below:
function build_picklist($survey, $name) {
global $workbooks;
$picklist = "<select name=\"{$name}\">";
$picklist. = "<option value=\"\" selected=\"selected\">Select...</option>";
foreach($survey['data']['surveys'] as & $entry) {
if ($name == 'survey_list') {
$entry = $entry['title'];
} else {
$entry = $entry['survey_id'];
}
$label = htmlentities($entry);
$picklist. = "<option value=\"{$entry}\">{$label}</option>";
}
$picklist. = "</select>";
$workbooks - > log('Picklist HTML', $picklist);
return $picklist;
}
This works nicely and my form displays a list of surveys on the account and another list of the id's for those surveys. Using the code below:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#integrate_button").click(function(){
$(this).val("Integrating...")
});
});
</script>
</head>
<link rel="stylesheet" type="text/css" href="https://secure.workbooks.com/resources/=UzN4IDN/survey_monkey.css">
<title>Integrate with Survey Monkey</title>
<body>
<div id="container" align="center">
<div id="header">
<img src="https://secure.workbooks.com/resources/=UzN4IDN/sm_logo.jpg" height="100" width="200"/>
</div>
<div id="nav">
<p>Below is a list of the Surveys on your account. Pick one to integrate with.</p>
</div>
<div id="section1">
<form method="POST" action="https://secure.workbooks.com/process/=gTOwIjN/Survey_Monkey" id="pg2_form">
<p>Which Survey would you like to integrate Workbooks with?<p>
<p>{$survey_picklist}</p>
<p>Survey ID: <p>
<p>{$survey_id}</p>
</form>
</div>
<div id="section2">
<p><input type="submit" name="integrate" id="integrate_button" form="pg2_form" value="Integrate with Survey Monkey"/></p>
</div>
</div>
</body>
</html>
What I'd like to do is link the two together so when I select an option in the survey name field, it shows the corresponding ID for that survey in the other picklist.
My guess is I'd need to use Jquery/JS to achieve this but I can't seem to find any useful examples on the internet.
I'm new to Jquery/JS and don't really know how to use it that much, things I've done in the past have worked by pure fluke! Please be nice! :)
I am trying to get my content brought into handlebars from my google spreadsheets to be in tags that I can show/hide. When you click on the link it shows one panel of content and hides another panel of content. I have the handlebars bringing the content in from the two google spreadsheets but when I add try to do the hide/show panels it does not work. I had the hide/show panels showing up at one time but with no content from the handlebars in it.
here is my fiddle: http://jsfiddle.net/justawebbie/AcW97/17/
Here is the javascript section:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
// Define spreadsheet URL.
var mySpreadsheet = 'https://docs.google.com/spreadsheet/ccc?key=0AjlSK7_zXoNHdEoyWDYxb3hnZi1xWkl1TVQ0eERBQ2c#gid=0';
var mySpreadsheet2='https://docs.google.com/spreadsheet/ccc?key=0AjlSK7_zXoNHdEpYUEg0VTJ0Rlpzb2RUOVZfLU5oX0E#gid=0'
// Compile the Handlebars template for HR leaders.
var HRTemplate = Handlebars.compile($('#hr-template').html());
var HRTemplate3 = Handlebars.compile($('#hr-template3').html());
// Load top five HR leaders.
$('#hr').sheetrock({
url: mySpreadsheet,
sql: "select A,B,C,N,M,O where B contains 'yes' order by A desc",
headersOff: true,
headers: 2,
rowHandler: HRTemplate
});
$('#hr3').sheetrock({
url: mySpreadsheet2,
sql: "select A,C,D,E order by A desc",
headersOff: true,
headers: 2,
rowHandler: HRTemplate3
});
Here the HTML section:
<ul>
<li>Certificates</li>
<li>Minors</li>
</ul>
<div id="sec1" style="background-color:pink;">
<div id="hr" class="table">
<script id="hr-template" type="text/x-handlebars-template">
<div id='table-row'>
<div id='first-cell'><a href='{{cells.N}}' class='left-link'>{{cells.A}}</a></div>
<div id='second-cell'><a href='{{cells.O}}' class='right-link'>{{cells.M}}</a></div>
</script>
</div>
</div>
<div id="sec2" style="background-color:#eee;">
<div id="hr3" class="table">
<script id="hr-template3" type="text/x-handlebars-template">
<div id='table-row'>
<div id='first-cell'><a href='{{cells.D}}' class='left-link'>{{cells.A}}</a></div>
<div id='second-cell'><a href='{{cells.E}}' class='right-link'>{{cells.C}}</a></div>
</div>
</script>
</div>
</div>
Fiddler appears to be having issues loading the libraries, but it works fine when I build out the page locally. Try this zip file and see if you still have any questions.
http://cris.lc/qtpzm
I downloaded the Jquery Raty plugin: https://github.com/wbotelhos/raty
Then I installed this folder structure into my {{static_url}}js folder and named it Raty.
Then I imported it into my template as follows and put the path as the location of where its images are stored.
<script type="text/javascript" charset="utf-8" src="{{ STATIC_URL }}js/raty/js/jquery.raty.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('.thingrating').each(function(index){
$(this).raty({
readOnly: false,
path: "{{ STATIC_URL }}js/raty/img/",
start: $(this).children("span:first").text(),
click: function(score, evt) {
var vote_url = "rate/" + this.attr('id').substring(2) + "/" + score + "/";
$.ajax({
url: vote_url,
success: function(){
alert('vote successful');
}
});
}
});
});
});
</script>
Is this correct? I'm not seeing that it is working in my template, so want to make sure this process of storing the script and importing it into my template is correct before I continue to decipher what is wrong...
Here's the rest of my template:
{% block body %}
<h2>Things</h2>
<div class="block" id="block-tables">
<div class="content">
<p></p>
<div class="inner">
<table class="table">
<tr>
<th class="first">Name</th>
<th class="last">Rating</th>
</tr>
<tr class="odd">
<td>{{ item.modelname }}</td>
<td><div class="thingrating" id="t_{{ item.id }}"><span style="display:none;">{{ score }}</span></div></td>
</tr>
</table>
<div class="actions-bar wat-cf">
</div>
</div>
</div>
</div>
{% endblock %}
Take a look at this jsfiddle demo. It works fine (well, except that looks like start should be changed to score as I understand that way you want to define initial score). Incorrect path to images will not break it at all. Browser will simply show default icon for not available image if path to images is wrong. Not sure what is in {{static_url}} variable. If it contains something like 'http://example.com/static' - you must add a slash after it.
Possible problems - script tag for raty appears before jQuery. Or results of template processing are not available on page when $(document).ready event happens.
I've a problem with Google CSE code (i admit i also don't have much experience with javascript).
My problem is that I have to pass the title of the result to a second webpage, opened when clicking on a result title of my CSE
<div id="mysite_webResult">
<div class="gs-webResult gs-result"
data-vars="{longUrl:function() {
var i = unescapedUrl.indexOf(visibleUrl);
return i < 1 ? visibleUrl : unescapedUrl.substring(i);}}">
<!-- Build the result data structure.-->
<input type="hidden" id="url" data-attr="{value:unescapedUrl}" />
<table>
<tr>
<td valign="top">
<div data-if="Vars.richSnippet" data-attr="0"
data-body="render('thumbnail',richSnippet,{url:unescapedUrl,target:target})"></div>
</td>
<td valign="top">
<!-- Append results within the table cell.-->
<div class="gs-title">
<a class="gs-title" data-attr="{href:'linkdetails2.php?url='+unescapedUrl+'?nome='+html(title),target:target}"
data-body="html(title)"></a>
</div>
The problem is in the last lines, this:
<a class="gs-title" data-attr="{href:'linkdetails2.php?url='+unescapedUrl+'?nome='+html(title),target:target}"
data-body="html(title)"></a>
even if it renders right (the title is correctly displayed), when clicked (the target page in this case was: twitter.com/#!/asd) goes to this:
http://www.asd.com/linkdetails2.php?url=http://twitter.com/#!/asd?nome=[object DocumentFragment]
as you can see, the "html(title)", passed by "nome" isn't what i was expecting, but: [object DocumentFragment]
Is there a solution?
Thanks everyone
I have a drop down list with two values (for now..) with other elements in a form. What I'd like to do is enable four components if the user selects the first value and disable them otherwise.
There's a main page, and the user navigates through other pages opening and closing tabs loaded dynamically with ajax calls, that remove the current page and load the new page into a specific div.
In those pages loaded with Ajax I need to put the javascripts that will be used in those pages, so in this case the javascript that enables/disables the desired components, but I cannot call it because I get "Uncaught ReferenceError: soggettiNaturaChangeEvent is not defined", where soggettiNaturaChangeEvent is the name of the function.
Here's where I call it, in the page newEditSoggetti.jsp:
<form:select id="soggetti_soggettiNatura" path="soggettiNatura" cssStyle="width:300px;" onChange="javascript:soggettiNaturaChangeEvent();">
...
...
...
In that page too I put the javascript function:
<script id="function1" type="text/javascript">
alert("soggettiNaturaChangeEvent");
function soggettiNaturaChangeEvent()
{
alert("function soggettiNaturaChangeEvent");
var natura = document.getElementById('soggetti_soggettiNatura');
var datanascita = document.getElementById('soggetti_soggettiDataNascita');
var luogonascita = document.getElementById('soggetti_soggettiLuogoNascita');
var sesso1 = document.getElementById('soggettiSessoID1');
var sesso2 = document.getElementById('soggettiSessoID2');
if(natura.value == "Persona fisica")
{
datanascita.disabled=false;
luogonascita.disabled=false;
sesso1.disabled=false;
sesso2.disabled=false;
}
else
{
datanascita.disabled=true;
luogonascita.disabled=true;
sesso1.disabled=true;
sesso2.disabled=true;
}
}
</script>
Here's my tab refresh function, which calls an initScript specified in a parameter:
//reset stuff, reorder tabs, etc...
$.ajax(action,
{
success : function(result)
{
//finds the div where to put new content
var doc = document.getElementById(newid);
doc.innerHTML = doc.innerHTML + result;
//finds the initScript "scriptId" and runs it (THIS WORKS)
scripts = $('#' + scriptId);
eval(scripts.html());
//here I try to find all the scripts tag that begin with "function" and eval them
var jScripts = $("[id^=function]");
for(var i = 0; i < jScripts.size(); i++)
{
eval(jScripts.html());
jScripts = jScripts.next();
}
}
});
The page prints the first alert when (I think) it appends the function to the DOM, but when I click on the component that should invoke the function I get the error.
What I'd like to do is to have this function get executed when I click on the component soggettiNatura, not when ajax finished loading my page.
Thanks to everyone who will try to help me, and to everyone that has posted useful content I read in the past.
Keep with the great work.
Andrea
P.S.: sorry for the bad indentation, I'm in a bit of a hurry :P
Edit: a little append: if I try to load the page normally (not with Ajax) the javascript works...
I have a function in the main page that shows me the actual html code after the various javascripts and ajax modifications (this is purely to debug) and the javascript function I'm trying to call is there in the dom...
Please help a newbie in this world..
I finally made it. I'm posting a sample web page with all the relevant code:
<%# page language="java" isELIgnored="false" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<jsp:directive.include file="/WEB-INF/sitemesh-decorators/include.jsp"/>
<fmt:setBundle basename="bundles.settori-resources"/>
<!-- !!!!! important for popup !!!!! I have a boolean param passed from the server to know if I'm opening in popup mode or in tab mode -->
<% Boolean isPopup = (Boolean)request.getAttribute("popup"); %>
<!-- !!!!! important for popup !!!!! -->
<div id="contentarea" >
<div id="lb"><div id="rb"><div id="bb"><div id="blc">
<div id="brc"><div id="tb"><div id="tlc"><div id="trc">
<div id="content">
<h2><fmt:message key="navigation.management"/> <fmt:message key="settori.title"/></h2>
<div id = "initScriptSettori"></div>
<form:form id="tabSettoriForm" method="POST" commandName="settori">
<!-- !!!!! important for popup !!!!! I'm saving the id of the element of the calling page I'm going to edit with the selected element in the popup -->
<form:hidden path="hiddenCallerFormElementId" />
<!-- !!!!! important for popup !!!!! -->
<table cellpadding="0" cellspacing="0" id="viewTable">
<tbody>
<tr>
<td class="label" valign="top">
<fmt:message key="settori.settoreid.title"/>:
</td>
<td>
<form:input id="settori_settoreId" path="settoreId" cssStyle="width:300px;"/>
</td>
<td class="label" valign="top">
<fmt:message key="settori.settoredescrizione.title"/>:
</td>
<td>
<form:input id="settori_settoreDescrizione" path="settoreDescrizione" cssStyle="width:300px;"/>
</td>
</tr>
</tbody>
</table>
<!-- !!!!! important for popup !!!!! It triggers two different search functions based on the popup staying open or not: the first updates the popup with the search results, the second updates the tab -->
<% if(isPopup == null || isPopup == false) {%>
<span class="inputbutton"><input class="refreshbutton" type="button" id="searchSettori" onClick="javascript:refreshTabWithPost('tabSettori', 'tabSettori', '${pageContext.request.contextPath}/searchSettori', '<fmt:message key="navigation.management"/> <fmt:message key="settori.title"/>', 'initScriptSettori')" value="<fmt:message key="navigation.searchSettori"/>"/></span>
<% } else {%>
<span class="inputbutton"><input class="refreshbutton" type="button" id="searchSettoriPopup" onClick="javascript:postColorbox('/DeliDete/searchSettoriPopup', '', 'tabSettoriForm','initScriptSettori')" value="<fmt:message key="navigation.searchSettori"/>"/></span>
<% } %>
<!-- !!!!! important for popup !!!!! -->
</form:form>
<div class="clear"> </div>
<!-- !!!!! important for popup !!!!! If I'm on the tab version shows the new entity button, else it is hidden -->
<% if(isPopup == null || isPopup == false) {%>
<div class="navitem"><a class="button" href="javascript:refreshTab('tabSettori', 'tabSettori', '${pageContext.request.contextPath}/newSettori', '<fmt:message key="navigation.new"/> <fmt:message key="settori.singular"/>', 'initScriptSettori')"><span><img src="${pageContext.request.contextPath}/images/icons/new.gif" /><fmt:message key="navigation.new"/> <fmt:message key="settori.singular"/></span></a></div>
<% } %>
<!-- !!!!! important for popup !!!!! -->
<div id="tablewrapper">
<table id="listTable" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="thead"> </th>
<th class="thead"><fmt:message key="settori.settoreid.title"/></th>
<th class="thead"><fmt:message key="settori.settoredescrizione.title"/></th>
</tr>
</thead>
<tbody>
<c:forEach items="${settoris}" var="current" varStatus="i">
<c:choose>
<c:when test="${(i.count) % 2 == 0}">
<c:set var="rowclass" value="rowtwo"/>
</c:when>
<c:otherwise>
<c:set var="rowclass" value="rowone"/>
</c:otherwise>
</c:choose>
<tr class="${rowclass}">
<td nowrap="nowrap" class="tabletd">
<!-- !!!!! important for popup !!!!! If I'm in the tab version of the page it shows the view,edit and delete buttons, if I'm in the popup version it shows the select button, which triggers the closing of the popup and the update of the calling element -->
<% if(isPopup == null || isPopup == false) {%>
<a title="<fmt:message key="navigation.view" />" href="javascript:refreshTab('tabSettori', 'tabSettori', '${pageContext.request.contextPath}/selectSettori?settoreIdKey=${current.settoreId}&', '<fmt:message key="navigation.view"/> <fmt:message key="settori.title"/>','initScriptSettori')"><img src="images/icons/view.gif" /></a>
<a title="<fmt:message key="navigation.edit" />" href="javascript:refreshTab('tabSettori', 'tabSettori', '${pageContext.request.contextPath}/editSettori?settoreIdKey=${current.settoreId}&', '<fmt:message key="navigation.edit"/> <fmt:message key="settori.title"/>', 'initScriptSettori')"><img src="images/icons/edit.gif" /></a>
<a title="<fmt:message key="navigation.delete" />" href="javascript:refreshTab('tabSettori', 'tabSettori', '${pageContext.request.contextPath}/confirmDeleteSettori?settoreIdKey=${current.settoreId}&', '<fmt:message key="navigation.delete"/> <fmt:message key="settori.title"/>','initScriptSettori')"><img src="images/icons/delete.gif" /></a>
<% } else {%>
<a title="<fmt:message key="navigation.select" />" href="javascript:closeColorbox('${current.settoreId}', '${current.settoreDescrizione}', '${settori.hiddenCallerFormElementId}')"><img src="images/icons/select.png" /></a>
<% } %>
<!-- !!!!! important for popup !!!!! -->
</td>
<td nowrap="nowrap" class="tabletd">
${current.settoreId}
</td>
<td nowrap="nowrap" class="tabletd">
${current.settoreDescrizione}
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div></div></div></div>
</div></div></div></div>
</div>
<!-- !!!!! important for popup !!!!! -->
<script>
function initLoad()
{
//necessary for the popup init script loading
if(jQuery1_6_2("#initScriptSettori").length != 0)
{
jQuery1_6_2.getScript("javascripts/pagesJs/" + "initScriptSettori" + ".js", function()
{
window["initScriptSettori"]();
});
}
else
setTimeout("initLoad()",500);
}
initLoad();
</script>
<!-- !!!!! important for popup !!!!! -->
The initScriptSettori.js:
function initScriptSettori()
{
}
In this case I had nothing to initialize, but there are so many cases in which you need some javascripts events being fired at the end of the loading of the page, well I put them inside the function initScriptSettori.
Hope this helps guys.