I want to display the value from the javaScript in the VF page it self. Please tell me how it is possible.
Here's a good related post on the subject VisualForce Component Ids & Javascript.
Try this:
The Visualforce Page:
<apex:outputText id="myPlaceholder" value=""/>
JavaScript:
<script>
var myString = 'Hello';
jQuery('[id$=myPlaceholder]').text(myString)
</script>
Related
I have a button on a page but there is no hyperlink in the button. So I need to submit the form to go to the next page.
HtmlUnit is not waiting till the next page loads. So the nextPage variable is having the current page instead of the next page (intermittently it works if page loads quick enough though). How to resolve this?
Html Page:
<form action="/webapp/NewPage.jsp" id="idForm01" accept-charset="UNKNOWN" onsubmit="return false;"
name="frmNewPageForm" method="post" enctype="application/x-www-form-urlencoded">
<input name="attribute1" type="HIDDEN" value="1">
<input id="attribute2" value="EDIT_ATTRIBUTE2" name="functionalAttribute" type="hidden">
</form>
<table id="idTablePageDetails" class="formTable">
<tbody>
<tr class="formHeaderRow">
<td colspan="4" nowrap="">
Page Details
<a onclick="onClick_newPageButton();return false;" id="newPageButton" title="New Page" href="#" class="smallButton">
<img id="image" border="0" class="smallButtonImg" src="/webapp/image/imageButton.png"></a>
<script type="text/javascript" language="Javascript">
<!--
function onClick_newPageButton() {
buttonAction_newPageButton();
}
function buttonAction_newPageButton() {
if ( allowClick() == true ) { addFormField( "frmNewPageForm", "action", "ACTION_NEW_PAGE" );
if ( document.frmNewPageForm.onsubmit != null ) { document.frmNewPageForm.onsubmit(); }document.frmNewPageForm.submit(); }}
// -->
</script>
</table>
Code I am using to get the next page:
HtmlPage nextPage = (HtmlPage) page.executeJavaScript("document.frmNewPageForm.onsubmit()").getNewPage(); // from onsubmit
Your observation is the result of the today common ajax/async/javascript based one page approach for web applications.
You can use a code pattern like this
... find the clickable element...
myBtn.click();
webClient.waitForBackgroundJavaScript(10000);
HtmlPage resultPage = (HtmlPage) webClient.getCurrentWindow().getEnclosedPage();
After the click you have to wait until the async started javascript is processed. Then you have to get access to the current page (the content of the current window) because the page is usually replaced during the javascript processing.
There is also a method waitForJobsStartingBefore() if you like to have more control over the wait time. Both methods are returning before the given timeframe in case there is no more javascript job pending. For more details have a look at the javadoc and the code.
If you like to have a look at a more sophisticated usage of the api you can have a look at the Wetator (https://www.wetator.org/) source code. A good starting point is the class HtmlUnitBrowser (https://wetator.repositoryhosting.com/trac/wetator_wetator/browser/trunk/wetator/src/org/wetator/backend/htmlunit/HtmlUnitBrowser.java)
Hope that helps.
Why do you do clicks on buttons or execute javascript instead do requests? I think this is more trustworthy
Append any attributes to the form if you need using NameValuePair.
Then Call onSubmit() and then Submit()
HtmlPage nextPage1 = (HtmlPage) page.executeJavaScript("document.frmNewPageForm.onsubmit()").getNewPage(); // from onsubmit
HtmlPage nextPage2 = (HtmlPage) nextPage1.executeJavaScript("document.frmNewPageForm.submit()").getNewPage(); // from submit
Hi I am printing the ajax html response to div element and giving radio input option to select the file. after selecting the specific file the another div should show the message. but the ajax html response is not working
Jquery script:
$(document).ready(function()
{
$('#upload').ajaxForm({
beforeSubmit: function() {
$('#Analysis').show();
$('#Content_column').hide();
$('#file_list').show();
$('#trait').show();
$('#trait').html('Submitting...');
},
success: function(data) {
var $out = $('#file_list');
$out.html('       File list:');
$out.append('<div id="list">');
$('#list').html(data);
$out.append('</div>');
}
});
});
The output of this script is
<ul class="php-file-tree"><li class="pft-directory">Genotypic<ul><input id="Penotypic" type="radio" name="uploads/Genotypic/" value="uploads/Genotypic/jquery.txt" />jquery.txt<br><input id="Penotypic" type="radio" name="uploads/Genotypic/" value="uploads/Genotypic/marker.csv" />marker.csv<br></ul></li><li class="pft-directory">Other</li><li class="pft-directory">Penotypic<ul><input id="Penotypic" type="radio" name="uploads/Penotypic/" value="uploads/Penotypic/namPheno.csv" />namPheno.csv<br><input id="Penotypic" type="radio" name="uploads/Penotypic/" value="uploads/Penotypic/perl.pl" />perl.pl<br></ul></li></ul>
Jquery script:
$('#Penotypic').click(function() {
var $out1 = $('#trait');
$('#trait').show();
$out1.append('Submitted...');
});
this is not showing anything in the div trait. may be the html response is loading as a tesxt so the #Penotypic is not recognised. please help me to fix this.
Thanku
You have many inputs of id="Penotypic". Make every id unique or use classes as function trigger.
I wouldn't use "/" in the name attribute. See: http://www.w3.org/TR/html401/types.html#type-name
Then try if your ajax script does work. If it doesn't work, try if it works from static page (don't use your first jQuery script, but it's output as a static form). You probably need to bind your event trigger. Use jQuery's on().
Am not able to assign the id value dynamically for an image...am referring this image javascript to display the up/down arrows accordingly...here is the code snippet...
<apex:variable var="count" value="{!1}"/>
<apex:image id="msn{!count}" url="{!URLFOR($Resource.style_resources, 'images/up-arrow.gif')}" alt="Open-close" />
but i get the compilation error as "literal value is expected for id"...
can't we dynamically assign the value for id attribute ??
From Apex image,
<apex:image id="theImage" value="/img/myimage.gif" width="220" height="55"/>
The example above renders the following HTML:
<img id="theImage" src="/img/myimage.gif" width="220" height="55"/>
So change
<apex:image id="msn{!count}" url="{!URLFOR($Resource.style_resources, 'images/up-arrow.gif')}" alt="Open-close" />
to
<img id="msn{!count}" src="{!URLFOR($Resource.style_resources, 'images/up-arrow.gif')}" alt="Open-close" />
You are correct you can't assign an element id dynamically. it has to be a string literal. I have however used the class attribute to create custom ids that can be later used in javascript. I do this with jQuery and it's powerful selectors to select elements based on tag type and class.
The example below is just a sample but with jQuery you can get pretty creative.
<apex:variable var="count" value="{!1}"/>
<apex:image id="msn"
url="{!URLFOR($Resource.style_resources, 'images/up-arrow.gif')}"
alt="Open-close"
styleClass="msn{!count}" />
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"/>
<script>
jQuery.noConflict();
function doSomethingWithImg() {
try {
var imgElement = jQuery('.msn1');
/*Do what you need to do with the element*/
} catch (e) { /*Ignore Error*/ }
}
</script>
Here is the link to jQuery selectors: jQuery Selector Documentation
I'm trying to set up a basic web page, and it has a small music player on it (niftyPlayer). The people I'm doing this for want the player in the footer, and to continue playing through a song when the user navigates to a different part of the site.
Is there anyway I can do this without using frames? There are some tutorials around on changing part of a page using ajax and innerHTML, but I'm having trouble wrapping my head aroung getting everything BUT the music player to reload.
Thank you in advance,
--Adam
Wrap the content in a div, and wrap the player in a separate div. Load the content into the content div.
You'd have something like this:
<div id='content'>
</div>
<div id='player'>
</div>
If you're using a framework, this is easy: $('#content').html(newContent).
EDIT:
This syntax works with jQuery and ender.js. I prefer ender, but to each his own. I think MooTools is similar, but it's been a while since I used it.
Code for the ajax:
$.ajax({
'method': 'get',
'url': '/newContentUrl',
'success': function (data) {
// do something with the data here
}
});
You might need to declare what type of data you're expecting. I usually send json and then create the DOM elements in the browser.
EDIT:
You didn't mention your webserver/server-side scripting language, so I can't give any code examples for the server-side stuff. It's pretty simple most of time. You just need to decide on a format (again, I highly recommend JSON, as it's native to JS).
I suppose what you could do is have to div's.. one for your footer with the player in it and one with everything else; lets call it the 'container', both of course within your body. Then upon navigating in the site, just have the click reload the page's content within the container with a ajax call:
$('a').click(function(){
var page = $(this).attr('page');
// Using the href attribute will make the page reload, so just make a custom one named 'page'
$('#container').load(page);
});
HTML
<a page="page.php">Test</a>
The problem you then face though, is that you wouldnt really be reloading a page, so the URL also doesnt get update; but you can also fix this with some javascript, and use hashtags to load specific content in the container.
Use jQuery like this:
<script>
$("#generate").click(function(){
$("#content").load("script.php");
});
</script>
<div id="content">Content</div>
<input type="submit" id="generate" value="Generate!">
<div id="player">...player code...</div>
What you're looking for is called the 'single page interface' pattern. It's pretty common among sites like Facebook, where things like chat are required to be persistent across various pages. To be honest, it's kind of hard to program something like this yourself - so I would recommend standing on top of an existing framework that does some of the leg work for you. I've had success using backbone.js with this pattern:
http://andyet.net/blog/2010/oct/29/building-a-single-page-app-with-backbonejs-undersc/
You can reload desired DIVs via jQuery.ajax() and JSON:
For example:
index.php
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<a href='one.php' class='ajax'>Page 1</a>
<a href='two.php' class='ajax'>Page 2</a>
<div id='player'>Player Code</div>
<div id='workspace'>workspace</div>
one.php
<?php
$arr = array ( "workspace" => "This is Page 1" );
echo json_encode($arr);
?>
two.php
<?php
$arr = array( 'workspace' => "This is Page 2" );
echo json_encode($arr);
?>
ajax.js
jQuery(document).ready(function(){
jQuery('.ajax').click(function(event) {
event.preventDefault();
// load the href attribute of the link that was clicked
jQuery.getJSON(this.href, function(snippets) {
for(var id in snippets) {
// updated to deal with any type of HTML
jQuery('#' + id).html(snippets[id]);
}
});
});
});
Is there a JQuery plugin that allows me to 'unhide' a form by after clicking a link? Like I have an invite link that can take me to a one text field form for an email address but I want this form to just drop down (pushing the rest of the content down also) and shows the form to submit the email. If you guys can think of a JQuery plugin that lets me do this, please let me know
Edit:
So I did this
<div class='add-link'>
<div id='invite_link'><a href=''>Invite User</a></div>
<div id='invitation_form'>
<form>
<input type='text'/>
</form>
</div>
</div>
and my jquery looks like
<script type="text/javascript">
$(function()
{
$("table").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});
$('#invitation_form').hide();
}
);
$('#invite_link').click(function() {
$('#invitation_form').slideDown();
});
Do you guys see any error that causes the form not to slide down. It hides the form when the page loads but when I click the link it is not sliding down.
$('a.mylink').click(function() {
$('#MyForm').slideDown();
});
I don't think you need a jQuery plugin for this. The base jQuery library should be sufficient.
$('#showFormLink').click(function () {
$('#form').slideDown();
});
If you're looking for animation, that's possible as well by passing in a duration argument to slideDown.
Take a look at the jQuery show documentation.