is it possible to get the value of the hidden field that is defined in the gridview to the javascript function so I have a gridview that has a linked button defined in it. If the user clicks on the link button, I am invoking a javascript function. I want the hidden field values in the javascript function.
also, I was wondering if it is possible to pass multiple values in one hiden field and then split them later in the javascript function.
any help will be appreciated. I don't want to go to code behind and then invoke the javascript function from there.
The first task is to determine a "suitable selector" for the hidden fields - this can be the ID (get via control.ClientID) of each individual hidden field or a more general selector like "all hidden fields in a particular div (with a particular ID)". Use <%= .. %> (or <%# .. %> in a data-binding context) to put this information into the actual HTML response.
The exact approach will vary - basically, whichever is easiest - for the task.
Then, using your favorite library or advanced browser with applicable selector support (it is easier to find good libraries)1, use the given selector. In jQuery, this might be similar to the following, where fn is the function to process all the values. The actual selector is the stuff in quotes:
fn(jQuery("#clientIdOfGridView input[type='hidden']"))
Which might be written in ASP.NET, which is how the appropriate element ID is injected:
fn(jQuery("#<%= gridView.ClientID %> input[type='hidden']"))
These will both pass a jQuery object representing the hidden field elements to the function. Then use val() and/or each() (see the jQuery documentation and other SO questions) for usage.
There are many questions relating to just jQuery and "selecting values", so this is entire "answer" is really to provide a lead on how to get started - Happy coding :)
1 While this can be done manually with "old-school" finding a element by ID and DOM traversal, I find it a waste of my time to do such a task manually. I like jQuery but there are alternatives. Use the existing wheels; they roll relatively fast.
you can specify as much values in one value-attribute of a hidden field as you like. You must make sure use a delimiter like "," or "#" which you can use in your function to split the string of values according to your needs.
Related
I am building a custom "subscription builder" where customers select options, proceed to the next step and at the end click checkout; their options reflected in the variant selected.
The way Im going about this is by hiding shopify's selectors and setting them manually using $().val(); This accurately changes the selectors (checking in inspector), but Shopify does not recognize these changes for some reason and so the product added to the cart is the default. I am obviously missing something - is this even possible?
[Code Redacted for uselessness]
Thank you!
Basically,
Shopify's option_selection.js controls this and has a "Product" and "OptionSelector" object.
OptionSelector has a function selectVariant(id, selector) that will properly set it given you have the full variant identifier.
In your product_form.liquid you will see a place that does new OptionSelector(args). You simply save what it returns, i.e.
selector = new OptionSelector(...);
then you can do
selector.selectVariant("123456789", selector);
This will properly set the variant for the checkout button. You can then either hide the 'shopify' selectors with css / js or keep them or modify the option_selection.js code yourself by downloading from here.
Furthermore, I've discovered more useful things one can do:
selector.selectors[index].element.value {get; set;} //much cleaner method of accessing selector elements
selector.product.getVariant(selector.selectedValues()).id // gets the variant id for you so you do not need to hardcore them in
EDIT: Dave has kindly pointed out that
$(element).val(newValue).trigger('change');
Would have done what I wanted, but points out (and I agree) that using OptionSelector is more of a robust method.
Just wondering, Imagine I have a checkbox like this:
<input type="checkbox" id="situationcontrol" name="situationcontrol">
I could check if this is checked or not by using this JavaScript code:
var situationcontrol = $("#situationcontrol").prop('checked');
Now I am wondering how this would work if you make a checkbox using #Html.EditorFor
Like this:
#Html.EditorFor(model =>Model.ServiceDeliveryMutableObjects.SituationControl)
I tried to change the same javascript code with the new generated ID
var situationcontrol = $("#ServiceDeliveryMutableObjects.SituationControl").prop('checked');
But that doesnt seems to work.
Any Idea how this would work?
Thanks
Edit: When I inspect element in browser when I use #Html.EditFor
EDIT
Didn't snap to that until you posted the rendered output. The . is not valid in HTML ids, so Razor uses underscores instead. So, the id you should be selecting is #ServiceDeliveryMutalObjects_SituationalControl, rather than #ServiceDeliveryMutalObjects.SituationalControl. Other than that, the rest of my original answer applies.
ORIGINAL
First, actually it's better to use:
$('#foo').is(':checked')
Now, as for using EditorFor, technically, this doesn't change anything. The id will obviously be based on the object graph, i.e. #ServiceDeliveryMutalObjects_SituationalControl, but nothing changes about the actual rendering of the HTML element. I emphasized "technically", here, because while that should be case, there's no default editor template that will actually render a checkbox input. The default is a text box, and a text box, obviously will not have a checked property. This can be corrected by either:
Use CheckBoxFor instead. That way, you're assured of getting an actual checkbox input.
Assuming this property is a boolean, you can create the view Views/Shared/EditorTemplates/Boolean.cshtml with something like:
#model bool?
#Html.CheckBox("", Model)
Then, EditorFor will use this template, and generate a checkbox input.
Finally, it may just be a typo in your question, but you want lowercase "model", not "Model", on the right side of your expression. In other words, it needs to match the left side of the lambda. I tend to avoid using model in these expressions, as not only is it more to type than needed, but you can easily get confused between "model" and "Model", especially with Intellisense's autocomplete. For example,
#Html.EditorFor(m => m.ServiceDeliveryMutableObjects.SituationControl)
You can change your code like this
Var situationcontrol = $("#ServiceDeliveryMutableObjects_SituationControl").prop('checked');
You need to remove .in Id of elements in mvc reazor view it's will convert '.' To '_' when we provide in elements name.
In my code I have a Struts2 select tag(<s:select>). It reads something like this :
<s:select id="s" list="list" listKey="id" listValue="displayValue">
On some selection made by the user, I want to change the value of list attibute to point to some other list.(possibly using javascript/jquery)
What have you tried ? *
You have at least two ways to do this:
1) Perform an AJAX operation to get the new data (in JSON for example, like a List of 'id' and 'description');
then alter the HTML with Javascript, removing the old Options from the Select,
building and adding the new Options to the Select,
and eventually changing some Select attributes;
2) Perform an AJAX operation to get a completely new Select, elaborated server side, returned as a HTML snippet (a JSP with only one <s:select> inside);
then replace it to the original one on the page, for example using its container (like a div) as target of the AJAX operation.
* #AshishGupta suggested me to remove the "What have you tried ?" part to keep the tone positive. Please read the article, it is a must to understand why this should be always the first (positive and legit) question to askers who doesn't post code (for their own good in first place).
Hope that helps, as the rest of my answer.
I have a SharePoint list with the following single line of text fields: Title, Year and Type or Location. I want to be able to hide the Type or Location table row in the default display form. I know that I should create a JavaScript script and put it in Content Editor web part inside DispForm.aspx.
I am not fluent with jQuery syntax, thus I need help with the code, i.e. I don't know how to reference the table row which contains Type or Location field and its value. Here's what I've done so far, but it doesn't work:
jQuery(document).ready(function($) {
$("input[title='Type or Location']").closest("tr").hide();
});
I know that the "input[title='Type or Location']" part is incorrect; at least I think it's that. Could anyone help me out? Thank you.
Try:
jQuery(document).ready(function($) {
$("h3.ms-standardheader:contains('Type or Location')").closest("tr").hide();
});
I am not sure why you want to use jQuery for that. In SharePoint, you can choose to make a field required, optional or hidden. In most cases, just switching to hidden will address your issue.
For the record, I would also try to avoid as much as possible the use of jQuery(document).ready, it might conflict with the SharePoint out of the box onload event. In your case it is not needed.
Update: here is a way to do this with jQuery:
$("td.ms-formlabel:contains('Type or Location')").parent().hide();
Try it this way:
jQuery(document).ready(function($) {
$("input[title='Type'],input[title='Location']").closest("tr").hide();
});
It depends what type of column Type ior Location is. If it's a Single line of text, then you're close. You should use a DOM inspector like IE's Developer Tools or Firebug to see what the actual title of the input element is.
If the column is a different type, then it's likely not an input element. Using the DOM inspector again, you can look at what elements make up the field control and decide on your selector from that.
Finally, remember that hiding things in script is not secure. A savvy user can turn off the script or otherwise change the script so that they can edit it. It all depends on your requirements.
// UPDATE //
Ah, you said DispForm. As was pointed out in another answer, there aren't any input elements in a DispForm. You need to correct your selector.
If its just the Default Display Form, How about just creating a view and making it default?
The syntax should be like this:
$("input[title='Type']").closest("tr").hide();
$("input[title='Location']").closest("tr").hide();
It will work.
I have an iterator in jsp and the iterator contains 2 lists:
<s:iterator value="reportNamesList">
<s:select name="hour" listKey="codeDesc" listValue="code" list="hourList" />
<s:select name="minute" listKey="codeDesc" listValue="code" list="minutesList" />
</s:iterator>
Now my requirement is that when hour value is selected (say as 10), the minute dropdown value should also become 10.
I am using javascript. Kindly suggest how to do it.
#Naved is correct; you interact with tag-produced DOM elements the same way as any other (although I'd use jQuery and save yourself a lot of time). You can explicitly set an id by using the id element.
In your case, since you'll have multiple groups of select boxes, you'll need to create the id based on something unique in the reportNamesList, perhaps an id. Your id attribute, then, would probably look something like id="hours_%{id} or if you use the <s:iterator>'s var attribute, id=hours_%{#foo.id}.
Your JavaScript would need to bind each hours select to its associated minutes select.
The code seems that you are coding it in Struts2. Although I am not very much aware of it but the simplest way I found to write any javascript for these types of framework is
Run your code in browser and view the page source
Locate the id or name given to your desired control (in your case it is select for hour). Say it selHour.
Write the javascript code using getElementById('selHour') or getElementsByName('selHour') and do your stuff.
I hope this will help you to give the proper output.