I am trying to get a button to load a new html page in a website I am building with jinja2. The button action in jquery is as follows:
HTML
<input id="str_A" class="form-control-custom" name="str_A" size="30" type="text" placeholder="1st String" />
<input id="str_B" class="form-control-custom" name="str_B" size="30" type="text" placeholder="2nd String" />
<button id="calcdynamic" class="btn btn-lg btn-outline-success">Calculate Edit Distance</button>
JQUERY
$("#calcdynamic").click(function(){
var str_A = $("#str_A").val();
var str_B = $("#str_B").val();
var url1 = "dynamic/"+str_A+"/"+str_B;
window.location. = url1;
});
Now, here's the problem:
I need to pass data in the url path like http://127.0.0.1:5000/dynamic/sgsdgdgsdgd/sdgsdg, not as a query string as http://127.0.0.1:5000/dynamic/?str_A=sgsdgdgsdgd&str_B=sdgsdg. However when I try to reach the url through the jquery call method, I am sent to the query string link, which is a redirectment to the same page I am in at the moment, http://127.0.0.1:5000/dynamic/.
I use flask server (python) and it is configured to redirect like this:
#app.route('/dynamic/')
#app.route('/dynamic/<str_A>/<str_B>')
def dynamic(str_A=None, str_B=None):
At first, I thought this was a problem with flask server, but if I manually type in the URL http://127.0.0.1:5000/dynamic/sgsdgdgsdgd/sdgsdg it works fine.
Can anybody help please, it looks like a simple thing, but I haven't been able to figure out why it happens so far.
Related
So, I'm trying to write this restaurant Finder app (just a fun project for myself), and I want there to be a search bar to connect what the user has typed (say chicken) into Yelp and be able to search for chicken restaurants.
Yelp's url for that is this: https://www.yelp.com/search?find_desc=chicken&find_loc=Richfield%2C%20MN. I want to be able to take "https://www.yelp.com/search?find_desc=", add x (what the user inputs), and then have the program piece it all together: "https://www.yelp.com/search?find_desc=" + "user search query". Doing it like this just brings me to "https://www.yelp.com/search?find_desc=&find_loc=Richfield%2C+MN". Any ideas?
<div id='content'>
<div id='content-app'>
<input type='text' id='field1' readonly value=''/>
<button onclick='search(<a href="https://www.yelp.com/search?cflt=)' id='search' style='width:80px'><a href="https://www.yelp.com/search?find_desc=" + "field1 readonly value text">Search</button>
There are a number of mistakes in the code that you've posted.
I've created an example below based on what I think you're trying to accomplish. This example demonstrates how to take the input from a text field, build a request URL, and redirect the browser to that URL.
function search() {
// Get value from search text field
var search = document.getElementById('search').value;
// Build Yelp request URL
var yelpUrl = 'https://www.yelp.com/search?find_desc=' + search;
// Redirect browser to Yelp request URL
window.location = yelpUrl;
}
<input id="search" type="text" />
<button onclick="search()">Search</button>
The example can be improved further by not using onclick(), and to instead use the addEventListener() function. But I think you can work up to using that.
So i made this script below so that someone can enter an order ID and it would redirect to the following http://domain.tld/order/254441.
but it give me a query-string of ?webid=254441 at the end the URL. How do I remove this?
function urlRedirect(){
var action_src = "/orders/" + document.getElementsByName("webid")[0].value;
var form_url = document.getElementById('form_url');
form_url.action = action_src ;
}
<p>Search by ID</p>
<form id="form_url" onsubmit="urlRedirect()"><input name="webid" type="text" /> <input type="submit" value="Search" /></form>
And if anyone has suggestions on making the code better that would be great! :)
Thanks.
Change the method of your form to "POST".
<form id="form_url" onsubmit="urlRedirect()" method="POST">
HTTP POST requests supply additional data from the client (browser) to the server in the message body. In contrast, GET requests include all required data in the URL. When the method is GET, all form data is encoded into the URL, appended to the action URL as query string parameters. With POST, form data appears within the message body of the HTTP request.
See the documentation.
I have a relative path:
~/Content/themes/base/jquery-ui.min.css"
and I have a hidden input:
<input type="hidden" id="siteUrl" value=""/>
In MVC I want to store the fully qualified URL into the hidden field. I have tried:
<input type="hidden" id="siteUrl" value="#Url.RequestContext.HttpContext.Request.MapPath("~/Content/themes/base/jquery-ui.min.css")"/>
and
<input type="hidden" id="siteUrl" value="#HttpContext.Current.Request.MapPath("~/Content/themes/base/jquery-ui.min.css")"/>
But those are both returning a physical path, I need the URL. I have also tried using UriBuilder however this doesn't work for me because while it might work on my localhost it doesn't when I publish it to my IIS server.
I have also tried:
<input type="hidden" id="siteUrl" value="#Url.Content("~/Content/themes/base/jquery-ui.min.css")"/>
but it returns /Content/themes/base/jquery-ui.min.css
and in my MVC controller I tried:
Page.ResolveClientUrl("~/Content/themes/base/jquery-ui.min.css");
which also doesn't do what I need.
Background:
I store that FQ URL into the hidden field and then I access it in JS, in JS when I use a relative url it doesnt know how to use it correctly because with MVC for each link the path changes and it just tacks the relative string on to the end like this:
http://localhost/~/Content/themes/base/jquery-ui.css
If I just remove the ~/ then it works http://localhost/Content/themes/base/jquery-ui.css, but when I click to go to a new link the path is no longer good: http://localhost/newLink/Content/themes/base/jquery-ui.css
The Url on my localhost is http://localhost/Content/themes/base/jquery-ui.css
and on my server its http://server/productName/Content/themes/base/jquery-ui.css I dont want to code for some static name in case the base server url were to change in the future.
So how do I get the fully qualified URL for a relative path?
I'm not sure what issues you were having with UriBuilder, but that's the best method:
#{
var uriBuilder = new UriBuilder(Request.Url);
uriBuilder.Path = Url.Content("~/Content/themes/base/jquery-ui.min.css");
}
<input type="hidden" id="siteUrl" value="#uriBuilder.ToString()"/>
You start with Request.Url, so you don't have to hard code the host. That way, it should work everywhere you deploy it. Then you alter the Path, but you need to use Url.Content to replace the ~ with whatever it should be first.
You might want to actually add your own UrlHelper extension as well:
public static class UrlHelperExtensions
{
public static string AbsoluteContent(this UrlHelper helper, string contentPath)
{
return new Uri(helper.RequestContext.HttpContext.Request.Url, helper.Content(contentPath)).ToString();
}
}
I am trying to create a new HTML page from a form and some javascript. The form is much longer than this, but I figured that if I gave you guys 2 text inputs I can take it from there. I am running into a problem where I cannot retrieve the value of my forms and send it on to my new page. My new page won't show anything because it thinks that my forms are null, or that they don't exist possible. Which is probably why it returns undefined. I'm completely stuck here and I have no idea what to do as far as setting up the new page from my form goes.
I need help with getting newPage.html to display my title and subtitle.
Here is js:
var title = document.createElement("h1");
var titleForm = document.getElementById("title");
var subTitle = document.createElement("h3");
var subtitleForm = document.getElementById("subtitle");
var myDiv = document.getElementById("container");
function getElements() {
//set the title
var titleNode = document.createTextNode(titleForm.value);
title.appendChild(titleNode);
//set the subtitle optionally
var subtitleNode = document.createTextNode(subtitleForm.value);
subTitle.appendChild(subtitleNode);
}
Here is the original HTML page:
<body>
<h1>Create A New Webpage Using This Form</h1>
<form id="form">
<label>
Title:
<input type="text" name="title" id="title" value="title">
</label><br><br>
<label>
Subtitle:
<input type="text" name="subtitle" id="subtitle" value="subtitle">
</label><br><br>
<input type="button" value="Generate Page" onclick="window.open('newPage.html');">
</form>
<script type="text/javascript" src="pageGenerator.js"></script>
<script>getElements();</script>
</body>
Here is the page that I want to create:
<body>
<div id="container">
<ul id="myList"></ul></div>
<script type="text/javascript" src="pageGenerator.js"></script>
<script>setElements();</script>
</body>
I'm not looking for you to complete this for me, but just a little bit of guidance. Thanks.
It sounds like you want JavaScript on one page to read from JavaScript on another page. That's not possible on its own. You can't define var a = 1 on somePage.html then read that variable when the user's browser loads newPage.html.
You'll need to involve something else, such as the URL or local storage: https://stackoverflow.com/a/35027577/5941574
Query Parameters
One option is to make a GET request to newPage.html with whatever values you want include as query parameters in the request. Then newPage.html will contain a script that parses the URL to get the parameters and builds and inserts HTML into the document based on the values it finds in the URL.
Local Storage or Cookies
This works in pretty much the same way as the other method except instead of getting your values from the URL, it is saved to the user's computer with either cookies or local storage.
Server Side
A third option of course is to send the user's selections to a server and have the server build and serve the resulting page.
I'm working on a liferay portlet.
What I want to do is opening a new jsp with sending to it a URL parameter coming from javascript variable. I thought about it and I found two ideas:
1)Send the js variable to the jsp using ajax and then create a render url in jsp with a parameter the value received from js. But how I send js variable to jsp I don't find a good example in the internet.
2)Build the render url in javascript using the received parameter and then redirect from the script itself to the new jsp file using the render url that I found. For this idea I posted this question Liferay portlet: redirect to an other jsp page from javascript but I didn't get solution for it yet.
Has someone a suggestion how I can achieve what I want using one of my ideas or may be an other idea?
I found finally a solution for this problem.
I added in the jsp page a hidden post form that contains just one input and posts to an action method like that:
<portlet:actionURL var="jsVarActionURL" name="jsVarAction"/>
<form:form name="JsVarModel" method="post" modelAttribute="JsVarModel" action="<%=jsVarActionURL.toString() %>">
<form:input id="jsVar" type="text" path="receivedMessage" style="display:none;"/>
<input id="submit" type="submit" value="Add" style="display:none;"></input>
</form:form>
So my want was to for certain condition in javascript I have to send a js variable to new jsp page and open it. So in the script when the condition is valid I set to the input #jsVar the javascript value and I make a virtual click button in the submit button with trigger function of jquery like that:
var jsToJsp="Hello jsp I'm a js variable"
if(/*condition*/)
{
$("#jsVar").val(jsToJsp);
$("#submit").trigger("click");
}
In the controller the action method will receive the value coming from the form input field then it will redirect it to a render method:
#RenderMapping(params={"action=displayPageRender"})
public ModelAndView openUserProfilPage(RenderRequest request,RenderResponse response,Model model)
{
ModelAndView modelAndView= new ModelAndView("display");
modelAndView.addObject("jsVar", request.getParameter("jsVar"));
return modelAndView;
}
#ActionMapping(value = "jsVarAction")
public void sessionKeyActionMethod(#ModelAttribute("JsVarModel")ActionReceiveModel jsVar,ActionRequest actionRequest, ActionResponse actionResponse,Model model)
{
actionResponse.setRenderParameter("jsVar", jsVar.getMessage());
actionResponse.setRenderParameter("action", "displayPageRender");
}
Then I can receive it in display.jsp with ${jsVar} and everything works fine.