I am working on phonegap with android. I am creating a login page. After the login validation I want to jump to the welcome div if the user is authorized .
This is my javascript page:- myjavascrpt.js
var logi=item.id;
if(logi>0)
call welcome div of index.html
else
alert("invalid user");
// in this logi variable i have userid of successful user.
// now i want to
// display this id into the div which is exist in my
// html page.
// now what should i write here so i can call welcome
// div of html page and i can use
// this value of logi variable.
This is my index.html whose welcome div I want to call.
<html>
<head></head>
<body>
<div data-role="page" data-theme="a" data-url="streaming" id="streaming">
<h1> do some thing related to streaming</h1>
</div>
**
<div data-role="page" data-theme="a" data-url="welcome" id="welcome">
<h1> you are welcome</h1>
</div>
**
</body>
</html>
so please tell me what code should I use to call the div of a html page.
I don't know anything about calling a html page div from javascript, but if you want to set the content of a DIV via javascript, it's done that way:
In javascript:
var d = document.getElementByID("welcome");
d.innerHTML = logi;
But this would override the <h1> you are welcome</h1> text. So change that line to be
<span id="userwelcome"></span><h1>, you are welcome</h1>
and your javascript to
var d = document.getElementByID("userwelcome");
d.innerHTML = logi;
You can do that with simple jQuery -
if(logi>0) { $('#welcome').html(logi);}
Related
I am tryting to automate a repeated task of form filling using HTA. I am opeing the web page into an IFrame. the very First page is the Login page. I am ABLE to access the username and password elements of that page (Displayed in IFrame) easily, and hence able to autologin by clicking a button in HTA. But now, the next page contains a textbox, which i need to fill and then again click a button. Now, i have a button in HTA. When i click this button , i want that the text box should populate with the value i have provided. But instead, i get this error, Unable to set property 'value' of a null reference. On this displaying this object using an alert, it displays 'null'. I am not getting, why i am able to reference the elements on login page and why not on inside pages.
Below is my code :
<html>
<head>
<HTA:APPLICATION
APPLICATIONNAME="HTA"
SYSMENU="YES"
NAVIGABLE="YES"
>
<meta http-equiv="x-ua-compatible" content="ie=11">
<title>HTA</title>
<script type="text/javascript">
window.resizeTo(700,700);
</script>
<script type="text/javascript" >
function Start() {
var iframePage = document.getElementById("iframeid").contentDocument;
var userId = iframePage.getElementById("userid");
var passwd = iframePage.getElementById("pwd");
var form = iframePage.getElementById("login");
userId.value='uu';
passwd.value='pp';
form.submit();
}
function Show() {
document.getElementById("iframe").style.display = "block";
}
function FillRncntl() {
var iframePages = document.getElementById("iframeid").contentDocument;;
var runcntl = iframePages.getElementById("PRCSMULTI");
runcntl.value='test';
}
</script>
</head>
<body>
<form class="form" name="form">
<input class="links" type="button" value="Show PIA" onclick="Show();" />
<input class="links" type="button" value="Login" onclick="Start();" />
<input class="links" type="button" value="Enter Runcontrol" onclick="FillRncntl();" />
</form>
<br>
<div class="iframe" id="iframe" style="display:none">
<iframe application="no" src="www.xyz.com" width="600" height="600" id="iframeid">
</div>
</body>
</html>
-Show PIA button shows login page . Working Fine.
-Login button is used to login automatically. Working Fine.
-Enter Runcntl button is used to fill some textbox. NOT Working Fine.
Its not only with this text box, i have same issues with other elemts from this page as well.
PS : Its a Peoplesoft Intranet Website.
PeopleSoft content is contained within an iFrame itself so you need to grab the targetContent iFrame and search for the element in there.
The initial PeopleSoft login page is not displayed within an iFrame.
I changed the last element ID so that this will work on the component: PeopleTools->Process Scheduler->System Process Requests
function FillRncntl() {
var iframePages = document.getElementById("iframeid").contentDocument;
var targetContent = iframePages.getElementById("ptifrmtgtframe").contentDocument;
var runcntl = targetContent.getElementById("PRCSRUNCNTL_RUN_CNTL_ID");
runcntl.value='test';
}
i am trying to display a loading image when the page is loading.Here is my code.
<body onunload="doHourglass();" onbeforeunload="doHourglass();" onload="setTimeout('show()',2000);">
<div id="divWait" style="display:none" >
<h1>wait...</h1>
</div>
<div id="main" style="display:none">
<asp:Button ID="btnHidden" runat="server" OnClick="code behind handler"
<div/>
<script>
function doHourglass()
{
console.log("inside dohour glass");
var divwait=document.getElementById('divWait');
var divmainpage=document.getElementById('main');
divmainpage.style.zIndex="0";
divwait.style.zIndex="1";
divwait.style.display='inline';
divmainpage.style.display='none';
setTimeout("show()",2000);
}
function show()
{
console.log("inside show");
var divwait=document.getElementById('divWait');
var divmainpage=document.getElementById('main');
divmainpage.style.zIndex="1";
divwait.style.zIndex="0";
divwait.style.display='none';
divmainpage.style.display='inline';
}
</script>
</body>
Problem is, it is not working when the page is loading for the first time.when i checked using console.log() i see for the first time control is not going inside doHourGlass() function.but for button click event it is working perfectly.
Things i tried:checked this link on SO, but i am not putting static html.I am trying to get the id of an html element and then working on that element so i can not use that solution.
Edit:one way i found is to keep divwait visible and hide main division then show main div when the page loads.but this way i can only display static html.i want to be able to call a function when page is loading for first time.
what is happening?is there a way to achieve it?please guide me.
this is my html page content (a part of it)
<body onLoad="javascript:introJs().start();">
<div id="page">
<div id="header">
Link
Headline
</div>
I have implemented introjs with my html page as shown above. but i need to automatically execute the function given on html onLoad.. but only on first visit with cookies. I have no idea about cookies. can anyone please change or create a cookie which execute the introjs automatically on first visit.
You can use localstorage like,
SCRIPT
window.onload=function(){
if(!localstorage.getItem('intorjsInit') && localstorage.getItem('intorjsInit')!=1)
{
javascript:introJs().start();
}
else
{
localstorage.setItem('intorjsInit',1);
}
};
HTML
<body><div id="page">.....
I have a file login.ejs which start with <div id="loginPage"> and then contains a login form. I then have a file index.ejs with a <div id="container"> id. I want to be able to click a link outside of the container-div which would replace the content of the container-div with the content of the loginPage div. In my index.ejs I have:
<p><b>Admin</b></p>
and I have a script in index.js:
function events() {
// register events
$('#admin').click(function()
{
$('#container').html('#loginPage');
return false;
});
}
But I cannot get it to work, anyone that could give some ideas please?
you need to do like as below , first get html like $('#loginPage').html() and than assign this html to container .
$('#admin').click(function()
{
$('#container').html($('#loginPage').html());
return false;
});
to be precise use the load function:
$('#admin').click(function(e){
e.preventDefault();
$('#container').load('login.ejs #loginPage');
});//--------------------^^^^^^^^--^^^^^^^^^^-----loads the <div id="loginPage">
//---------------------------------------------from the login.ejs
I am working on a module of the project and I seemed to have stuck up. Tell me explain me what I am trying to do.
I have a text box where the user of my web portal will post the facebook like box code, either a fbml code or xfml code.As soon as the user clicks the submit buttton he should be able to see that like box on my site.
But whats happening right now with me is that I am not able to see the like box .
I have put upon the code below,
<!DOCTYPE HTML>
<head>
</title> Facebook like widget </title>
<script type="text/javascript"/>
function display_fb()
{
var fburl= document.getElementById('fb_link').value;
document.write(fburl);
}
</script>
</head>
<body>
<h1>IF YOU HAVE ANY FACEBOOK FAN PASTE THE LINK HERE!!!</h1>
<label> Paste the link here<input type="text" id="fb_link"/> </label>
<input type="button" value="submit" onClick="display_fb();" />
<div id="userFBLink" >
<label>Wanted is here:</label>
</div>
</body>
</html>
I guess need to refresh the div tag once the user puts his facebook like box code.
I believe I didn't understand you wrong and you want to add the text of this input into that div as a label (I'll suggest you to use "span" instead, because "label" is for labeling form fields).
It seems that you are looking for that:
function display_fb()
{
var fburl= document.getElementById("fb_link").value;
var lblLink = document.createElement("span");
lblLink.appendChild(document.createTextNode(fbUrl));
document.getElementById("userFBLink").appendChild(lblLink);
}
Or with jQuery:
function display_fb()
{
var lblLink = $("<span></span>");
lblLink.append($("input#fb_link").val());
$("div#userFBLink").append(lblLink);
}
It's up to you!