Develop Reference

Pass searchbox text as query param

I'm new to javascript.
When user enters any text or if he clicks on the search icon, i need to get the search text value and pass on that value as query param and redirect it to search results page.
Issue here is , when the page got loaded it directly redirects to the search results page without entering any text. Could you please let me know what i'm doing wrong ?
http://localhost:3000/search/searchresults.html?query=&filter=newsroom&site=allsite_all&ei=r1_search
// Only run function if the newssearch search field exists
if ($('#search_banner-q_newsroom').length >= 1) {
$("#search_banner-q_newsroom").on('keypress', setupNewsroomSearch());
}
function setupNewsroomSearch() {
var tracking;
if ($(".self-service-search").length > 0) {
tracking = "&ei=r2_pt_search";
} else {
tracking = "&ei=r1_search";
}
redirectToSearchPage($("#search_banner-q_newsroom").val(), "newsroom", "site_all", tracking);
}
<form class="search_box_wrapper">
<div class="search-box">
<input type="text" id="search_banner-q_newsroom" aria-label="Search" name="query" placeholder="Search" />
<i class="icon-magnifying-glass search_desktop-newsroom-submit"></i>
</div>
</form>

The issue is because you're calling the setupNewsroomSearch() function immediately on load and providing it's return value to the keypress handler. Instead you need to give the event handler the reference of the function, like this:
$("#search_banner-q_newsroom").on('keypress', setupNewsroomSearch); // Note: () removed
Also note that the if statement is redundant. jQuery is tolerant of calling functions on jQuery objects which matched no elements. Here's a tidied version of your JS logic:
$("#search_banner-q_newsroom").on('keypress', setupNewsroomSearch);
function setupNewsroomSearch() {
var tracking = $(".self-service-search").length > 0 ? '&ei=r2_pt_search' : '&ei=r1_search';
redirectToSearchPage($(this).val(), 'newsroom', 'site_all', tracking);
}

MeteorJS.On refreshing a page the search results get lost

I am using a searchbox for my webapp.On clicking the search button the user gets directed to the 'searchresults' page and the results are displayed.But on refreshing the page the search results are lost.How can I recover them using session?
The HTML code is:
<div class="form-group">
<input type="text" class="form-control" id='searchbox' placeholder="Search">
</div>
The js code is:
Template.navigation.events({
'submit form':function(event){
event.preventDefault();
var searchbox=document.getElementById('searchbox').value;
Router.go('/posts/search/'+searchbox);
}
});
Template.searchresults.helpers({
'post':function(){
var searchbox=document.getElementById('searchbox').value;
var search=new RegExp('\\b'+searchbox+'\\b','i');
return Posts.find({name:search});
}
});
and routerjs code is:
Router.route('/posts/search/:somesearch/',{
template:'searchresults',
name:'searchresults',
});

Instead of using a helper function, let's set the data context in your route:
Router.route('/posts/search/:somesearch/',{
template:'searchresults',
name:'searchresults',
data: function(){
return Posts.find({ name: this.params.somesearch });
}
});
Remove your post template helper entirely.
In your HTML template you'll need to iterate with {{#each this}} as this will be the cursor returned by the data function in the router.
Note, for multi-word searches and special characters you'll need to url-encode/decode the search string.

Unable to Clone HTML & Values into jQuery Datatables 1.10

This question has been asked on a few occasions, for example:
Store Cloned Element in Variable
Copy DOM Element
However, I'm having issues selecting say <div id="XYZ"></div> and cloning it to a variable for the jQuery DataTable fnStateSaveParams to save. When the page refreshes it is then meant to reload the cloned object back into the HTML via fnStateLoadParams. I am trying to use .clone() over .html() because I also need the values stored within the dynamically generated textboxes.
If I'm not saving and loading via the Datatables plugin, then it works perfectly. As soon as I try calling code similar to the below then it ceases to work (please bare in mind I've tried a number of variations to the below code). Has anyone got any ideas or suggestions?
"fnStateSaveParams": function (oSettings, oData) {
var clonedHtml= $("#XYZ").clone(true);
oData.storedHtml = clonedHtml;
},
"fnStateLoadParams": function (oSettings, oData) {
//$("#displayHtml").append(oData.storedHtml);
//$("#displayHtml").html(oData.storedHtml);
//$(oData.storedHtml).prependTo("#displayHtml")
}
<div id="XYZ">
<div data-template="">
<label class="bolder"></label>
<div class="input-append">
<div class="inline-block advancedSearchItem">
<input type="text" id="test1" value="Test Scenario" />
</div>
<a href="#" data-id="" class="btn btn-small btn-danger removeField">
<div class="hidden-phone">Remove</div>
<i class="icon-trash icon-only hidden-tablet hidden-desktop"></i>
</a>
</div>
</div>
</div>
The end scenario will be more complex, however the above is the simplest form of what I am trying to create. If you need more information, feel free to ask and I'll update the question accordingly.

I didn't find a way of utilising .clone() to grab all HTML and Text Box values. However, I did come up with a solution and the code below is for anyone who needs a reference point.
Using .html() (as most will know) will only copy the available HTML and ignore what is essentially 'placeholder' text within text fields. My solution though is to force the value into the HTML rather than being treated as 'placeholder' text, this allows it to be used again when the page is loaded.
$(document).on("click", "#advancedSearchButton", function(event) {
event.preventDefault();
// DO SOME STUFF HERE
$("[data-value]").each(function(index) {
if (index > 0) {
fieldCount++;
$(this).attr("value", $(this).val());
}
});
oTable.fnFilter("");
});
function loadData() {
// ... ... ...
"fnStateSaveParams": function(oSettings, oData) {
oData.advancedSearchHtml = $("#addedSearchFields").html();
oData.fieldCount = fieldCount;
oData.isAdvancedSearch = isAdvancedSearch;
},
"fnStateLoadParams": function(oSettings, oData) {
$("#addedSearchFields").html(oData.advancedSearchHtml);
if (oData.isAdvancedSearch == true) {
$("#collapseElement").removeClass("collapsed");
$("#collapseIcon").removeClass().addClass("icon-chevron-up");
$("#filter").hide();
}
isAdvancedSearch = oData.isAdvancedSearch;
advancedSearchFields = oData.fieldCount;
}
// ... ... ...
}

Jquery ajax post return data , Uncaught ReferenceError: data is not defined

I have a script that grabs the input text field from a div container called the protectivepanel.
I am doing an ajax post call for this text field to be checked in the backend.
If a person enters the correct password then we unhide another div container panel.
<script type="text/javascript">
$("#protectivepanel").submit(function(event) {
$.ajax({
type: "POST",
url: "/users/trial_signup_validation",
data: $("#protectivepanel").serialize(),
success: function(data){
console.log('data request succeeded');
return data
}
});
event.preventDefault()
});
$(document).ready(function(){
$("#the_submit_button").click(function(event){
event.preventDefault();
console.log('event.preventDefault');
if (data.success){
console.log('data');
$("#protectivepanel").hide()
$("#salespanel > div").removeClass("hide")
}
else {
$("#protectivepanel").show()
}
});
});
</script>
here is the method that is checking with
def trial_signup_validation
#password = params['password']
if #password == 'sales'
render :json => { "success" => "true" }
else
render :json => { "success" => "false" }
end
end
Now I want the it to returned the json data and if its a success then we unhide the panel in the script.
my chrome console has this when I enter 'sales' in my text box and hit submit
Uncaught ReferenceError: data is not defined
Here is my form if its needed
<div class="container" id="protectivepanel">
<form role="form">
<div class="form-group">
<label for="representativepassword">Representative's Password</label>
<input type="text" class="form-control" id="representativepassword" placeholder=" Enter Password">
<button type="submit" class="btn btn-default" id="the_submit_button">Submit</button>
</div>
</form>
</div>
I don't understand if I am doing the callback correctly. My server log isn't showing the ajax post call. How do I know that I am getting the correct returned data ?

The e.preventDefault in #the_submit_button's click event prevents the submission of the form which actually makes the ajax call. Since the submit event is bound outside of document.ready, it is possible that nothing is bound either.
Finally, you cannot return from the ajax callback. Anything that relies on the result of the callback has to be done within the scope of the callback. Fix these three things:
Do not preventDefault for the submit button click event
Make sure that #protectivepanel exists when you bind to it.
Move the hide/removeClass functionality into your success callback function. You may also want to provide an error callback.

JQuery - Append to text area that has been modified with Jquery

I am trying to append the value of a div or a input box to my text area. I have this working no problem but if i clear the contents of the text area first with a Jquery action it doesnt allow me to use my append features.
E.g.
<script type="text/javascript">
$(document).ready(function() {
$("#Column1").click(function () {
$("#sql").append($("#Column1").val())
})
$("#Column2").click(function () {
$("#sql").append($("#Column2").html())
})
$("#reset_sql").click(function () {
$("#sql").val('SELECT ')
})
</script>
<div> <input type="checkbox" name="column1" id="column1" value="`Column1`"> column1 </div>
<div id="Column2"> Column2 </div>
<textarea rows="10" cols="80" name="sql" id="sql"><? echo $sql ;?></textarea>
<input type="submit" value="submit" />
<input type="button" value="reset sql" id="reset_sql" />
The input and div lines above are just generic examples but relate exactly to what i'm trying to do.
I dont understand that when i clear the text area with javascript that my appends wont work. I get no JS errors in firefox error console.
thank you

You have several issues with your code: you haven't closed your document.ready callback, you are using the incorrect case when refering to your ID's, and you're using some of the jQuery methods incorrectly. For example, append() appends HTML to an element, whereas you want to update the value.
Your logic isn't quite correct either, since columns won't be removed when you uncheck a checkbox, and the columns won't be comma delimited (it looks like you are building a SQL string here).
I believe something like this is what you're looking for:
$(document).ready(function() {
var $sql = $('#sql');
var initialValue = $sql.val();
$("#column1, #column2").on('change', function () {
var cols = [];
var checked = $('input[type="checkbox"]').filter(':checked').each(function() {
cols.push($(this).val());
});
$sql.val(initialValue + ' ' + cols.join(', '));
})
$("#reset_sql").on('click', function () {
$sql.val(initialValue)
})
});
Working Demo

Your checkbox has an id of 'column1', but your event handler is $("#Column1").click(function () {.
Case matters! Either change the id to 'Column1' or the event handler to look for $('#column1').
Demo