I am trying to set up a menu selection similar to what Mercedes-Benz Canada has when you choose a car and there is more then one body option. (http://www.mercedes-benz.ca/content/canada/mpc/mpc_canada_website/en/home_mpc/passengercars.flash.skipintro.html).
I have created it on here http://jsfiddle.net/sofew/db2BF/3/ I would like to hover over the coupe title and the info and pictures would change to the coupes list item.
I have tried various forms of jquery but I can not seem to have it work the way I am hoping. Can someone can point me in the right direction.
If you want a menu to appear based on the element you are hovering over you'll need to use AJAX. You can use the load() method in jQuery to fill a selected element with the returned value of an AJAX query.
What this means is that you only need a single hidden element, and when the onhover event is fired the div is cleared, populated with AJAX data and then displayed. You will just need to pass either an ID or the name of the vehicle to the method which accepts the AJAX query so that it can return the pertinent data.
If you specify your server side language I might be able to give you a more concrete example if you are unfamiliar with AJAX calls.
EDIT:
Ajax is really easy to do! All Ajax does is make a call to a function on your web server, and then take the result of that call and put it somewhere on your page without having to reload the page itself. If you're on Linux and using PHP then let's imagine you want to display the current server time on your page. You could make a function like this...
public function WhatTimeIsIt()
{
return time();
}
And then create a div on your page with the id "time". Then all you need to do is in your jQuery, use the following call:
[event handler] {
$('#time').load([path to the WhatTimeIsIt() function]);
}
And when ever that given event handler is fired, your time div will update to contain the current server time. A bit of a trivial example, but if you created a function which took a car ID as a parameter, got all the information on the car and formatted it into nice HTML and returned that, you'd have your solution.
I made a demo of something you can use: http://jsfiddle.net/DFXZn/22/.
I recommend using $.ajax to grab the content. Visit here to learn about ajax calls: http://api.jquery.com/category/ajax/. Let me know if this helps. Happy coding!
Related
So, basically i have an Ajax call that triggers on scroll and loads comments from a PHP script and orders them by "ID DESC" (fairly basic infinite scrolling).
$(window).scroll(function(){
if($(window).scrollTop()==$(document).height()-$(window).height()){
Ajax call here that appends the comments on success.
The offset get incremented every time.
}
})
My question is how to handle a new comment? When someone sends a new comment another Ajax call fires, the comment gets inserted in the database, etc.
Now if no comments are loaded and the users scrolls, his comment will be displayed first or among the first since they are Ordered by ID or DATE DESC.
But if there are comments already loaded how do make his comment appear first, so the user can see his comment, do i make another Ajax call after the user comments that loads only that comment? Do i reload all the comments again? Do i need to to something different from PHP, or is this not a good way to go about something like this?
You can effectively trigger a new ajax call after the comment submission /save and reload only the latest(s) one, displaying them with .prepend() at the beginning of the comments list. (I assumed that you use jQuery because of $. but let me know if I'm wrong :) ).
To show that new comments are displayed at the beginning, an highlight effect could be nice to make the list modification noticeable.
I would not recommend to load all comments after submission, it would make no sense if you already have them displayed. Let's avoid to download useless data (useless for you already have them). :)
I have a requirement where clicking on an icon should open a new window where the user will be able to view and edit certain fields. After the user closes this window and comes back to parent window, the icon color and text should be changed( for eg:- if the user has removed certain data, the icon will change to red color and text is set to null. If the user presses cancel button, nothing changes)
I am planning to implement this using a body onload function which essentially checks with the database using AJAX requests to see if the user has changed the data, then accordingly change the icon and text.
But, I see 2 problems in this approach
1. There will be a AJAX call even if the user has not changed anything.(ie. pressed Cancel button)
2. AJAX is called every time the body is on focus. Eg:- He may be working on some other page (or a different browser altogether) and comes back to this, resulting in an AJAX call.
Can anybody suggest a better approach.
I am using Javacript, JSP, Java
Two ways to implement this
Method 1
You know the methods which changes the database in the opened form. Suppose you have a delete method, write an additional window.opener.location.reload() after the method. The downside is that opener(parent window) gets reloaded every time you change something in the child window. Which is unnecessary.
Method 2 - Using cookies
I am using MDN's A little framework: a complete cookies reader/writer with full unicode support for creating cookies. The plan of action will be this. Create a cookie and set a value for it like this after you change anything in the child window and update it in the database like this docCookies.setItem("isChildFormUpdated", "yes");. You can use the same cookie for every action you do. Now when you navigate back to the parent form, do this.
$(document).ready() {
$(window).focus(function () {
var formCookie = docCookies.getItem("isChildFormUpdated");
if (formCookie !== null && formCookie == "yes") {
//resetting the cookie. you can also remove the cookie
docCookies.setItem("isChildFormUpdated", "no");
//docCookies.removeItem("isChildFormUpdated");
// your ajax call comes here
//or you could simply reload the form so that we get fresh data
//window.location.reload(); // it will be heavier
}
});
});
I hope you get the basic idea.
I think the easiest way to do this would be to set a cookie (learn how here). You can then have the two windows communicate between each other. This wouldn't be AJAX, but it will most likely work.
Another nice way to create a popup-like box is by using a modal box. These can be complicated but they look very nice. You have to make a jQuery plugin in, but you can take the one here and learn how it works. Good luck with your requirement.
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.
I've seen good posts here of bits and pieces of what I am attempting to do, but nothing with all areas addressed. Does anybody have any code examples or advice to help me do what I am trying to do?
First, I will build my MVC view with an array of data such as (org name, id, status) where status is a boolean value, either selected or unselected. However, rather than showing a mere checkbox, I'd like to display a particular showing either a green (selected) or red (not selected) button based on the state of the database value. CSS is not an issue.
Then, if and when a user clicks the button, I would like to change the div value from red to green (or vice versa), but also update the boolean value in the database field via an AJAX call. It would be preferable to leverage JQuery where possible.
Finally, I need to know how to do this all using CodeIgniter. I am well versed in CI but a Javascript/JQuery newbie - deer in the headlights at this point. Can anyone point me in the right direction or suggest a web site with some sample code close to what I am trying to do or a good resource other than the obvious? Thank you kindly.
OK, so CodeIgniter is a PHP framework - which means it works server-side. (I know, there's an ajax library in there, but I don't use that.) We have to understand the difference between server-side and client-side. Your javascript is client-side. I usually develop everything without javascript to begin with in codeigniter, then go back and add the javascript bits. This helps me to ensure that the system works for those that don't have javascript turned on, or can't execute javascript for whatever reason. (BTW, this is called progressive enhancement).
So, first, let's take care of the non-javascript version:
You just need to give your red/green button a url when clicked that points to the controller method that will update the database record and redirect you back to the page that you were previously on (which has the red/green buttons).
/controller/method.html is our controller method that will save to the database and redirect back to this page. -->
Check
Now, let's take care of the js version:
in your view, you just need to hijack the click, send the ajax request, and change the red/green button based on the result from the controller method. So, what we do is keep the link from redirecting the page to the href attribute (e.prevendDefault()). Then, we get the value of the href and make an ajax call to that controller method. The method will determine if this is an ajax request and save to the database, then echo back a "success" message. On success, we can update the visual component on the client side.
$('.my-button').live('click', function(e) {
e.preventDefault();
$.ajax({
// $(this).attr('href') gets the value of the links href attribute
// which is "/controller/method.html" in this case
url: $(this).attr('href'),
success: function(data) {
// update your button with whatever html to write the new button
$('.my-button').replaceWith('Check');
}
});
});
Your controller method just checks if it is an ajax request or not. If so, just returns success, if not redirects the page.
function my_controller_method()
{
if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) &&
$_SERVER['HTTP_X_REQUESTED_WITH']=="XMLHttpRequest") {
// update your database
echo "success";
}else{
// redirect back to page
redirect($_SERVER[‘HTTP_REFERER’]);
}
}
What you want is sort of a thumbs up / like thingy...there's a demo included in the link http://www.geertdedeckere.be/lab/themeforest/thumbsup/demo/
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/