// This moderation is really useless....
For the sake of this question, i implemented this thing in that way:
User select image via IMG tag:
<img src="{{=URL('default', 'download', args=ingr.f_image)}}" id='{{=ingr.id}}'
class="img-responsive img-rounded f-main checked">
Then JavaScript comes in hand:
<script>
$('.fruits-main').click(function() {
if ($(this).hasClass("selected")) {
$(this).removeClass('selected').addClass('unselected');
removeParam("ingr", this.id);
ajax('{{=URL('default', 'filter_s')}}'+ '?' +
window.location.href.split("?")[1],[], 'content');
} else {
$(this).removeClass('unselected').addClass('selected');
addQSParam("ingr", this.id);
ajax('{{=URL('default', 'filter_s')}}'+ '?' +
window.location.href.split("?")[1],[], 'content');
}
});
</script>
Which is simply click function that is waiting for click and change class of
IMG from selected to unselected and vice versa.
When this change occurs, URL parameters updated via web-browser api.
function removeParam(name, value) {
var newUrl = window.location.href.split("?")[0],
sourceURL = window.location.href,
param,
params_arr = [],
queryString = (sourceURL.indexOf("?") !== -1) ? sourceURL.split("?")[1]
: "";
if (queryString !== "") {
params_arr = queryString.split("&");
for (var i = params_arr.length - 1; i >= 0; i -= 1) {
param = params_arr[i].split("&")[0];
if (param.indexOf(name) !== -1) {
if (params_arr[i].indexOf("%s") !== -1) {
params_arr[i] = param.replace("%s" + value , "");
}
else {
params_arr[i] = param.replace(name + "=" + value, "");
}
if (params_arr[i].indexOf(value) !== -1 ){
params_arr[i] = param.replace(value + "%s", "");
}
}
}
if (params_arr[0] !== "") {
newUrl = newUrl + "?" + params_arr.join("&");
}
}
window.history.pushState(null,"", newUrl);
}
function addQSParam(name, value) {
var url=window.location.href,
separator = (url.indexOf("?")===-1)?"?":"%s";
if (!(url.indexOf(name) ==-1)) {
newParam=separator + value;
newUrl=url.replace(newParam,"");
newUrl+=newParam;
}
else {
newParam=separator + name + '=' + value;
newUrl=url.replace(newParam,"");
newUrl+=newParam;
}
window.history.pushState(null,"", newUrl);
}
It's seems slow but it's working. No idea how to improve this solution :)
понедельник, 27 марта 2017 г., 16:11:53 UTC+3 пользователь Marlysson Silva
написал:
>
> You want select many images , highlight them and search at database by
> ids's images highlighted ?
>
> Real-time?
>
> Em segunda-feira, 20 de março de 2017 10:40:13 UTC-3, Scorpa escreveu:
>>
>> Hello folks!
>>
>> I'm struggling with one idea:
>> I want to make visual filter such as - you can click on any image from
>> predefined set (select from db) then this image will be highlited and now
>> interesting part:
>> i want to make select from database based on the id of this image like
>> for example: db(db.t_thing.id == request.vars.thing_id).select()
>> Then user can select another image and this id should be added to list.
>> I implemented tagging for this and took search function from this manual
>> https://www.packtpub.com/mapt/book/web-development/9781849515467/3/ch03lvl1sec43/efficiently-searching-by-tag
>>
>>
>> i made ajax
>> ajax('{{=URL('default', 'filter_thing', vars=dict(thing_id=thing.id))}}'
>> ,[], 'things');
>>
>>
>> but obviously this will overwrite variable.
>>
>>
>> So the question is - how to append variables to list ?
>>
>> Thank you !
>>
>>
--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to web2py+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
