Read from values from hidden field values in Jquery? - asp.net

Last two nights I am struggle with below code. The problem is I need to remember expanded (or) collapsed toggles sections and on page reload I have show them as is expanded (or) collapsed.
$(function() {
$('tr.subCategory')
.css("cursor", "pointer")
.attr("title", "Click to expand/collapse")
.click(function() {
$(this).siblings('.RegText').toggle();
});
$('tr[#class^=RegText]').hide().children('td');
})
I found small solution in another forum like this. Storing ".subCategory" id values in hidden field in commas-seperated values.
In Asp.net page:
<input id="myVisibleRows" type="hidden" value="<% response.write(myVisibleRowsSavedValue) %" />
In .js:
var idsStr = $(#myVisibleRows).val();
Now My question is: How to store multiple values (.subCategory id) in hidden field when I click on toggle?. also How to parse them back and iterate them get ids and show toggles?. I am very very new to jQuery. Please some one help me out from this.

Passing this kind of values in a form isn't probably the best thing to do it. I'd suggest using cookies to store expanded sections id's or something similar. It's much easier to implement and you are not passing unimportant form data between requests. If you want to store multple values you can serialize them (easiest thing: use join function in JS) before you store them and deserialize (split) after reading it from a cookie.

Related

What is the most efficient way of filling in details on a web form?

Take a standard web page with lots of text fields, drop downs etc.
What is the most efficient way in webdriver to fill out the values and then verify if the values have been entered correctly.
You only have to test that the values are entered correctly if you have some javascript validation or other magic happening at your input fields. You don't want to test that webdriver/selenium works correctly.
There are various ways, depending if you want to use webdriver or selenium. Here is a potpourri of the stuff I'm using.
Assert.assertEquals("input field must be empty", "", selenium.getValue("name=model.query"));
driver.findElement(By.name("model.query")).sendKeys("Testinput");
//here you have to wait for javascript to finish. E.g wait for a css Class or id to appear
Assert.assertEquals("Testinput", selenium.getValue("name=model.query"));
With webdriver only:
WebElement inputElement = driver.findElement(By.id("input_field_1"));
inputElement.clear();
inputElement.sendKeys("12");
//here you have to wait for javascript to finish. E.g wait for a css Class or id to appear
Assert.assertEquals("12", inputElement.getAttribute("value"));
Hopefully, the results of filling out your form are visible to the user in some manner. So you could think along these BDD-esque lines:
When I create a new movie
Then I should see my movie page
That is, your "new movie" steps would do the field entry & submit. And your "Then" would assert that the movie shows up with your entered data.
element = driver.find_element(:id, "movie_title")
element.send_keys 'The Good, the Bad, the Ugly'
# etc.
driver.find_element(:id, "submit").click
I'm just dabbling in this now, but this is what I came up with so far. It certainly seems more verbose than something like Capybara:
fill_in 'movie_title', :with => 'The Good, the Bad, the Ugly'
Hope this helps.

Is this a KnockoutJS bug or am I doing multiple bindings wrong?

I've been working my way through the KnockoutJS documentation and tried to modify example 3 of the "Writeable computed observables" section in this page.
The example basically shows a textbox and displays a message if the user enters a non-numeric value to the textbox. I tried to modify the code so that the textbox has a pink background when the message appears.
The problem is when you enter a invalid value the textbox turns pink as expected but the value you entered is replaced with what was originally there. I have no idea why this behavior is occurring since everything worked fine before I added the style binding to get the pink background. Try removing the style binding and notice how the behavior changes when you enter an invalid value.
What's going on?
The code is below or try out this jsfiddle.
<p>
Enter a numeric value:
<input data-bind="value: attemptedValue
,style: {backgroundColor: lastInputWasValid() ?
'transparent' :
'pink' }"/>
</p>
<div data-bind="visible: !lastInputWasValid()">That's not a number!</div>
function MyViewModel() {
this.acceptedNumericValue = ko.observable(123);
this.lastInputWasValid = ko.observable(true);
this.attemptedValue = ko.computed({
read: this.acceptedNumericValue,
write: function (value) {
if (isNaN(value))
this.lastInputWasValid(false);
else {
this.lastInputWasValid(true);
this.acceptedNumericValue(value); // Write to underlying storage
}
},
owner: this
});
}
ko.applyBindings(new MyViewModel());
EDIT: Here's another fiddle with the style binding removed. Try appending the letter 'a' and taking focus out of the textbox. Notice how the letter 'a' stays there. Try that with the original fiddle textbox and notice how it is removed. The only change between the two fiddles is the presence of the style binding.
If the value is NAN than it is never written to the model, therefore the input will be updated to the existing value of the model when the onblur event is fired.
this.acceptedNumericValue(value); // Write to underlying storage
Is the code that updates when the value is numerical. You can see that it is not in the else block.
So I sent an email to the KnockoutJS user group and got a reply in about 7 hours (not too shabby).
Sadly, Google Groups confuses me and I have no idea how to reply to the fellow who cleared up my question to tell him to come on over here and post his answer so I guess I'll do it for him. All credit goes to John Earles of the KO user group.
It make sense to me.
In your example without the style, Knockout does not have to re-render
your input (only the error), so the value stays the same.
In your example with the style, Knockout does have to re-render your
input (to add the style), so BOTH bindings execute and it reads the
value - which is the last accepted value.
Here is a version that saves the attempted value into one of two
observables, and reads from the appropriate one based on
lastInputWasValid:
http://jsfiddle.net/jearles/VSWfr/

querying a hidden field in admin page

I have 2 hidden fields called hdnBrId and hdnCmdAction.
I set them with javascript calls from their grid row cells eg hdnCmd is set to "Edit" and the row id is set similarly. and then a post from jquery
When i try query their values (before the if or before any javascript) (even with an echo) eg
echo $_POST['hdnCmd'];
I get nothing
and
if($row->BrId == $_POST["hdnBrId"] and $_POST["hdnCmd"] == "Edit")
{
echo "in edit mode";
obviously is not working.
Anybody know what to here ?
thx
Basically it seems on "submit" or "postback" because of the stateless nature of web, it will be lost, though it should still be query-able before resubmitting to the browser,...using $_POST["hdnThingy"].
Here, what happened was they were not being set correctly.
to do so correctly (in this case, I generate a html table of rows with db data and..
<input type="hidden" name="hdnThingy" id="hdnThingy" **value="<?php echo $Sel;?>"** >
I use id and name as there is some javascript and jQuery script which interrrogates these hidden fields for different reasons.

How can I implement a "Related questions" feature like the one on Stack Overflow?

I want to implement a feature similar to the "Related Questions" list shown when asking a question on Stack Overflow. I like how the related questions populated when the Title is filled in.
I am using ASP.NET and jQuery. How might I implement something like this? Can anyone point to examples?
I looked at the source of the ask question page and I don't see any onblur or focus calls.
As a matter of fact there is a call. This bit of code is responsible for the GET request which is sent to the server ob 'blur' of the #title input element (it's in the source of the page, close to the top):
$().ready(function() {
$("#title").blur(function() { QuestionSuggestions(); });
});
function QuestionSuggestions() {
var s = $("#title").val();
if (s.length > 2) {
document.title = s + " - Stack Overflow";
$("#question-suggestions").load("/search/titles?like="
+ escape(s));
}
}
I was thinking of implementing something similar, although this may not be an answer to your question, here is what I was planning to do:
When a question is saved parse it and create a topic word to uniqueid (of the post) mapping and save in database indexed by word.
When a new question is typed and the focus go out of the title, make an AJAX call with all the relevant words from the database and match all the similar ids that is common (so that at least two words have the same id)
Populate with div that is dynamically made visible.
I am interested to know if anyone has more insight on this...

InfoPath autonumber field

I am designing an infopath (Change Request) form:
1)How can i add a text box that automaticaly increments to the next number when a new form is created (adding a new Change Request form to the form library).
2)How do i retrieve information from an existing form to the new form.
NOTE: The field is not inside a repeating table. I need to generate the next Change Request number on each new Change Request form.
TIA!
There is no build-in way to do this, but there are several ways to achieve what you want (Database query or SPList query). But this kind of request somehow smells like a workaround for an other problem.
Common cases for increasing numbers are:
unique IDs
count the Requests
make referable by external list (same as ID)
make IDs guessable (time stamps are not)
If you need an ID: In most cases you are not forced to use integer IDs. Simply use the form title as a natural ID. (e.g. customer + timestamp)
If you need guessable IDs, you need them because an external system wants to access or refer to the request. In that case try to change the pull-direction into a push-direction (e.g. by using workflows) or let your other system provide a "getID" function that can be called by your form to obtain a known ID (no guessing needed).
Anyway - for me, it looks like you want to achieve this to solve some other problem. Maybe there are different solutions for that problem too?
You could enter a token in your text-titles on the form where you want autonumbering, such as #num#, and then use javascript or jquery to find those tokens and replace them with incremented numbers.
The drawback to this is that if you exported the list to excel, the tokens would not get translated to numbers. But it is a good solution for on-screen rendering.
Use Firebug to figure out the class of the container housing your autonumber tags.
Maybe you could do something like this:
function TokenReplacement(){
var ClassName = 'ms-formlabel';
var elements = new Array();
var elements = document.getElementsByTagName('td');
var numerator=0;
//Now do find and replace on everything else
for(var e=0;e<elements.length;e++){
thiselement = elements[e];
if(thiselement.className == ClassName){
//autonumber the questions by replacing the #num# token
if(thiselement.innerHTML.search('#num#') > -1){
numerator++
var replacenum = "<b>" + numerator + ". </b>";
thiselement.innerHTML = elements[e].innerHTML.replace('#num#',replacenum);
}
}
}
}

Resources