How to pass the value of console.log to django views? - javascript

I have seen so many responses but none of those correspond to my needs.
Basically I am trying to get the value of an href through JavaScript and I need to pass that to my django views, when I do a console.log this is the output that I am getting
http://localhost:8000/#vert-tabs-Personal localhost:8000:316:21
#vert-tabs-Personal localhost:8000:317:21
http://localhost:8000/#vert-tabs-Career localhost:8000:316:21
#vert-tabs-Career localhost:8000:317:21
http://localhost:8000/#vert-tabs-Finances localhost:8000:316:21
#vert-tabs-Finances
And here is the script that triggered the output so far
<script>
$(".nav-link").on('click', function(e){
console.log(e.target.href);
console.log(e.target.hash);
});
</script>
Now What is the best way to get the e.target.hash value passed to my django views.
I am thinking of jquery or ajax but honestly I don't know.
Any help would be appreciated.
Thank you in advanced...

Your question is a little vague as to what you want to achieve, but I'd say there are a couple of ways:
Via a form
presumably you have some kind of form on this page. If you just need the value in your django view when you submit the form, then include an input tag (which can be hidden, so nobody sees it), then update the value of this via Javascript as and when you need to. This value will then be received by the view as it will be part of the submitted form.
See here for setting an <input> value : How to set the value of a input hidden field through JavaScript?
Via an ajax call
You could have an endpoint to send this to, where you could just stuff it into the body of the ajax call, and this could potentially be part of the view you're working with, though usually it's better to separate these things out and have specific views to handle ajax stuff (or at least that's my experience).
Also, since you say you want this "in your view", I'd suggest option 1 is the simplest and cleanest option for you.
Add that <input> tag to your template, make it hidden, and use JS to set the value of it, and presto, you'll see it in your view when you handle the submit.

Related

pass form values from one page to a hidden iframe inside page

I am trying to take on a new project creatively. Basically, I have a website where I want to put a custom form and a hidden iframe which will contain its own form. What I want is that when I press the submit button on the page's form, the values of say the text boxes will be passed to the iframe's form's text boxes and then submit the hidden form and display in a visible iframe the results.
I have looked through other questions, but none seem to have the same goal as I.
Is this possible? If so, how? I would highly appreciate any help.
nvncbl
If I've understood you correctly, you want to pass some input parameters without the page reload. If so, then you should dig into ajax in order to call asynchronously different parts of the web page.
Fortunatelly there are many frameworks that can help you. I prefer Knockout.js, but you can use for instance Angular.js or Backbone.js and so on.

To kow if an element in JS is disabled in CGI

How can I get to know in CGI script if an element in the Javascript is disabled.
I have disabled dropdown values whose values doesn't get passed on Submit. I can make these values equal to 1 if I could know if they are disable.
I have already tried enabling the elements on submission and disabling again, it works but I do not want to use this method as it doesn't give a good view to use.
Further, editing my question, is there a way I can have a variable common(global/sahred) between JS and CGI?
You can not 'share' a variable between JS and CGI because they are two different environments. JS runs on the client, CGI on the server.
In order to pass information of any sort, including the enabled/disabled status of an element you could use JavaScript to add a <input type="hidden"> to the form so that the CGI script knows to output a disabled element next time it generates the form.
Rereading your question, it sounds like you are trying to get the value of a drop down which is not passed since the element is disabled? In that case you can use the same technique, read the value of the drop down with JavaScript and put that value in another hidden form element.
I dont understand completely your question, but I think I can help you. Do you know JQuery? With JQuery you could add a function to an event, let's say onChange, and then send a value with Ajax if the value was changed or if the value was disabled. I could help you if you know JQuery, I could also put some code if you dont and try to explain. But first, is this what you want to achieve:
See if an element was disabled(or set to null or 0), send it to CGI script, and then return a message or change something within the page?

Dynamically change a value on a asp.net page without actually refreshing it

I have a label, let's call it LblA. I have a SqlDataSource, let's call it sds. Now, I have selected out and managed to get specific values using the select function. I want to set LblA's text to the value selected out of sds. I need this to occur every 5 (or as many as I specify really) seconds. I orignally used a timer object, however, for any of you who have used the timer object before, it likes to refresh the page, this makes it very hard to navigate off of the page; not only that, it's sloppy. Does anybody know a way to easilly update LblA's text from sds without refreshing the actual page.
I've read around and came to the conclusion that I need to use ajax, err... jQuery. However, I really don't know anything about the two except that they are both Javascript libraries? I need a simple way, you might even have to explain it to me like I'm an idiot.
I'm using VB.net and ASP.net just so you know.
Thanks so much!
If you want it simple use UpdatePanel If you want more control and efficiency, use jQuery's Content

Trying to access javascript elements inside a page

I hope someone can help me. I'm trying to access the text box inside a webpage so I can do some scripting, e.g. placing text in fields, checking a box and clicking submit, to automate my employees' workflow. It's confusing as heck because I cannot find the name/id/whatever that will allow me to manipulate the form. I can see the name of the field I'm trying to get at using Firebug ("history[comment]") and the id, if that helps ("history_comment") but no matter what I do, the form will not be manipulated. Based on the other scripting I've done, this Applescript:
do JavaScript "document.forms[1].history_comment.value='Testing';" in document 1
should do the job, telling the browser to put "Testing" in the appropriate field. I've substituted other names I think might be what it wants, and tried referencing any other forms (forms[2], forms[3]), all for naught. I'm actually confused a bit more because there are no statements in the HTML, so it could be I'm screwing up there.
I've posted an HTML dump of the form at http://images.jlist.com/testform.html (with dummy information of course) in case any kind soul can take a gander and give me some direction. My goal is to be able to put information into the Comment field. Is there a script I can run that will tell me the complete name (as far as the browser is concerned) of every element in the form?
if you can use jquery, then you can do it quite easily using the following command
$("history_comment").val("HELLO");
The JavaScript should be:
document.getElementById("history_comment").value='Testing';
document.forms is non-standard and, as is the case in your example code, fails if the element is not inside a form. This is fairly common in AJAX applications and another good reason to avoid document.forms.
What #Kikuchyo wrote, though it's actually strictly incorrect not to enclose form elements like textarea in a form tag. You'll also need that form tag if (as you suggest) you want to submit the form programmatically. Since you're already accessing that text box, you can get the form from that in your javascript function:
var thetext=document.getElementById('history_comment');
thetext.value='whatever you want to put in there';
thetext.form.submit(); // all form elements have a 'form' property
You can get at the checkbox state as document.getElementById('history_notify').checked; it's a Boolean value, so set it to true or false, and use it in conditionals directly.
Of course, if (as, looking at the form, you likely want to) you want an AJAX submit, you'll need to check out the documentation for whatever wrapper library you're using.
since your element is a text area, it should be done like this:
document.getElementById('history_comment').innerHTML = 'HELLO';
using innerHTML instead of value

What is the best practice for passing variables from one HTML page to another?

I'm relatively new to web application programming so I hope this question isn't too basic for everyone.
I created a HTML page with a FORM containing a dojox datagrid (v1.2) filled with rows of descriptions for different grocery items. After the user selects the item he's interested in, he will click on the "Submit" button.
At this point, I can get the javascript function to store the item ID number as a javascript variable BUT I don't know how to pass this ID onto the subsequent HTML page.
Should I just pass the ID as an URL query string parameter? Are there any other better ways?
EDIT: The overall process is like a shopping cart. The user will select the item from the grid and then on the next page the user will fill out some details and then checkout.
I should also mention that I'm using grails so this is happening in a GSP page but currently it only contains HTML.
You could just use a hidden input field; that gets transmitted as part of the form.
<html>
<head>
</head>
<body>
<script type="text/javascript">
function updateSelectedItemId() {
document.myForm.selectedItemId.value = 2;
alert(document.myForm.selectedItemId.value);
// For you this would place the selected item id in the hidden
// field in stead of 2, and submit the form in stead of alert
}
</script>
Your grid comes here; it need not be in the form
<form name="myForm">
<input type="hidden" name="selectedItemId" value="XXX">
The submit button must be in the form.
<input type="button" value="changeSelectedItem" onClick="updateSelectedItemId()">
</form>
</body>
</html>
It's good one, but better is to use some script language such as JSP,PHP, ASP....and you can use simple POST and GET methods.
The best method (imho) is to include it in the URL
href="http://NewPage.htm?var=value";
encodeUriComponent a string Value
One way to send over variables using POST to another page is to make the link to the subsequent page a submit input on a form where the action attribute is your target page. For every variable you have, you can include using inputs of attribute type "hidden" in this form, making only the button visible.
Another option is to dynamically generate links on the page with something like PHP where you basically repopulate the current GET queries.
Finally, you can always store this information in the PHP $_SESSION array and not have to worry about continually passing these variables through site navigation.
Your choice will depend on how many navigational options there are where you'd like to keep the same variables. It will also depend on how secure you'd like your back end to be and the amount you'd like to disclose to the advanced web user.
If you are only going to need the ID on the subsequent pages, then you can pass the id as a query string parameter.
But there will be times when you need to relay more information and passing a variety of parameters to different pages and having to maintain different sets of parameters for different pages can get a little hairy. When this is the case I'd suggest that you keep a hidden field on the form and create an argument object that stores each of your parameters. Serialize the argument object with JSON and store this in you hidden field. Post the form back to the server. When the next page loads, deserialize the object and retrieve the values you need.
Assuming that you are limited to using html pages, I think the best approach would be to pass the id along on the query string to the next page. It is relatively easy to pull that value back off the query string on the next page. If you need to be a little more stealthy about passing the variable (or you need the variable to persist for more than one page), you could also set a cookie and retrieve it on the next page.
Since you are trying to do this in a Grails application you do have a choice of using Flash scope. This might not make any sense if you want to go directly from one HTML page to the next as the scope would be defined in a controller. If you do not need to do any sort of processing between requests, I'd suggest using a hidden form field to keep it simple.
http://grails.org/Controllers+-+Controller+Scopes

Categories

Resources