Create Custom control from ajax control toolkit - javascript

I have a requirement where I need to show always visible calender. I understand that I can easily use ASP.NET calender, but because of the design of AJAX Control Toolkit calender and easiness of
using it, I am inclining towards creating a custom control out of it which can be visible by default.
For example:
When I load page, I should readily see AJAX calender without being associated to any id.
I have referred some links like
http://dotnetslackers.com/articles/ajax/ASPNETAJAXControlDevelopment.aspx
but I'm still not sure what's the right way to do this.
Any help would be greatly appreciated.

Related

How to create a box on click in flask?

I am new to flask.
How can I make it so that, upon a user clicking an image, a centered box containing a form appears in the div (without a page reload).
Is this possible just using javacript?
The answer to this has nothing to do with Flask. As you guess this would be achieved using JavaScript.
As it seems you do not have much knowledge of JavaScript i would suggest you start here : Mozilla Developer Network
Specifically you would need to look into event handlers, e.g. click handlers
You can also utilise a third party wrapper library like JQuery which will make interacting with DOM elements and events slightly simpler whilst your getting started with JavaScript.
These links will get you started or at least give you the knowledge to come back and ask a more directed question.

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.

How to define dynamic drop-down menu (example).?

I want to re-create the view given in the site under the Base Score Metrics, when I click on it would expand and another click would collapse the details included in it.
I don't think this is native html functionality perhaps I have to use some third party plugin for it. Please tell me know how can I achieve the effect coded in the website given in the example.
Collapsed view
Expanded view
Thanks.
JQuery's UI framework, specifically jqueryui.com/accordion, allows you to do just that.
You can put any elements inside those tabs, and it will work as if it were a static page.

Javascript MVC, need help with structure/methods?

I am attempting a single page application. I understand the main concept of how mvc is used to some extent and am using a lightweight framework called backbone.js. My issue however is not with backbone. I actually am having a problem figuring out how to structure my user interface. I have a bar at the top of the page with 4 buttons. Each button opens an instance window within the application. Within Each of these instance windows html, css, javascript will be utilized. Any suggestions on how to structure the core concept of this user interface.
Considerations on my part:
Each window instance has it's own
div with a unique ID (display:
none).
On-load, the application should
already have necessary html, css,
and javascript loaded into dom. The
html should be inside each unique
div pertaining to its instance
window.
Each menu button should modify its divs
display: to block, bringing the
instance window for that button to
front, but hiding all others.
Each instance window has to be
flexible enough to run javascript
within it, so I must be able to
create additional mvc's within each
unique div.
Okay, last comment. Should my user
interface utilize mvc or is
it not neccessary. Also, If it did use mvc
whats the best way to acomplish
this. There many different concepts
with mvc, like creating a view for
each instance window and listening
for clicks. It just gets confusing.
You think any of my considerations will effectively get the job done, and can you offer suggestions?
If I understand correctly, you want to have each button display a popup window, and be able to change the content of each popup window based on some action? I can only speak for how I would use ASP.NET MVC...
I would use jQuery UI Dialog to handle the popup windows, and have a form tag within each popup that uses its own MVC controller using ajax (I prefer the jQuery ajax command). Using ajax rather than a standard submit button allows you to send/receive data to/from the server without refreshing the webpage. You'll need the .serialize to convert your form into the correct format for sending. Each controller action can either return a JsonResult (which gives you back a javascript object you can use) or a PartialView (which gives HTML)...
Hope some of that made sense...
EDIT:
To answer your last point, I would have a model, view and controller for each window... but I am fairly new to the MVC pattern...
Although Sencha's ExtJS may not be for you, they have a very detailed tutorial of how they've structured the framework for MVC.
I'd recommend taking a look at this for some ideas: http://dev.sencha.com/deploy/ext-4.0-beta3/docs/guide/application_architecture.html
Cheers!

How to display information returned by ajax call in a tooltip

I have created a JSP file which returns the information required from database. I have also written code which will make ajax call to this jsp file to retrieve the information. But I am not getting any good or free Tooltip libraries to know how to put this information into tooltip. Kindly suggest good and free libraries of tooltip in javascript( I am not good in jquery I know its powerful but I need to learn and change my whole code).
Problem: I need to show this tool tip contents on hovering the mouse on different options of listview. (each option of listview will have different infrormation) On moving mouse on each option should send an ajax call to the JSP page and get the intended calls back into the tooltip) I now the code of javascript to make ajax calls and get contents from JSP file the only problem is which tootip libraries to use and how to use it for each option of listview. Kindly suggest.
qTIP will do the trick. Get the library. Configure it for the tags that you need. The rest could follow like this:
Get the AJAX response
Use javascript to modify the title attribute. Something like
document.getElementById(id).setAttribute('title', 'Ajax response here');
The library would do the rest for you.
To circumvent the problem of the AJAX call you can use this check:
//on mouseover call for an AJAX function and check this
if(!document.getElemenyById(id).getAttribute){
//the title is not set, use Ajax to retrive it an set it
tooltip.init(); //this is crucial for the tooltip to work
}
Edit: Inside the library search for var qTipTag = "a,label,input"; and change it to var qTipTag = "li,a,label,input";. This would start the tooltip engine for the tags you want.
you can see it working here http://jsfiddle.net/DarkThrone/gu6T2/5/

Categories