So I have this javascript variable I'm generating on my html.erb views that I want to send to a rails variable the form submit. I understand that I can do this using jquery or ajax but my attempts have failed. Here is what I am trying:
Rails variable:
<%= f.text_field :antennatime, :id => "antenna_time" %>
Some HTML:
<input type="checkbox" id="Antenna" onclick="fun();" value="1">
My javascript:
<script>
var str = "This is Some Sample Text";
var ant = document.getElementById("Antenna").checked;
if(antenna == true){
$(document).ready(function(){
$("antenna_time").val(str);
});
}
</script>
To my expectations this is not working. Could someone show the steps I should use to use jquery or ajax to send my javascript var str to my rails variable :antennatime?
It looks like you've misspelled a variable and missed a # from your jQuery selector:
var str = "This is Some Sample Text";
var ant = document.getElementById("Antenna");
if (ant.checked){
$(function(){ // same as $(document).ready()
$('#antenna_time').val(str);
});
}
For clarity, using an if statement is for checking expressions/evaluating - I would add your .checked logic there as it's more clear what's happening.
Your question is a bit confusing. Let me paraphrase to make sure I understand: you have a form, of which one field is filled with a attribute of a model, and when a checkbox is set, you want to set the value of that field, using javascript.
So in reality, you are not setting some "rails variable" but you are changing one field in a form, before submitting it to the server.
So, in that case it is simple, you just omitted the # in your jquery. So you will have to write
$('#antenna_time').val(str)
This will set the field to the requested value. But as per your code, it will do this, only when the page is loaded and when the checkbox is clicked.
This might be what you want, but I would suspect you
want it to be set/unset when the checkbox is clicked? (the fun() function is not shown --speaking of cryptic names)
to be checked before submit only (possibly confusing for the user, and why not just check the value of the checkbox server-side instead then)
Please note, to set a rails variable you will have to post something to the server.
It is not entirely clear why you overwrite the id of the field, which imho is potentially dangerous, since rails uses the id/names to build the params hash to be posted to the rails server. The id of an input-field of an attribute in a model is always built as follows: <model-name>_<attribute-name> which is unique (and clear) enough imho to just use that.
You need to compare the ant variable not antenna since you've defined it above if condition as well as using # to target element with id named antenna_time
Also wrap all your code inside DOM ready, final code look like this:
$(document).ready(function(){
var str = "This is Some Sample Text";
var ant = document.getElementById("Antenna").checked;
if(ant == true){
$("#antenna_time").val(str);
}
});
Related
So I have this JS script:
<script>
function getCheckedProperty(obj,args)
{
if(document.getElementById("<%=checkbox1.ClientID %>").checked)
return true;
else
return false;
}
</script>
This only works for checkBox1. I want to be able to pass control id from parameters, so that it can return value of passed control. Also, please, respond with the usage.
<asp:CustomValidator runat="server" ClientValidationFunction="getCheckedProperty()></asp:CustomValidator>
TIY. SRJ.
Check this question it might have your answer.
if I get it right you want to get ids dynamically for example checkbox1, checkbox2,...
You can add the dynamic part to the id like this:
for (var i = 1; i < n; i++) {
var id = "checkbox" + i;
var ch = document.getElementById(id);
if (ch.checked == false)
return false;
}
return true;
Unfortantly, this is a real problem. The control name(s) are generated at runtime, and ALSO THIS:
document.getElementById("<%=checkbox1.ClientID %>")
So at page render time, the .net pre-processor will SWAP out the <% %> at render time.
this is also why you can't say have the js code in a external library and expect this to work.
However, your DEAD OBVIOUS question remains. Stuff a name into a simple variable and use that to get the control. After all, we can't and would not want to HARD code the value as per above, and it would be beyond silly to assume we ONLY have a means to HARD code references to controls.
So, you want of course this:
var MyControl = 'Checkbox1';
var ckBox = document.getElementById(MyControl);
if (ckBox.checked)
alert('Check box ' + MyControl + ' is checked!');
else
alert('Check box ' + MyControl + ' is UN-checked');
Now in fact the ABOVE can and will work if you force the control name generation as static.
so, here is the markup:
<asp:CheckBox ID="CheckBox1" runat="server" ClientIDMode="Static" />
So, if you ARE able and ARE willing to use ClientIDMode static, then the .net processing will NOT re-name your control. As a result you can do this:
var MyControl = 'Checkbox1';
var ckBox = document.getElementById(MyControl);
Or, even this (as HARD coded)
var ckBox = document.getElementById('CheckBox1');
Or even this:
var ckbox2 = document.getElementById(<%= CheckBox1.ClientID %>);
Now, the last one above? Well, we ARE useing the .net pre-processor to swap out the name - but it will still work - and clientID will not be changed - but the pre-processor is STILL involved.
AGAIN: the <%= 'SomeControlName.ClientID%> ONLY works because this expression is SWAPPED out at runtime by the .net web page pre-processor. This occures BEFORE the js code is run.
So you can NOT use a variable in the above <%=%> expressions since the js code HAS NOT even run and the new js code has not even been generated at this point in time.
In effect, you would (have to) do a PAGE search for the control. If you can NOT adopt ClientIdMode="static", then you MUST SEARCH the page.
You can write your OWN search routines - kind of like adopting a nice road to world poverty, or you bite the bullet, and adopt a library that WILL do the heavy lifting for you.
So, without using (forcing) StaticID on the control? then you now have to accept the BIG HUGE LARGE MASSIVE decision and introduce jQuery into your application.
jQuery is able to scour and search and look and loop and find that control for you on the web page. This is a cost not without processing cost, and not without a big speed penalty.
So, without staticID's, then you can adopt jquery and do this:
<script src="Scripts/jquery-3.5.1.js"></script>
<script>
// so if you decide and adopt jQuery, then it can do the searching for you
// BUT YOU ARE now adopting and committing to a whole new js library
// so, with jQuery we cna do this:
function jstest2(){
var ckbox2 = $('#CheckBox1');
var ckboxdom = ckbox2[0];
alert('status of check box = ' + ckboxdom.checked);
// of course the above is STILL hard code
// get control by runtime or NON hard code
// get (search) for check box based on control name in
// a variable
var MyCheckBox = 'CheckBox1';
var ckbox3 = $('#' + MyCheckBox);
var ckboxdom3 = ckbox3[0];
alert('status of check box = ' + ckboxdom3.checked);
</script>
I found after doing a nuget of jQuery, the fans on my laptop became too hot to even keep on my lap. But, things did settle down, and eventually the VS editors caught up, and things did settle down.
Also keep in mind that you have to re-learn how to reference a simple control.
eg:
<script>
function getbox() {
var tbox = document.getElementById('TextBox1');
alert(tbox.value);
// jQuery example
var tbox2 = $('#TextBox1');
alert(tbox2.val());
}
</script>
So notice now, how the long time js standard and approach is "value" as a property?
Well, now you using .val() that is a function (method) of that search result. So just keep in mind that by adopting jQuery, then all of your code that needs to get simple values from controls has to under go a syntax change, and you as a developer will have to re-lean how to reference a simple control with new syntax. The check box is a great example - it now becomes a array, and you use that array to get at the checked property.
And same in above for a simple grab of a value from a text box.
Notice how the syntax and approach to getting the value of the text box NOW has changed!!!! So you need a cheat-sheet since simple things like value now become .val().
And the same changes occur for say a label on a web page (again syntax changes).
You will ALSO notice that the results of the check box example are an array!!! So we had to drill down into the resulting array[] to get the "checked" value.
Of course how big of a deal your code changes are by adopting jQuery? Well, it depends, on relative medium sized or even a small project? $20,000 was budgeted and we still changing things.
On larger projects you simply need more manpower and would add another zero to the above cost to adopt jQuery.
However, jQuery is now widespread used, and it will do the "dirty work" of searching the DOM for you, and if you need runtime resolution as opposed to compile time resolution to find a simple control on a web page, then jQuery is probably your best choice. And I find that jQuery is really nice for ajax calls - so while it is a big change, it still well worth the effort to adopt the jQuery library and risk introducing this framework into your existing projects.
In our (hybris) shop some products have a yform to summarize the parts of the product. Is there an easy way to copy the value of the sum field into an other field (automaticly) like the productquantity (no yForm)?
I guess I need javascript, but the id of the sumfield is generatad, so I don't know how to get the sum. Also my Javascript abilities are quite limited...
UPDATE:
To get the value I use this part of code:
copyYFormValueToProductQuantity : function() {
var copyText = document.querySelector('input[id*="sum"]').value
if (copyText > 0 && copyText != null)
{
//do stuff
}
console.log("Copied value: " + copyText)
},
But this line
document.querySelector('input[id*="sum"]').value
returns null. If I use it in the browserconsole, it also returns null. But after I inspected the element it works and returns the value I want to. So I guess I am missing some JS-basics here and the object isn't ready before?
Btw.: I call this function with a keydown-eventlistener.
This can most likely be done from the jsp files. There you have all the data that is needed, so you most likely need to only copy that field where you need it.
We can also help you more if you add some code examples here (what exactly is that yform?). If you struggle to find where in code is that specific yform created/added, it's always worth giving a try to search for the applied classes of the html (search the entire project and see what you find).
As I understand your question, you are saying that you want to copy the value of a yForm field named sum into a non-yForm field named productquantity, and you are asking specifically about how to access the value of a yForm field from JavaScript. If I understand this correctly, you can do so by calling the following JavaScript API:
ORBEON.xforms.Document.getValue("sum");
You can find more about this and other related API on Client-side JavaScript API.
In My web app I am using Struts 1.x, In one of my Jsp I need to validate some fields, I have used Struts 1.x html tags, for some reason I need to use nameing convention as below.
<html:form action="someAction">
<html:text property="Object.textId" />
</html:form>
What my problem here is when I want to validate that Text field in my JAva Script I am using
below Methodology
function validate()
{
var frm = eval("MyFormName");//The form name which I havve mentioned in Struts-config.xml
var ss = frm.Object.textId.value;// Here I cant get the value of my texte field it says it cant find textid
// error seems to be resonable so I have given below try but still it didnt work
var ss= frm.+'Object.textId'.value;
}
I need javascript to recognise my naming of my fields which contains dot . in it.
I can not change my fiekds names to some notation.
thanks In advance.
Edit
I need to pass my form fields names to some other validation fuctions, In these functions they are trying to get the value as below
var sss=eval(document.+'FormName'+.+'FieldName');
Thanks In advance.
I am trying to get the referrer and update the referrer so that my users can go back to the page they came back from. I have a hidden input field which holds the value of the redirect. I have a static value in there just in case the referrer is empty. If the referrer is not empty, I want to update the value of it. Here is the code I have written, I even tested it and it said it was updated, however, I am not being redirected properly, so it is not working.
JavaScript and HTML I have written (keep in mind, I have correctly linked the file and such):
$(document).ready(function(){
if (document.referrer != "") {
document.getElementsByName("redirect").value = document.referrer;
var test = "false";
if (document.getElementsByName("redirect").value == document.referrer){
test = "true";
}
alert(test);
}
});
<script src="js/referrer.js"></script>
<input type="hidden" name="redirect" value="https://www.google.com" />
I feel like this is a minor error or there might be some sort of standard I am not following.
Thanks for the help! I appreciate any insight!
I can't see what the problem is off hand by what you've given me. But what I can say is that if you are going to use JQuery in one place (document ready function) then you should also use it to grab the value of your input field.
It would also help if you put an Id on the input field instead of doing it by name. Ids are the best way to get a specific element. That could be your problem too.
Then call it using:
$("#ID").val()
so your code would become:
if($("#ID").val() === document.referrer)
I would also suggest using triple equals as well. But that is completely up to you.
I've never done anything with document.referrer, but there might be a better way of doing that as well.
One odd thing is that you are setting these 2 things equal to each other
document.getElementsByName("redirect").value = document.referrer;
and then immediately testing if they're equal to each other.
if (document.getElementsByName("redirect").value == document.referrer)
I can't say that this is your issue, but it's bad coding and should be fixed.
I think a single letter is tripping you up here.
if (document.getElement**s**ByName("redirect").value == document.referrer){
There's no singular equivalent for 'byName', so you do end up with an array (or at least, an array-like object). Unlike IDs, it is allowable for multiple inputs to have the same name. The easiest solution is this:
if (document.getElementsByName("redirect")[0].value == document.referrer){
Doing document.getElementsByName will return an object array that DOES NOT include the value. There is no way to change the value (That I know of and have tried) when using the getElementsByName. I have solved this issue by using getElementById, it actually works properly for me.
I have a listview that has a nested listview which contain radcomboboxes in the itemtemplate. As such, the IDs (as far as I know) are useless to me.
For example, if I have 30 items, each one of those items is going to generate a new combobox so the names are going to be generated by asp. What I need is to be able to grab the selected value from whichever combobox is being worked by the user. I'm currently using jQuery and some absurd parent().parent().children() type nonsense in order to find the correct combobox in relation to the submit button.
When submit button is clicked, I need it to find the selected value of the it's respective combobox so that I can send that to the post submission handler. The problem is that the .val() jQuery method is not working. When I use that with something like:
$(this).parent().parent().children().children(".statusCbo").val();
I end up getting the text value, not the selected value. I triple checked to make sure that I had the fields bound correctly in the aspx file;
DataTextField = '<%#Eval("name") %>' DataValueField = '<%#Eval("id") %>'
But as I said, I'm ending up with the DataTextField value of the selected item. The best explanation I could get was that it had something to do with how the control is requesting the content (via ajax).
So at any rate, could anyone offer some suggestions on how to accurately get the selected value from the combobox?
UPDATE:
I was able to gain reference to the object through a different means:
$(".submitTag").click(
function () {
var topLevel = $(this).closest(".CommentTopLevel");
var status = topLevel.find(".StatusTag").get_value();
//stub to test value
alert(status);
return false;
});
from here, if use status.val(), it will give me the text instead of the value (same issue as before). The documentation implies that I should use status.get_value(); but this is blowing up saying that the method is not supported from the object. Any ideas?
UPDATE:
nevermind, I found that it is a jquery object being returned, so the method isn't included. Continuing to dig.
SOLUTION:
There was just an extra step i needed to do to use traditional methods. I don't know what it took so long for it to click with me:
$(".submitTag").click(
function(){
var topLevel = $(this).closest(".CommentTopLevelTag"); //gets the parent container
var comboBoxID = topLevel.find(".StatusTag").attr("ID"); //gets the clientID of the jQuery object
var comboBoxRef = $find(comboBoxID); //finds the control by id and brings back a non-jQuery object (useable)
var comboBoxSelectedValue = comboBoxRef.get_value(); //uses the Telerik method to get the selected value
});
Its been a little while since I've dealt with Telerik controls, but what you're doing is bypassing the apis Telerik has made for you to use, and that strikes me as a very bad thing. The next release of Telerik Controls could easily break your code.
Look, it shouldn't be that hard to pass the client id from the listview. There's several methods I'd tackle but I'll let you figure that on your own for now. Once you DO have the ClientID for the control, follow the example on telerik's site:
http://demos.telerik.com/aspnet-ajax/combobox/examples/programming/addremovedisableitemsclientside/defaultcs.aspx
Once you have that id do some
var combo = $find(someVarReferencingTheId);
Now you have a reference to the combobox in its clientside form. Now find some function that gets what you want from here:
http://www.telerik.com/help/aspnet-ajax/combobox-client-side-radcombobox.html
...
PROFIT!
EDIT: that first link to demos.telerik.com isn't really even needed, I just showed that because that's what I used to get that line of code (I could never remember if it's $get or $find I needed to use, unless I was doing a lot of Telerik clientside stuff at the time.).
EDIT 2: $get and $find are ASP.NET constructs, not Telerik's.