Develop Reference

Loading a page in div using jquery and ajax

I am trying to open content into a div on click, I can't figure out where I am going wrong any help is much appriciate. Thank you
Html:
<li><a id="hrefid" href="#link">Link</a></li>
<div id="content"> </div>
Jquery:
$('#hrefid').on('click', function (e) {
var load = $(e.target).attr("href");
if(load == "#link") {
$.ajax({
type: 'post',
url: "/page/test/272.html",
complete: function (event) {
$("#content").contents().remove();
$("#content").append(event.responseText);
}
});
}
});

Your intended operation is a GET operation as far as i understand, so instead of type: 'post' make it type: 'get'

jquery load will be much better option, try the following code
$('#hrefid').on('click', function (e) {
var load = $(e.target).attr("href");
if(load == "#link") {
$( "#content" ).load( "/page/test/272.html", function() {
//anything after load is complete
});
}
});

How do i prevent my .done handler from being called multiple times?

I have this JQuery expression where i push a button, get some HTML from the server and then append it to a DOM node in my document:
<script type="text/javascript">
$(document).ready(function () {
$(".addbutton").click(function () {
var addbuttonNode = $(this);
$.post("/InteractiveApplications/GetQuizAnswer", { id: '#guid' })
.done(function (data) {
$(addbuttonNode).next().next().append(data); //find better way of doing this
});
});
});
</script>
I have multiple ".addButton" buttons on my web site. The problem im experiencing is that after multiple clicks on the buttons my .done handler is being called multiple times.
My guess is that i have a list of event handlers that are being executed, I cant understand where / why this is done or how I prevent it from happening.

The problem is not taht you do the request is done more then once rathern then it calls done after its done.. you can keep the state in data object::
$(document).ready(function () {
var posting = false;
$(".addbutton").data("done", false).click(function () {
var addbuttonNode = $(this);
if (!addbuttonNode.data("done")) {
addbuttonNode.data("done", true);
$.post("/InteractiveApplications/GetQuizAnswer", { id: '#guid' })
.done(function (data) {
$(addbuttonNode).next().next().append(data);
});
}
});
});

I would do the following:
$(".addbutton").click(function () {
var addbuttonNode = $(this);
addbuttonNode.attr('disabled',true);
$.post("/InteractiveApplications/GetQuizAnswer", { id: '#guid' })
.done(function (data) {
$(addbuttonNode).next().next().append(data); //find better way of doing this
addbuttonNode.attr('disabled',false);
});
});

You could check it for any request pending:
$(document).ready(function () {
$(".addbutton").click(function () {
// if any request pending, return {undefined}
if ($.active) return;
var addbuttonNode = $(this);
$.post("/InteractiveApplications/GetQuizAnswer", {
id: '#guid'
}).done(function (data) {
// instead of .next().next()
$(addbuttonNode).nextAll('selector').first().append(data); //find better way of doing this
// or .parent().find('selector')
});
});
});
If you wish instead each button to be clickable only once, then use jQuery .one() method:
$(document).ready(function () {
$(".addbutton").one('click', function () {
var addbuttonNode = $(this);
$.post("/InteractiveApplications/GetQuizAnswer", {
id: '#guid'
}).done(function (data) {
// instead of .next().next()
$(addbuttonNode).nextAll('selector').first().append(data); //find better way of doing this
// or .parent().find('selector')
});
});
});

Try to use bind, and unbind functions for the event handling. Then You can unbind the click function after it was executed once.
<script type="text/javascript">
$(document).ready(function () {
$(".addbutton").bind('click',function () {
var addbuttonNode = $(this);
$.post("/InteractiveApplications/GetQuizAnswer", { id: '#guid' }).done(function (data) {
addbuttonNode.next().next().append(data);
});
addbuttonNode.unbind('click');
});
});
</script>
Another way of doing nearly the same, I think this should be better:
<script type="text/javascript">
$(document).ready(function () {
$(".addbutton").each(function(){
$(this).bind('click',function () {
$.post("/InteractiveApplications/GetQuizAnswer", { id: '#guid' }).done(function (data) {
addbuttonNode.next().next().append(data);
});
$(this).unbind('click');
});
});
});
</script>
I haven't tried it yet, but it should work, try it! :)
You can also set up a class or data attribute to check if the button was already clicked. You can then exit from the script like if($(this).hasClass('clicked')) { return; } or something...

E prevent default not working

This is the code I am working with: http://jsfiddle.net/qKyNL/12/
$('a').click(function(){
event.preventDefault();
var number = $(this).attr('href');
alert(number);
// AJAX
$.ajax({
url: "/ajax_json_echo/",
type: "GET",
dataType: "json",
timeout: 5000,
beforeSend: function () {
// Fadeout the existing content
$('#content').fadeTo(500, 0.5);
},
success: function (data, textStatus) {
// TO DO: Load in new content
// Scroll to top
$('html, body').animate({
scrollTop: '0px'
}, 300);
// TO DO: Change URL
// TO DO: Set number as active class
},
error: function (x, t, m) {
if (t === "timeout") {
alert("Request timeout");
} else {
alert('Request error');
}
},
complete: function () {
// Fade in content
$('#content').fadeTo(500, 1);
}
});
});
I am trying to create a degradable pagination, using Jquery but the problem is that the "e prevent default" doesn't seem to trigger and instead it still follows the link. Could anyone please show me how I can have this link degradable so if Jquery is disabled it still works.

You're not passing in the event object. Try this:
$('a').click(function(event){ // <-- notice 'event' passed to handler
event.preventDefault();

Should be
$('a').click(function(event){
on first line. Note that event is passed as an argument to anonymous function.

No event passing in callback.
Try
$('a').click(function(event){
------------------------------^
event.preventDefault();
}

As the other answers have said you need to pass the event variable to the callback
$('a').click(function(event) {
event.preventDefault();
});
You also need to wrap all of your code in to the ready function jQuery so that the event listeners are assigned only when jQuery is ready to handle them.
$(document).ready(function() {
$('a').click(function(event) {
event.preventDefault();
// the rest of your code
});
});

how to create a pop up in mvc 4?

So, i want to show a pop up when deleting a row from my table, so this is my action link :
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
#Html.ActionLink("Delete", "Delete", new { id=item.cin },new { #class = "delete-logo" ,#pkNo=item.cin})
<div id="confirmDialog" title="Warning"></div>
my script :
<script type="text/javascript">
$(document).ready(function () {
buttonizeALL();
setLinks();
});
function buttonizeALL()
{
$(".delete-logo").button();
}
function setLinks()
{
//delete person
$(document).ready(function () {
$(".delete-logo").live("click", function (e) {
e.preventDefault();
var pkNo = $(this).attr("pkNo");
$("#confirmDialog").dialog({
resizable: false,
height: 200,
width: 300,
modal: true,
buttons: {
"Yes": function () {
$(this).dialog("close");
var rowNo = '#row-' + pkNo;
var url = '/Subscribers/Delete/' + pkNo;
$.ajax({
type: "Delete",
url: url,
data: {},
cache: false,
dataType: "json",
success: function () {
$(rowNo).animate({ opacity: 0.0 }, 400, function () {
$(rowNo).remove();
});
},
error: function (jqXHR, exception) {
alert('Uncaught Error.\n' + jqXHR.responseText);
}
}); //end ajax call
}, // end of yes button
"No": function () {
$(this).dialog("close");
}
} //end buttons
}); //end modal
}); //end delete
});
} //end setLinks
my problem is the pop up doesn't work, and when i used my script without the pop up it works, so please if some one have any idea i will be very appreciated.

Here is your example tidied up a little in a jsFiddle i.e. I've moved the setLinks() code into the document.ready() function.
$(document).ready(function () {
buttonizeALL();
setLinks(); // removed this
});
Also I've replaced the ActionLink with the anchor tag it will render.
This is using Jquery 1.8.3 and jQuery UI 1.9.2. The pop-up seams to work fine.

first off, don't use "live" command anymore. Thats been deprecated in lieu of the "on" command. Also there is no need to use the $(document).ready within the setLinks function. Since its a standalone function (not self executing) its only put into memory until its called when you call it in the doc.ready function.

Call a js function inside of modal window

I'm applying some css3 effects using a function it works fine on body page but my problem is how to call that function inside a modal window? created dynamic by Ajax.
this is the function:
$(document).ready(function() {
if (window.PIE) {
$('.secondary, .primary, .light_gray_sub').click(function() {
PIE.attach(this);
alert("alert XXX");
});
}
});

i think what your saying is u want the styling to be on the elements you retrieved through ajax:
$(document).ready(function() {
if (window.PIE) {
go();
}
});
function go(){
$('.secondary, .primary, .light_gray_sub').click(function() {
PIE.attach(this);
alert("alert XXX");
});
}
$.ajax({
url: 'ajax/test.html',
success: function(data) {
//append the data to the body here
go();
}
});