Say there exists a template x.html in Django templates section.
The contents of this page are
<html>
<a href="#" onclick="noserverrequest">
<input type="button onclick="noserverrequest"/>
...
</html>
I have n number of buttons and hyperlinks as said above in a page.
My question is how to record all the clicks that are done in this page (local JavaScript actions) and when one server request is made to Django I have to record all the links that are clicked in this page. How is this achieved?
I can use a hidden variable to record all the hyperlinks or button actions. But how to send it to server. Please indicate me how this is achieved. On Django side when the request is found I write the JavaScript events to the database.
you should better trigger an image load in javascript :
function log(info) {
document.getElementById('pixel').src = '/tracker?'+info;
}
somewhere on your page :
<img id='pixel' src='pixel.gif' style='display:none'/>
then call it this way in javascript :
log('clicked_Button_BuyStuff');
server side, you could have a django view then records all the data, including date, user, referer....
Related
I know that AJAX could solve my issue. I need help how I can solve it in my specific case however. I manage some sortiment items on a page, they get displayed with a PHP script (checks the database, if the item is available, and if so, it gets displayed). I now want an admin page where I can kind of "toggle" via a sortiment table to display or not display an item (set it as available or non available.
What I need is: if the button is clicked, I would like to start a php-skript. There should be an value passed to that script (the button id). The script itself should open an SQL connection, change a DB value based on the passed ID of the button. Then close the connection. Optionally also refresh the table (or one value) from where the button was clicked.
Can someone help me, at least telling me what I need to do this? (jQuery, Ajax?). The passing of the ID would be important, else I'd need to do function for every button.
An table entry looks like this:
<tr>
<td>Himbeerhonig</td>
<td id="himbeerhonig">Ja</td>
<td><button type="button" id="himbeerhonig" onclick="function()">press me to execute function</button></td>
</tr>```
(possible PHP pseudocode)
open SQL connection
look for database entry based on the passed ID
change the value of the found entry (!currentValue)
close SQL connection
*optionally*
refresh the <td id="himbeerhonig"> with the updated value.
I appreciate any help very much! Just need some hints as to how to do it properly. It's just a concept that currenty is hard to grasp for me so far.
1- If you want to do this with ajax (without browser refresh), you should create a separate php file, and put your php scripts in there. it's called api (api has special format for output, so search create api in php if you want to do this). then on javascript, you should do an ajax call to that php address, on onclick event of button. and then javascript will return data and you can create elements based on that data.
2- however you can do this without ajax(it will refresh browser). just write your inline phps as you wrote :
<html>
<!-- your html codes-->
<?php
if($_GET['buttonClicked']){
//put your php codes here to run when button clicked
?>
<!-- you can even put html here, even it can be on php loop. -->
<?
}
<!-- your html codes-->
<!-- turn your button to a form-->
<form action="/" method="get">
<input name="buttonClicked" hidden value='1'>
<input type="submit" value="Submit">
</form>
</html>
it's as easy as this. when button clicked, a get request will send to current page, and php will handle it, for example it will render additional html elements to the page.
I have a html web page which I use to get some user input. This input is then posted using jquery to a php script which in turn sends a get request to a REST API to receive json data.
My question really is: is it possible to change my php file into another webpage with embedded php and redirect to this while posting the variables to the same script, so I could display the json results in a table on a new page simultaneously.
I already receive the json in the javascript file and I know I could use this to create a table, I was just interested if I could in fact do it all in one go on the php page as I already have script written to populate a table using the json data.
I have included some basic fragments of my code to help explain what I am doing.
HTML:
<head>
<script type="text/javascript" src="collect_User_Input.js"></script>
</head>
<p> What is the unique id of the beacon? </p>
<form> <input type="text" id="uniqueId" /> </form>
<button onclick="collect_User_Input();" >Send Request</button>
JS:
var uniqueId = document.getElementById('uniqueId');
$.post("send_Request.php", { uniqueId: uniqueId.value },function(result) {
alert(result);
PHP:
$uniqueId = $_POST["uniqueId"];
(GET request using curl)
echo ($uniqueId);
I tried skipping the javascript step and submitting the form directly, but this always gave me forbidden error messages. as you may have guessed I am very new to this so any advice is welcome.
In your PHP you will most likely want to return some JSON using json_encode:
http://php.net/manual/en/function.json-encode.php
Within your JSON, you could return a success value - then depending on the value of that you can redirect using:
window.location
You could even have a second attribute that returns what page you want the user redirected to if it isn't the same as the uniqueID:
{"success":true,"location":"/your/path/here.html"}
The flip side being, if there is an error you can return this to your page with a relevant message:
{"success":false,"message":"ID not found"}
I use this process to check something is valid on the server before doing the redirect, which sounds more or less the same as what you want to do?
I opened up a yahoo store through their Merchant Service. They have a pretty good store catalog that I have used on a business site that I own. I like it so I decided to use the service again on another business I own. I got the site built but have ran into a few issues with calling the Yahoo Catalog Tags. The tags are basically comments. EX: (<!--#ystore_order id=item_id -->). When the site is loaded it is parsed and the page loads the product details in place of this tag/comment.
I can get everything to work except for the action attribute of my form.
I have tried a bunch of things but I cannot seem to get the action set for my form. If I hard code the tag then it works fine but obviously if I did that then I would have to create a page for every single product.
My form:
<div id="list">
<form method="post">
<input id="btnSubmit" type="submit" value="Add To Cart">
</form>
</div>
Trying to add the comment/tag to form action attribute. I've done it this way(below) and also by getting rid of the variable and just paring the url in the jquery attr function.
<script language="javascript">
$.ajaxSetup({cache: false});
$(document).ready(function(){
//Get URL from URL Query String.
var obj = getUrlVars()["Object"];
//Set form action attribute
$('form').attr('action', '<!--#ystore_order id='+ obj +' -->');
});
</script>
I've also tried creating the form dynamically.
<script language="javascript">
$.ajaxSetup({cache: false});
$(document).ready(function(){
//Get URL from URL Query String.
var obj = getUrlVars()["Object"];
var new_form = '<form method="post" action="<!--#ystore_order id='+obj + ' -->">' +
'<input type="submit" value="Add To Cart" id="btnSubmit">' +
'</form>';
$('#list').append(new_form);
});
</script>
I have tried to escape some characters but have had no success there either.
"\<\!--#ystore_order id='+obj + ' --\>"
I know the issue has something to do with the comment syntax but if I can add it manually then I should be able to do it dynamically. I know this is a hard one to test but if anyone thinks they may have a solution I would be happy to set up an ftp account on my site so you can test and I will provide the product ID's for testing. I've fought with this for about 30+ hours.
Yahoo store tags are populated server-side. Adding a store tag on the client side using Javascript won't do anything, because the code that recognizes the store tag and appends the appropriate html will never see the tag you drop in on the client side. There's no client-side solution possible
The best solution here would be to write a server side program to populate a template with the appropriate tag in response to http requests. I'm not super-familiar with the Yahoo store, so I don't know what the best language for this would be, but it would be a very simple program given how straightforward it sounds like your template is. Since this is already embedded in a site you own, I'd just use whatever backend language you are already working in.
Once you have a server side script that executes and returns the html you need, you could use AJAX to populated it with the appropriate product details as needed.
I got specs that need a little work before I can be sure it can be implemented. I'd appreciate to hear comments and suggestions on the following scenario:
I need a web software where users log in. All users have a user account AND can have 0-3 secondary user accounts, which they can use via the main website while authenticated. The secondary user accounts are controlled by a third-party javascript library, but I can control the usernames and passwords that are stored in a database.
Goal is to enable users to not have to authenticate several times, only using one user account and the ohter ones should work automatically via script.
So, is there a viable, secure and proper way to accomplish this? I know playing with user names and passwords in script is a security issue in itself but hopefully I can find the next best thing if this can't be done properly. I will use Asp.Net MVC as a platform, with all calls made using ajax, so the software will look and feel like a single page application. The underlying technology is irrelevant though, any server side technology can be used here.
There are some options to play with:
Basically I can use any user name and password for authentication, it's just a matter of which fields in which tables to compare
I can force all of the user accounts' passwords to be the same so user doesn't have to remember/use many passwords
I can retrieve the secondary user names from db in the login call so the website will have access to secondary user names, but obviously I can't do that to passwords as they are hashed/salted in the db
Here's one thought I've been toying around with:
First show a login page. Authentication is done via ajax and credentials are saved on the login form, which gets hidden when user logs in. In the success callback event of the login call we can show the main content that the ajax call can return (this could be something like the main page of the authenticated users. Since the original credential fields are still on the page they can be accessed via script and used for the secondary system credentials.
However, I'm not convinced this is a secure way to handle the secondary system logins, even though I could have https throughout the site. I just don't know what the actual security issue here would be. Comments, experts? Better ways to accomplish the same?
The login page and main structure could look like this (a VERY simple example):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="/Scripts/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
function VerifyUser(name, pass, remember, container) {
$.ajax({
type: 'POST',
contentType: 'application/json; charset=UTF-8',
url: 'Account/VerifyUser',
data: JSON.stringify({ "userid": name, "password": pass }),
processData: false,
success: function (response) {
if (response.Success) {
// Here I could stash the password somewhere if needed.
// It's not visible in the source code but it is accessible via jquery
$('#secondarypass').val(pass);
// Here I can show the html data that the ajax call could return, or
// send out another ajax call to retrieve the actual content separately.
//Show here data that was returned by ajax call in response object. This could be a main page etc
$("#maincontainer").show();
$("#maincontainer").html(response.Message);
$("#logincontainer").hide();
}
},
error: function (a, b, c) {
$("#maincontainer").show();
$("#maincontainer").html(a.responseText);
}
});
return false;
}
</script>
</head>
<body>
<div class="page">
<input id="secondarypass" type="password" />
<div id="logincontainer">
<input id="UserName" name="UserName" type="text" value="" />
<input id="Password" name="Password" type="password" />
<button onclick="javascript:VerifyUser($('#UserName').val(), $('#Password').val());">Log In</button>
</div>
<div id="message"></div>
<div id="maincontainer">
<!-- this is where the main content of the software would be -->
</div>
</div>
</body>
</html>
And the ajax call could return something like this
<script type="text/javascript" src="/Scripts/secondarysystem.js"></script>
<script type="text/javascript">
function SecondaryLogin() {
var data = {
'username': 'mysecondaryusername',
'pass': $("#secondarypass").val() //NOTE here I could access the password-stash I set up earlier
};
var system = new SecondarySystem(); //This could be an object from the secondarysystem.js library
system.LogIn(data);
// this could have a onsuccessfullogin callback event, where we could populate some secondary system specific data to the div below
}
</script>
<div id="secondarycontainer">
</div>
In this setup a page refresh would cause problems, but I can disable f5 (or replace it with reloading the right content) and at least add a dialog saying "refresh will force you to re-login, sure to leave this page?" etc.
The thought you 've been toying around , sounds good, and it has been practiced by many of us. there are few problems you mentioned you dont want to face, here are some points you can keep in mind if you really gonna make it a single page application.
1.Refresh F5
If refresh is your problem you can probably use localstorage so your username and password are not lost when page refresh.
Is it secure ?
I think you can store your password variables encrypted so you only decrypt it when you need to authenticate the user. For encryption you can refer to https://sourceforge.net/projects/pidcrypt/ (URL update).
I'm working on a website project from scratch. The content section of the main page has a form and a div of class "blog". When the user is logged in on the admin account, the form shows up. This allows you to pick a title and content to post in the blog. The current code works well, except for the fact that the posts are removed when the page is refreshed. How I can permanently add this to the page?
Here's my code:
<script type="text/javascript">
function addtext() {
var title = document.blogform.title.value;
var content = document.blogform.content.value;
var $blogTitle = $('<div class="blogtitle">' + title + '</div>');
var $blogContent = $('<div class="blogbody">' + content + '</div>');
$('#blog').prepend($blogContent);
$('#blog').prepend($blogTitle);
}
</script>
<h2>Submit New Blog Post</h2>
<div class="blogtitle">Submit a new blog post:</div>
<div class="blogbody">
<form name="blogform">
<fieldset class="fieldsetoffset"><legend>Post</legend>
<div>Title of Post:</div>
<input type="text" name="title">
<div>Content of Post:</div>
<textarea name="content" class="comment" rows="6" cols="88"></textarea>
<hr>
<input type="button" value="Add New Text" onClick="addtext();">
</fieldset>
</form>
</div>
<div id="blog"></div>
You should use a database (or flat-files, but not recommended..) to store those extra parts. On your page, create a database connection (php.net/PDO), fetch any existing records from the database and when the admin stores it you should insert it into your database.
HTML is flat, you can add and delete elements dynamically by altering the DOM but that's only on your screen and nobody elses :)
I assume that this is a static HTML page. Otherwise you would be refreshing from a server-based data source. If you are going to be doing this, then the only other way would be to store the data as client-side cookies.
You can't do this by Javascript or jQuery because they are client side languages.
for this which you want to achieve you have to use a Server Side Language and database
Javascript is client side, meaning when you add content to the page with jQuery it's local to your browser only, not on the server-side (it's not actually changing the website, it's just changing what your browser is rendering).
You will need to either use cookies (there is a great jQuery cookies plugin that's incredibly simple to use) or, preferably, have some kind of server-side script store it in the database and retrieve the values later, i.e. with PHP/mySQL, since cookies are still going to be specific to you rather than anyone who might visit the website. If nothing else you could use PHP to write it to a text/html file on the server that is then displayed later but that's a really ugly solution and a database is really where you should be going here.
I would probably use jQuery's AJAX functions to call a PHP function when addtext() is triggered that passes it the content and title values to write to the database. Then add a bit of php code on the page to check the database for existing posts and display them.