I am currently trying open multiple pages on a POST request. Basically, what I am doing is searching for a job number in the database by sending a POST request and then (trying) opening the multiple pages that correspond with that job number (ex.: a webpage for job location, one for material, etc.) However, I can only return one template for the browser to open. I have looked at many, many questions like this one:
Render multiple templates at once in Flask
However, I am not finding the answer to my question (most likely because I am asking the wrong question...)
Anyway, my code so far is something like this:
HTML:
<form action="/testing" method="POST" id="existBidFormOne" name="existBidFormOne" autocomplete="off">
<!-- Row one holds Title-->
<div class="center row" style="width: 100%;">
<h1>Enter a Job Number or a Project Name:</h1>
</div>
<!-- Row two holds job number-->
<div class="row">
<!-- Column one holds Job number-->
<div class="col-m-6">
<div class="row centerInput">
<div class="col-m-4 inputPad"><b>Job Number:</b></div>
<div class="col-m-8 noPad">
<input type="text" id="exb_jobNumber" name="exb_jobNumber" class="input maxWidth" />
</div>
</div>
</div>
</div>
<div class="centerInput row">
<span>
<button type="submit" id="exb_searchOne" class="srchBtn">Search</button>
</span>
</div>
</form>
FLASK:
#app.route('/testing', methods=["GET", "POST"])
def testing():
if request.method == 'POST':
job_num = request.form.getlist('exb_jobNumber')
if job_num:
session = Session()
results = ds.get_job_info(session, job_num) # returns dict
results2 = ds.get_job_material(session, job_num) #returns dict
session.close()
# open page one
return render_template('pageOne.html', **results)
The above code works well opening one page, however I would also like to open:
render_template('pageTwo.html', **results2)
Thank you!
opening the multiple pages If you want to open multiple pages on a single webpage (i.e. in a single browser tab), then you can combine and render as many separate templates as you want with template inheritance. You can have single base page and nest many sub-pages with any content you want.
If you want to open multiple pages in multiple browser tabs, then you should return only a single main HTML page (i.e. single template), but set variable in that webpage with links of all pages you want to open in new browser tabs. Then, with the help of JavaScript and browser API method window.open() you can open those pages.
Related
I am working on a simple CRUD-web-app consisting of 3 pages, a landing/index page, 1 page to see display the saved data and 1 page to make changes and save these changes in an indexeddb.
On two of these pages i call a simple javascript-function to change .style.display from "none" to "block" in order to display a modal. For some reason it only works on one page. On the other page (HTML code displayed below) the modal is displayed for only a split second before one gets navigated to the landing page.
function modalOpen(){
let modal = document.getElementById("aModal");
modal.style.display = "block";}
The javascript file containing this code is linked in both HTML files.
Following below is the corresponding HTML Code. The function gets called in line 5.
<main>
<form>
....
<button id="bSubmitExercise" onclick="edit('all')">Änderungen speichern</button>
<button id="bOpenDeleteModal" onclick="modalOpen()">Übung löschen</button>
<button id="bBackToIndex" onclick="location.href='detailsExercise.html'">Zurück zur Übersicht</button>
</form>
</main>
<article id="aModal" class="aModal">
<section class="sModalContent">
<h5 id="hExercisesName"></h5>
<div class="dContModalButtons">
<button id="bModalConfirmDelete" class="bModal" onclick="deleteExercise()">Löschen</button>
<button id="bModalClose" class="bModal" onclick="modalClose()">Fenster schließen</button>
</div>
</section>
</article>
When i open the chrome devtools and call the modalOpen()-function from console, the modal gets displayed as intended.
This behavior occurs wether using chrome, edge or when built as apache cordova app for android mobile. Cache an saved data cleared multiple times in both browsers.
Why is this (not) happening?
For historical reasons, by default the <button> tag acts as a submit button when it's in a <form>. You can do one of two things:
If you're using some sort of ajax mechanism anyway, you might not need a <form> at all;
You can explicitly make the buttons <button type=button> to disable that submit behavior
When i click on Buy Now button the next page appears but it is not showing the contents which want it to show. What is wrong with this code?
This is HTML code:
<div class="card-body" style="height:260px;">
<p class="card-text"> Java is a general-purpose programming language that is class-based, object-oriented, and designed to have as few implementation dependencies as possible</p>
</div>
<div class="card-footer" style="height:56px;">
<center><button type="submit" id="javabtn" onclick="BuyJava()" value="Java" class="btn btn-primary">Buy Now</Button></center>
</div>
This is second page code which opens after clicking on Buy Now
<div class="container" id="containerJava">
<div>
<div>
<label style="font-size: 20; margin-top:50px; margin-left: 5px;">Course Name :-</label>
<p id="lblcourse"></p>
</div>
<div>
<label style="font-size: 20; margin-left: 5px;">Course Duration :-</label>
<p id="lblduration"></p>
</div>
<div>
<label style="font-size: 20; margin-left: 5px;">Course Price :-</label>
<p id="lblprice"></p>
</div>
And this is the JavaScript code
function BuyJava() {
document.getElementById("lblcourse").innerHTML = "Java";
document.getElementById("lblduration").innerHTML = "6 Months";
document.getElementById("lblprice").innerHTML = "6000/-";
}
As you can see below, the page shows that the values haven't been inserted:
You are using an a element which is redirecting the user to another page. The JavaScript will run on click of the button when the user is on the first page. However it will not run on the second page, as it has no way of knowing the code was supposed to be executed. If you visit BuyCourse.html directly, do you expect a code to run? No.
One way to make this work is by adding parameters to the URL of the GET call, then on the second page extract the parameters from the URL with a JavaScript code, and update the content of the page.
Below is an example of such method: in the first page we have removed the a tag. Instead we will handle the redirection with JavaScript. Instead of just redirecting to BuyCourse.html we will redirect to BuyCourse.html with some parameters. A way to do this is making a GET call and adding parameters to the URL. You can read more here about it.
For instance, here we are retrieving the value of the button that was clicked and adding it to the URL path. You can have multiple parameters of course. The URLSearchParams class will handle the conversion object -> url param object. Once stringified URLSearchParams will look just like the path you want.
function BuyJava(element) {
// here you can pass as many parameters
// as you want in a key -> value format
const params = {
value: element.value
}
// convert the param object into an URLSearchParams
// object which is a built-in structure
const searchParams = new URLSearchParams(data);
// redirect the user to the new page with the params
window.location = 'BuyCourse.html?' + searchParams
}
<div class="card-body" style="height:260px;">
<p class="card-text"> Java is a general-purpose programming language that is class-based, object-oriented, and designed to have as few implementation dependencies as possible</p>
</div>
<div class="card-footer" style="height:56px;">
<center><button type="submit" id="javabtn" onclick="BuyJava(this)" value="Java" class="btn btn-primary">Buy Now</button></center>
</div>
When clicking on the button, it should redirect you to something like 'BuyCourse.html?value=Java'.
On the second page you will have to retrieve the parameters... this time from the URL itself. You can get the URL of the current page with document.location then create an URL object and select the key you want:
const url = new URL(document.location);
const value = url.searchParams.get('value');
document.getElementById("lblcourse").innerHTML = value;
I am trying to create a JSP page which will contain multiple section. Each section will contain data fetched from data base using servlet. I tried using frame and have put frame src ="servlet" and in servlet data is being fetched and forward that to jsp which I want to be displayed inside the frame?? Anyone having some idea for this.
I often want to achieve similar things and do so by setting attributes on the HttpServletRequest object.
Servlet:
User user = userBean.getUser(231);
Job job = user.getJob();
request.setAttribute("user",user);
request.setAttribute("job",job);
request.getRequestDispatcher( url ).forward(request, response);
JSP Page
<div id="section1">
${user.name}
${user.age}
</div>
<div id="section2">
${job.title}
${job.wage}
</div>
Notes
Frame is an old HTML Element and not compatible with HTML5
I've used divs in my example, but you could use HTML5 Section to provide more smeantic meaning.
Hope I've understood your problem and this helps.
Good luck
Adam
I have a list of buttons in my <div>, when the user click on a specific div, I want display a view of my controller, for example:
<div class="row">
<div id="booking" class="command-buttons tile col-xs-12 btn">
<h3 class="title">Book appointment</h3>
</div>
</div>
I want load the appointment booking page when my user click on booking div. For load a view I use this code:
$this->load->view('appointments/book', $view);
but how I can do this using js? Usually a call a function that contains the view load, but in this case I'm on js side.
probably something like that:
$('div#booking').on('click', function() {
$(this).load( "view.html");
});
you can find some details here http://api.jquery.com/load/
I'm not entirely sure, but I think
echo $this->load->view('appointments/book', $view, true);
will return the html to your ajax success function and you can then easily inject it in the page.
I make this call in my application.js file but it doesn't seem to return a dynamically generated embedded video from the link the user inputs:
$("#new_video").bind('submit', function(e){
e.preventDefault();
var q = $(this).find('#video_video_url').val();
if (q == '')
return false;
$.embedly(q, {maxWidth: 500, wrapElement: 'div' }, function(oembed, dict){
if (oembed == null)
$(".video").html('<p class="text"> Not A Valid URL </p>');
else
$(".video").html(oembed.code);
})
});
I'm not exactly sure what's supposed to go where 'submit' is, so that may be whats causing me trouble.
My id of the form that the user inputs the url into is #new_video, the field's id is #video_video_url, and the class video is generated from my video partial:
<%= div_for video do %>
<% end %>
This is rendered in my index view, where I'd like to display all the embedded videos. This is all there is in my index view where I want all the videos to be embedded:
<div id ='video_div'>
<%= render #videos %>
</div>
however, it's not working. No video is being embedded. What am I doing wrong? Bear in mind that I not only want to embed the video once the url is submitted, but I store the url and want to display the embedded videos indefinitely into the future.
Here's the HTML of the form that the browser sees in the new view:
<div id="dialog" class="window" style="top: 237px; left: 435px; display: block; ">
<form accept-charset="UTF-8" action="/videos" class="new_video" id="new_video" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
<input name="authenticity_token" type="hidden" value="h/yzzD0lWsp7nc89WPmDRXWs5ahdfUc3ZvY5IukX2fQ=">
</div>
<div class="field">
<label for="video_video_url">Video url</label><br>
<input id="video_video_url" name="video[video_url]" size="30" type="text">
</div>
<div class="actions">
<input id="video_submit" name="commit" type="submit" value="Create Video">
</div>
</form>
Cancel
</div>
UPDATE:
I get this error in the console:
Started GET "/jquery.embedly.js" for 127.0.0.1 at Thu Mar 17 00:09:29 -0700 2011
ActionController::RoutingError (No route matches "/jquery.embedly.js"):
Rendered /Library/Ruby/Gems/1.8/gems/actionpack-3.0.4/lib/action_dispatch/middleware/templates/rescues/routing_error.erb within rescues/layout (1.1ms)
I include jquery.embedly.js in my application layout though...
It looks like the error is that it's not loading the Embedly jQuery script. Is that resolved? Alternatively you can load the Embedly jQuery script from our hosted http://scripts.embed.ly/jquery.embedly.js page.
What's the HTML look like? are you sure you want to use .val() on #video_video_url and not html() or attr('href')? I think you use .val() for input values.
From the val() jquery docs: "The .val() method is primarily used to get the values of form elements."
UPDATE: Just saw your description and you did say it's from user input. So disregard above. Can you paste the HTML?
UPDATE #2: it might be a problem with loading the embedly script. are you using the min version? could you check to make sure the filename is the same? seems that if jquery gets loaded, it should also load embedly as well.