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.
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.
Right now I am making a MVC that has a default page that loads up. From this page, the user can press a button to go to the next page. So far, I have made the first page work and a button that goes to a specified URL for the second page. The only issue I am having is making the view that I want to correspond to the second page have the correct URL.
Here is the code for my button link to the next URL
<input type="button" value="Create" onclick="location.href='#Url.Action("IndexA", "HomeController")'" />
I guess my question is how do I make my view have the specified URL that I want so it can be accessed?
I used something like this in my own project.
#if (Request.UrlReferrer != null && Request.UrlReferrer.Host == Request.Url.Host)
{
<a href="#Request.UrlReferrer" class="dbtn btn-11">
<i class="fa fa-undo"></i>
#Resources._Action_Back
</a>
}
only came from within the domain that was published I said let the button appear.
there is something like add controller in default settings controller name + controller. So just write the name there.
I had to put "home" in the URL.Action instead of "HomeController"
Please see this photo.
https://ibb.co/4SS5nYh
You add a new controller and a new view for that new page (also a model). I have called mine Test.
Then in the button. you call them with url action.
<input type="button" value="Create" onclick="location.href='#Url.Action("Index", "Test")'" />
I have an AngularJS link that is not firing, so that when the item is clicked, nothing happens. The click event only has one line of code, that works in other parts of the website:
// Load Add Job Template
dashboard.loadAddJob = function() {
dashboard.global.template = "templates/AddJob.html";
}
And the click element is a simple link:
<a ng-click="loadAddJob()">
<i class="fa fa-plus-square-o"></i><br />
Add <br />Job
</a>
Everything else works on the page so I know the controller and app are both declared correctly. Is there something I'm missing?
your function should be,
$scope.loadAddJob = function() {
dashboard.global.template = "templates/AddJob.html";
}
if you are using Controller as syntax, the HTML should be changed to,
<a ng-click="dashboard.loadAddJob()">
I tried using a href=javascript:function() in a button, with a function to execute it. It works in Chrome but it doesn't work in Firefox.
Firefox doesn't alert and open blank tab.
Anyone can help me?
<script>
function verifyisbot() {
alert("test.");
var win = window.open("http://yahoo.com", '_blank');
win.focus();
}
</script>
Below is button code
<div class="frb_textcenter">
<a target="_blank" class="frb_button frb_round frb_center frb_fullwidth" href="Javascript:verifyisbot();">
click here
</a>
</div>
Update
I should have added that im using a live editor(profitbuilder) in wordpress to generate the page and button. There is no area for me to insert additional javascript onclick function to the button. So i figure out to use "ahref" blank field in the live editor to input javascript call function to fire up the function.
Is there any way i can make this work through the ahref without using onclick event? Or can i specify onclick function in the ahref field?
Sorry the test() is actually verifybot() function, typo mistake
You can achieve the goal using only the href attribute:
<a href="javascript:void(verifyisbot())" class="frb_button frb_round frb_center frb_fullwidth">
click here
</a>
It works, because when a browser follows a javascript: URI, it evaluates the code in the URI and then replaces the contents of the page with the returned value, unless the returned value is undefined. The void operator can be used to return undefined.
Use onclick event instead of a href=javascript.It works on firefox.See below:
<div class="frb_textcenter">
<a target="_blank" class="frb_button frb_round frb_center frb_fullwidth" onclick="test()">click here</a></div>
<script>
function test() {
alert("test.");
var win = window.open("http://yahoo.com", '_blank');
win.focus();
}
</script>
UPDATE 1: You can do it without use javascript.You just add the link in the href attribute.See below:
<a target="_blank" class="frb_button frb_round frb_center frb_fullwidth" href="http://yahoo.com">click here</a></div>
Give serious consideration to separating your JavaScript and your HTML such that the problem goes away. For instance, add an ID to your anchor and add an event handler through script:
<div class="frb_textcenter">
<a id="verify" target="_blank" class="frb_button frb_round frb_center frb_fullwidth" href="http://yahoo.com">
click here
</a>
</div>
Later...
<script>
function test() {
alert("test.");
var win = window.open("http://yahoo.com", '_blank');
win.focus();
}
window.onload = function () {
document.getElementById('verify').addEventListener('click', test);
};
</script>
Do note that with the example provided, you don't actually need JavaScript at all. The HTML itself will cause a new window/tab to open with Yahoo! loaded...
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