How to include jsp file inside another jsp file using jQuery - javascript

I am trying to include a jsp file when a button is clicked like so
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#RegisterChildPage').on('click', function() {
$('.content').html("<%# include file="FamilyManagerView.jsp"%>");
});
});
</script>
My problem is in this line $('.content').html(<%# include file="FamilyManagerView.jsp"%>); There is a syntax error and i don't know what is the correct way to write it.
<%# include file="FamilyManagerView.jsp"%> is not included properly because of the <% %>.

This may help you.
Add a DIV to your JSP file which includes your other JSP file and it is initially hidden
Then remove hidden in onlclick function
!document.getElementById('testContainer').hidden - The HTMLElement property hidden is a Boolean which is true and using ! operator you can display the hidden DIV.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Main JSP</title>
</head>
<body>
<div class="row">
<div class="col-12">
<div class="row">
<button class="btn btn-success" onclick="renderElement()">Render Me</button>
</div>
<div class="row mt-2" id="testContainer" hidden>
<!-- Insert your file here -->
<%# include file="test.jsp" %>
</div>
</div>
</div>
</body>
<script>
const renderElement = () => {
document.getElementById('testContainer').hidden = !document.getElementById('testContainer').hidden;
}
</script>
</html>

Related

CSS files fails to load on first request of Nodejs/Express web app. Works fine from second request onwards

I have created a basic web app that displays some items after reading them from a json file.
So, there's a form, and on adding input and submitting that form, the input gets written in the json file. After that, it is redirected to a page where I display the json file.
When I add some input in the form and submit it, it gets redirected to the page where I show the data from the json file. But the css files fails to load and I am left with a html page with no styling.
See this image
But on reloading this page, the css files loads and I have styling.
See this image, CSS files have been loaded
Here is my .ejs code which gets loaded as html in the browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
<%= title%>
</title>
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/product.css">
</head>
<body>
<header class="main-header">
<nav class="main-header__nav">
<ul class="main-header__item-list">
<li class="main-header__item"><a class="active" href="/">Shop</a></li>
<li class="main-header__item">Add Product</li>
</ul>
</nav>
</header>
<main>
<% if(prods.length> 0) { %>
<div class="grid">
<% for(let product of prods) { %>
<article class="card product-item">
<header class="card__header">
<h1 class="product__title">
<%= product.title%>
</h1>
</header>
<div class="card__image">
<img src="https://cdn.pixabay.com/photo/2016/03/31/20/51/book-1296045_960_720.png"
alt="A Book">
</div>
<div class="card__content">
<h2 class="product__price">$19.99</h2>
<p class="product__description">A very interesting book about so many even more interesting
things!
</p>
</div>
<div class="card__actions">
<button class="btn">Add to Cart</button>
</div>
</article>
<% } %>
</div>
<% } else { %>
<h1>No products found!</h1>
<% } %>
</main>
</body>
</html>
Here is the where I render the .ejs file.
exports.showProducts = (req, res, next) => {
Product.fetchAll(products => {
res.render('shop.ejs', {
prods: products,
title: 'My Shop',
path: '/',
hasProducts: products.length > 0,
activeShop: true,
productCSS: true
});
// console.log(adminData.products);
// res.sendFile(path.join(__dirname, '../', 'views', 'shop.html'));
});
Please help me with this.

javascript : my javascript code not working ??

it seems that every thing is fine but when i click on the button my dropdown menu doesn't appear , and i think the reason is that the javascript not working !! the styling file in my css folder and it's working fine
here is my code ..
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/skin.css"/>
<title>Change Directory Content</title>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
</script>
</head>
<body>
<%#include file="header.jsp" %>
<div id="wrapper">
<div id ="page">
<div id="content">
<div class="box">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
<!--End Div -->
<div class="dropdownL">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
<br class="clearfix"/>
</div>
<%#include file="footer.jsp" %>
</body>
</html>
any help ?
If you want to do with jquery
enter link description here
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction(id) {
$(id).siblings(".dropdown-content").toggle('slow');
}
</script>
Replace button by
Dropdown

Submitting html form in php

This is my first.php page html part. I have a form including a div and a submit button. I want when button clicked, open a new page (second.php) and display contents of div(id=orderList)
<form id="orderForm" action="second.php">
<div class="col-md-5" id="orderList">
<h3 align="center">Sipariş Listesi</h3>
</div>
<div>
<button type="submit" id="firstConfirmButton" class="btn btn-primary btn-lg">Onayla</button>
</div>
</form>
This is javascript part;
$("#orderForm").submit(function() {
var content = $('#orderList').html();
console.log(content); //(no problem everything is ok)
$('#confirmForm').val(content);
var content2 = $('#confirmForm').html();
console.log(content2); //(it is null)
});
And this is second.php where I want to display the contents in the div(id=confirmForm)
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>
<META name=viewport content="width=1024, initial-scale=1">
<META http-equiv="Content-Type" content="text/html; charset=utf-8" />
<META HTTP-EQUIV="Content-language" CONTENT="tr">
<link href="shift.css" rel="stylesheet">
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="product.css">
</head>
<body>
<div id="confirmForm"> </div>
</body>
</html>
It doesn't work, what should I change?
If $('#confirmForm') is not an input item you cant access it using $('#confirmForm').val();
your Form is missing method attribute, add POST in method by default its GET
<form id="orderForm" method="post" action="second.php">
Add a <textarea> in first.php inside orderForm to hold the content of #ordelist using jquery and in second page you can get it using $_POST['confirmForm'];
<textarea name="confirmForm" id="confirmForm" cols="30" rows="10"></textarea>
in second page you do this
<div id="confirmForm"> <?php echo $_POST['confirmForm'] ?> </div>
You're trying to put the content in #confirmForm, which isn't present in the first file.
There is no need for JavaScript here. Grab the content of the div using $_['post']
Try this its working :
first.php
<html>
<head>
</head>
<form id="orderForm" action="second.php">
<div class="col-md-5" id="orderList">
<textarea name="confirmForm" id="confirmForm" cols="30" rows="10">Sipari Listesi</textarea>
</div>
<div>
<button type="submit" id="firstConfirmButton" class="btn btn-primary btn-lg">Onayla</button>
</div>
</form>
</html>
second.php
<html>
<body>
<?php
echo $_REQUEST[confirmForm];
?>
</body>
</html>
In addition to what Saqueib said, I think you'll need to make a jQuery change too. I think you're looking for the html() method, not val() because it looks like you're trying to change the displayed HTML, right?

Return the result as partial view from asp.net MVC 4 controller

I am trying to access Linked in profile data in my asp.net mvc 4 application. I have created a link to post data to linked in like this
Get LinkedIn Profile
Then in this action method, I am creating url to post to linked in, passing return url
[AllowAnonymous]
public ActionResult LinkedIn()
{
string APIKey = ConfigurationManager.AppSettings["LiApiKey"];
string SecretKey = ConfigurationManager.AppSettings["LiSecretKey"];
_oathClient.RegisterClient(APIKey, SecretKey);
string redirectURL = _oathClient.Authenticate(new Uri("http://127.0.0.1:81/Account/LinkedInAuthorized"));
return Redirect(redirectURL);
}
when user returns to this call back function, I make API call to get access token:
[AllowAnonymous]
public ActionResult LinkedInAuthorized(string code, string state)
{
string returnVal = _oathClient.LinkedInShare(new Uri("http://127.0.0.1:81/Account/LinkedInAuthorized"), code);
return PartialView("LinkedInProfileInfo", returnVal);
}
public string LinkedInShare(Uri redirectUri, string authorizationCode)
{
var accessCodeUri =
string.Format(
"https://www.linkedin.com/uas/oauth2/accessToken?grant_type=authorization_code&code={0}&redirect_uri={1}&client_id={2}&client_secret={3}",
authorizationCode,
redirectUri.AbsoluteUri,
linkedInApiKey,
linkedInSecretKey);
return LinkedInWebRequest(accessCodeUri);
}
where LinkedInWebRequest makes another API call to get Linked in data etc.
My problem is that I want to return partial view from LinkedInAuthorized but when LinkedInProfileInfo loads, it opens in full page, replacing contents of the main view.
I tried using child only attribute but that is not acceptable as call back function. I tried using renderpartial and render action, html.partial, but all of them replace the contents of main view.
How can I return the result of Oauth 2.0 CallBack function as partial view ?
I couldn't find the libraries you've used to authenticate against linkedin. So I went ahead and did something myself. The same principle would apply in your case. Of course, you might need to adapt your design to the idea.
For the purpose of the demonstrated I have somehow bypassed the traditional login process (checking against the db, etc); the oauth page is a simple form with accepts a callback url; it has a textbox (to collect the username typed into it) and a submit button which redirects to a page in the calle (App1).
Note the javascript in the "client" web application.
App1 - the client web application
WebForm1.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApp.App1.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>OAuth</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div style="margin-left: 15px">
<h2>Mock Oauth with ASP.NET Webforms</h2>
<p>Although this example is based on ASP.NET Webforms the principle is the same for an ASP.NET MVC web application</p>
<p>Button <strong>Authenticate Me</strong> will pop up an iframe in this page which navigates to your authentication provider</p>
<p>Right click and view the page source to understand the javascript required for the authentication to happen</p>
<form id="form1" runat="server">
<div>
<input id="btnauth" type="button" value="Authenticate Me" class="btn btn-default" />
</div>
</form>
<div id="result" class="well">
Hello Guest!
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Authenticating...</h4>
</div>
<div class="modal-body">
<iframe id="auth-iframe" style="width:100%; border:none" src="about:blank"></iframe>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="Scripts/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script>
var auth_service = 'http://localhost:36535/authenticate.aspx';
var call_back = '<%= new System.Uri(Page.Request.Url, "/OauthCallback.aspx").AbsoluteUri %>';
function oAuthBegin() {
$('#myModal').modal('show');
$('#auth-iframe').attr('src',
auth_service + '?callback=' + encodeURI(call_back));
}
function oAuthEnd(username) {
$('#myModal').modal('hide');
$('#btnauth').attr('disabled', 'disabled');
$('#result').html("Hello " + username);
}
$(function () {
$('#btnauth').click(function () {
oAuthBegin();
});
});
</script>
</body>
</html>
Notice there is an iframe. The iframe will redirect to oauth service. The oauth service will redirect to the provided callback url. This wiring is done in javascript itself.
OAuthCallback.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="OauthCallback.aspx.cs" Inherits="WebApp.App1.OauthCallback" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>OAuth Callback</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>Patience, you are authenticated as of now...redirecting...</p>
</div>
</form>
<script type="text/javascript" src="Scripts/jquery-2.0.3.min.js"></script>
<script>
$(function () {
var username = '<%= Request.QueryString["username"] %>';
setTimeout(function () {
parent.window.oAuthEnd(username);
}, 5000);
});
</script>
</body>
</html>
Notice in the above page that I call the oAuthEnd js function; this executes on our parent page.
App2 - the oauth service mock
authenticate.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="authenticate.aspx.cs" Inherits="WebApp.App2.authenticate" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
Enter User Name: <asp:TextBox ID="tbxUserName" runat="server"></asp:TextBox>
<br />
<asp:Button ID="btnauth" runat="server" Text="Authenticate" OnClick="btnauth_Click" />
</div>
</form>
</body>
</html>
authenticate.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApp.App2
{
public partial class authenticate : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnauth_Click(object sender, EventArgs e)
{
var url = string.Format("{0}?username={1}", Request.QueryString[0], Server.UrlEncode(tbxUserName.Text));
Response.Redirect(url);
}
}
}
Will update this answer with the link to a downloadable solution once I upload it somewhere...
Hope this helps.

Javascript is only working inline

I have a problem where my javascript is not working in a separate file, but it is working inline.
This is the working code with my javascript in line. This is in asp.net 4.0.
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="FrontEnd.master.cs" Inherits="pigninja.FrontEnd" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript">
function ShowItem(itemID) {
document.getElementById(itemID).style.visiblity = "visible";
}
function HideItem(itemID) {
document.getElementById(itemID).style.visiblity = "hidden";
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Pigninja Paradox</title>
<link href="../Styles/Styles.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="pageWrapper">
<div id="header">
</div>
<div id="navigation">
<div id="menu">
<ul>
<li>Home</li>
<li>About Me
<div id="submenu">
<ul>
<li onmouseout="HideItem('submenu');" onmouseover="ShowItem('submenu');"><a href="1983.aspx">
1983</a></li>
<li>1988</li>
<li>1990's</li>
<li>2000</li>
<li>Present</li>
</ul>
</div>
</li>
<li>Programming</li>
<li>Rants</li>
</ul>
</div>
</div>
<div id="content">
<asp:ContentPlaceHolder ID="Content" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer">
<p>
I'd rather be an outlaw then to fall to Babylon law</p>
</div>
</div>
</form>
</body>
</html>
The problem is as soon as I change this to
<script language="javascript" type="text/javascript" src="../scripts/navBarScript.js"> </script>
My code no longer works and I can't for the life of me figure out why.
Make absolutely sure that the src path your of your script is correct, you could always set it as such
src="/scripts/navBarScript.js"
Starting with a / to reference from the base, There is no reason for it to not work
Also, put the external script tag inside the head or just before the closing body tag
I'm not sure why this fixed it, but I ended up changing my script to
function ShowItem(itemID){
document.getElementById(itemID).style.display = "block";
}
function HideItem(itemID){
document.getElementById(itemID).style.display = "none";
}
After these changes my code performed as expected. I do not know how or why. But this resolved my issue.

Categories