I am developing rails application where angularjs use in it.
I am facing one problem which i can't understand. Angularjs works fine in all events but i have one module where new html load after page scroll and one another where push new html into existing html on page.
On new html inserted in page, one button in new html where i would like to ng-click event bind with it so when user click on that button i want to procedure.
I tried it but not getting how to bind with button because on loaded html bind easily but in new html not bind.
How to bind on that new HTML button?
Any one have a idea?
Thanks
You need to compile the html in order to get the binds.
Inject $compile in your controller and:
var cHtml = $compile("<button ng-click='doSomething()'>Click me!</button>")($scope);
Then you can add that html using element.append() or jquery
Related
I have a custom directive..I need to reload the data up on a button click...fetching the data fresh from back-end service and refresh on the screen. can someone help me with getting through this ?
You can bind local scope/directive property to parent scope property. Here is a simple example that updates contents of directive on button click.
http://jsbin.com/dijijonedu/1/edit?html,js,output
I am using ASP .NET 4.0 using C#. I have a web form where all of my layout exists within an UpdatePanel. Inside it I have the following:
Panel for entering search criteria with textboxes and search button
UpdateProgress with animated .gif
Panel with a Repeater that gets populated according to my first sproc (using the search criteria) - inside each row is a LinkButton that when clicked calls my second sproc and populates a Panel within the Repeater row. I am populating the Panel in the code-behind in the ItemCommand event of the Repeater. I use the CommandArgument on the LinkButton for my second sproc. I have a CollapsiblePanelExtender to animate the Panel that contains data from my second sproc.
I have it working but not the way I want. When the search button is clicked the UpdateProgress does show my animated .gif. However, when the LinkButton is clicked within the Repeater datarow my second sproc takes about 6 seconds to process. I want to have an UpdateProgress that shows an animated .gif when this occurs. I tried to fix this by implementing a second UpdatePanel but I could not get the UpdateProgress to fire at all. Any help would be greatly appreciated. Thanks in advance.
I have this all working now.
After much digging I found this: How to do AsyncPostBackTrigger for the LinkButton in the Repeater
I was able to use this in my Page directive: ClientIDMode="AutoID"
I also ended up adding an ImageButton to my Repeater datarow, and whether I click on the LinkButton, ImageButton, or Search button I get the desired result now - the UpdateProgress fires and displays the animated .gif file.
My UpdateProgress resides inside of my UpdatePanel and has an AssociatedUpdatePanelID set to the ID of my UpdatePanel.
I hope this helps someone.
I've build a JSP page that contains a form with two multiple select objects and several buttons to send the elements from one to other. When the user has finished choosing the elements, clicks on a button to submit the form.
The form data is encapsulated through commandName="mainForm" in the JSP to a java POJO class MainForm that represents that form.
The problem here is that the POSTed elements from the multiselect objects are only those who remain "selected" (in blue) when the user submits the form. Is there any clean way (without JQuery) to send all the options?
Thanks in advance!!
You should write a JS code on "onsubmit" event of form to programatically select all the options of multiselect. (Thus, making all options blue)
Like in jQuery,
$('#form #selectId option').attr('selected', 'selected');
I don't see better way of doing it.
I am loading 2 jQuery UI tabs with data from ASP.NET MVC 3 PartialView using $.ajax(). I am specifying the '/controller/action' as URL. This works fine and I am able to load the two tabs with content returned by the partial views.
I have a Save button in the _layout.cshtml.On clicking the Save button, I want to get data from all tabs and send it to the controller as a JSON object.I want to use only one Save button for saving all data in the tabs instead of having Save button at the bottom of each tab.
The problem is I am able to get data from only the first tab. I get 'No Source Available' error when I try to get data from the other tab. The $('#some_id').change() event is also not fired for the controls in the second tab.
Please suggest if there is a better way to implement this ?
I would also like to know why the HTML generated by PartialView is not seen when I view source HTML of the page ?
Thanks.
It turned out to be an issue of async requests that were being made to load the tabs. I used the load() of jQuery tabs to resolve this.
I'm trying to figure out how to bind a javascript event to a select element in GWT, however the select element isn't being built in GWT, but comes from HTML that I'm scraping from another site (a report site from a different department). First, a bit more detail:
I'm using GWT and on load, I make an ajax call to get some HTML which includes, among other things, a report that I want to put on my page. I'm able to get the HTML and parse out the div that I'm interested in. That's easy to display on my page.
Here's where I get stuck: On the portion of the page I'm using, there's a select element which I can easily locate (it has an id), but would like to capture event if my user changes that value (I want to capture changes to the select box so I can make another ajax call to replace the report, binding to the select on that page, and starting the whole process again).
So, I'm not sure how, once I get the HTML from a remote site, how to bind an event handler to an input on that fragment, and then insert the fragment into my target div. Any advice or pointers would be greatly appreciated!
How about this:
Element domSelect = DOM.getElementById("selectId");
ListBox listBox = ListBox.wrap(domSelect);
listBox.addChangeHandler(new ChangeHandler() {
void onChange(ChangeEvent event) {
// Some stuff, like checking the selected element
// via listBox.getSelectedIndex(), etc.
}
});
You should get the general idea - wrap the <select> element in a ListBox. From there, it's just a matter of adding a ChangeHandler via the addChangeHandler method.