Dynamic hashed link in Flask - javascript

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')

Related

Python Flask: Return HTML Content

i am trying to put together a makeshift tool for my own personal use, im not experienced with backend development at all. so my methods may be unconventional. although there may be a much better method to go about this
consider the following snippet from my html file:
<tr><td>
<button id="socks.shirt.pants"> dummy text here </button>
</td></tr>
my goal, as simply as i can put it, is to click BUTTON and return the string text within the ID attribute in python using Flask. Below is the code i am working with.
app = Flask(__name__)
#app.route('/', methods=['GET', 'POST'])
def index():
#display html file
return send_from_directory('','myfile.html')
#this is the part that needs help
textdata = request.htmlcontent.td.id
i have tried several different ways to extract the html content. including but not limited to:
request.html.tr.id,
request.get_data(),
request.data(),
request.form,
i understand now that request.form returns user-supplied information submitted in a form, which wont work for me because the information that i want to retrieve will be hardcoded into the html file under whichever tag that would allow this process to work. (currently tr -> td -> button).
the other methods either returned None or an some empty string, i believe.
also, i am wondering if maybe there is some piece of javascript code that ill need to use in addition to Flask as well? i hope that this is not an unrealistic expectation to ask this question! any suggestions would help greatly!
You can use ajax with jquery:
In the main filename.py, include a route like this, that access the parameters from the json response from the frontend. Also, provide a route that will render the HTML template:
#app.route('/recieve_data')
def get_id():
the_id = flask.request.args.get('button_id')
return "<p>Got it!</p>"
#app.route('/', methods=['GET', 'POST'])
def home():
return flask.render_template('filename.html')
In your HTML (stored in filename.html), utilize the code below:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<tr><td>
<button id="socks.shirt.pants" type='button'> dummy text here</button>
<div id='response'></div>
</td></tr>
</body>
<script>
$(document).ready(function() {
$("button").click(function(event){
var the_id = event.target.id;
$.ajax({
url: "/recieve_data",
type: "get",
data: {button_id: the_id},
success: function(response) {
$("#response").html(response);
},
error: function(xhr) {
//Do Something to handle error
}
});
});
});
</script>
</html>

How to make a contact's phone number clickable to call and to send a message in ionic?

I cloned the ionic project from GitHub
While the contact's phone number is not clickable to call and message. So for the index.html file line 39, I converted from
<p ng-if="contact.emails.length > 0">{{contact.emails[0].type}} : {{contact.emails[0].value}}</p>
to
<p ng-if="contact.phones.length > 0">{{contact.phones[0].type}} : <a ng-href='{{contact.phones[0].value}}'>{{contact.phones[0].value}}</a></p>
But it turns out the app will not load any contact's information anymore.
Is there anything I missed or am I totally wrong on sending data?
to make phone call with ionic you need to add this code in confi.xml
<access launch-external="yes" origin="tel:*" />
and in your view you need to add:
<a ng-href=tel:{{user.phoneNumber}} class="button button-positive">Call me</a>
Update:
I've just noticed it's (probably) an issue with loading data not the link itself. Would need to see your controller code to know more about why it's not populating the ng-href if it's not the issue below...
Previously:
Using the following href should be enough to trigger a call:
tel:' + number
Angular (which ionic sits on) doesn't like anything unusual going into an anchors href unless you tell it you want it to. See here:
http://forum.ionicframework.com/t/ng-href-tel-redirecting-to-call-with-empty-number/4567/2
The quickest fix, if you 'just' want it to work is this in your view:
<p ng-if="contact.phones.length > 0">{{contact.phones[0].type}} : {{contact.phones[0].value}}</p>
and then in your controller:
$scope.triggerCall = function(number){
document.location.href = 'tel:' + number
}

Attribute href doesn't work in backbone

I've this html code in my template:
<a class="icon icon-home pull-right" href="index.html"></a>
If I click on it, nothing happens and no redirect to index.html is done. If I substitute href value with another (for example "#/friend") it is correctly written in the URL and caught by router. I don't understand the reason. The current URL I'm into when I try this is:
file:///C:/Users/Stefano/workspace/SocialGossip/assets/www/index.html#/back

JSP and JSTL with the Onclick method

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

Fancy box with mvc partial view issue

This is the message I get everytime I click the edit button:
The requested content cannot be loaded.
Please try again later.
Anyone have any ideas? If you need to see the partial view I can post it.
My Conbtroller:
[HttpPost]
public ActionResult SearchEdit(int modelcount)
{
using (Offers.OffersClient o = new Offers.OffersClient())
{
var offers = (List<Offers.Offer>)Session["offer"];
var offer = offers[modelcount];
return PartialView("Search_Edit", offer);
}
}
My View:
<div class="offer_edit">
<a href="#Url.Action("SearchEdit","Home",null,"http")?modelcount=#(i)" class="fancybox">
<img title="Edit" src="../images/edit_button.png" />
</a>
</div>
Your action is decorated with the [HttpPost] attribute. This means that this controller action can only be invoked using the POST verb. But in your view you are using a link (<a>) which when clicked sends a GET request unless you have configured the fancybox to use POST. To further investigate the issue you could use a javascript debugging tool such as FireBug to inspect the AJAX request being sent to the server as well as the response.

Categories