I am using this code in my .xhtml page
In head tag, i am using for refresh purpose,
<script type="text/javascript">
alert("hi");
setInterval(function() {
document.getElementById('myForm:btnLoadData').submit();
alert("Hello");
}, 3000);
</script>
and inside ui:define tag i am writing this code.
<h:panelGroup id="divData" layout="block">
//my jsf code..................
</h:panelGroup>
<h:form id="myForm">
<h:commandButton id="btnLoadData" value="Hidden" style="display:none">
<f:ajax execute="#form" render=":divData" />
</h:commandButton>
</h:form>
After all this I am not getting any error, but the hidden button is not working as desired in script. Even I cant see the alert("Hello").
Update: I can see the first alert("hi") but not alert("Hello")
I am newbie in jsf. I have to implement polling type thing or auto refresh.
I also tried this example. But its not working.
Problem 2
I dont know that much jsf. At some places I am using normal HTML tags. I dont know why URL is not showing the page name. Its always like host/myProjectName. I am expecting host/projectName/Login.xhtml or host/projectName/SomeOtherPage.xhtml
Even browser back button or reload for that particular page not works. It reloads from first page of my project i-e Login page. Are both problems interrelated. How can I handle this.
Somebody please help me with the problem.
Related
I'm having trouble with javascript in my rails app. I want to run a simple multiplication function on click when myButton is clicked and return it in an alert. Right now, I can't even get the JS to talk, and it's reloading the page, despite the code I have...
<script>
$(function() {
$('#myButton').click(function(e) {
e.preventDefault();
alert("hello")
})
})
</script>
<form>
$<input id="dataToPass"type="text"></input> <input id="myButton "type="submit" value="Invest"> </input>
</form>
If I add inline JS, I can get the alert to work, but when I move the code outside of the html, it's not working. Anyone know why? I'm not adept with jQuery or JavaScript.
change
id="myButton "
with
id="myButton"
This line of sample code from LinkedIn API works perfectly.
<script type="IN/Login" data-onAuth="loadData"></script>
but it runs automatically as the web page loads. I'd like to invoke this script using a button or link on a webpage. The idea being that the webpage loads and waits until the user is ready to authenticate.
Ideally I would like the LinkedIn Login image to appear, and wait, until clicked.
Thanks.
Based on your comment, it looks like you only want to display the SignIn plugin if the user has manually clicked a button/element on the page. Something like this, using jQuery, should work:
On your page, you have a button:
<div id="buttonControl">
<input type="button" id="showLinkedIn" value="Show LinkedIn" onclick="showLinkedIn();" />
</div>
<div id="buttonContent" style="display: none;"></div>
In a script block in the <head> of the page, you have the showLinkedIn() onclick function:
function showLinkedIn() {
// insert the SignIn plugin
$('#buttonContent').html('<script type="IN/Login" data-onauth="loadData"><\/script>');
// tell the LinkedIn JavaScript code to re-parse the element containing the SignIn plugin
IN.parse($('#buttonContent')[0]);
// hide button trigger, if needed
$('#buttonControl').hide();
// show the LinkedIn control
$('#buttonContent').show();
}
$('#buttonControl').click(function(){
$('#buttonContent').html('<script type="IN/Login" data-onauth="loadData"></script>');
$('#buttonControl,#buttonContent').toggle();
IN.User.authorize(loadData);
});
slightly different as the 'IN.parse($('#buttonContent')[0]);' does not seem to work...
tested 'IN.User.authorize(loadData)' and it works well! Got it from: http://developer.linkedin.com/documents/inauth-inevent-and-inui
You need to clear the cookies from the following method like
IN.User.logout(callbackFunction, callbackScope);
You need to call this function on that button from which you want to log out.
Example using jquery:
$('#demo') .click(function()
{
IN.User.logout(console.log("logged out..."));
});
I have this code for a .jsp page:
<f:view>
<div class="portletBody">
<h:form id="editSectionForm" onsubmit="return numCheck(document.forms[0].elements['editSectionForm:sectionTable:0:maxEnrollmentInput'].id)">
<sakai:flowState bean="#{editSectionBean}"/>
<t:aliasBean alias="#{viewName}" value="editSection">
<%# include file="/inc/navMenu.jspf"%>
</t:aliasBean>
<h3><h:outputText value="#{msgs.edit_section_page_header}"/></h3>
<%# include file="/inc/globalMessages.jspf"%>
<t:aliasBean alias="#{bean}" value="#{editSectionBean}">
<%# include file="/inc/sectionEditor.jspf"%>
</t:aliasBean>
<t:div styleClass="act">
<h:commandButton
action="#{editSectionBean.update}"
value="#{msgs.update}"
styleClass="active"
onclick="reEnableLimits();" />
<h:commandButton action="overview" value="#{msgs.cancel}" immediate="true" />
</t:div>
</h:form>
</div>
</f:view>
and I have some javascript code that runs in the /inc/sectionEditor.jspf file. In some of that code in the sectionEdtior file, I need to somehow grab the id of this form. editSectionForm. I can't hard code it because the /inc/sectionEditor.jspf code runs in more than one page.
So pretty much, I need the javascript code in /inc/sectionEditor.jspf to be able to grab the id of the form it is currently in.
i.e:
If I'm in the editSectionForm page, it'll tell me that im in that page, if I'm in addSection Form page, it'll tell me that I'm on that page.
I'm not sure I fully understand the question. Are you trying to get the current page you are in, as in the url?
http://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/
Or do you have multiple forms on the same page?
I actually figured out another way for my situation. For anyone that's ever used Sakai, they know the beast that it is.
I see you already use document.forms[0] in your jsp page, so, making assumption there is one form only, you may use the same construction inside a script section of your 'subpages' also, i.e. using document.forms[0].id will give you the id of the form.
<!DOCTYPE html>
<html>
<body>
<form id="editSectionForm">
<div id="sectionEditor">
<script type="text/javascript">
var formId = document.forms[0].id;
console.log(formId);
</script>
</div>
</form>
</body>
</html>
I have a jquery fancyzoom box. In that box ,I have a contact form which sends an email on submission. But I am not able to call form submit function due to fancyzoom.
Code is like :
("req_quote.php")
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/fancyzoom.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#popup1_link').fancyZoom({width:610});
$("#submit").css('cursor', 'pointer');
$('.reqfrm').submit( function(){
alert("hell");
});
});
</script>
<body>
<form class="reqfrm" id="frm">
<input type="text" name="name" />
<input type="submit" name="submit" id="submit" value="Submit" />
</form>
</body>
</html>
Above file is included in "index.php" which contains the actual link to open the form in fancyzoom box.
(index.php)
< a href="#popup1" id="popup1_link">< div class="blink">Request a Quote< /a>"
If I remove $('#popup1_link').fancyZoom({width:610}); then i get alert on submission otherwise it goes on form action directly.
Are you getting any JavaScript errors with the fancyZoom call in? Are you including the script file you need to use it? It's hard to say without seeing some more data, or a jsbin / jsfiddle.
The form is submitted in the fancybox js file.
As mentioned by Raul, you need to provide more info for us to help out. You could try any of these things:
See if you can reproduce this issue within a simple html file, that doesn't have any of the extra stuff that your current page may have. If the issue still persists, put it into jsFiddle and post the link here.
If you haven't already, install the Firebug addon for Firefox, and use it's console to check for any JS errors.
Have a look at the jsFiddle that I've created. Is this similar to what you are doing? Mine works wihtout any issues.
I have created a simple page with a button on the center.
Now I want that when I click the button then the current page is completly rewritten with new HTML and Javascript code loaded from the server.
How can I do this with ajax ?
Suggestion: post with a normal form and reload the page. If you're reloading the entire page anyway, you're doing away with all the benefits of AJAX anyway, best to reload the entire page, for example:
<form action="otherpagr.html">
<input type="submit" value="Click me" />
</form>
AJAX is for replacing part of a page to reduce the overhead...but if you're replacing say the entire <body> it's easier to just load the page you're going to.
Nick is right with what he says, but if there's no other way:
$('a').click(function() {
$('body').load("test.html");
});
EDIT: Making sure load only fetches content inside the <body> Tag from the remote adress. For me it didn't work to fetch only the <body> tag by defining body => load('test.html body')
To animate the page you could do something like this:
$('a').click(function() {
$('body').load("test.html", function() {
$(this).hide().fadeIn(2000);
});
});
but then I suggest to implement at least one wrapper-element.