I am having this application where I need to have something like, when we bring the mouse over an employee's name, which is an actionlink , it is suppose to show the employee's image.
I am trying to do so using MVC, but am till far unable to do so.
Please can anyone help me out in this..
Thanks in advance for help.
This is a JavaScript thing, not an ASP.NET MVC thing. You'll take one of two approaches:
Put the image on page at load, but give it a class or otherwise style it to be hidden initially. Then you'll just need to add an JS event handler for the mouseover event of your links that will cause the image to display.
Again, you'll use a JS event handler tied to the mouseover event of your links, but you send an AJAX request for the image URL and then dynamically insert the image into the page based on the response. This is kind of overkill for something this simple though.
#1 is really the best way to go for this use case, and there's probably around 10 million articles, blog posts, tutorials, etc. online regarding hiding and showing content based on a JS event. Google your heart out.
Related
I wanted to know if it's possible to get elements of the same class across different HTML files, to be displayed on the click of a button or link, in the current web page.
I'm actually looking at something similar to a filter. Just that the images are across different web pages and each of them belong to a particular category(which i used as their class names). So, i want to be able to view the elements of the same category(class names) in the current webpage, on clicking the link. I need some ideas and solutions. Already have a logic as to what to do, but not sure if it'll implement correctly. Would like some help. Thanks
You can use ajax to get the html of another page, and then .find('.classname') to find the class you're looking for.
$.get( "yoururl.html", function( data ) {
$(data).find('.className').html();
});
The data that gets returned is the html of the url entered. From there just traverse the html to find the node you're looking for and do what you need to with it.
https://api.jquery.com/jquery.get/
Some of you must recognize me from other posts I posted yesterday regarding issues I was having writing a calendar from scratch. Well, I have desisted, I think it is too difficult for my level as even with lots of resources I couldn't understand what was going on. So I've decided to grab a calendar already done, and add the functionality I need for my project.
It needs to be an event calendar, where the user clicks in a day ( from a table) and it opens that day and allows the user to write stuff, and when it click save, it will change the background color of that cell day.
Can anyone give me a hint about how to do it? Not the solution, but a guide to start! At the moment the only way I think is adding onclick function, but I don't think it's the best as I would need to add this function in every single !!
Maybe I am completely wrong and it is not even possible... any clue will be appreciate it!
Thank you!
This all depends if you save call is using ajax, or a form post.
If its ajax you could have an id and class attribute for each calendar entry eg.
<div id="2015-october-14" class="clickable" />
Then you search in your javascript code using jquery for clickable class:
$("#clickable").onclick(function() {
//here you find the element id defined above
//and pass that id into the popup/modal thing you want
});
This means you only define onclick event once. If the content is dynamic you could start the search at the document: $(document).on("click", "#clickable", function() {});
For instance a modal could then show once clicked on a calendar entry and you can write and submit it. You then add a function to call ajax with the message and the html element id added in the example above.
In the $.ajax function onComplete you can then search for the id of the html element eg "2015-october-11" and do whatever you need to do with it.
If its a form post then you will have to just update it from server side to include the entries.
I hope this helps.
I'm wondering if doing this along in JQuery would be stable enough? or if it would need to be done in ruby/rails first?
Either way I don't want a butt load of messages being loaded when a user enters the page where they're displayed. What I want is limit results to a specific amount then either have the page load more results when a user scrolls down or have them click a "load more" button similar to how it's done on both facebook and googleplus.
Currently I have comments scrolling down my page for miles and would like to use jQuery to take control of this. I'm guessing since each comment is stored in a div / class I could use this as a way of recognising what a comment is.
Anyway trying to figure out the best way to approach this I'd really appreciate some advice and maybe links to some good tutorials on how to pull this off.
I agree with the Ohgodwhy's comment - use will_paginate in Rails.
However, I'd also look at how to do scroll-down pagination, rather than page number links, depending on your design. I like Ryan Bates's screencast on this topic: http://railscasts.com/episodes/174-pagination-with-ajax
He also has a video for doing it without will_paginate: http://railscasts.com/episodes/114-endless-page (the newer, revised version of this requires a subscription).
There will be a list of "plans" that the user has, and I want to be able to click on any of them (separated by divs) and have its information dynamically loaded from the database.
My question is whether I should use a jQuery tab interface and load the content that way, or a button which triggers an ajax call? Is there any easier/prettier way to do this that I'm not thinking of?
Thank you for any help, it is much appreciated!
There are many existing solutions online . You can roll your own too . Here are some samples which has many with AJAX content loading . You can either use existing or change then as you need.
http://flowplayer.org/tools/demos/tabs/ajax.html . You can change .html to your own php,asp ,jsp what ever pages and pass plan id and page can return HTML .
http://webdesignledger.com/tutorials/11-useful-jquery-tab-navigation-solutions
http://www.hongkiat.com/blog/50-nice-clean-css-tab-based-navigation-scripts/
http://justintadlock.com/archives/2007/11/07/how-to-create-tabs-using-jquery
I used the jquery-jvert-tabs plugin for something very similar. Each tab had its content dynamically loaded and the whole div was called via ajax, it worked pretty well together.
Talking about which one is prettier, it doesn't matter whichever you choose if you just make sure is cohesive with your overall design :)
I would use tabs- no need to have a separate button if the plan name can be the tab name.
Design should almost always focus on usability and it seems like this approach would serve that goal well.
If your list of plans; however, is dynamic or can grow overtime then I would go with a dropdown populated with the list and a button that gets the details or wire up on onchange event and get the data.
The question is a bit vague so maybe if you provided more information we could better help you here.
I am attempting to have a link load an article from my domain in to an iframe. I understand that it is usually easy to link using:
Google
But when it comes to Iframes I am having difficulty formatting the code correctly so that it will display inside the iframe.
This leads in to my next question. If this is easily remedied then is it possible to also execute code that will fill in the URL of an anchor in the same mouse click.
Finally, in that same mouseclick would you be able to execute code similar to:
$('#abc').click(function() {
$('#xyz').load('content.html');
});
In order to populate a sidebar with information from a second link?
Thank you for taking the time to read over this. I am sorry if it is truly elementary, but this is my first bona fide webpage, and my limited knowledge is really delaying the execution of my ideas.
Special thanks to wdm for allowing me to progress to this stage of questioning by answering my earlier concerns.
To target your iframe, change to:
Google
for the 2nd part, the above thing can be reused instead of using jQuery.