jquery trigger action on option add - javascript

I have an select field which is on a jsp page and I add options to it through an external js library. Now is there a way on my jsp to trigger an action when an option is added?
Its because I need to get some value from backend and its not possible to do everything on an external js page.
I used .change() but I guess because of the fact that the adding takes place in an external page, it does not trigger anything.

Use .on
$('#your_dropdown_id').on('change', function (d) {
// your code here..
});

Related

how to scroll top of the page automatically when page is submitted

Am working with angularjs in MVC architecture with thymeleaf. i want to push my page automatically to top when page is submitted or page is refreshed automatically.
I came to know that using below function it is achievable. But where exactly i have to write it ( have to write in script file or everypages of thymeleaf HTML page ?)and how to use in thymeleaf pages.
If i write in script file then how to and where to use that id in thymeleaf HTML pages?
$window.scrollTo(0, angular.element('put here your element').offsetTop);
Look into $anchorScroll I think it will provide what you're looking for.
It can scroll to a named input or the latest value of $location.hash()
As an example, here would be your method to submit the page:
submitForm() {
doStuff(); // Shortening what you would do for submitting;
this._$anchorScroll('#named-element-id');
}
Another example would be using the $location.hash() if you had set it elsewhere in your controller. Then you could call $anchorScroll() directly without an argument.

Jquery onchange event not triggered

I have a drop down list inside a data grid in main page and upon changing values it should display popup and popup values are posted back to the main page. I have to trigger onchange event which is not working.
Below is the code I am using.
Server side:
ddlID.Attributes.Add("OnChange", "return Show("txtFName.text,txtLstName.text");
Client side:
$('#ddlID').val(6).trigger("change"); //should hit function Show() which is not triggered.
Finally I figured out. The control is inside data grid and when I am using the ID directly via jquery ($('#ddlID')), it is not working. I have to get the client side ID using $(""#"+ddlID.ClientID+"""). Also we can use class selector. I am triggering on change using a external js file.

How to call a javascript function from code-behind of a partially loaded aspx page

I have an asp.net application and I use jquery's .load function to load content into a specific div like so:
$('#pnl').load('/Panel.aspx #panel', loadLogs());
From the Panel.aspx page I populate some dropdowns in the code-behind load event, and from there I have some javascript functions(in a separate javascript file) that display text files based on the content of the dropdowns, which is controlled by the change events on the dropdowns. I am having an issue of when the page is loaded, the dropdowns are populated but I need to actually click on one of them to get the files to display. I have tried to call the javascript functions from the load event of Panel.aspx with Page.ClientScript.RegisterClientScriptBlock and they are not firing. I have also tried firing it from window.onload or $(document).ready from the javascript file and it is still not working.
Any suggestions for how I can get this done?
try something like this
If you Used Update Panels Then You can Use:
ScriptManager.RegisterStartupScript(this, this.GetType(), Guid.NewGuid().ToString(), "javascriptFunction();", true);
Other Wise You can Use
ClientScript.RegisterStartupScript
(GetType(),Guid.NewGuid().ToString(), "javascriptFunction();",true);

trigger 'click' after selected an option?

I have select box which load addresses form via ajax. So user can select previous saved address. Inside address form , another select box which lists 'States'. A shipping is calculated based on 'States' select box change.
I want to trigger a change after loading addresses. I used this code
$('select#addressed').change(function() {
$('select#states').trigger('change');
});
But this will trigger change before new address load.Any way to trigger after loading address?
Fire the change in the success section of the Ajax call. That way it won't fire until the data comes back. You could also use a $.when/.done as well.
http://api.jquery.com/jQuery.when/
You can fix this by putting the "click" trigger in the complete function. I'm assuming from your syntax and tag you're using jQuery. Have a look at this link under "complete".

Forcing a POST on every checkbox/dropdown change

How can I force any change to a checkbox (inside a form) or to a drop-down menu selection to cause a HTTP POST to be issued by the browser?
Bandwidth is not an issue, page reloading is not an issue and I don't want to go the full AJAX route.
What I really want is an HTTP POST to be done when the user clicks on a checkbox (or selects something from a drop-down menu), etc. without the user having to click 'Submit' after its change.
Maybe it should be done with some JavaScript on the client-side? (I couldn't succesfully Google anything)
Use Javascript. Add onchange="document.getElementById('myFormId').submit()" to the elements, or do this programatically. myFormId must be replaced by the HTML id of the form element.
You could use the JavaScript onchange event to then call the submit() function on the form.
if you have a form already set up just put a class to the element you want to use as trigger and then
for select
$(".classname").change(function(){
$("#formid").submit();
});
for checkbox/radio
$(".classname").click(function(){
$("#formid").submit();
});
AFIK it can't be done without client-side scripting. The easiest way would be to trigger the submit event for every form change. With jQuery it's done with the following code:
<script type="text/javascript">
$(function() {
$("input[type=checkbox],input[type=radio],select").change(
function(evt)){evt.target.form.submit();}
);
});
</script>
If you don't use jQuery, you'll have to write some boilerplate event handling code. See this introduction for more info on JavaScript event handling.

Categories