We Keep Coding

Binding a jquery function to an event

I want to bind a jquery function on a click of a anchor link tag, but do not know how it can be bind, i am using ASP.net MVC with Ajax and want to show data with the help of Ajax. Please give some suggestions to bind the below function on a link click.. Thanks..
$(document).ready(function(){
$("a.ShowTable").click(function(e){
var url=this.href;
$get(url,{},function(data){
$('#dtable').html(data)
)};
e.preventDefault();
});
<ul>
#foreach(var item in Model)
{
<li>#item.Id<li>
}
</ul>

This is your fixed code: {be aware, i'm not your browser's console...}
$(document).ready(function () {
$("a.ShowTable").click(function (e) {
var url = this.href;
$.get(url, {}, function (data) {
$('#dtable').html(data);
});
e.preventDefault();
});
});

first add jQuery file on your script
then write below code
$(document).ready(function(){
$(document).on("click","a.ShowTable,"function(e){
e.preventDefault();
var url=this.href;
$get(url,{},function(data){
$('#dtable').html(data)
});
});
});

you can use bind
$(document).ready(function(){
$( "a.ShowTable" ).bind( "click", function() {
var url=this.href;
$get(url,{},function(data){
$('#dtable').html(data)
});
e.preventDefault();
});
});

$(document).ready(function(){
$("a.ShowTable").click(function(e){
var url=$(this).attr(href);
$.get(url,{},function(data){
$('#dtable').html(data)
)};
e.preventDefault();
});
<ul>
#foreach(var item in Model)
{
<li><a href='#Url.Action("Index","Home",new {id=item.Id})' class='ShowTable'>#item.Id</a><li>
}
</ul>

impress.js - Next and Previous buttons

I've looked at the other questions on this topic, and know that I have to do something like this:
I've created buttons:
<button id="next"></button>
<button id="prev"></button>
And then at the bottom of the page, I have this (this was taken from the other question here):
<script src="js/impress.js"></script>
<script>impress().init();</script>
<script>
$("#next").click(function () {
api.next();
});
$("#prev").click(function () {
api.prev();
});
</script>
But it isn't working at all; can someone give me a hand with this?

it works, if next-prev are in inside impress div
$('#next').on('click', function(e){
impress().next();
e.stopPropagation();
});
$('#prev').on('click', function(e){
impress().prev();
e.stopPropagation();
});

Replace your script this way:
<script>
$("#next").click(function () {
impress().next();
});
$("#prev").click(function () {
impress().prev();
});
</script>

Have you included jQuery? If not, add this too:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

check if class and id exist then change h1 then redirect page after time limit

I am having some problems getting my JS/JQ to fire in HTML5 page.
Basically I would like to check if the following ID exists and the following class:
ID: page_blog
CLASS: page current
<section class="page current" id="page_blog" style="z-index: 99; left: -50px;">
...
...
...
If they exist then redirect after 2-3 seconds changing the H1 to say
Loading...
<h1><button data-target="home" data-target-activation="click" class="back backwards"></button>Loading...</h1>
This is what i have so far:
<script type="text/JavaScript">
$(document).ready(function () {
$('li#blogLink.tile').click(function (e) {
e.preventDefault(); //will stop the link href to call the blog page
setTimeout(function () {
alert("this has worked");
//window.location.href = "http://www.site.co.uk/blog/"; //will redirect to your blog page (an ex: blog.html)
}, 2000); //will call the function after 2 secs.
});
});
</script>
I have the following in my page now:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.7");
</script>
<script type="text/JavaScript">
$(document).ready(function () {
if ($(".page.current").length) { // section exists
$("h1").text("Loading...");
setTimeout(function () {
window.location.href = "http://www.website.co.uk/blog/";
}, 2000);
});
</script>
But the check to see if the class/id exists isnt firing?

Try this:
$('li#blogLink.tile').click(function (e) {
e.preventDefault();
if ($("#page_blog.page.current").length) { // section exists
$("h1").text("Loading...");
setTimeout(function() {
window.location.href = "http://www.site.co.uk/blog/";
}, 2000);
}
});
Example fiddle
Also it's worth mentioning that your selectors are overkill. There should only ever be 1 unique element with the id #page_blog and #blogLink, so including the tag and classes on the selectors for them is redundant code.

Ajax replacing entire page, not just the div

I have a page with an Ajax call that is supposed to replace a content div. When the link is clicked, though, the entire page is replaced with the content div, instead of it just replacing the text it was supposed to. Any thoughts?
$(document).ready(function () {
$('#gnav a').click(function () {
var page = this.hash.substr(1);
$('#contents').html("");
$('#content_wrapper').block();
$.get(page +'.php', function(gotHtml){
$('#contents').html(gotHtml);
$('#content_wrapper').unblock();
});
return false;
});
});
HTML
<div id="contents" style="height:1200px; width: 620px">
<!-- all html here that should be replaced-->
</div>

Why don't you just use $.load()?
$(function () {
$('#gnav a').click(function (e) {
e.preventDefault();
$('#contents').load(this.hash.substr(1) +'.php')
});
});

Toggle div question

Im trying to toggle some divs and its not working, here is the js:
<script type="text/javascript">
$(function(){
$('#toggle_full').click(function(){
$('#full_size').removeClass('toggle');
$('#thumb_list').addClass('toggle');
});
});
$(function(){
$('#toggle_thumb').click(function(){
$('#thumb_list').removeClass('toggle');
$('#full_size').addClass('toggle');
});
});
</script>
Here are the anchors:
<div class="toggle_block">
<img src="img/full_icon.jpg" alt="#"/>
<img src="img/thumbs_icon.jpg" alt="#"/>
</div>
Here is the class:
.toggle {
display: none;
}
Now where is the problem?

Your ID's don't match.
In your HTML you have toggle_thumbs, but in your code you have toggle_thumb.
If all you're doing is hiding and showing, you can greatly simplify your code like this:
http://jsfiddle.net/xTPU8/2/
$(function() {
var $elems = $('#toggle_full').hide()
.add('#toggle_thumb').click(function() {
$elems.toggle();
});
});​
EDIT: Made it even a little more efficient.

Add a return false; in your .click() delegate to prevent the browser from navigating to '#' (jumps to top of page).
You can also simplify your JS but putting both of your link bindings in the same, and using hide() and show() as already suggested. The end result would be:
<script type="text/javascript">
$(function() {
$('#toggle_full').click(function() {
$('#full_size').show();
$('#thumb_list').hide();
return false;
});
$('#toggle_thumb').click(function() {
$('#thumb_list').show();
$('#full_size').hide();
return false;
});
});
</script>