I need to get a value from a javascript variable into a text field in a visualforce page.
I got it using a command button.But I was wondering if there is any other way of getting it,cz i dun want an onclick event.
Thanks in advance
I can't tell by your comment what event you're listening for, but assuming you know what that will be, just use document.getElementById() or a selector in jQuery to get the input field. If you are using Apex:inputField, define the id attribute with something like 'theField'. When the page is rendered, Salesforce should give an id attribute like 'j_id0:j_id1:theField' to the real tag, but this can and probably will be different every time the page is viewed. That means you're going to need to select the input by a substring. Here's some sample code using jQuery (apologies to any jq gurus out there if it's inefficient-- feel free to improve).
<apex:page>
<apex:includeScript value="{!$Resource.jquery_1_6_1}"/>
<script>
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery('input[id*="theInput"]').val('Hello World');
});
</script>
<apex:form >
<apex:inputText value="{!phonenum}" id="theInput"/>
</apex:form>
</apex:page>
Related
I'm trying to get the value of a textarea with Shopify Product Options by Bold and it is currently not working. I am able to get the value of a textarea locally, but I can not get the value when I move the code over to Shopify. I have looked here and here to no avail.
Here's the relevant code:
document.getElementById("248832").onkeyup=function(){getVal()};
var textbox = document.getElementsByName("properties[Message Body]")[0].value;
and here's the textarea I'm trying to get the value of
<textarea data-option-key="ta_248832" id="248832" class="bold_option_child shapp_full_width " name="properties[Message Body]"></textarea>
When I try to run this on Shopify, I get an error saying "Uncaught TypeError: Cannot set property 'onkeyup' of null", although I did notice that at one point shopify runs the following jQuery code, which might be what's causing my problem:
<script>
jQuery('#248832').change(function (){conditional_rules(7437760391);})
</script>
I am trying to get the value of the textarea so I can run get the amount of words in said textarea.
Any help would be greatly appreciated!
Look to see if the element that is returned as null has loaded yet. Others in similar situations fixed this by loading the script last. Hope this is helpful :)
https://stackoverflow.com/a/25018299/1305878
https://stackoverflow.com/a/31333349/1305878
https://stackoverflow.com/a/23544789/1305878
Solution
You are trying to use something similar to jQuery methods without jQuery:
document.getElementById("248832").onkeyup=function(){getVal()};
while DOM elements don't have the onkeyup method. It should be
jQuery("#248832").on("keyup",function(){getVal()});
Extra notes
even without using the recommended '.on' method, you have to write it as
jQuery("#248832").keyup(function(){getVal()});
(docs), not as
jQuery("#248832").onkeyup(function(){getVal()});
If you'd like to use DOM methods, that would be
document.getElementById("248832").addEventListener("keyup",function(){getVal()});
Also, may be you have wrote this as a minimal example, but the fact that you only call getVal() and don't pass the value somewhere sounds strange, although I don't know if what getVal() does exactly.
I am trying to do a very simple task but I cannot seem to figure it out. I am trying to write a function that will remove a link without removing the text associated with it. Here are the specifics:
Categories[/CODE]
I am trying to remove everything EXCEPT the text "Categories", I just want to remove the href tag. I would even be willing to rename the title "Categories". I just want to link gone. This link is in a div called "mw-normal-catlinks" and it is the first link in the div. I do not want to remove the other content in that div.
I am very new to jQuery and so far I have an idea of what to do. This is what I got:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#mw-normal-catlinks a.first').replaceWith('Categories');
</script>
Now I am not sure if I am missing anything because when i put this in my HTML code, nothing happens. I'm not sure if I need to add a div to make it work.
I want to eventually implement this into a PHP coded tool I use to convert wiki pages to html so maybe I will need to add some sort of div?
Thanks everyone!
Use .unwrap()
$('#mw-normal-catlinks a.first').contents().unwrap();
Also you probably want this selector instead since your a tag doesn't have a class of .first:
$('#mw-normal-catlinks a:first-child').contents().unwrap();
.first means "A member of the class first", you might be confusing it with :first-child or :first-of-type
I'm not particular familiar with using jQuery/Javascript so I don't know what the best way to do what I'm asking, it works but I don't know how efficient it is.
Basically I have a plugin called TipTip to create tooltips. It either takes the info from the "title" attribute of what you want the tip to appear over or you can use an option in the script to include HTML, like so:
<script type="text/javascript">
$(function(){
$(".someClass").tipTip({content:"<strong>What you want in the tooltip</strong>"; })
});
</script>
I want to generate a lot of different tooltips on my page but they all fit a similar style and really only need a changeable variable (they are an achievement progress bar so I only need to pass a single value for the % progress).
So is it alright to simply have a lot of script tags and duplicate the code above or can I pass a variable into it somehow and only keep the one piece of tooltip code at the top?
Or is this a question for suited to the devs of TipTip? Thanks in advance.
Assuming HTML5 is ok to use in this scenario, I'd reccommend using the html data attributes to store your element specific tooltips... and then using it to populate the tiptip plugin...
$(function(){
$('.toolTipClass').each(function() {
var element = $(this);
element.tipTip({
content: "<strong>"+element.data("toolTip")+"</strong>"
});
});
Now just add the HTML5 attribute like so
<div class="toolTipClass" data-toolTip="This is the tool Tip">Div Content</div>
Have you noticed that every 10 questions on this site is about jQuery?
Anyway...
I'm using jQuery for the first time. I don't know if I loaded it correctly. When I run this code:
<script type="text/javascript">
function allDayClicked() {
if (jQuery) alert("loaded");
var allday = document.getElementById("allDayEvent");
var start = document.getElementById("<%=startTimeSelector.ClientID%>");
$('allDayEvent').hide();
}
</script>
The alert appears, saying "loaded", but nothing else happens; the html checkbox doesn't go invisible. I get no kind of error in my javascript output.
Is it possible I haven't successfully loaded jQuery? I added a reference to it in my visual studio project and generated this by dragging it to default.aspx:
<script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
Otherwise, what's going on?
jQuery takes a css selector, not an id. If you want an id use the css form of declaring an id.
$('#allDayEvent').hide();
jQuery is loaded fine, you're just using it incorrectly. You should be doing either:
$('#allDayEvent') // recommended, the '#' means ID
Or:
$(allday) // since you already grabbed it with getElementById
jQuery can take a lot of different objects with $(). The options are listed here.
You are missing the # in your ID selector.
Change $('allDayEvent').hide();
to
$('#allDayEvent').hide();
Assuming that your checkbox has an id "allDayEvent", you just need the hash (#) in this line:
$('#allDayEvent').hide();
Working with Web2Py. I'm trying to attach some javascript either to a field (onchange) or to the form (onsubmit), but I see absolutely no way to pass such argument to crud.create or to form.custom.widget.
Anyone has an idea?
Of course there is a way. The appropriate way is to ask people on the web2py mailing list who know how to, as opposed to generic stack overflow users who will guess an incorrect answer. :-)
Anyway, assume you have:
db.define_table('image',
Field('name'),
Field('file', 'upload'))
You can do
def upload_image():
form=crud.create(db.image)
form.element(name='file')['_onchange']='... your js here ...'
form.element('form')['_onsubmit']='... your js here ...'
return dict(form=form)
Element takes the css3/jQuery syntax (but it is evaluated in python).
I do not believe there is a way to do this directly. One option is just to manipulate web2py generated HTML, it is just a string. Even cleaner, in my opinion, is just to bind the event using jQuery's $(document).ready() function.
Say you have a database table (all is stolen from web2py's docs):
db.define_table('image',
Field('name'),
Field('file', 'upload'))
With form:
def upload_image():
return dict(form=crud.create(db.image))
Embedded in a view (in the simplest manner):
{{=form}}
And you want to add an onblur handler to the name input field (added to the view):
<script type="text/javascript">
$(document).ready(function(){
$("#image_name").blur(function(){
// do something with image name loses focus...
});
});
</script>