Trigger change on select input to update other input - javascript

I'm working on a scraper just to take data out of 3 select boxes in a third-party website running on ASP.NET, but the problem here is that they are cascading (not sure if this is how it's called). So what appears in the second select input depends on what's selected in the first one, and I want to get all the possibilities so I can store them.
My problem:
I'm having a hard time figuring how to trigger the change (or whatever) event so it updates the second input. How can I do it?
I'm using casperjs to do this btw, but it doesn't matter, I just need a way to do it programmatically from the frontend javascript.
So, if it works in the chrome console it will work for me.
The form is in this page http://www.tuti.pt/contrat/net/default.aspx and the inputs I'm talking about are the 'Distrito' and 'Concelho'.
Sorry for the long read but I think I couldn't hide more details.
What I've tried?
The usual thing, I really thought .click() would work but not, it didn't so it should be some asp.net special event.
Then I've placed a break and it seems this particular peace of stack seems interesting to find what I need.
Sys.Extended.UI.CascadingDropDownBehavior._clearItems (default.aspx:13)
Sys.Extended.UI.CascadingDropDownBehavior._setOptions (default.aspx:13)
Sys.Extended.UI.CascadingDropDownBehavior._onParentChange (default.aspx:13)
w.createDelegate (ScriptResource.axd:2)
w.addHandler.b.query.each.g (ScriptResource.axd:2)
If someone has knowledge on this I would appreciate to have some help on it.
I just saw there seems to be a method that could be what I'm looking for: raiseSelectionChanged(eventArgs). I just don't know in what object should I call it and what args should I pass :s
This last info took from http://www.asp.net/ajaxlibrary/act_CascadingDropdown.ashx

I wrote a little bit of code to do this entirely from the console in Chrome. Here are the steps:
Run this on the console to include jQuery since that page doesn't seem to use jQuery:
var jq = document.createElement('script');
jq.src = "http://code.jquery.com/jquery-latest.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
jQuery.noConflict();
Now all you need to do is iterate through the options in the select box for Distrito and make a POST ajax request with the following in the request payload:
{'knownCategoryValues':'Distrito:1;','category':'Concelho','contextKey':''} where 1 is the ID of the Distrito, which comes from the value in the corresponding option in the select element. Therefore the function to iterate thorugh them should be as follows:
$.each( $('#ctl00_ContentPlaceHolderMain_SigaWeb_ContrataWizardNet_SigaWeb_BookMetaDadosVeiculos1_Meta_Auto_23 > option')
, function(index,value) {
$.ajax({
url:'http://www.tuti.pt/wsSigaWebSearchContrata/wsSigaWebSearch.asmx/GetConcelhosPorDistrito'
,type:'POST'
,contentType: 'application/json; charset=UTF-8'
,data: "{'knownCategoryValues':'Distrito:"+$(value).val()+";','category':'Concelho','contextKey':''}"
,success: function(data){
console.log(data);}
});
});

So, still not found how to trigger the event, actually now I doubt it's even possible... Maybe if there is a way to get the object Sys.Extended.UI.CascadingDropDownBehavior responsible for that select input, but I have no idea how to do that.
My solution for now is to use the Web Service used by that 'library?' to update the inputs. I found the url for it inspecting he object in Chrome console. Just created a break point for when the second input is changed and when changing the first select it stops there. Then I inspected the CascadingDropDownBehavior object that was in the locals, and found the web service url in _serviceMethod :D
Update:
Ok, so at the end I just programmed a lil ruby script to fetch from the API/WS wich was pretty simple and easy, since there seems be no way to trigger the events from the javascript browser runtime.

Related

Load page and input values

Is it possible somehow to open url, without loading it. Let me explain, I'm creating check-box which will let to create new log and automtically input values. I know how to take boxes and input value into them using javascript. But i don't know how to open that page without loading it on screen OR write that url that javascript would type values into that page.
The concept you should read up on is AJAX. It sounds like it would fit your needs: post our data to a script, let the script do it's job, and work with the answer (or completely ignore the answer)
Since it seems that you are a beginner, maybe you might want to take a look at the jQuery Ajax documentation.

Loading Specific Content from one page into another Page using Ajax

I'm new to Ajax and was told need to use it for what I'm trying to accomplish here.
Here is the website... http://modocom.ca/gillons
If you scroll down up will see a section called Find an Office with drop down menu in it. What I need is for when someone click on for example Emo in the dropdown menu the location info from.... http://modocom.ca/gillons/emo goes under the dropdown and so on for each location in the dropdown and also when your on the Emo page for example you click on the dropdown menu and can choose different location and get new info as well for selected location.
Hope that makes sense and hopefully someone could give me a hand.
Thanks,
Mike
OK, I'm not going to write code as it looks as though you haven't actually tried anything yourself yet.
However, the sequence of events, one version of them anyway, might look like this.
Using jQuery, put a change event on your dropdown.
When the event triggers, and this depends on your backend as you have not spcified APS.Net, MNV, Java etc, you need to post back to a code file of some sort and pass in the value within the dropdown.
From there, in your c#, java, pythod, whatever, code, take that value, generate some HTML and return that HTML to the client.
At the client, you accept the HTML and fill say a DIV with the returned HTML.
If you are using MVC, you can return a PartialView which is a better design.

Getting content from current tab (AjaxTabbedPanel)

I'm doing some tests on a wicket prototype here, and I got stuck on this little issue.
I have an AjaxTabbedPanel within a page, with 5 tabs. It's working ok so far but I'd like to add some behavior BEFORE the new tab request has been processed (e.g do some validation and storing something on session before the tab changes).
AjaxTabbedPanel let me override the onAjaxUpdate(final AjaxRequestTarget target) but this one takes place AFTER the new tab has been set. I'd need something like "beforeAjaxRequest".
Is there any way of doing this without changing things around too much? (Sticking with AjaxTabbedPanel, no JS, etc). You might think "why don't you load the whole page at once and navigate with JS tabs", but I'm trying to work on a native wicket tab solution for now (there are reasons for that).
Thanks in advance!
Try overriding the newLink(String linkId, final int index); method. Thats what an AjaxTabbedPanel does when it extends TabbedPanel to add the ajax behaviour http://www.jarvana.com/jarvana/view/wicket/wicket-extensions/1.2/wicket-extensions-1.2-sources.jar!/wicket/extensions/ajax/markup/html/tabs/AjaxTabbedPanel.java?format=ok.
You could set up the newlink so it uses the same code as the ajaxtabbedpanel but adds a validation clause so when a user clicks it, it validates first and then decides whether to change the tab and update.
Hope that helps.

Need to autosave TinyMCE

I am looking for some help autosaving tinyMCE. I want to save the content within tiny into its respective textarea after content has been updated. So that when I make an ajax call the content is in the textarea ready to be posted.
Currently I have this little bit of code but it only updates the text area when you press a button in tiny (like bold, italics, underline, etc). I also have the link where I found the code. Any help would be appreciated.
$('.AjaxEdit textarea.tiny').tinymce({
//other init options
//need this function to save tiny data before Ajax call
//http://www.webmasterkitchen.com/article/tinymce-ajax-form-submission/
setup : function(ed) {
ed.onChange.add(function(ed) {
tinyMCE.triggerSave();
});
}
});
You're best bet is to adjust your AJAX call so it pulls the content straight from TinyMCE or triggerSave just before the AJAX call rather than trying to constantly have the textarea in sync with the editor content. Serialising and filtering the entire document so it can be stored on every change is a major performance hit.
If you really need to keep the textarea in sync, you'd have to add DOM modification listeners to the document in the iframe that TinyMCE creates to store the content - you can retrieve it with the getDoc() function (see http://tinymce.ephox.com/documentation/api/index.html#class_tinymce.Editor.html-getDoc). You are going to have major performance problems here though.
Regards,
Adrian Sutton
http://tinymce.ephox.com
Though the question is quite old, I've came accross while searching for a plugin. At the end I've implemented my own plugin.
I have written a plugin that sends the form data to the specified url every x seconds. I have blogged it here.
In short, the idea is to create an iframe, change the target and action of the form dynamically, and submit the form to stimulate an ajax effect. Once saved, I am putting the form element into its initial state so that if the user wants to save manually he or she will not have any difficulties.
Please note that the plugin I've written is for tinymce4. You'll have to change the source code a bit for older versions.
You should take a look at this autosave plugin http://code.google.com/p/tinyautosave/
FYI, I have done it like this:
$('textarea.wysiwyg').tinymce({
...
onchange_callback : function(inst) {
// Prints the DOM element (textarea) to the console.
console.log( inst.getElement() );
// Prints the content of tinyMCE to the console.
console.log( inst.getBody().innerHTML );
}
});
Official documentation on the onchange_callback event

Javascript textbox autocomplete clears drop down selection

Morning folks.
Novice Rich here once again requesting assistance.
I have just started dabbling with javascript and although I have set up a few onclick/change for setting the focus of radio buttons,that's pretty much my limit.
In my c# code behind, I would like to have an 'onchange' function whereby once a client starts to type in my autocomplete textbox, a drop down list (which is likely to have been populated previously) is reset/cleared to it's original state.
Anyone got any ideas how to do this?
(Chances are I haven't exp[lained myself very well here)
What you want here is to start exploring jQuery. When you find yourself familiar with it, create a server-side ASP.NET Handler that returns JSON data to your jQuery.getJSON call and from that, populate your autocomplete textbox.
Or, you can of course not reinvent the wheel and just use one of the plethora of jQuery Auto-Complete plug-ins available out there. Whether you'd still need the server-side handler to provide the auto-complete plugin with data depends on your use-case, but in most cases you'd get much better performance out of pre-populating the data when the page loads.

Categories