We Keep Coding

Send Javascript Push Notification - AFTER Form POST and URL redirection

Use case (Django Project):
I want to log in on my login page -> Therefore I use this form in html (login.html):
<form class="loginform" action="" method="POST">
{% csrf_token %}
<div class="loginform">
{{form.as_p}}
</div>
<br>
<input type="submit" class="btn btn-success loginbtn" value="Login">
</form>
In case of successful log in I will redirect with DJANGO to this URL (localhost/welcome/)-> welcome.html:
LOGIN_REDIRECT_URL = "welcome"
I am able to send javascript notifications with alertify, but only when using simple things such as
click on it or mouseover:
function notification(text) {
console.log(text)
alertify.success(text);
}
I tried it with onsubmit="javascript:notification("")" in the html form tag, however this will
be displayed only BEFORE the URL redirection.
So my question is:
How is it possible to activate /send the push notification AFTER the URL redirection and in
case of successfull POST/ Log in?
I really appreciate your help! Thank you a lot!!

Javascript is client-side. That means your alertify.success(text); will be executed client-side, once server already did his render process.
The authentication process is server-side. So you have to make your server make your alertify a part of the rendered content.
Knowing that, you just have to change your LOGIN_REDIRECT_URL content page to include in it a call to notification:
<!-- your html template comes here -->
<script type="text/javascript">
notification('You are now logged in');
</script>
Be remembered that the notification will then display each time the person visits this page. You may want either to redirect him again, or to introduce a variable in Django to avoid displaying it again.

Unable to logout from Laravel application when using event.preventDefault. Alternative?

So I a couple of forms in my application looking like this :
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
{!! Form::open(['action'=>['AdminController#update',$upload->id,0], 'method'=>'POST']) !!}
{{Form::hidden('_method','PUT')}}
<a class="dropdown-item" href="/manage">Approve</a>
{!! Form::close()!!}
{!! Form::open(['action'=>['AdminController#update',$upload->id,1], 'method'=>'POST']) !!}
{{Form::hidden('_method','PUT')}}
<a class="dropdown-item" href="/manage">Reject</a>
{!! Form::close()!!}
</div>
I am sending these forms using the following jQuery snippet:
$(".dropdown-item").click(function(e){
e.preventDefault();
$(this).closest("form").submit();
});
I noticed that when this snippet is not commented out, I am unable to log out from my Laravel app. The log out just doesn't work.
I am using standard Laravel authentication.
This is part of how I log out:
<a class="dropdown-item" href="#" onclick="window.location='{{ route('logout') }}'">Log out</a>
First, can someone explain why this is happening? I tried to investigate, but what I read didn't make much sense, since I am new to all of this.
And what would be the workaround here? How can I send these forms without the preventdefault method? Or how can I log out while using it? I'd prefer not to change my log out functionality.

So to log out the user, you need to hit route('logout') which is a predefined route when you scaffold laravel auth system.
The logout route its definded under /src/Illuminate/Routing/Router.php line 1125. It needs to be a post request in order to logout the user, there are no required parameters to be sent expect laravel csrf token, which is the token to make sure that the requests are comming from the app itself and not any external script.
If you go to logout function which is hidden under LoginController you will see a trait(simply to keep the class cleaner) AuthenticatesUser Trait it is responsible to logout the user.
In AuthenticatesUser trait you will find a method at line 151:
public function logout(Request $request)
{
$this->guard()->logout();
$request->session()->invalidate();
return redirect('/');
}
which in simple terms it logs user out of session guard (Guards define how users are authenticated for each request.) and then destroys the session and the user its logged out with a redir to homepage.
Now as said we need a post request with csrf token to log the user out:
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
Form placed under the a href tag
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
The a href tag which has event.preventDefault() which in simple terms means prevent a href tag from acting how normally it acts. That being said a href tag will not redirect to the route, instead we have document.getElementById('logout-form').submit();"> which simply gets the form logout-form and submits it whenever the user clicks on that a href tag
Or simply change 'dropdown-item' class name for your logout form , since prolly that is being frozen when both forms are active.

Once I refresh the page that is getting data through a form , every thing will be gone

I've got a table of data with clickable rows which will lead to another page based on the row that was selected. To get the row, I am using a form and post the form to another page to pass the variable to php. Now, the problem is once I refresh the page my info is gone...
How can I avoid that?
<?php
$id = $_SESSION["uid"];
$sql = "select * from std_cources join courses where std_cources.std_id = '$id' and courses.course_id = std_cources.course_id";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo '
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-shopping-cart fa-stack-1x fa-inverse"></i>
</span>
</br>
<p style="color:white;">'.$row["course_name"].'</p>
Check forthe exams
<form name="myform" id="'. $row["course_id"].'" action="checkMarks.php" method="post">
<input type= "text" value ="'. $row["course_id"].' " name="test" style="visibility: hidden;"></input>
</form>
</br>
</div>';
}
}
?>
<script >
function functionTest(form_id) {
document.getElementById(form_id).submit();
}
</script>
I am retrieving names of few courses from database and put them in a table. Then I can click on each one of them and the form submission will be triggered and sends info to the next page and in the next page I get the given info and retrieve info from database again. However, on the second page, if I refresh the page I get

When you refresh a page that has received data from an earlier POST request, the refreshed page won't have that data unless another POST request is made. This can be done in the window object's DOMContentLoaded or load event.
Or, you can make the initial request for the data via a GET request. This will send whatever data you are sending to the server as part of your request as a query string appended to the URL. If you refresh the page, that query string will persist. This will only work if the data you are attempting to get comes from the server-side processing of the current page and not some other URL entirely.
Lastly, POST requests are for requests that change the state of the server (insert, update and delete type of operations). GET should be used for read operations.
Without your code, there's really not much more to offer.
EDIT:
Now that you have posted your code, I would suggest spending some time and cleaning up the HTML string that is sent back from your .php file. There is no such tag as </input> and you should remove the inline HTML event attributes (onclick, etc.). Here's why. Don't use javascript:... either (for many of the same reasons as in the link.
Lastly, I would suggest you change this from a form submission to an AJAX GET request, which will allow you to stay on the same page and keep the currently loaded data.

JSON data not showing up when I change http.jsonp() URL

I'm trying to read data from an external JSON file using AngularJS.
Here is my HTML
<div class="panel panel-default" ng-controller="MyAppController">
<div class="panel-heading">
<div class="input-group">
<input ng-model="query" type="text" placeholder="What file are you looking for?" class="form-control"><span ng-click="clearFilter()" ng-disabled="query.length == 0" class="input-group-addon"><i class="glyphicon glyphicon-remove"></i></span>
</div>
</div>
<div class="panel list-group">
<span data-ng-repeat="cat in cats | filter: query" class="list-group-item animate-repeat">{{cat.title}}
</span>
<div class="clearfix"></div>
</div>
</div>
It works fine when I use this in my JS file and data shows up in a list.
function MyAppController($scope, $http) {
var url = 'http://jobs.github.com/positions.json?callback=JSON_CALLBACK';
$http.jsonp(url).success(function(data) {
$scope.cats = data;
});
}
But when I change the URL to my personal site nothing shows up even though I literally just copied and pasted everything in the github JSON file to a local JSON file. (just to test it out)
function MyAppController($scope, $http) {
var url = 'http://ciagent.com/Website-files/positions.json?callback=JSON_CALLBACK';
$http.jsonp(url).success(function(data) {
$scope.cats = data;
});
}
http://ciagent.com/Website-files/positions.json?callback=JSON_CALLBACK &
http://jobs.github.com/positions.json?callback=JSON_CALLBACK have the same exact content but only the github one works with my angular app for some reason.
Any reasons as to why it's doing this?

Assuming you are using a static resource file you need to realize that the string 'JSON_CALLBACK' is a placeholder and gets modified within each $http.jsonp() request to something else.
You should be able to see this in the actual request URL in network tab of browser dev tools.
You can also open the github version in browser and change the value to see that it is not static on their server and will adjust to whatever value is sent.
If you want to use jsonp server side it needs to return dynamic value of the callback GET parameter value.

+1 to what #charlietfl said. Also, be sure to set Content-Type:application/javascript;charset=utf-8 in your response headers.

jQuery ajax stopped working

My jQuery script stopped working when I moved my clients site from the dev-site to their own site (which basicly has the same setup using a VPS).
jQuery(document).ready(function() {
jQuery('input[name=button]:button').click(function(){
jQuery("#show").html('<center><img src="http://xxxx/images/ajax-loader.gif"></center>');
jQuery.get("http://xxx/inc/usrreg_ajax.php",{
namn: jQuery("input[name='namn']").val(),
nyhetsbrev: jQuery("input[name='news']").val()},
function(data){
jQuery("#show").fadeIn("slow").html(data);
});
});
});
im using the html
<div id="registering" style="margin-top: 15px;">
<div style="float:left;">
<label for="namn">Namn:</label><br/>
<input type="text" name="namn"><br/>
<input type="checkbox" name="news" value="ja">Ja, jag vill ha nyhetsbrev! <br/>
<div style="clear:both;"></div>
<input type="button" name="button" value="Anmäl dig!">
<div id="show"></div>
</div>
I've not made any changes post move and the jQuery script works perfect on the dev-site.
Very gratefull for any input!
All the best,
Marten

Is xxx/inc/usrreg_ajax.php on the same domain as your new site?
You have to remember that there a same origin policy that, for security reasons, prevent you from perform ajax calls from other domain urls.
http://en.wikipedia.org/wiki/Same_origin_policy
Due to browser security restrictions,
most "Ajax" requests are subject to
the same origin policy; the request
can not successfully retrieve data
from a different domain, subdomain, or
protocol.
You can use jsonp for different domain calls, but you will have to use jQuery.ajax for that, and won't be able to get the html as simple as you are doing right now

I test it here http://jsfiddle.net/bingjie2680/D4NuF/ and it works(get the image to show up), there must be a problem with the link to jQuery library.