I am trying to pass an integer parameter to Url.Action based on hasClass output of jquery. something like below but is invalid syntax.
<li class="myClass">
<a href="#Url.Action("SetActionMode", "Home", new { enable = $(this).find('i').hasClass("fa-check") ? 0 : 1 })">
<i class="fa fa-check"></i> Debug Mode
</a>
</li>
What is the correct syntax for above or is there some easy way to do this?
I'd say you should 'interrupt' link clicking, construct URL and then go to this URL.
$(".myClass a").click(function(event) {
event.preventDefault();
var url = $(this).attr('href');
// here you do whatever makes sense
url = url + "?enable=" + ($(this).find('i').hasClass("fa-check") ? 0 : 1)
window.location.href = url;
});
ASP.NET needs a value from jQuery, however the two don't run at the same time - jQuery is run on the client side, ASP.NET is run on the server side. So, on the server side, it compiles and sends it to the client side, then, on the client side, it runs the jQuery code. The hasClass is jQuery code, the new { ... is ASP.NET code, this is why it's incorrect syntax.
You cannot do it like this,But you have another option i.e GIve your anchor tag a class, then write a click function for this, After this use location.href to perform the same:
<li class="myClass">
<a href="javascript:void(0)" class="clickme">
<i class="fa fa-check"></i> Debug Mode
</a>
</li>
<script>
$('.clickme').on('click',function(){
location.href='/Home/SetActionMode?enable='+$(this).find('i').hasClass('fa-check')?0:1;
})
</script>
This will Surely do what you need.
Related
When jsevent triggered , it forwards link parameter to data-url attribute of a button and when user click that button it redirects to django backend view but there is a problem with parsing line of JS
$('#btn_del').attr('data-url',{% url 'event_delete' + event.id + %});
is there any chance to combine that syntax ?
Thank you , have a nice days.
JS:
eventClick: function(event, jsEvent, view) {
$('#modalTitle').html(event.id);
$('#btn_del').attr('data-url',`{% url 'event_delete' ` + event.id + `%}`);
$('#calendarEditModal').modal();
console.log(event.id);
}
url.py
....
url(r'^event/(?P<pk>\d+)/delete/$', event_delete, name='event_delete'),
....
Html button that redirects to django
<button id="btn_del" type="button" class="btn btn-primary js-delete-events" data-url="">
<span class="glyphicon glyphicon-pencil"></span>
Edit
</button>
Result should be like this format event.pk is going to be our parameter numeric value , it's ok.
<button type="button" class="btn btn-primary js-delete-events" data-url="{% url 'event_delete' event.pk %}">
<span class="glyphicon glyphicon-plus"></span>
button
</button>
/event/1/update/ is the last result of seen from browser inspect. But I need to write inside jsEvent with django syntax to able to reach backend view which is {% url 'event_delete' event.pk %} something like that.
No, it cannot be done that way... Parsing of your templates (the {% url %} tag) is done on the server before even the browser receives anything. Browser doesn't know what template tags are you using.
On the other side, JavaScript is executed in the browser, so template language has also no knowledge about variables inside it.
Solution for that is to use a package like Django JS Reverse. The second one is to pass full URL to the JavaScript, just like it receives the ID of the item.
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
}
I am trying to get the following link to work.
<a href='#' onclick='window.open(" | &ESPP_Info_URL | ");return false;'>Employee Stock Purchase Plan Information</a>
Basically the &ESPP_Info_URL variable takes in a url so that the code below looks like...
<a onclick="window.open(https://...);return false;" href="#">Employee Stock Purchase Plan Information</a>
But when I click the url it just refreshes the page. Does anyone know how to get this to access the link within the window.open function?
Try this, You need wrap url with in single quotes ' - window.open('YOUR URL HERE')
<a onclick="window.open('YOUR URL HERE');return false;" href="#">Employee Stock Purchase Plan Information</a>
Here's an extended version with more dynamic functionality, jic:
http://jsfiddle.net/ofnh7gke/
And the smaller version:
http://jsfiddle.net/rqf3s72n/
Javascript
var sites = ['http://www.google.com','http://www.github.com'];
document.getElementById('btnStockPurchasePlan').onclick = function(){
window.open(sites[0],'_parent');
return false;
};
HTML
Employee Stock Purchase Plan Information
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.
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