When I tried to refresh my controller view my page reload itself inside of the page with this code
$(function () {
$.ajaxSetup({ cache: false });
setInterval(function () {
$('#deneme').load('/veri/index/'); }, 500);
});
How can I solve this situation I attached as png ...
Related
i m using asp.net forms this page i m working on has a masterpage it works great when autoopen is false but when autofalse is true i dont know why it doesnt work. code is ..
$(document).ready(function () {
$("#dialog").dialog({
autoOpen: false,
appendTo: "form",
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
buttons: {
Ok: function () {
$("[id*=btnmsgOk]").click();
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
and i call this function by this..
$('<%=btnSave.ClientID %>').click(function () {
$("#dialog").dialog("open");
});
but it dosent work.
I have tried following, it is working fine. Please note that , you have missed to put # in jquery selector. It should be $('#<%=btnSave.ClientID %>').click...
$(document).ready(function() {
$("#dialog").dialog({
autoOpen: false,
appendTo: "form",
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
buttons: {
Ok: function() {
$("[id*=btnmsgOk]").click();
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
});
$("#clicktoopen").click(function() {
$('#dialog').dialog('open');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/humanity/jquery-ui.css" type="text/css" />
<div id="dialog">DIV</div>
<button id="btnmsgOk" value="btn" style="display:none">Ok</button>
<button id="clicktoopen" value="click">Click</button>
Important thing you should know while using Jquery is PostBack property
When postback occurse JQuery code will get its original values..
So you should prevent postback to see the functionality of it..
e.preventDefaults();
i used animations which delays forms to be visible so i wasnt able to see dialog but i fixed it myself. thanks for everybody who responded to it.
I'm trying open a view in popup (dialog) after a click on a link, i don't find the problem:
Here is my JS code in my view:
<script type="text/javascript">
$.ajaxSetup({ cache: false });
$(document).ready(function () {
$(".openDialog").on("click", "a", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this).attr("data-dialog-id"))
.appendTo("body")
.dialog({
title: $(this).attr("data-dialog-title"),
close: function () {
$(this).remove();},
modal: true,
height: 500,
width: 700
})
.load(this.href);
});
$(".close").on("click", "a", function (e) {
e.preventDefault();
$(this).closest(".dialog").dialog("close");
});
});
</script>
And here is my link in the same view:
#Html.ActionLink("Exports",
"List",
new { id = Model.Orga_Id },
new {
#class = "openDialog",
data_dialog_id="exportDialog",
data_dialog_title="Tous les exports"
})
All the code is of this view and the code of the view i'd like to show in the dialog is in the same Controller.
When i click on the link, my nav only change the page like a <a href="#"..></a>
Can you see what is wrong here? Do you need more information?
I believe your problem is your click handler.
$(".openDialog").on("click", "a", function (e) {
Your ActionLink is an A tag. The javascript you are using adds a click to an anchor tag that is a child of the object with the .openDialog class. But the anchor is the object with the .openDialog class, e.g. has no child anchor to attach a click handler to.
Try just
$(".openDialog").on("click", function (e) {
Refer to JQuery Documention for .on() for more detailed examples,
http://api.jquery.com/on/
Change your code as like below,
$(".openDialog").on("click", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this).attr("data-dialog-id"))
.appendTo("body")
.dialog({
title: $(this).attr("data-dialog-title"),
close: function () {
$(this).remove();},
modal: true,
height: 500,
width: 700
})
.load(this.href);
});
Perhaps trying the .live method instead of the .on
something like
('.openDialog').live('click', function (e) {
This solved a similar issue I was having recently, granted I am relatively new to JS/jQuery
I am using a colorbox plugin with iframe. The iframe source is another HTML page which has a image courosal. Where i need to write a click event to get the id of the clicked image.
The ordinary click event on the HTML page in document ready is not working, i tried with live as well. Also i tried having a click event inside the colorbox onload function and failed.
Its an Web application with asp.net 4.0.
Please help me out on this to write a click event.
The Script where i am calling the colorbox
$(".iframe").colorbox({ iframe: true, width: "70%", height: "80%" });
$(".iframe").colorbox({
onLoad: function () {
alert('onLoad: colorbox has started to load the targeted content');
$('ul#boutiquegallery img').on('click', function () {
alert('clciked img');
});
},
onComplete: function () {
alert('onComplete: colorbox has displayed the loaded content');
},
//onClosed: function () { alert('onClosed: colorbox has completely closed'); }
});
The script that i have tried in My HTML
(function ($) {
$('#boutique').boutique();
//$("iframe.cboxIframe").contents().find($('ul#boutique img').live('click', function () {
// var id = $(this).attr('id');
// alert(id);
//}));
//$("iframe.cboxIframe").load(function () {
// alert('hi');
// // write your code here
// $('a').click(function () {
// alert('clciked');
// });
// $('img').live('click', function () {
// alert('clciked img');
// });
//});
})(jQuery);
$(document).ready(function () {
//$('img').on('click', function () {
// alert('clciked img');
//});
//$('iframe.cboxIframe').load(function () {
// $('iframe.cboxIframe').contents().find('img').live({
// click: function () {
// alert('clicked img');
// }
// });
//});
});
Try this extra step:
var iFrameDoc = $(".iframe").contentDocument || $(".iframe").contentWindow.document;
iFrameDoc.colorbox({
// rest of the code is the same as yours after here
onLoad: function () {
alert('onLoad: colorbox has started to load the targeted content');
$('ul#boutiquegallery img').on('click', function () {
alert('clciked img');
});
},
onComplete: function () {
alert('onComplete: colorbox has displayed the loaded content');
},
//onClosed: function () { alert('onClosed: colorbox has completely closed'); }
});
iframes can be tricky when trying to access DOM objects :)
The below code inside my HTML page has done the trick.
$(document).on('click', 'img', function () {
alert('hi dsad');
alert($(this).attr('src'));
});
Hi I have following code that selects or de selects check boxes in a gridview which works fine.
$(document).ready(function () {
$("#<%=GridView3.ClientID%> input[id*='chkAll']").click(function () {
if ($(this).is(':checked'))
$("#<%=GridView3.ClientID%> input[id*='chkEmployee']").attr('checked', this.checked);
else
$("#<%=GridView3.ClientID%> input[id*='chkEmployee']").attr('checked', false);
});
});
My next step is to use .each class and iterate through each check box and display alert message.
$(document).ready(function () {
$('#mainForm').click(function () {
$("<%=GridView3.ClientID%> input[id*='chkAll']:checked").each(function () {
alert("checked box");
});
});
The above code does not work. Any suggestions how to fix it? Thanks
The second bit of code the selector is missing the #
$(document).ready(function () {
$('#mainForm').click(function () {
$("#<%=GridView3.ClientID%> input[id*='chkAll']:checked").each(function () {
alert("checked box");
});
});
Good morning.
I have a modal JQuery dialog that on Open calls and loads a Partial View. Good example can be seen here https://stackoverflow.com/a/4802423/1193841 but I'll re-paste:
<script type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: 'hi there',
modal: true,
open: function(event, ui) {
//Load the CreateAlbumPartial action which will return
// the partial view _CreateAlbumPartial
$(this).load("#Url.Action("CreateAlbumPartial")");
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#my-button').click(function () {
$('#dialog').dialog('open');
});
});
In my case ActionMethod "CreateAlbumPartial" takes an ID parameter that's passed from another page with onclick="" event.
How can I make that Id available to pass to an ActionMethod when its called as shown above ? Something like
$('#dialog').dialog('open',Id)
Would be awesome but I dont think that's how it works.
P.S. Right now I'm displaying my popup by doing $.post() to load .html(data) to div and then displaying that DIV in a .show().dialog('open').
However, instead of having my Action method call and Dialog related stuff separately I would really like to re-do it the way I'm asking to keep all logic in one place.
Thank you in advance.
Why dont you make a hidden control and assign the value to that and use it in the dialog