|
You don't.
The ActionLink method runs on the server, and generates HTML which is returned to the client, long before any of your Javascript runs, and long before the user has the chance to type anything into the input.
You're going to need to generate the link's href on the client.
Alternatively, wrap the elements in a <form>, change the input name to match the parameter name on your action, and replace the link with a submit button.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
1) What I'm trying to do: Uploading a file with aws s3 and then taking the filename and filetype and placing it at the end of the url to save it in sql so that every time the person logs in, it will pull the picture up by user image url
2) Problem: Not uploading and not recognizing file in filename or filetype. Coming up with undefined for filetype and filename in URL and signedURL
3) fileUploadService.js USED IN NODEJS (below)
Can anyone let me know what I'm doing wrong or anything missing?
const aws = require('aws-sdk');
aws.config.region = 'us-west-2';
aws.config.update({ accessKeyId: '', secretAccessKey: '' });
const PROFILE_S3_LINK = "https://sabio-training.s3.amazonaws.com/";
module.exports = {
getUrl: getUrl
}
function getUrl(req, res) {
const s3 = new aws.S3();
const fileName = 'C56/'+"filename"+'/' ;
const fileType = "filetype";
const s3Params = { getSignedURL looks like this : https:
Bucket: 'sabio-training', Expires=1536877443&Signature=WxSvLSzfyZKDRN9LawVOwj1ayVY%3D&x-amz-acl=public-read
Key: fileName, URL looks like this : https:
Expires: 3000,
ContentType: fileType,
ACL: 'public-read'
};
s3.getSignedUrl('putObject', s3Params, (err, data) => {
if (err) {
console.log(err);
return res.end();
}
const returnData = {
signedRequest: data,
url: `${PROFILE_S3_LINK}${fileName}${fileType}`
};
res.write(JSON.stringify(returnData));
res.end();
});
}
=========================================================================
fileUploadRoute.js
const router = require("express").Router();
const fileUploadController = require("../controllers/fileUploadController")
router.put("/", fileUploadController.getUrl);
module.exports = router;
==========================================================================
fileUploadController.js
const fileUploadService = require('../services/fileUploadService')
const responses = require("../models/responses");
module.exports = {
getUrl: getUrl
}
function getUrl(req, res) {
fileUploadService.getUrl(req, res)
.then(response => {
res.send(response)
})
.catch(error => {
res.send(error)
})
}
===========================================================================
index.js in node portion
const router = require("express").Router();
const pogsRoutes = require("./pogs.routes");
const userFromJWT = require("../filters/jwt.user");
const validateUser = require("../filters/validate.user");
const testRoutes = require("./test.routes");
const profileRoute = require("../profile/profileRoute");
const fileUploadRoute = require("../fileUpload/fileUploadRoute")
module.exports = router;
router.use("/api/pogs", pogsRoutes);
router.use("/api/upload", fileUploadRoute)
router.use("/api/profilePage", profileRoute)
router.use(userFromJWT);
router.use(validateUser);
router.use("/api/test", testRoutes);
============================================================================
USED IN REACT
Axios pulled from profile page
handleClickUpload = evt => {
evt.preventDefault()
console.log("RESULT : ", this.state);
axios.put(`${NODE_API_URL}/api/upload`, {
})
.then(response =>{
console.log(
response,"URL SIGNED REQUEST : ",response.data.signedRequest, " URL : ",response.data.url
)
})
.catch(error => {
console.log(error);
})
}
Upload button and file upload portion inside profile page
<div method="post" encType="multipart/form-data" action="/">
<input type="file" name="fileName" className="btn" />
<input type="submit" value="Upload" className="btn" onClick={this.handleClickUpload}/>
|
|
|
|
|
I think your problem starts here at the very beginning on the file upload process.
What this line does:
it allows you to attach to the selected file to upload. You can get the file name, file data, file type here.
depending on the select method, you want to get your files by using
Drag and drop
event.target.items || event.dataTransfer.items
Select
event.target.files
So with a select button, your code would be similar to this:
onSelect(event: any) {
const files = event.target.files,
file = files[0],
fileType = file.type,
fileName = file.Name,
reader = new FileReader;
}
You have the option to grab the image data as well using the FileReader
If you want to read the file data, you add an event listener and use the FileReader.
This will get the image as a base64 string, that you can update the image preview without modification, straignt to the "src".
You can read up on reader.readAsDataUrl and see that there are more options.
let b64Image = '';
this.imageType = file.type;
reader.addEventListener('load', function () {
b64Image = reader.result.toString();
dI.setAttribute('src', b64Image);
b64.setAttribute('value', b64Image);
}, false);
reader.readAsDataURL(file);
After this you on your own. I would just create a model for the record that includes the image, and use http post to contact your NodeJS code to accept the model and write it. I havn't written anything in React yet but this is TypeScript, which is similar to JavaScript and React.
My opinion, your AWS code seems really complicated and over kill for just passing image data
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
if (this.settings.mode === 'edit') {
var $this = this;
period.draggable = true;
period.draggable({
grid: [0, this.periodPosition],
containment: 'parent',
drag: function (event, ui) {
$('.jqs-period-time', ui.helper).text($this.periodDrag(ui));
$this.closeOptions();
},
stop: function (event, ui) {
if (!$this.isValid($(ui.helper))) {
console.error('Invalid position');
$(ui.helper).css('top', Math.round(ui.originalPosition.top));
}
}
}).resizable({
grid: [0, this.periodPosition],
containment: 'parent',
handles: 'n, s',
resize: function (event, ui) {
$('.jqs-period-time', ui.helper).text($this.periodResize(ui));
$this.periodText(period);
$this.closeOptions();
},
stop: function (event, ui) {
if (!$this.isValid($(ui.helper))) {
console.error('Invalid position');
$(ui.helper).css({
'height': Math.round(ui.originalSize.height),
'top': Math.round(ui.originalPosition.top)
});
}
}
});
|
|
|
|
|
You're setting period.draggable to true, then on the next line you're trying to call it as a function. If it was a function before you set it to true, it isn't one afterwards.
|
|
|
|
|
I am using datalist to get images from database and working good
what I want is modal popup with next and previous to show my image which appears in page
I try some code popup worked fine but next previous not working
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9);
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
<a href="https://www.codeproject.com/Members/media">@media</a> only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
.nvgt{
position:absolute;
top: 120px;
height: 50px;
width: 30px;
opacity: 0.6;
}
.nvgt:hover{
opacity: 0.9;
}
#prev{
background: #000 url('./image/prev.png') no-repeat center;
left: 0px;
}
ul {
list-style-type: none;
}
ul li {
display: inline-block;
background:white;
margin-bottom:10px;
}
.change_btn {
text-align:center;
font-size:30px;
float:left;
}
<pre>
Blog
thepast
.
ASP.NET
Home
Get Started
Learn
Hosting
Downloads
Community
Forums
Help
.
Home/ASP.NET Forums/General ASP.NET/jQuery for the ASP.NET Developer/modal popup window with datalist
modal popup window with datalistRSS
4 replies Subscribe via Email
Last post 1 hour, 15 minutes ago by thepast
.
‹ Previous Thread|Next Thread ›
Print
Share
Shortcuts
Active Threads
Unanswered Threads
Unresolved Threads
My Threads
Forum Subscriptions
Support Options
Advanced Search
Reply|
Edit|
Favorites|
Alert Moderators
.
thepastthepast
None
0 Points
8 Posts
modal popup window with datalist
10 hours, 6 minutes ago|LINK|85.194.71.226
I am using datalist to retrieve images from database and everything is working perfectly
I want when I click on image modal popup show image with next and previous buttons show next images which in page if in page 5 images show 5 if in page 20 images popup show 20
please help me I am stuck in that.
my data list is
<asp:datalist id="DataList1" runat="server" footerstyle-height="20px" height="375px" repeatcolumns="5" repeatlayout="Table" width="975px" cellpadding="0" cellspacing="0">
<itemtemplate>
<table class="table" style="margin-right: 10px"><tbody><tr> <th colspan="2">
</th></tr> <tr> <td colspan="2"></td> </tr> <tr> <td></td> <td> <br> Year: <%# Eval("Year")%> <br> Year: <%# Eval("month")%>" />
</td> </tr> <tr> <td colspan="2"><span style="font-size: 12px">Name:</span> <span style="font-size: 12px"><%# Eval("imagename")%></span></td> </tr> <tr> <td colspan="2"><span style="font-size: 12px">Date:</span> <span style="font-size: 12px"><%# Eval("uploaddate", "{0:dd/MM/yyyy}")%></span></td> </tr><tr> <td colspan="2"> <span style="font-size: 12px; margin-bottom: 30px">
<asp:linkbutton id="LinkButton1" runat="server">Dawnload</span></td></tr> </tbody></table>
<selecteditemstyle backcolor="#E2DED6" font-bold="True" forecolor="#333333">
.
Reply|
Mark As Answer|
Edit|
Favorites|
Alert Moderators
.
thepastthepast
None
0 Points
8 Posts
Re: modal popup window with datalist
9 hours, 52 minutes ago|LINK|85.194.71.226
Please Help I am waiting for this issue
Thanks in advance
.
Reply|
Mark As Answer|
Edit|
Favorites|
Alert Moderators
.
thepastthepast
None
0 Points
8 Posts
Re: modal popup window with datalist
8 hours, 10 minutes ago|LINK|85.194.71.226
I found some code work with popup modal but moving between images not working ( next and precious) not working
can any one modify it please
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9);
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
<a href="https:
.modal-content {
width: 100%;
}
}
.nvgt{
position:absolute;
top: 120px;
height: 50px;
width: 30px;
opacity: 0.6;
}
.nvgt:hover{
opacity: 0.9;
}
#prev{
background: #000 url('./image/prev.png') no-repeat center;
left: 0px;
}
ul {
list-style-type: none;
}
ul li {
display: inline-block;
background:white;
margin-bottom:10px;
}
.change_btn {
text-align:center;
font-size:30px;
float:left;
}
<asp:datalist id="DataList1" runat="server" footerstyle-height="20px" height="375px" repeatcolumns="5" repeatlayout="Table" width="975px" cellpadding="0" cellspacing="0">
<itemtemplate>
<table class="table" style="margin-right: 10px"><tbody><tr> <th colspan="2">
</th></tr> <tr> <td colspan="2"></td> </tr> <tr> <td></td> <td> <br> Year: <%# Eval("Year")%> <br> Year: <%# Eval("month")%>" />
</td> </tr> <tr> <td colspan="2"><span style="font-size: 12px">Name:</span> <span style="font-size: 12px"><%# Eval("imagename")%></span></td> </tr> <tr> <td colspan="2"><span style="font-size: 12px">Date:</span> <span style="font-size: 12px"><%# Eval("uploaddate", "{0:dd/MM/yyyy}")%></span></td> </tr><tr> <td colspan="2"> <span style="font-size: 12px; margin-bottom: 30px">
<asp:linkbutton id="LinkButton1" runat="server">Dawnload</span></td></tr> </tbody></table>
<selecteditemstyle backcolor="#E2DED6" font-bold="True" forecolor="#333333">
<div id="myModal" class="modal">
×
<a href="#">prev</a>
<div style="width: 70%; float: left">
</div>
<a href="#">Next</a>
<div id="caption"></div>
</div>
var modal = document.getElementById('myModal');
var img = $('#myImg');
var modalImg = $("#img01");
var captionText = document.getElementById("caption");
$('.myImg').click(function () {
modal.style.display = "block";
var newSrc = this.src;
modalImg.attr('src', newSrc);
//captionText.innerHTML = this.alt;
});
$('.change_btn').click(function () {
var btn_click = $(this).find('a').html();
var current_src = $('#img01').attr('src');
$('.myImg').each(function () {
if ($(this).attr('src') == current_src) {
current_index = $(this).parent().index();
if (btn_click == 'prev') {
var new_index = current_index - 1;
$('#img01').attr('src', $('attach:eq(' + new_index + ')').find('img').attr('src'));
}
else if (btn_click == 'Next') {
var new_index = current_index + 1;
$('#img01').attr('src', $('datalist1:eq(' + new_index + ')').find('img').attr('src'));
}
}
});
});
var span = document.getElementsByClassName("close")[0];
span.onclick = function () {
modal.style.display = "none";
}
please any one can modify it I am stuck about 4 days couldn't solve it
please
|
|
|
|
|
<pre>I have developed an extension for automation. The data available on my web page, i use it to populate the check boxes and radio buttons. There are tabs and i use the data on one tab to auto populate the form elements on another tab.My problem is the tab from which i take the data, does not load all the data at once and when i go to the other tab it fills the data with whatever has been loaded. So if it has 500 records, at times it just loads 75-80 and based on those 75-80 records my automation is working.I want all data to be loaded on my page load for automation to work properly.FYI I can't access the server data so I Manipulate the text/information available on the webpage.Is it possible to do it with extension. I am not much well versed with javascript and working on the extensions on the first time
Rupa
|
|
|
|
|
Hey everyone, today I was making a javascript space invaders game and stumbled upon a problem. When pressing on the right and left keys the ship does not move. I hope somebody can help and thank you in advance 
Below is my code
function startGame(){
gamearea.start();
}
function movePlayer(event){
if(!player.moving){
moveInterval = setInterval(function(){player.move(event);}, 50);
player.moving = true;
}
}
function stopPlayer(event){
clearInterval(moveInterval);
player.moving = false;
}
var gamearea = {
canvas: document.createElement("canvas"),
start: function(){
this.canvas.width = 1100;
this.canvas.height = 600;
this.canvas.style.border = "3px solid gray";
this.canvas.style.display = "block";
this.canvas.style.margin = "auto";
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.context=this.canvas.getContext("2d");
player.draw();
window.addEventListener("keydown", movePlayer, event);
window.addEventListener("keydown", stopPlayer, event);
}
}
var player={
x:40, y:580, moving:false,
draw:function(){
gamearea.context.fillStyle="ivory";
gamearea.context.fillRect(this.x+60, this.y, 80, 20);
gamearea.context.fillRect(this.x+95, this.y-20, 10, 20);
},
update: function(d){
this.x+=d;
},
move: function(ev){
gamearea.context.clearRect(this.x, this.y, 80, 20);
gamearea.context.clearRect(this.x+35, this.y-20, 10, 20);
if(ev.keycode== 37 && this.x>0) this.update(-15);
else if(ev.keycode == 39 && this+80<1100) this.update(15);
this.draw();
}
}
|
|
|
|
|
I don't get it. You would think that if someone deeplinks to localhost:5000/reviews that the page would display, and not have to use routerLink to get to the page. It works with routerLink, but I can't refresh the page, or hand type the url.
My home works localhost:5000/home and I can type every url route to access the page.
I read the previous post Angular sucks, OK it kind of does. Bu tI'm pretty close to completing my learning project.
Here's my app.module, and below review module. Maybe I missed something here.
Tomorrow I'll recreate this using straight ng and see what happens.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { CoreModule } from '../core/core.module';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { AppComponent } from './app.component';
import { AdminSharedModule } from '../admin/shared/adminShared.module';
import { HomeSharedModule } from '../home/shared/homeShared.module';
import { PortfoliosSharedModule } from '../portfolios/shared/portfoliosShared.module';
export const AppRoutes: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'home' },
{ path: 'home', loadChildren: '../home/home.module#HomeModule' },
{ path: 'reviews', loadChildren: '../reviews/reviews.module#ReviewsModule' },
{ path: 'portfolios', loadChildren: '../portfolios/portfolios.module#PortfoliosModule' },
{ path: 'admin', loadChildren: '../admin/admin.module#AdminModule' }
];
@NgModule({
declarations: [
AppComponent
],
imports: [
CoreModule.forRoot(),
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
HttpModule,
HttpClientModule,
ReactiveFormsModule,
MDBBootstrapModule.forRoot(),
AdminSharedModule,
HomeSharedModule,
PortfoliosSharedModule,
RouterModule.forRoot(AppRoutes)
],
exports: [
RouterModule
],
schemas: [
NO_ERRORS_SCHEMA
],
bootstrap: [AppComponent]
})
export class AppModule { }
And my review module
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { RouterModule, Routes } from '@angular/router';
import { ReviewsComponent } from './components/reviews.component';
const reviewsRoutes: Routes = [
{ path: '', component: ReviewsComponent }
];
@NgModule({<br />
exports: [
RouterModule
],
imports: [
CommonModule,
FormsModule,
HttpClientModule,
MDBBootstrapModule.forRoot(),
RouterModule.forChild(reviewsRoutes)<br />
],<br />
declarations: [
ReviewsComponent
]
})
export class ReviewsModule { }
If it ain't broke don't fix it
Discover my world at jkirkerx.com
modified 18-Aug-18 14:06pm.
|
|
|
|
|
Well it works in Angular 6 using ng to create, build and serve the app.
I've determined that it has something to do with .Net Core 2.1 and the webpack, needing a angular router loader.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
It was an error in my startup.cs in Configuration. I didn't have the all the routes loaded in the array below.
So it was .net core that was rejecting direct url typing or deep linking.
Maybe I should remove this. But I learned alot of routing and navigation in Angular and will experiment with removing it.
var angularRoutes = new[] {
"/admin",
"/error",
"/home",
"/reviews",
"/portfolios",
"/setup"
};
app.Use(async (context, next) =>
{
context.Response.Headers.Add("X-Frame-Options", "DENY");
if (context.Request.Path.HasValue && null != angularRoutes.FirstOrDefault(
(ar) => context.Request.Path.Value.StartsWith(ar, StringComparison.OrdinalIgnoreCase)))
{
context.Request.Path = new PathString("/");
}
<pre>
await next();
});
<div class="signature">If it ain't broke don't fix it
Discover my world at <a href="https://jkirkerx.com" target="_blank">jkirkerx.com</a></div>
|
|
|
|
|
So, I'm 16 years old and decided I wanted to learn to code yesterday. The only place where I knew I could, was Codecademy. In school I didn't have any coding experience, so I'm a bit stumped as to what I should be learning. I began with JavaScript and already understand the basics of flow, conditions, functions etc. but nothing nearly enough to actually try to undertake a project myself.
So my questions are: Am I right in choosing JavaScript as my first language (bearing in mind i'm not sure why I want to code, it just seems really fun solving the puzzles, but I would love to, in the future, make something)? And what were your experiences in first learning to code? Was it frustrating, how long did it take you to be confident enough to try to code your first project, which language did you choose, and if you had the chance, would you change your first language?
|
|
|
|
|
Javascript is probably a good starting point in learning the general structure of program flow. But as to the future, it largely depends what sort of applications you want to create.
For desktop/Windows I would suggest C#, and there is an excellent free book at .NET Book Zero by Charles Petzold[^].
For web applications C# and Javascript together, plus HTML and CSS. There are some good web tutorials at ASP.NET | The ASP.NET Site[^].
For something quick and easy you could try Python, see The Python Tutorial — Python 3.4.9 documentation[^].
No doubt other members will have further suggestions.
|
|
|
|
|
Learning to code is very little about which language you choose and very much about learning to decompose problems.
That said, where you go when you're first starting has everything to do with what sort of learner you are. If you need a structured approach to learning you may find JS is the wrong choice and I would recommend something along the lines of Java or C#. You'll find that JS is exceptionally forgiving, and it will happily push through code that is malformed or just plain wrong and attempt to resolve it into a coherent response. This is not the way to learn to code.
If you really want to dig in, the C/C++ family is where I started, and understanding how those work did wonders for me in terms of learning other languages down the line, but it is absolutely unforgiving.
"Never attribute to malice that which can be explained by stupidity."
- Hanlon's Razor
|
|
|
|
|
Welcome to the coding world !
I was also new to coding last year.I was little bit confused regarding which programming language to choose.Then i decided to play with Python.Python is too much fun and addictive.I started with solving simple programming problems. Python made every thing simple and interesting.Later i realized that, it is good time to switch for real world problems.My first ever project was Simple Snake Game using Pygame.I made it just to be cool in front of my friends, but later i got addicted to build such projects.I built more then 10 simple projects that made my day to day life easy like Image to PDF converter, Pyro-Virtual assistant, my own programming language, attendance management system etc.
Later i switched to C and then C++.Now i am on a long and interesting journey of competitive programming.... 
Good Luck!
|
|
|
|
|
I'm trying to write a split method regular exspression that will match the text [code] but won't match it if it's wrapped in quotes like this "[code]" How do I write a regular to accomplish that?
--Brian
|
|
|
|
|
/(^|[^"])(\[code\])($|[^"])/g
This will also capture the character before and after the [code], if any, so you'll need to account for that.
Refiddle[^]
Regexper[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
|
|
Please sir, I would be very much grateful to you if you could guide me on how to create a web application with Javascript. I am a newbie but very eager to learn and I am working towards designing a data visualization tool. Currently learning Javascript and JSON. Have some idea of PHP.
Thank you sir.
Yours
Awal Sweds
|
|
|
|
|
These forums are for technical questions. Google will find you many tutorials on Javascript, PHP and other web design issues.
|
|
|
|
|
I'm testing in Chrome, Edge, FF, IE, and O.
The case is that a page has up to 5 iframes that show on a single page. A page is executed in each iframe. These pages have links to other pages that have links. A browser refresh returns the screen to the initial page state in all 5 browsers. But in Chrome and O, the history of the iframes of the set are not deleted. The browser back button or a JavaScript history(-1) button work as originally intended in FF, IE, and Edge. But in Chrome and O, these back buttons start to step back through the sequential history of all iframes. And the same thing happens with a single frame.
I do a querySelectorAll('iframe') on exit and refresh/load and no iframes are indicated. Yet, in Chrome and Opera, when the page refreshes and the iframes are created again, they remember the history of the same named iframes that were there before the refresh.
I refresh in 3 different ways in this application including the browser refresh button, parent,location,reload(parent.location.href), and parent,location,reload with a particular function. These all work in Edge, FF, and IE. I refresh and can back out of the page to the calling page. In chrome and Opera, even though the iframes have been removed, the new iframes retain the history of the previous iframes.
I have tried about half dozen approaches in JavaScript to insuring the iframes have been removed. My latest attempt follows. I'm not sure if I'm executing right, but the length is always 0.
var iframesx = document.querySelectorAll('iframe');
for (var i = 0; i < iframesx.length; i++) {
iframesx.parentNode.removeChild(iframesx);
}
This is a real navigation problem for this application in Chrome and Opera, and I would think for any application in a similar situation. The browser Back button and JavaScript History() methods are fundamental page navigation tools. Below is a link that demonstrates the problem. The page shows up to the 5 most recent years of a color map. All data is only for testing and some of the data was doubled up for testing. I believe this is a Chrome and Opera error. I've tried to find a way to clean up iframe history thouroghly, but with no success.
http:
Bring the page up in Chrome or Opera. Take some links in a couple of iframes. Refresh and hit the browser Back button as if you are backing out of the page. In Edge, FF, and IE, instead of going through the history of the iframes before the refresh, the back out works.
My platform is Windows 10 running Apache/2.0.64 (Win32), mod_perl/2.0.3, and Perl/v5.8.3. I am running the latest versions of all browsers being used in testing. However, I think this problem exists independent of platform.
Any help will be appreciated. Thanks.
|
|
|
|
|
It's not a good idea to base your solution on non-standard features. How browsers handle these things are up to the individual browsers, if you want your app to work on all browsers then only use things that are established standards.
|
|
|
|
|
Could you please give me a little guidance. I thought I was following common practices.
I tried random NAMEs and IDs on the iframes to no avail. How can the new iframes (new NAMEs and IDs) created after the refresh be associated with the history of the iframes that existed before the refresh. Maybe the html5 object would be a better choice.
modified 10-Aug-18 9:57am.
|
|
|
|
|
hi ,
jAVA SCRIPT HOW TO ADD IMAGES
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
