In my job, (I'm just a student worker, nothing major), my boss wants me to figure out a way to display photos on our website. Here's the catch:
My questions are:
is there a better way to go about this? Am I complicating things?
(I considered using a backend database to store the URLs so it would be easy to add/remove from the dropdown menu options, but that's proved to be difficult to figure out)
if this is a good way, how do I make it work on mobile?
$(function() {
// WHEN THE BUILDING CHANGES
$('#buildings').on('change', function() {
// set val equal to BUILDING VALUE
var val = $(this).val();
// set room = ROOMS
var room = $('#room');
// if it's the BSB, show the wings - else hide them.
if (val == "BSB") {
$('#wings').show();
// Change the room numbers based on selected Wing
$('#wings').on('change', function() {
val = $(this).val();
room.find('option').not(':first').hide();
$('option', room).filter(function() {
if ($(this).attr('data-group') == val) {
$(this).show();
}
});
room.val(0);
});
$('#wings').trigger('change');
// must not be the BSB
} else {
$('#wings').hide();
// select room based on Building
room.find('option').not(':first').hide();
$('option', room).filter(function() {
if ($(this).attr('data-group') == val) {
$(this).show();
}
});
room.val(0);
}
});
$('#buildings').trigger('change');
});
function setImage(select){
var image = document.getElementsByName("image-swap")[0];
image.src = select.options[select.selectedIndex].value;
}
function resetImage(){
var image = document.getElementsByName("image-swap")[0];
image.src = "";
}
CLICK HERE FOR THE JSFIDDLE OF MY CODE
Related
I set up dependent filters mFilter (from the mSearch2 Modx component).
There is a script that works fine, provided that the product card has the option brand (Ford) and model (Ford Galaxy). That is, the name of the model - contains the brand
img1
When selecting a specific brand, select appears and option works fine
I have a large database of products and there is no way to change it (change the name of the model to make brand + model)
Question: How to create a condition that checks if there is a model (Galaxy) in the admin panel in the product options for a given brand (for example, Ford)?
img2
Sorry for my English, I hope my question is clear)
<script>
var modelFilter = {
// Our selectors
options: {
marka: '#mse2_tv\\|marka',
model: '#mse2_tv\\|model',
},
// Initializing the function
initialize: function() {
$this = this;
// We get the elements we need and save them as object properties
this.marka = $(this.options['marka']);
this.model = $(this.options['model']);
// We look into parameters of the address line in search of the chosen brand
var params = mSearch2.Hash.get();
// If there is no such brand there - we turn off models
if (params['marka'] == undefined) {
$this.disableModel();
}
// If there is such brand there - we turn on models
else {
$this.enableModel();
}
// We add an operator for brand change
this.marka.find('select').on('change', function() {
// If something is selected, we turn on models
if ($(this).val() != '') {
// We switch model to the first point 'Select from the list'
$this.model.find('option:first').attr('selected', true);
// Then we activate block
$this.enableModel();
}
// If nothing is selected, we turn off models
else {
$this.disableModel();
}
})
},
// Turning off models function
disableModel: function() {
// We look for all fields witn an unempty value
$this.model.find('option[value!=""]').attr('selected', false).attr('disabled', true);
// Then we hide the whole block
$this.model.hide();
},
// Turning on models function
enableModel: function() {
// We get the car brand
var marka = this.marka.find(':selected').text().replace(/\(.*?\)$/, '').replace(/\s+$/, '');
var re = new RegExp('^' + marka);
// Then we go through all models and check their names
$this.model.find('option').each(function() {
var $this = $(this);
// If the name does not fit, model should be turned off
if (!$this.text().match(re) && $this.prop('value') != '') {
$this.attr('disabled', true);
$this.hide();
}
// If it doesm model should be turned on
else {
$this.attr('disabled', false);
$this.show();
}
});
// Then we show the whole block witn models
$this.model.show();
},
}
// Script begins to work when the document is fully downloaded
$(document).ready(function() {
// And if on the page there are filters
if ($('#mse2_mfilter').length > 0) {
modelFilter.initialize();
}
});
</script>
I have issue in flask project, i need set up two js with one link if both was clicked or checked.
For example my data table do changes if clicked check box or selected from multi select some options.
But need make them both if selected and clicked (can be only selected or only just clicked). But need make and option for both
For make issue more clearly after get checked send value in the python function.
I think problem with url.
My js code.
// MULTISELECT
$('.selectpicker').on('change', function() {
selectedServices = $(this).val();
alert(selectedServices)
var url = '/api/VERSION/DATABALE/get?groupFilter='+ selectedServices
console.log('new URL'+url);
table.ajax.url(url).load();
table.ajax.reload();
});
// CHECK BOX
$('input[name="checkboxGroup1"]').on("click", function(){
console.log("Filter clicked")
var own = false;
var own = false;
// var id = parseInt($(this).val(), 10);
if($('#own').is(":checked")) { var f_own = true;}
else { var f_own = false; }
if($('#research').is(":checked")) { var f_research = true;}
else { var f_research = false; }
var url = '/api/VERSION/DATABALE/get?f_own='+ f_own +'&f_research='+ f_research
console.log('new URL'+url);
table.ajax.url(url).load();
table.ajax.reload();
});
So need somehow combine this js. IF only selected options send this selectedServices if checked checkbox send only values from checkbox js. IF selected or clicked both send both values.
I try combine like this
$('.selectpicker').on('change'); or ('input[name="checkboxGroup1"]').on("click", function(){
selectedServices = $(this).val();
console.log("Filter clicked")
var own = false;
var research = false;
if($('#own').is(":checked")) { var f_own = true;}
else { var f_own = false; }
if($('#research').is(":checked")) { var f_research = true;}
else { var f_research = false; }
alert(selectedServices)
var url = '/api/VERSION/DATABALE/get?groupFilter='+ selectedServices + '&f_own='+ f_own +'&f_research='+ f_research
console.log('new URL'+url);
table.ajax.url(url).load();
table.ajax.reload();
});
I dont getting any error, but it not change date in my datatable too, when i combine my js code
Any idea how to solve it? all help will be appreciated
I'm trying to build a to-do list app (beginner here), and have some difficulties in storing the values inputted so that I can store this locally, so once the page is reloaded, it's still saved. You input an item and it gets stored in task, and then it's checked if it's deleted or checked-off, and I think appended to an array, so I'm not sure if I should be iterating over this. Here is the code: (Thank you in advance!)
$(".txtb1").on("keyup", function (e) {
console.log("sdfsdfsd");
//13 means enter button
if (e.keyCode === 13 && $(".txtb1").val() != "") {
console.log("entered");
var task = $("<div class='task'></div>").text($(".txtb1").val());
var del = $("<i class='fas fa-trash-alt'></i>").click(function () {
var p = $(this).parent();
p.fadeOut(function () {
p.remove();
});
});
var check = $("<i class='fas fa-check'></i>").click(function () {
var p = $(this).parent();
p.fadeOut(function () {
$("#task2.comp").append(p);
/* No stupid appendChild */
p.fadeIn();
});
$(this).remove();
});
task.append(del, check);
$("#task1.notcomp").append(task);
//to clear the input
$(".txtb1").val("");
//task needs to be set
localStorage.setItem('task', task.text());
var data = localStorage.getItem('task');
localStorage.removeItem('$task');
/* ------------------------ */
//Other option: Store data
localStorage.setItem('task1', JSON.stringify(task));
//Get data
var data = JSON.parse(localStorage.getItem('task1'));
//Remove data
localStorage.removeItem('task1');
}
}
I am trying to filter one dropdown from the selection of another in a Rails 4 app with jquery. As of now, I have:
$(document).ready(function(){
$('#task_id').change(function (){
var subtasks = $('#subtask_id').html(); //works
var tasks = $(this).find(:selected).text(); //works
var options = $(subtasks).filter("optgroup[label ='#{task}']").html(); // returns undefined in console.log
if(options != '')
$('#subtask_id').html(options);
else
$('#subtask_id').empty();
});
});
The task list is a regular collection_select and the subtask list is a grouped_collection_select. Both which work as expected. The problem is that even with this code listed above I can't get the correct subtasks to display for the selected task.
NOTE: I also tried var tasks=$(this).find(:selected).val() that return the correct number but the options filtering still didn't work.
Try something like this instead (untested but should work).
$(function () {
var $parent = $('#task_id'),
$child = $('#subtask_id'),
$cloned = $child.clone().css('display', 'none');
function getParentOption() {
return $parent.find('option:selected');
}
function updateChildOptions($options) {
$child.empty();
$child.append($options);
}
$parent.change(function (e) {
var $option = getParentOption();
var label = $option.prop('value'); // could use $option.text() instead for your case
var $options = $cloned.find('optgroup[label="' + label + '"]');
updateChildOptions($options);
});
});
Ok, so my code is this so far:
$( document ).ready(function() {
// setup the initial display on page load
var menu_state = $.cookie('atd_gridlist');
// listen for the clicks
$('.gridselect').click(function() {
$.cookie('atd_gridlist', 'grid'); // update (or set) the cookie
$(".grid").css("display", "block");
$(".list").css("display", "none");
});
$('.listselect').click(function() {
$.cookie('atd_gridlist', 'list'); // update (or set) the cookie
$(".grid").css("display", "none");
$(".list").css("display", "block");
});
});
I need to also check to see if the cookie KEY has already been set, I think a case statement would work but I am not sure how to make the case read just the cookie atd_gridlist key values...
If it is gridselect I need to show the grid div and hide the list div, if it is listselect I need it to show the list div and hide the grid div, if it is not set at all, I want grid div loaded by default and hide the list. I also would like to expire the div every 7 days.
Any help in the right direction is appreciated. Thanks!
Would something like this do the job?
$(function() {
var grid = $('.grid');
var list = $('.list');
var stateCookie = 'atd_gridlist';
var SetStateCookie = function(value) {
$.cookie(stateCookie, value, { expires: 7, path: '/' });
}
var ShowByState = function(state) {
state = state || 'grid';
SetStateCookie(state);
if ('grid' === state) {
grid.show();
list.hide();
} else if ('list' === state) {
grid.hide();
list.show();
}
}
$('.gridselect').click(function() {
ShowByState('grid');
});
$('.listselect').click(function() {
ShowByState('list');
});
ShowByState($.cookie(stateCookie));
});