I have a commandButton in a visualforce component. The expected behavior is that the controller method would be called. The page is refreshed, but the method registered in the commandButton {!performUnlinkContact} is not called. The strange thing is that if I put the button on the base visualforce page, it calls the controller method as expected - but when in a component, it does not.
Here is my component:
<apex:component >
<apex:attribute name="rk" description="RK Base Contact Data" type="Object" required="true"/>
<div class="unlinkBox">
<div class="unlinkHeader">
<div class="unlinkHeaderLeft">Wrong Contact?</div>
<div class="unlinkHeaderRight"><apex:image style="cursor: pointer;" value="{!$Resource.x}" alt="Close Panel" /></div>
</div>
<div class="unlinkBody">
<div class="unlinkBodyLeft">
Click Yes if the Contact displayed is incorrect.<br/><br/>You will be given the opportunity to link to a different Contact.
</div>
<div class="unlinkBodyRight">
<apex:outputpanel id="callMethod">
<apex:commandbutton value="Yes, this is the wrong contact" action="{!performUnlinkContact}" rerender="" status="myDisplayStatus" /> <a onclick="return hideUnlinkPanel()" style="color:blue;cursor:pointer;text-decoration:underline">No</a>
</apex:outputpanel>
<apex:actionStatus id="myDisplayStatus" startText="(performing Contact Unlink...)" stopText=""/>
</div>
</div>
</div>
</apex:component>
and here is the method in the controller extension:
public PageReference performUnlinkContact() {
System.debug('==================================!!performUnlink');
if (this.thisLead.rkContactId__c != 0) {
this.thisLead.rkContactId__c = 0;
update this.thisLead;
}
return null;
}
I'm sure I must be doing something wrong since I am new to salesforce and still learning, but I am unable to find any related issues when I search on how to resolve this issue. Thanks in advance for the help.
Thanks for the replies - to resolve I ended up adding an actionFunction to the base Page, then just calling this function in the component via a button's onclick event:
Code in base page:
<apex:actionFunction name="doUnlink" action="{!performUnlinkContact}" rerender="refresh" status="myStatus"/>
Code to call function in the component:
<input type="button" value="Yes, this is the wrong contact" onclick="doUnlink();" />
This method seems to work well so far.
You can also pass a reference of performUnlinkContact() to the component, using an apex:attribute of type ApexPages.Action, and then when your commandButton uses this reference, it will call the method defined in the page controller.
<apex:component>
<apex:attribute name="performUnlinkContact" type="ApexPages.Action" description="Passing method from controller"/>
<!-- your stuff here -->
</apex:component>
Then when you use your component, you have to populate that attribute like so:
<c:MyComponent performUnlinkContact="{!performUnlinkContact}"
I think rerender="" is not a way to do a fake reRender command. I would try it with rerender="none".
Related
I am new to AngularJS.
I have created <li> to which I used ng-repeat.
<li> contains images and buttons like like, comment and share which is inside <li> and created by ng-repeat.
I have made function which will replace empty like button to filled like button (By changing background image of button).
But problem is this trigger applies to only first like button and other buttons does not change.
How can I fix this?
Code:
HTML:
<html>
<body>
<ul>
<li ng-repeat="media in images"><div class="imgsub">
<label class="usrlabel">Username</label>
<div class="imagedb">
<input type="hidden" value="{{media.id}}">
<img ng-src="{{ media.imgurl }}" alt="Your photos"/>
</div>
<!-- <br><hr width="50%"> -->
<div class="desc">
<p>{{media.alt}}</p>
<input type="button" class="likebutton" id="likeb" ng-click="like(media.id)" ng-dblclick="dislike(media .id)"/>
<input type="button" class="commentbutton"/>
<input type="button" class="sharebutton"/>
</div>
</div> <br>
</li><br><br><br>
</ul>
</body>
</html>
JS:
$scope.like = function(imgid)
{
document.
getElementById("likeb").
style.backgroundImage = "url(src/assets/like-filled.png)";
alert(imgid);
}
$scope.dislike = function(imgid)
{
document.
getElementById("likeb").
style.backgroundImage = "url(src/assets/like-empty.png)";
}
Thanks for help & suggestions :)
The id for each button should be unique but in your case, it's the same for all buttons ('likeb').
You can set the value of the attribute 'id' for each button dynamically by using '$index' and passing '$index' to the functions as follows:
<input type="button" class="likebutton" id="{{$index}}" ng-click="like($index)" ng-dblclick="dislike($index)"/>
Then in your controller, you can use the functions with the passed value.
For example,
$scope.like = function(index)
{
document.
getElementById(index).
style.backgroundImage = "url(src/assets/like-filled.png)";
}
Another good alternative in your case would be to use the directive ngClass.
use 2 css class for styling liked and disliked state, and then put the class conditionally with ng-class instead of DOM handling. and if you really want to perform a DOM operation (I will not recommend) then you can pass $event and style $event.currentTarget in order to perform some operation on that DOM object.
I am working off of some code I found on the Internet - I have only been on the ADM 201 course.
What I am doing is attempting to pull the information from a post and then put this into a VF page. I know I can use chatter:feed, but this is getting all of the information and functions, whereas I need only the text body, poster name, and picture (not essential).
What I have so far:
Apex Class:
public class Test_3 { //Class is
public ConnectApi.FeedElementPage feedElementPage{get;set;}
public Test_3() {
feedElementPage = ConnectApi.ChatterFeeds.getFeedElementsFromFeed('0F958000000TWvL', ConnectApi.FeedType.Record, 'showInternalOnly');
}
}
VF page:
<apex:page controller="Test_5">
<div class="posts">
<div class="row">
<div class="col-md-6">
<apex:repeat value="{!feed.elements}" var="feedElement">
<div class="media">
<a class="pull-left" href="{!feedElement.parent.id}">
<img class="media-object" src="{!feedElement.photoUrl}" alt="{!feedElement.actor.name}"/>
</a>
<div class="media-body">
<h4 class="media-heading">{!feedItem.actor.name}</h4>
// This creates a heading from the posts that is the poster's name
{!feedElement.body.text}
// This is the body of the post
</div>
</div>
</apex:repeat>
</div>
</div>
</div>
<footer>
<p>© Operations Updates - Please refresh your browser for the latest</p>
</footer>
</apex:page>
Current issues:
!feedElement.parent.id
!feedItem.actor.name
"Error: Unknown property 'ConnectApi.Feed.elements'"
Anyway, I can't work this out. I've been trying to make this for a lovely 5 hours now.
Any help would be much appreciated.
The code was modified from here and then I attempted to update it to Elements from Items.
Thanks
In your Apex class, the variable is called "feedElementPage" but in the Visualforce page, it says "feed". Please update feedElementPage to feed in Apex class or update repeat value="{!feed.elements}" to repeat value="{!feedElementPage.elements}"
In addition, I think you should use FeedItem instead of FeedElement. Please take a look at the document, and let me know if you have any other questions.
I would like to have a div with class "dialog" so when user click on that div anywhere expert links inside it redirects him to one page. And "links" inside that div should redirect user to another page. And return on previous page browser button should return him on correct page. I saw some examples on javascript but they doesn't work for angular and I always get second page when return back.
I have following snippet of code.
<div ng-repeat="dialog in dialogs">
<div class="dialog row well well-sm">
<div class="col-xs-8">
...
<a class="msg-heading" href="#!/item/{{ dialog.adv_id }}">
{{ dialog.adv_name }}
</a>
....
</div>
</div>
</div>
Here is one way you could do it by passing the event object as argument of ng-click function and checking event.target
<div class="dialog row well well-sm" ng-click="doRedirect($event)">
Then in controller or directive:
$scope.doRedirect = function(event){
if(!angular.element(event.target).hasClass('msg-heading') ){
/* not the <a> tag so put your redirect code here */
}
}
Hello currently I have a html form like that:
<div ng-controller="DemoCtrl">
<form name="myForm" action="/a/url">
....
</form>
<button ng-click="next(myForm)">Klick me</button>
</div>
is there a way to access the form action ?
what i suggest you not to provide action name in the form, instead of that within ng-click action javascript method in JS file either use $http service or $window service.
This can happen with the following htmlcode:
<div ng-controller="DemoCtrl">
<button ng-click="next(myForm)">Klick me</button>
</div>
JS Code:
$scope.next = function (formObject) {
// whatever you want to do
}
$scope will pick all the object defined within form tag.
I am also new in ng, if anything wrong here please correct me.
all:
Is there a way to dynamically add a tag (especially a custom tag) in AngularJS?
I have a custom tag recently created of the type:
<mytag type="small" />
which I am attempting to manage in a larger <div> element. What I would like to do is place, within the div element, a button that, when pressed, causes the creation of a new mytag element within the div.
In other words, given an initial page composition:
<div ng-controller="tagControl">
<div id="tagdiv">
<mytag type="small" />
</div>
<div id="Controls">
<button ng-click="addTag()">Add New Tag</button>
<button ng-click="clearTags()">Clear All Tags</button>
</div>
</div>
I would like to put something in the tagControl's addTag() function that adds a new mytag tag whenever the "Add New Tag" button is pressed, and I'd like to put something in the clearTags() function that removes all added tags when the "Clear All Tags" button is pressed.
Is this possible using AngularJS? If not, can it be accomplished using a third- party library? In either event, how can this be done?
Thanks in advance for any insights...
You need to think in terms of MVC and not DOM manipulation. How many of your <mytag>s you want to show up should be driven by something in your model. And then your HTML would look like this:
<div ng-controller="tagControl">
<div id="tagdiv">
<mytag type="small" ng-repeat="foo in items" />
</div>
<div id="Controls">
<button ng-click="addTag()">Add New Tag</button>
<button ng-click="clearTags()">Clear All Tags</button>
</div>
</div>
Then your addTag() method would just add to the items model and the clearTags() would clear the list. Angular will add the tags for you as you update the model