Add facet & value programmatically with VisualSearch.js - javascript

I'm using VisualSearch.js. Works great out of the box but my interface has a list of links. When user clicks on one of these it will add a facet & value (i.e. tag:cats) to the search box and trigger the search taking into account any other search inputs that are already there.
I don't see a clear way to do this from the source code - Am I missing something? http://documentcloud.github.com/visualsearch Thanks for any help!

I figured it out - using the addFacet method from visualSearch.js - like this:
//add a tag filter
visualSearch.searchBox.addFacet('tag', tag.name, 0);

You should find the addFacet function in search_box.js like below:
addFacet : function(category, initialQuery, position) {
"category" will be facet's name, "initialQuery" will be the pre-populate value.

Related

PHP dynamic id attribute of <a> element

I have a drop-down menu in a form with elements retrieved from a database. Something like this :
for($i=0;$i<count($resq);$i++){
print("<li><a class=\"dropdown-item\" href=\"#\" id=\"$i\">{$resq[$i][0]}</a></li>");
}
$resq being an array containing the result of the query (i used mysqli_fetch_all).
As you can see I tried to dynamically generate the id of the items(first item has id=0, second has id=1 and so on till the final value of $i) but I think this is not correct.
Previously, I had the following JS code(which worked) which I used to set the drop-down value to the one selected by the user and to set the value of a hidden input to that value.(I know the code isn't elegant but I just wanted to test the logic in the first place)
var x=document.getElementById('dropdownMenuButton1slct');//dropdown
var c1=document.getElementById("0");//i - categories(IDs of the dropdown elements)
var c2=document.getElementById('1');
var c3=document.getElementById('2');
var c4=document.getElementById('3');
var c5=document.getElementById('4');
var p=document.getElementById('iaval');//hidden input from form
function clic(z){
z.onclick=function () {
x.innerHTML=z.innerHTML;
p.value=x.innerHTML;
};
}
clic(c1);
clic(c2);
clic(c3);
clic(c4);
clic(c5);
But now the same method won't work. If you can, please suggest me a different way or something, I am kinda stuck. I can provide more info if this seems vague or something like that. Thanks.

Set multiple form values using jQuery Data attribute

So let us say i have a form with id #form which has two input fields, namely title & price.
I click on the Edit button somewhere in the application which has data attributes (e.g data-title="Apple" data-price="10")that are to be assigned to the #form upon clicking the button.
the obvious solution that works is
$("#name").val($(this).data('name'));
$("#price").val($(this).data('price'));
This obviously looks bad when you have too many fields. So I am trying to get something like this to work $('#form').data($(this).data());, more or less in a single like
Have tried this many ways with no success
Any help is appreciated
You could create a jquery plugin that you can call from the element that contains the data points and have it apply the data based on the key to elements within the form of that same name. Example below
$.fn.applyData = function(form) {
$form = $(form);
$.each($(this).data(), function(i, key) {
$form.find('#' + i).val(key);
});
};
JSFiddle: http://jsfiddle.net/LCM8S/43/

How to get value in Star rating, jQuery

I am using the star rating from this site : link
But I can't seem to figure out how to get the rating from my radio buttons.
I just need to display it in the console.log, the rest I can manage.
When the third is selected it looks like this:
If any more information is required, please ask, new to this.
Get number of stars with the selected class .star-rating-on:
var rating = $('.star-rating-control .star-rating-on').length;
If there are more than one set of rating controls, please use a different parent selector, like article or .post:
$('article').each(function() {
var rating = $(this).find('.star-rating-control .star-rating-on').length;
// Do something...
}
Please use following code to get the value of rating:
$('.auto-submit-star').rating({ callback: function(value, link){ alert(value); } });
Replace .auto-submit-star with your selector
The simple way is
Create a form. Form will help you to post rating data.
inside form create radio buttons as per your need.
Call javascript api to change radio buttons into stars.
There are 2 ways to get data from rating
a. submit a form and get result using $_POST or $_GET or $_REQUEST
b. Use ajax
Note:- This plugin return selected radio button value.

Assign value from one input to another input using jQuery...not working

I have a couple of radios (#LocalDelivery and #StandardShip) related to a couple text inputs (#LocalDate and #datepicker). Then, off in another section is another text input with class productAttributeValue.
If LocalDelivery is chosen/checked, I need its input, #LocalDate to get the value and name from the input with class productAttributeValue. Or, if #StandardShip is chosen/checked I need its input, #datepicker, to get the value and name from the input with class productAttributeValue.
I have tried various combinations of the following:
if (!$('#LocalDelivery').is(":checked")) {
$('#datepicker').val("");
$('#LocalDate').val($('.productAttributeConfigurableEntryText div.productAttributeValue input[type="text"]').val());
$('#LocalDate').attr('name',
$('.productAttributeConfigurableEntryText div.productAttributeValue input[type="text"]').attr('name'));
}
if (!$('#StandardShip').is(":checked")) {
$('#LocalDate').val("");
$('#datepicker').val($('.productAttributeConfigurableEntryText div.productAttributeValue input[type="text"]').val());
$('#datepicker').attr('name',
$('.productAttributeConfigurableEntryText div.productAttributeValue input[type="text"]').attr('name'));
}
Per my other thread, Issue with jQuery 'else', this method isn't working. According to the answers given there, this is the wrong method entirely but I'm not sure how else to go about this.
Here is a fiddle:
This is my glorious Fiddle
EDIT:
Per beautifulcoder's comment I have added a click function to both radios. While it would be preferable for the inputs to populate their value without clicking first, this is the first solution I've had that works. Created a fiddle here, hope it helps someone else:
My amazing working Fiddle

Removing an <option> from a <select> tag according to previously selected <option> tag? (POLL Example)for

I have 50 rows of data and i want users to give them points by 1 to 50. I put dropdown boxes near them with options 1/50. But all i want is when a user selects 15(for example) for a row, 15 will be deleted from all other select tags of other rows. I am not as good as you in JavaScript. How can i accomplish this?
Hi casablanca i couldnt make he script you sent work. I need it to work on just one select tag so i give select tag an ID and an ID for the form too. I edit the scripts getElementsByTagName with getElementsByTagID (select tag's ID) to effect only one select tag. But the function doesnt triggered?
This might not be a very good idea, because it is very difficult for the user to modify choices -- for example, if I want to give 15 to a different option, I need to change the old one to something else and then change the new one to 15. Also, once all points have been assigned, it's impossible to make any changes because all options are gone.
A better idea would be to let the user do whatever he/she wants and then validate the form in the end. You could do that like this:
function validate() {
var used = []; // This array stores already used options
var rows = document.getElementById('myForm').getElementsByTagName('select');
for (var i = 0; i < rows.length; i++) {
var points = rows[i].value;
if (used[points]) {
// This value was already used
alert('Please choose a different value.');
rows[i].focus();
return false;
} else {
// This value was not used before; mark it as used now
used[points] = true;
}
}
return true;
}
And call this function in the onsubmit handler of your form:
<form id="myForm" onsubmit="return validate();">
EDIT1: id -> class
give each option the class of the number it is
<option class="15">15</option>
<option class="16">16</option>
etc.
Then jquery can remove() an item by class
$('.15').remove();
obviously have to do an on change and get the value just set. "remove()" is nice in this instance because I believe it will yank every instance of that class.
EDIT3: upon further consideration the above method would be further complicated by the need to not remove the "selected" option. Not going to figure out the exact method but I think changing the class from "15" to "selected15" with a $(this).append() or something of the sort before calling the remove would get the job done fairly safely.
EDIT2:
As noted by casblanca below this is not an ideal user interface at all for this type of input. You may want to look into this: http://www.utdallas.edu/~jrb048000/ListReorder/
Allows user to drag and drop items in a list to reorder them. Much more natural.

Categories