I have 2 links. In a session i store some data. I want if a user click in a specific link to look into the session and if the appropriate value contained, to continue. Else an AJAX pop up block will appears.
JAVASCRRIPT pop up block
function displaymessage(title,message,close)
{
resultReturn= $.confirm({
'title' : title,
'message' : message
'buttons' : {
close/*'Yes'*/ : {
'class' : 'blue',
'caption': close,
'action': function(){}
}
}
});
}
JSP with JSTL tags:
<div class="header">
<a href="<c:url value='/home'/>">
<a href="<c:url value='/further'/>">
</div>
<c:if test="${not fn:containsIgnoreCase(data, 'mykey')}">
<a id="get" class="right keepScrollPosition"
onclick="return displaymessage('<spring:message code="access.denied.title"/>'
,'<spring:message code="access.denied.message"/>','<spring:message code="access.denied.close"/>');"
href="#" /></a>
</c:if>
For example, if in the session contained the value 'mykey',then can go into the link home, else a pop up will appears. In case, in the session contained the value 'mypassword' and select the further link can continue, but if select the home link a pop up block will appears.
I'm stuck and i need some help on how can i do this.Please help me
UPDATE
I'm trying the following script but it doesn't work:
<li><a href="<c:url value='/home/'/>"<spring:message code="home_page"/>
onclick="if(<c:if test="${not fn:containsIgnoreCase(data, 'mykey')}">){
return displaymessage('<spring:message code="access.denied.title"/>'
,'<spring:message code="access.denied.message"/>','<spring:message code="access.denied.close"/>')" href="#" ;
}
</a>
</li>
You can't use client-side JS to check a server-side value held in the session. Instead, you need to use JS to make a GET call to a request mapping which runs servers-side code to check the session. Flow could be as follows:
User clicks button/image/something on page
JS fires from click, makes AJAX call (e.g. $.get) to request mapping /check_session.do
Request mapping checks session for value, returns true or false as JSON
Client-side JS processes returned JSON, blocks or proceeds based on returned value
Alternatively, use JSTL to access the session and write the session field's value to a hidden form field on the page, which the client-side JS then reads. Example: http://www.steve-farmer.com/examples/el/ui/ses-attr-name.jsp
Related
i created an ajax favorite button where when a user clicks the heart button the information gets sent to the server without reload and the heart shape becomes filled with red using javascript(exactly like instagram heart button ). now i am having a problem that when the page reloads the heart filling is removed and how will each indiviual message be filled and not only the first instance ?
here is my code:
my html code:
<a href="" class="msg-icon" onclick="toggle()" >
<input type="hidden" name="fav" value="<?php echo $row['msgid']; ?>" style="" >
<i class="far fa-heart" id="favBtn" style="" ></i>
</a>
my javascript code:
function toggle(){
var btn= document.getElementById("favBtn");
if(btn.classList.contains("far")){
btn.classList.remove("far");
btn.classList.add("fas");
}else{
btn.classList.remove("fas");
btn.classList.add("far");
}
}
how can i make it that the heart filling is only removed when the user clicks on the button again for each message?
I see you are using PHP to load the id of the message on page load. I'm guessing you want something similar when setting the initial CSS-classes on "favBtn". The following snippet checks a field on the same $row with php and chooses chat class to show initially based on that.
<i class="<?php if($row['isFavorite'] {echo "fas";} else {echo "far";}) fa-heart" id="favBtn"></i>
Another alternative would be to load the data with an AJAX call, but that would delay the load of the status and probably not what you are looking for in this case.
Good luck!
If those unreadable CSS class names come from an external library, consider putting them into variables with more recognizable names, and using the variables instead of the external names directly.
For example:
var heartOutline = 'far'
var heartFilled = 'fas'
function toggle(){
var btn= document.getElementById("favBtn")
if(btn.classList.contains(heartOutline)){
btn.classList.remove(heartOutline)
btn.classList.add(heartFilled)
}else{
btn.classList.remove(heartFilled)
btn.classList.add(heartOutline)
}
}
// they got rid of semicolons in JS because they wanted to emulate Python
I'm getting used to not using semicolons in JS.
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.
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.
I am trying to create an edit link such that when it is clicked it opens the details for that row in read-only mode.
Here is the link:
<c:set var="deletableBook" value="0"/>
<a href="" title="Edit Book Info" onClick='resetDateAndMakeReadOnly(${deletableBook}); return performAction(${item.bookId}, "bookEdit");'>Edit</a>
And here's the function that gets called:
function resetDateAndMakeReadOnly(allEditable) {
var e22 = document.getElementById('book_Date');
var e3 = document.getElementById('book_type');
var e4 = document.getElementById('book_Number');
if (allEditable){
e22.readOnly=false;
e3.disabled=false;
e4.readOnly=false;
alert("read and write");
} else {
e22.readOnly=true;
e3.disabled=true;
e4.readOnly=true;
alert("readOnly new");
}
e22.value = "<c:out value='${params.book_Date}'/>";
return false; }
And currently nothing seems to change when this method is run. I've confirmed that it makes it to the correct part of the logic, but things are still editable.
It is because you are using link with empty href to trigger your javascript function which will reload your page. Use javascript:void(0); inside href.
<a href="javascript:void(0);" title="Edit Book Info" onClick='resetDateAndMakeReadOnly(${deletableBook}); return performAction(${item.bookId}, "bookEdit");'>Edit</a>
The attribute deletableBook is not a boolean value, and is not false that you expect in the javascript function. To switch the variable in the action
session.put("allEditable", !(session.get("allEditable")==null?Boolean.FALSE:(Boolean)session.get("allEditable")));
then use
$(document).ready(function(){
resetDateAndMakeReadOnly(<s:property value="%{#session.allEditable}"/>);
});
that will reset fields attributes depending on allEditable when the page is reloaded. But this
<s:a href="" title="Edit Book Info" onClick="resetDateAndMakeReadOnly(%{#session.allEditable});">Make readonly</s:a>
will not reload the page and keep the value that you have in the allEditable session attribute. That syntax may be a little bit confuse the IDE but is correctly evaluate the OGNL expression and renders like
<a title="Edit Book Info" onClick="resetDateAndMakeReadOnly(false);">Make readonly</a>
there's no href attribute, that's why the page is not reloaded.
Also elements in the JSP should be findable by their id attribute should be set.
OK, so I have this code in the server side:
#app.route('/physical_graph')
#login_required
def physical_graph():
# Some code
return generate_graph_view()
If we click on the circular icon, we will get the link /physical_graph#physical.circular:
<a class="icon" href="/physical_graph#physical.circular">
<img src="{{url_for('static',filename='images/circular64x64.png')}}"
id="circular_icon" width="32" height="32" title="Circular layout"/>
</a>
My question is: how can I tell Flask what string is after the hash? I need this because the code in the comment depends on this string. I tried with stating the app.route as:
#app.route('/physical_graph#<some_string>')
but without success - it gives me Error 404.
Any ideas how to do this?
When you ajaxify it you need to pass physical.circle to the server. First is just a comment on the use of icon:
<!-- notice i change from icon -> graphIcon icon is too general -->
<!--a stylist would be angry at you for using icon -->
<a class="graphIcon" href="/physical_graph#physical.circular"> .. </a>
You have some options first would be to pass it in the data attribute, this would be placed somewhere in javascript (that only gets executed once).
jQuery("#circular_icon").click(function() {
$.ajax({
url:'/physical_graph',
data:{
'graph_type': 'physical_graph.circular'
},
'success':function(data){
//your function goes here.
}
})
} );
#app.route('/physical_graph')
#login_required
def physical_graph():
_type = request.args.get('graph_type')