I am trying to implement two (different) Google CSE search boxes on the same page. The issue is that only the first instance works properly. For example, a sitewide search box in the header, then on certain pages, a 2nd search box that searches within a narrow silo of the site, etc.
This doesn't work properly in that with using the google-generated code for each box, they both get the same form ID, which is obviously not valid. This causes the google watermark branding to fail to appear in box #2, and also some auto/google generated variables fail to generate for the 2nd box also, such as the ss parameter (search session).
Now, the search itself works in both boxes, e.g. user searches, is taken to correct results page, and correct results are shown.
I am just trying to resolve this issue: how can I cause the 2nd form to get a different ID value (and still work properly - as google's javascript looks for the ID cse-search-box) I have tried adding a unique identifier to the ID and NAME attributes of the <form> element, but that caused the google.com javascript to malfunction (as I believe it looks for `cse-search-box' only)
Code is as follows:
search box 1:
<form id="cse-search-box" name="cse-search-box" class="search searchHeader" method="get" action="/search">
<input type="hidden" name="cx" value="partner-pub-0000000000000000:000" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" id="q" class="text_input" />
<input type="submit" name="sa" value="Search" class="submit" />
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
search box 2:
<form id="cse-search-box" name="cse-search-box" class="search searchWebDirectory" method="get" action="/search">
<input type="hidden" name="cx" value="partner-pub-0000000000000000:111" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" id="q" class="text_input" />
<input type="submit" name="sa" value="Search" class="submit" />
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
From: http://www.google.com/cse/docs/cref.html
The parameter in /coop/cse/brand named "form" outputs the first getElementById in the code. As such, using http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en will create a cse-search-box-targetted code, whilst giving it box2 will trigger on a different ID. The keyword searchbox_demo is reserved.
Give it a go if you'd like to: http://jsfiddle.net/JTV6f/1/ . Considering what you are doing, however, if I were you, I'd switch to either the V1 or V2 APIs.
This is a tested solution. Took me a while but I'm slow and I don't use CSS all the time.
Use the V1 code. When you select Get Code on the setup screen there is an option for the V1 code.
Put your search code in a div
div tag
searchcode
end div tag
Make your cse variables unique. That will be two places at the top of the code.
div id='cse'
and a little lower
customSearchControl.draw('cse', options);
For each search these should be the same but different than the other searches. I used cse0, cse1, cse2.
This will fix the searches so each search will work as specified but they will still share the same CSS.
So scope your styles with the scoped attribute.
style type='text/css' scoped
Do this for each search code. Now your searches can have their own look and feel, color, etc.
http://deltaboogie.com/search
Thanks,
Hairy Larry
Related
I need a little bit of help. I'm stuck at making the form information I have on my first html document show up on the tables in the second html document.
Any help would really feel good right now.
I'm not sure exactly what your question means, but if you are asking about including an html inside another html, check this link: include html in another html
Edit:
If you have no option to use server-side programming, you could use the query string.
In the form, add a method="GET" attribute:
<form action="display.html" method="GET">
<input type="text" name="name" />
<input type="text" name="phone" />
<input type="submit" value="Submit" />
</form>
When they submit this form, the user will be directed to an address which includes the name, phone value as a parameter. like:
http://www.example.com/display.html?name=XYZ&phone=98745654
You should then be able to parse the query string - which will contain the parameters value - from JavaScript, using the window.location.search value:
// from display.html
<p id= 'hi' ></p>
<script>
document.getElementById("hi").innerHTML = window.location.search;
</script>
this should help you to start what you are trying to do.
My code is a web application using Flask (python) framework, I have this search bar implemented on HTML5 and I want the text inputted for search to appear on the search bar after the page loads; like this (where {{query}} is a variable passed on by Jinja2):
<form class="search-bar search_header" method="GET" action="/">
<input class="search_input" name="q" tabindex="1" type="text" value={{query}}>
<button class="search_button" tabindex="2" type="submit">
<i class="icon-search"></i>
</button>
</form>
The problem is that only the text up until the first white space is displayed, the rest is cutoff, so "This is an example" will display "This" in the search bar. If I pass on a regular string instead of the variable then it works fine.
{{query}} is of type unicode, if that matters, and I have tried formatting it in several ways to no avail, is there any workaround to this?
I have also thought about saving the variable as Javascript from the landing page search bar html, but I am new at Javascript, any suggestions would be highly appreciated!
I expect you have to wrap the placeholder in double quotes:
<input class="search_input" name="q" tabindex="1" type="text" value="{{query}}">
Otherwise the substituted html code would be
<input class="search_input" name="q" tabindex="1" type="text" value=text with whitespace>
The commonplace html renderer would parse this into an input element with attributes value, with and whitespace, the latter two coming without a value while value's value would be text. Note that most html renderers are tolerant against attributes which are undefined and value-less attributes are covered by the standard (as it is to omit the double quotes).
I am using Javascript to add new rows to a table when an image is clicked in a classic ASP page. Those rows contain a number of input fields with id's and names that include the row number. I am adjusting those ids and names for the new row. The operation is visibly working and the new row appears at the bottom of the table where I wanted to put it. Also, if I select the new row then view selected source in Firefox, I can see the new row's HTML with id's & names as expected.
When I submit the form, however, the new fields are not availabe and the loop below does not report them:
dim sItem
For Each sItem In Request.Form
Response.Write(sItem)
Response.Write(" - [" & Request.Form(sItem) & "]<br>")
Next
I am no Javascript whizz and have no idea why this might not be working. Any help would be appreciated.
I know you've worked it out now, but just thought I'd write up my comment for future visitors (and hopefully some points too?!)
To ensure all the input fields you want are submitted with the form, they must be enclosed inside the <form> tags. e.g.
<html>
<body>
<form id="myForm" action="fooPage.asp" method="post">
<!-- These two input fields will be submitted to fooPage.asp -->
<input type="hidden" name="myhiddenField1" value="123" />
<input type="text" name="myTextField1" value="hello world" />
<input type="submit" value="Submit myForm" />
</form>
<!-- These two input fields won't be submitted to fooPage.asp -->
<input type="hidden" name="myhiddenField2" value="456" />
<input type="text" name="myTextField2" value="hello world 2" />
</body>
</html>
I seem to have an issue with passing a value between two hidden fields.
I'm using a jquery plugin for for geolocation from google maps. The plugin uses a fieldset which includes two hidden fields, one for lat and one for lon. Each time then pin is moved the two values change, which is definitely happening and can be viewed in the developer tools.
I have a form that I'm bringing all of my values into to be sent to a php file all in one go. I've managed to get it working for all the other inputs I need but this one just wont work.
Heres the map with the two hidden fields. The hidden classes come with a value of 20 preset which changes.
<div class="gllpMap">Google Maps</div>
<input type="hidden" class="gllpLatitude" value="20"/>
<input type="hidden" class="gllpLongitude" value="20" />
<input type="hidden" class="gllpZoom" value="3"/>
</div>
And here is my search that is going to be sent to the php.
<form method="post" action="getData.php">
<input type="text" name="username" class="mySearch" value="" />
<input type="hidden" name="fromTest" id="fromTest"/>
<input type="hidden" name="untilTest" id="untilTest"/>
<input type="hidden" name="lat" id="lat"/>
<input type="hidden" name="long" id="long"/>
<input type="submit" class="myButton" value="">
</form>
For some reason I just cant get this to work. What I'm looking for is the simplest way to get this lat and long to equal the values set by the two hidden fields. The simpler the better, I'm pretty new to coding and this is just a first mock-up which I hope to revisit properly when I have more time available.
You can take and set the value using JQuery .val()
$("#lat").val($(".gllpLatitude").val());
$("#long").val($(".gllpLongitude").val());
DEMO
I've created a search page that can be toggled between french and english. So when the user searches a record and toggles to french it displays the same record they were viewing on the english page.
What I want to do is display the record name in the search box when the page is toggled.I assumed it was as simple as doing a $('#inputID').val(record); but it doesn't seem to be working. I've alerted the record name and it works fine, so I'm stumped. All the scripts are linked correctly as well so that's not the problem.
Autocomplete Box Code
<div id="ui-widgit">
<label for="searchParams">
<h1>Search All Programs (By Screen Number or By Error Code):</h1>
</label>
<input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" />
<input type="button" value="Search" name="searchBtn" class="btn_Design" onclick="showSearch(inputID.value)"/>
</div>
Try to change the value of inputID with this
$('#inputID').val(recordToggle);
also have tried this:
$('#inputID input').val(recordToggle);
It is hard to tell with your presented markup but I am assuming you are trying to change the value of $('#inputID') after the page refreshed. It is important where you put this code. If it is placed before <input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" /> you will not return anything with $('#inputID') so you will change the value of nothing to your text. It will give no error. To fix this you can use:
$( document ).ready(function(){
$('#inputID').val(recordToggle);
});
Be sure to read about jQuery's ready function because load may be the better choice.
If this doesn't fix your problem let me know. I will update my answer.