I have a big grid of values. At first, each values was a drop down. But it was very slow to load (+15 sec).
So I would like to use text in my grid (a regular table ) and use a dropdownlist on the double click of the text .
Is this possible ?
Also, is it possible to use a telerik drop down ?
Here's an example : A grid containing color (ex: blue, blue, red, yellow....).
When double click on the word, a dropdown will replace the selected text. The dropdown will contain all available color : blue, red, yellow. After that, when the value is selected, the drop down would disapear and the text will display the new value.
So far, I got this :
$(function () {
$('.colorGrid').dblclick(function () {
debugger;
$(this).html("<select class=\"resultMenu\" id=\"resultMenuID\" size=\"1\"></select>");
$(this).children("select").append('<option value=1>Black</option>');
$(this).children("select").append('<option value=2>Red</option>');
$(this).children("select").append('<option value=3>Blue</option>');
$(this).children("select").append('<option value=4>Yellow</option>');
});
$('#resultMenuID').change(function (event) {
debugger;
$(this).html("<td>test</td>");
});
});
I'm close to my goal. Now I need to put back the result of the selected in a td tag, and the select must disappear! The change select function is never call. Does anyone know why?
If it takes +15 seconds, then you definitely have to go for AJAX or hardcoding the dropdownvalues in javascript strings.
As told by MrOBrian, I can't provide you the code solely based on your one or two line problem. You have to upload your existing problem code to get a solution from here. However I can give you an idea.
Say this is your colour block
<div id="colour-block-list">
<div id="red-block" class="colour-block">
Red
</div>
</div>
You have to add an onclick handler.
$(".colour-block").click(function(){
//call your ajax or get values from hard coded javascript string
$(this).html("<select></select>");
$(this).children("select").append(list_of_options);
});
Related
I currently have made a way so the user can add another text field to the form by pressing on a 'add_another' div, this uses basic JS so when the user presses on the div 'add_another' the div 'author_2' is toggled.
I would like to make it so that when the user presses on the 'add_another' div for a second time it shows 'author_3' div, and when they press 'add_another' again, it then shows 'author_4'. I have put all the CSS and HTML divs in place to support this, I am just trying to adapt my code so it shows one div after another, rather then toggling a single div.
Here is my JS:
<script>
$(document).ready(function() {
$('.add_another').on('click', function(){
$('.author_2').toggle();
});
});
</script>
I have tried altering this code, however with no luck.
I haven't added my HTML as it is just 4 divs, 'author_1' 'author_2' ... 3...4
Thankyou for your help
There are two solutions to Your problem.
First one - use static code
It means the max author count is 4 and if user gets to 4, this is it.
If so - You need to store the number of authors already shown.
var authors_shown = 1;
$(document).ready(function() {
$('.add_another').on('click', function(){
authors_shown++;
if (!$('.author_'+authors_shown).is(":visible")) {
$('.author_'+authors_shown).toggle();
}
});
});
But there is also a second - more dynamic option.
What if user wants to input 10 or 20 authors? You don't want to pre render all that html code and hide it. You should clone the div and change its id or if the (HTML) code (for another author) is not too long, you can render it within JS code.
var div = document.getElementById('div_id'),
clone = div.cloneNode(true); // true means clone all childNodes and all event handlers
clone.id = "some_id";
document.body.appendChild(clone);
If it's a form, then change names of input fields to array as author_firstname[]
Also You can store number of added authors in another hidden field (so you know how long to loop the form fields on the server side.
The second option is a bit more complex and longer, but way more dynamic.
You should make another div when clicked on add_another:
something like this:
<script>
$(document).ready(function() {
$('.add_another').on('click', function(){
$('<div><input type="text" name="name[]" /></div>').appendTo('.your_container');
});
});
</script>
as you see, input's name has [] which means you should treat with the inputs as an array.
let me know if you got any further questions
good luck.
Good afternoon Stack Overflow,
I'm inexperienced when it comes to coding in general and I've been having a problem that's doing my head in!
If you'll allow me to set the scene...
The section of the project I am currently working on involves a user picking items from a warehouse in order to fulfil a shipment and in some cases they have to pick the same item from various locations, when that needs to be done, the small "!" type icon appears next to the item.
The user then can click on the icon and choose which locations they will be retrieving the stock from, they then press confirm on the modal and when it closes it sets the text back to blue and hides the icon.
The part I am having trouble with is that once all the locations have been established, the order needs to be processed and this requires a button to be clicked on, which I only want to appear once all the "!" icons are hidden.
I know there are alot of questions based on for loops and images checks and believe me when I say I've tried hard to figure this out myself and I've tried different approaches:
ShowProcess = false
for (i = 0; i<Picker; i++) {
if ($('#MultiLocIcon'+i).is(':visible')){
ShowProcess = true
}
if (ShowProcess == true) {
$('#ProcessConfirm').show()
};
};
This obviously wouldn't work because its setting the first variable in the list to "true" and will always read it as true, therefore always showing the image, even if the "!" icon still exists in other rows.
I also tried using .each() to test each rows text color of a specific but also had no luck:
var table = $('#RequestedItemsTable');
table.find('tbody > tr').each(function(){
if $('#Desc').css('color') == '#0000FF'){
//do something
I feel like my experience is letting me down as I still have a lot to learn and have a suspicious feeling that the solution is going to be really easy, but then again, its only easy if you know how.
If anyone could take the time to help me with this problem or offer me any advice, I'd be really grateful.
Here is a section of my code which might be useful:
Modal "Confirm" button:
//CONFIRM Button which will submit final picks.
'Confirm': function() {
//Reset the length loop
length = undefined;
//Remove "Multiple Location" icon from the row.
$('#icon'+id).hide();
//Change text colour back to blue to have visual confirmation that item is ready for picking
$('#Desc'+id).css('color', '#0000FF');
$('#QtyReq'+id).css('color', '#0000FF');
$('#QtyinStock'+id).css('color', '#0000FF');
$(this).dialog('close');
The "!" Icon:
<td id= "MultiLocIcon<?=$i;?>"><?if($row->Count_Location > 1)
{?><img src="<?=base_url();?>public/css/images/error.png" alt="LocPick" title="Multiple Locations" style="cursor: pointer;" id= "icon<?=$i;?>" onClick="$.LocPick(<?=$i;?>);"/><?}?></td>
Basically just need to know how my image can show once the loop checks and knows that the "!" icon is hidden from every possible row.
Thank you for your patience.
You'll need to add a second check in your modal logic, perhaps after your .hide():
//Remove "Multiple Location" icon from the row.
$('#icon'+id).hide();
$('img[id^=icon]:visible').length || $('#ProcessConfirm').show();
What this does is combines the :visible pseudo-selector and a regex selector for all img tags with id starting with "icon". This assumes you won't have any other unrelated image tags with an id like "icon*". If the length is 0, it will go ahead and show the #ProcessConfirm element.
simplest solution I would give is to add a class warning to all the table column which has warning icon & then check for visibility of the same.
if($('.warning:visible').length === 0){
//all warning icons are hidden
}
What I would do is based off your HTML, select all the alert icons, and do a :visible psuedo selector on it. This will return all the visible alert icons, if there are none in the array, you know none of them are visible. You will need to identify them with a class, such as .alert:
if( $(".alert:visible").length === 0 ){
// Do your code in here for no visible alert icons!
}
When user clicks confirm on modal you should run a check on how many icons are still visible, and if the amount is 0 then show the button, like this:
// This searchs for every <td> with an id that contains '#MultiLocIcon'
// Then checks if the amount of those which are visible is 0 and do something
if ( $('td[id*=MultiLocIcon]').not(':visible').length === 0 ) {
$('#ProcessConfirm').show()
}
Here is the fiddle http://jsfiddle.net/Dano007/b11xarpp/5/
To be clearer. In the drop down box, I'd like two options (text). when the user clicks one of these options the relevant function results are returned. Like see when clicking the buttons, which are for example only.
I've added the drop down box, but cannot see how to bind the results from the two queries to it.
Could I use something like ?
$("select#FriendsConnected option.filter-prop2").show();
$("select#FriendsConnected option.filter-prop1").show();
Feel like I've hot a brick wall with this and ideally would like some help with the fiddle to move past it.
In your HTML, change select id to a valid css id, something like: s_FriendsConnected
<select name="huge" class="btn-group select select-block mbl select-multiple" id="s_FriendsConnected">
In your Javascript, change the select = getElementByID(FriendsConnected)'s ID to your new select id: s_FriendsConnected
var select = document.getElementById("s_FriendsConnected");
This solves it on my local machine... will update with the jsfiddle in a while..
EDIT:
Here's the jsfiddle. : http://jsfiddle.net/b11xarpp/7/
UPDATE:::
As per your requirement, in this new jsfiddle, I've removed the buttons and placed option tags with values in the html.
In Javascript, I've removed the var select = document.getelementbyid() function.
Also, I've replaced your click functions for the buttons with on Change event to the select menu:
$('select#s_Friends').change(function(){
var selection = $(this).val();
if(selection=='f_connected')
FriendsConnected();
else if(selection=='f_requests')
FriendsPending();
});
That's mostly all. Here's the updated jsfiddle: http://jsfiddle.net/b11xarpp/8/
I'm using jquery to display the line beside the textarea.
from this link:
http://alan.blog-city.com/jquerylinedtextarea.htm
Is there any way to change the selected line, so every time the user goes to the next line the line selected changes to the current line.
$(function()
{
// Target all classed with ".lined"
$(".lined").linedtextarea(
{
//change it from 1 to the current line that the user on.
selectedLine: 1
});
// Target a single one
$("#mytextarea").linedtextarea();
});
yep,
function selectLine(n) {
if (n<1) return false; //If the total number of lines is known it is worth checking you are not above it either
$(".codelines .lineno.lineselect").removeClass("lineselect")
$(".codelines .lineno").eq(n-1).addClass("lineselect");
}
with a lot of jQuery plugins (when they are full on jQuery widgets) you can use the "options" method to do this kind of thing, like $(".lined").linedtextarea("options",{selectedLine: 6}) but it doesn't look like this has been turned into a widget. This solution is kind of reverse engineered from the fact that the mod uses the lineselect class to control which line number is highlighted.
We do some checking to make sure we will use a sane value, remove the highlight class from any lines that have it already, and add it to the n-1th line number div (-1 because eq is Zero based).
This won't work if you have multiple lined text boxes on the one page. If that's the case we need to add another parameter to define which one to target and some logic to handle that.
In accordion I have two fields one is State 1 and other is State 2. I want to change the border colors of the text boxes. When I will click on the State 1 it should make some text boxes boundary red while others should be gray. If click on State 2 all the textboxes should be gray and the one of them should be red (the logic for getting the selecting the box to be red I am leaving for the time being).
I have written the following code to achieve this. The only problem I have is if I am using if I click on the first option of the code i.e. State 1 the code works fine while if I click on the second option State 2 the code does not work (i.e. the required text box is not red and all other are not gray)
$("div a").live('click', function() {
if($(this).text()=="State 1"||selected_accord=="State 1")
{
$('input').css('border-color', 'gray');
if(fromi==1)
{
document.getElementById(input_from[0].id).style.borderColor = "red";
}
}
if($(this).text()=="State 2"||selected_accord=="State 2")
{
$('input').css('border-color', 'gray');
if(userkeyi==1)
{
document.getElementById(input_userkey[0].id).style.borderColor = "red";
}
}
});
This code works fine. Only change I did was remove selected_accord. I was not able to make the boxes red by default so I used this variable. But for the other accord option this variable was not defined. That was the problem with the second option not working.