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()">
Related
I'm working on a website built using Laravel and AngularJS.
I want a certain link to open in a popup window.
The javascript code is
function popitup(url) {
newwindow=window.open(url,'test','height=400,width=550');
if (window.focus) {newwindow.focus()}
return false;
}
and the link is
<a ui-sref="test({id:test.id})" class="btn btn-primary fright" onclick="return popitup(this.href)" oncontextmenu="return false;">Resume</a>
when I click on the button the popup works fine but the link also opens up in the tab where I clicked it, but I don't want it to.
Is there a way to do it?
I would guess ui-sref will also bind a click-event and that event will trigger before yours.
You could skip the ui-sref and put the url in a data-attribute or inside the onclick-attribute. You could get the url using $state.href() instead. Then the problem may disappear.
Edit
You could bind it to a scope function and skip onclick all toghether. Something like this:
In the Controller (Also make sure you include $state in the controller first):
$scope.popitup = function(stateName, options) {
var url = $state.href(stateName, options);
newwindow=window.open(url,'test','height=400,width=550');
if (window.focus) {newwindow.focus()}
}
And in the HTML you invke the popuitup function with the state name and its parameters:
<a ng-click="popitup('test', {id:test.id})"
class="btn btn-primary fright" oncontextmenu="return false;">Resume</a>
Also see documentation for state.href.
<!DOCTYPE html>
<html>
<body>
Popup-window
</body>
</html>
try this code for popup window and change google.com to you site
Ok, so Im building an application in Laravel, but my problem is with jQuery. I am creating a comment section for some posts. Adding the comments work fine. Under each post all the comments for the particular post are listed. If the comment is made by you, an edit button is shown. If you press the edit button a few things will happen:
the p-tag containing the comment is replaced with a textarea (maintaining the same content/text)
the edit button changes text to "Save" (instead of "Edit")
the button also changes some classes and therefore styling
the button gets a class of "save-mode"
Im trying to make so that when the button has the class of save-mode, an event should get triggered, thus updating the comment in the database.
Now, almost all the pieces work fine separately but the Ajax call is not fired when the button is pressed. And I just cant see why. Its worth mentioning that the Ajax call does work. But the if-statement that is supposed to trigger it doesn't.
There must be something wrong with my logic.
Ive included a snippet, and Im guessing theres something wrong in the editComment function. Ive removed the blade syntax, styling and surrounding markup. But you can see the same problem in this snippet.
I really appreciate any help I can get to illuminate my own stupidity.
Thank you.
$("#edit-save-btn").on('click', function(e){
e.preventDefault();
editComment($(this));
});
function editComment(btn){
const id = btn.attr('value');
const comment = btn.closest('.col-md-3').prev().find('.comment-text');
const commentHTML = $.trim(comment.text());
if(btn.hasClass('save-mode')){
console.log('this need to get triggered');
//updateComment(id, commentHTML);
return;
}
btn.toggleClass('save-mode');
const editable = $('<textarea />').css({'width': '100%'});
editable.val(commentHTML);
comment.replaceWith(editable);
editable.focus();
btn.removeClass('btn-primary').addClass('btn-success').html('<i class="fa fa-floppy-o" aria-hidden="true"></i> Lagre');
editable.blur(editableTextBlured);
}
function editableTextBlured() {
$("#edit-save-btn").removeClass('btn-success save-mode').addClass('btn-primary').html('<i class="fa fa-pencil-square-o" aria-hidden="true"></i> Rediger');
var text = $(this).val();
viewableText = $('<p class="comment-text">');
viewableText.html(text);
$(this).replaceWith(viewableText);
$(viewableText).click(editComment);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comment-post clearfix">
<div class="col-md-9">
<p class="comment-text">
comment
</p>
</div>
<div class="col-md-3">
<form class="pull-right right-margin" action="" method="post">
<button value="{{$comment->id}}" class="btn edit-comment btn-primary btn-xs" id="edit-save-btn"><i class="fa fa-edit"></i> Edit</button>
</form>
</div>
</div>
Click the button will trigger the blur event of textarea.
At the function editableTextBlured, your removed the class save-mode, so btn.hasClass('save-mode') is return false, it can't trigger save.
It's like this:
blur -> remove className save-mode -> btn.hasClass('save-mode') -> false, can't trigger save.
Wish it can help for you :)
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 am working on a chrome extension that can automate a form filling. So the form which i am filling has a next button attached to it that has a ng-click attribute "forward()" like this-
<button type="button" ng-class="{disabled: !showNext()}" ng-click="forward()" class="btn btn-success btn-lg default pull-right" style="font-size: 18px;">Next <i class="fa fa-chevron-right white-color"></i></button>
I tried calling angular.element($('button.pull-right')).scope().forward() or $('button.pull-right').scope().forward() and the function executes but the view doesnt get updated. I know i can do $('button.pull-right'.click() and that works but actually i am in need of bypassing the click event, for that i need to bind the click to my external script funciton(which i will inject into page through my extension) and then from my script call the forward() function.
I had a lot of time googling this but none worked out for me. Please Help!
When you're reaching into Angular from outside of its context it will not notice that you've done so unless you tell it about it. You do that by using $apply.
Try this:
angular.element($('button.pull-right')).scope().$apply(function() {
angular.element($('button.pull-right')).scope().forward();
});
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.