I have a series of check boxes, jquery menu, auto complete and input boxes. How would you go about setting a variable that will display in a div with the values of everything that is selected, checked or typed?
I have tried
str += data.id;
For example. Which works for everything involved, except when changing the selection it just adds on to the end.
$('#txtDesc').html( str );
Is what I'm using to place it into the div and using the on select option in jQuery menu to trigger it.
I'm using the
str += checkedValue;
When a checkbox is checked but run into the same problem.
I know what I want it to do but I lack the knowledge to do it or even to search for it because I don't think I'm calling it the right thing.
I'm adding a fiddle, however for some reason it isn't working at all in the fiddle.
http://jsfiddle.net/tjje63oh/2/
So basically here is what is supposed to happen.
You select a unit, it goes down into the div, then you select a reason, it goes after the unit, then you select a location which goes after the reason.
If you change a unit, it should remove the one you have and replace it with the new one, but still read in order: unit, reason, location
So to me it seems like you want to figure out values of things that have changed in the html and display them somewhere in a "dig" which I assume you meant to mean as "div".
You can do stuff like this and attache is a fiddle with other simple examples
HTML
<input type="text" value="0" />
JS
$( "input[type='text']" ).on( "keypress", addValueToStuff );
http://jsfiddle.net/h13nLr3v/
Related
I'm fairly new to this web-programming thing, and I'm having some trouble with an onclick event. I don't even know if using "onclick()" is the best thing to do, but it has been working so far for me.
At this moment, I have a page with a div in which I load another page. This content varies depending on hash changed when I select options from a toolbar, using this piece of js
function loadcontent(toload){
$('#browsediv').load("content/addimagecontent.php?"+toload);
}
Every js function is called from the main page, not the content one.
Now, my problem is that, in the loaded content, I have several pages of results, and I have a div with the word Next printed into it, and an onclick event that should make the page change its page attribute:
echo "<div onClick='loadcontent(\"page=".$nextpage."\")'>Next</div>";
I also have the same thing to lead you to the previous page.
Once I go to the page, I see everything as should, but if I click either on "Next" or "Previous", it doesn't do anything the first time.
Any subsequent times I click on any of those, it works perfectly, even if the first thing I click is Next and then I click Previous or viceversa.
I've been looking around but no-one seems to have answered anything that adjusts to my issue, if someone has, please forgive me, as English is not my mother tongue and I sometimes don't know the best way to look for something.
Thanks for reading :)
Instead of adding an onclick, add an id attribute. Then with jquery you can do something like this:
<div id="yourDiv">Next</div>
$("#yourDiv").click(function() {
loadcontent(toload)
})
I'm not quite sure if this is "legal" but you can add the $nextPage variable as an attribute too.
<div id="yourDiv" data-page="<?php echo $nextPage;?>">Next</div>
Then you would use the following
$("#yourDiv").click(function() {
var page = $(this).attr('data-page');
loadcontent(page);
})
So I have a combobox list populated with icons then a small description. Originally when I would select one item it would then put the html into the display as a raw value. Obviously having RAW html in the display wasn't what i wanted so i tried stripping the image tag and using the other information as the raw value.
This worked for display but the display and the value are different. (using a hiddenName field etc) and setting the raw value not only updates the display field but also updates the value. This is not acceptable.
On selecting an item I parse out the image tag and would like to ONLY update the display field. The problem here is there is no method i can find to ONLY update the display field and leave the hidden value alone.
How can i update the display field without messing with the hidden value field?
Update: I tried this....so close but no cigar...
select: function() {
console.log(this.el.dom.value);
this.el.dom.value = 'test';
}
This updated the display field to be 'test' but then for some magical reason when i click off of the combobox it sets my hidden value equal to my display value....any ideas?
Update 2: I have also tried suspending all events on the combobox by putting this.suspendEvents() at the end of the select listener....still no go. I cannot for the life of me figure out why the hidden value gets changed upon box blur. I have tried returning false in blue and change listener events.....preventDefault has no effect.
if you take a look at this link:
http://docs.sencha.com/extjs/4.2.1/source/ComboBox.html#Ext-form-field-ComboBox
there is function **setValue: function(value, doSelect) {...**
it has below lines somewhere::
me.setHiddenValue(processedValue);
me.setRawValue(me.getDisplayValue());
These lines are doing a magical stuff which you mentioned.
Now, to solve your problem, I guess you can do this:
select: function() {
console.log(this.el.dom.value);
var actualValue = this.el.dom.value;
this.el.dom.value = 'test';
this.setRawValue(actualValue );
this.setHiddenValue(actualValue);
}
Hope this helps, I have not tested the code though!
I am having some trouble with some javascript and how it can control the html "text box".
First, here's what I have;
javascript:
function UpdateOrder()
{
// enable/disable appropriate buttons
document.getElementById("reset").disabled=false;
document.getElementById("add").disabled=false;
document.getElementById("submit").disabled=false;
document.getElementById("edit").disabled=false;
document.getElementById("update").disabled=true;
// Show display box, 'DispCurOrder'
document.getElementById('all_labels').disabled=true;
}
function EditOrder()
{
// enable/disable appropriate buttons
document.getElementById("reset").disabled=true;
document.getElementById("add").disabled=true;
document.getElementById("submit").disabled=true;
document.getElementById("edit").disabled=true;
document.getElementById("update").disabled=false;
document.getElementById('all_labels').disabled=false;
}
The Idea is simple... I have some buttons and inputs to generate a 'line' of text that get's dumped to the disabled text box. If the operator notices that they made a type-o or want to change something, they click on 'edit order' and it disables all the regular buttons, and enables the text box and 'update' button. The 'update order' button reverses this.
Now, when I just use the add lines to the text box, all works well. You can see each line get appended to the text box (there's another java function that does a bunch of error checking and such, but the crux is that it takes the contents of the text box, parses it on the "\n" to an array, then appends the new line of text. It then takes the array and puts it all together as a new string and puts it back into the text box. Here is that portion without all the error checking stuff;
function AppendOrder()
{
// let's set up an error flag.
var AppendError="";
var str1=document.forms["MyForm"].DataEntry1.value;
var str2=document.forms["MyForm"].DataEntry2.value;
if( /* checking variable str1 for errors */)
{
AppendError="Error in str 1 here";
}
if( /* checking variable str1 for errors */)
{
AppendError=AppendError+"Error in str 2 here";
}
// Display the error message, if there are no errors, it will clear what was there.
$('#AppendStatus').html(AppendError);
if(AppendError=="")
{
// it's all good, update the display
// create line of text
curEntry=str1 + " -- " + str2;
// let's get the current order into a list
str=document.getElementById('all_data').innerHTML;
if(str1=="Empty")
{
// make curOrder = to 1 element array of curEntry
var curOrder=[curEntry];
}
else
{
// parse str1 into an array and parse it to curOrder.
// Then push curEntry on the end.
var curOrder=str1.split("\n");
curOrder.push(curEntry);
}
// now we should have an array called 'curOrder[]'. Let's show it
// on the web page.
$('#all_labels').html(curOrder);
}
}
Now, the problem that I'm having is that after I add a line or two (or more) to the display using the 'add' button and then go into the 'edit' mode (where the text box is enabled) and I make all my changes, the 'add' button doesn't work.
Oddly enough, when I press the 'reset' button (which is just a reset button) it then shows all the adds I did after the edit, and the edited stuff is gone.
Now... to the question... is there something I'm not understanding about the text box? Is there some trick I need to do to get it to work? Am I going about this all wrong? Should I be using a different tool for this other than the 'textbox'?
Any help is greatly appreciated!!
Greg
Found the typo in your jsFiddle.
The first thing that I did was to add:
alert('hi there');
to the very top of the script, inside the $(document).ready() wrapper. Note that on jsFiddle you cannot see the document.ready wrapper, it is invisibly included, so just put the alert at top of javascript block as I did (link to my new jsFiddle is at bottom of answer)
Next, I noticed that you are enabling/disabling several controls by referencing them individually by ID. You can reference several controls at one time if they share the same class, so I invented the class="orderentry" and added that attribute to each of those controls. This removed 8 lines of code, which made troubleshooting easier.
Then, I began deleting/undeleting. First, I deleted everything in the javascript panel except alert('hi there');, and ran the jsFiddle. The alert popped up. Great. So I used Ctrl+z to undelete everything. Next, I selected everything EXCEPT the next block of code, and deleted the selection. I ran the jsFiddle, and again the alert popped up.
I continued deleting/undeleting until I found out where the alert no longer worked -- and that revealed the offending code block. Just had to carefully study the syntax in that specific area and found the error:
$('#txtOrder').attr({'disabled':'disabled')}; <== ERROR: note final parentheses
instead of
$('#txtOrder').attr({'disabled':'disabled'}); <== CORRECT: note final parentheses
Hope this helped, good luck on the rest of your project.
Here is the corrected jsFiddle
You didn't share your HTML, so I made assumptions about what your markup looks like.
Working jsFiddle here
The above jsFiddle is a much simplified version of what you are creating. Obviously, it is very different from what you have done so that I could create it quickly.
Observe how I made certain things happen with jQuery; take what is useful and ignore the rest.
Specifically, you can see how I initially disabled the textarea control:
$('#txtArea').attr({'disabled':'disabled'});
Re-enabled the textarea control for editing, while also hiding the Edit button and displaying the Save button:
$('#txtArea').removeAttr('disabled');
$('#btnSave').show();
$(this).hide();
Importantly, this is how I ensure each addition adds to (rather than overwriting) existing content:
var ord = 'Requested By: ' + $('#txtReq').val() + '\r\n';
Very likely you already know many (most?) of the things I am pointing out, but I have no idea what you know so, again, keep the one or two things you find useful and ignore the rest. I only hope I've managed to hit on the bit that has you stumped at the moment.
I very rarely recommend W3Schools for anything, but look here for their excellent summary / reference of jQuery selectors, events, methods. (Keep hitting Next Chapter to cycle through all pages of this reference).
I want to accomplish one simple thing using jQuery. I want to filter some table data on a page and there is a search box on top of the same page.
On every keystroke, I want to hide each row that does not match the search field. I want to process only client side data. How can I accomplish this?
Can anyone please give some example code of this? Like, how can I grab each keystroke and hide the required elements? I want something like this.
You need to use onkeydown, then grab it's val(), then find out if what the value :contains, matches up against whatever elements your using to compare it against, then hide() whatever elements do not match this condition and voila.
HTML:
<input type = "text" id="theText">
JQuery to get it's current value and display it on the console:
$('#theText').onkeydown(function(){
var x = $('#theText').val();
console.log(x);
});
It's a little old now, but I've used this plug-in in a project before and it worked great:
https://github.com/riklomas/quicksearch
I'm creating a data entry app for some in-house stuff.
My team needs to enter info about "items" which can have many "categories" and vice versa.
I need a quick way to let them enter an arbitrary amount of categories.
Here's my idea:
On the item entry page, I'll have it so that initially there's one text input for "categories" and if it's tabbed out of while it's empty, the input field is deleted (unless it's the only one) and focus skips to the next field. If it's not empty when it's tabbed out of and if it's the last input field in the array, then an additional "category" text input will be added and focused.
This way people can enter an arbitrary amount of categories really quickly, without taking their hands off the keyboard, just by typing and hitting tab. Then hitting tab twice to denote the end of the list.
First of all, what do you think of this interface? Is there a better way to do it?
Second of all, is there a jQuery (or something) plugin to do this? I've searched but can't find one. I searched scriptaculous/prototype and mootools too, with no luck.
I would obviously rather use something tried and tested than roll my own.
Any and all advice appreciated
First I'll try to address the problems commented on nickf solution.
To set the focus on the newly created input $copy.find(":text").focus(); will not work. The jQuery focus method only triggers the event, but does not call the underlying focus method.
You can set the focus with setTimeout(function(){$copy.find(":text").get(0).focus()}, 10); but:
setTimeout is needed in firefox or strange things will happen with the blinking cursor.
IE7 needs another input to focus when tabbing. I haven't found the way to set the focus on an input if the focus goes to the address bar. I suppose this will not be a problem because you will need at least a submit button.
To control shift-tab I've been trying to track the focused element, in order to skip the blurHandler when the focused element is a previous input, but the resulting code is really ugly so I'll post this and look for a better solution.
And last, you're asking what we think of this UI, and I think that a comma separated list of categories is easier to code an to fill in. :-)
it's actually not too difficult to implement that, even with vanilla JS (ie: no jQuery, prototype, etc), but everything is easier with jQuery, so I'll have a go at it using that:
Assuming a structure like this:
<form id="myForm">
<div class="inputRow">
<input type="text" name="myInput[]" />
</div>
<div class="inputRow">
<input type="text" name="myInput[]" />
</div>
...
</form>
Here's the JS
$('#myForm :text').blur(onBlurHandler);
function onBlurHandler() {
$row = $(this).parent();
if ($row
.nextAll(":has(:text)") // all following divs with a text element
.length == 0 // but there aren't any, we're on the last one
) {
if ($.trim($row.find(":text").val())) { // the text box isn't empty
$copy = $row.clone(true);
$copy
.find(":text") // get the new text box,
.val('') // remove any text in it
.blur(onBlurHandler) // and add the event handler (is this necessary?)
;
$copy.insertAfter($row);
} else if ($row.prev(':has(:text)').length) { // the text box is empty, and this one isn't the first row
$row.remove(); // get rid of the row.
}
}
}
Response to comments:
thanks for the answer! i've tried it but it doesn't seem to work as intended. i'm on mac firefox. if i tab off the last field, it adds the new one but focuses the address bar. i tried adding: $copy.find(":text").focus(); after the insertAfter line, but it doesn't change anything. any ideas?
also if i shift-tab the blurhandler doesn't know i'm going in the opposite direction. is there any way around that?
Hmm, I hadn't thought about that. What you could try doing is to put an element after all your text fields which can take focus (like a textbox which is rendered off-screen, eg: margin-left: -10000px). Add an onfocus handler onto that to see if the last row is empty, and if it is, then it would have been added just then by the onBlurHandler function, so pass the focus back to the last row. If the last row isn't empty, then pass the focus onto the next element (your submit button, probably). If there are issues with the last row not existing in the DOM yet, then put the above into a timeout.
(If this actually works) this should let your users tab backwards and forwards without hassle.