So here is my button:
<div id="calculateButton" style="cursor: pointer;">
<img src="<%= VirtualPathUtility.ToAbsolute("~/img/chic/btn_calculate.gif")%>" />
</div>
And here is the javascript:
$('#calculateButton').click(function () {
alert('Calculating...');
});
When I click the button nothing happens. What am I doing wrong?
Edits:
$(document).ready(function () {
$("#prepaymentTable").bubble({ width: 400, title: 'Prepayment' });
$("#exposureTable").bubble({ width: 400, title: 'Exposure' });
$('#calculateButton').click(function () {
alert('Calculating...');
});
});
The bubble plugins both work...but not the button click...
Make sure you're attaching the click handler inside a document.ready handler, after the element has loaded, like this:
$(function() {
$('#calculateButton').click(function () {
alert('Calculating...');
});
});
If it's created later as the result of AJAX, etc, use .live(), for example:
$('#calculateButton').live('click', function () {
Related
I'm trying to change the content of the menu whenever the user clicks a button. The CSS loads fine initially, but once i press the button to initiate the ajax call, the menu bar returns, but none of the CSS is applied. All of the code is in an MVC 4 partial view.
Here's my JS
$(document).ready(function () {
$("#menu").wijmenu({
orientation: 'vertical'
});
$("#TDButtons a").click(function () {
var href = $(this).attr("href");
$('#menuAjax').fadeOut('slow', LoadAjaxContent(href));
return false;
});
function LoadAjaxContent(href) {
$.ajax(
{
url: href,
success: function (data) {
$("#menuAjax").html(data).fadeIn('slow');
}
});
}
});
Here's the nav tag
<nav id="menuAjax">
<ul id="menu">
<li>Breaking News
<ul>
...
Here's the HTML for the buttons to initiate the AJAX
<div class="navDiv">
<div id="TDButtons">
<a href="#Url.Action("_menu", "Home", new { TakeoutDelivery = "TakeOut" }, null)">
<img class="headerLogo" src="../../Content/Images/TakeoutButton.jpg" alt="Take Out" /></a>
<a href="#Url.Action("_menu", "Home", new { TakeoutDelivery = "Delivery" }, null)">
<img class="headerLogo" src="../../Content/Images/DeliveryButton.jpg" alt="Delivery" /></a>
</div>
Please let me know if you need anything else.
Put this on the page.
function pageLoad(sender, args) {
$('#OutsideDiv').trigger('create');
}
This will re attach the css on page load. The problem I presume is that it is only a partial post and hence you are lossing the style sheets. I had a very similar problem with my mobile site in jquery-mobile when making partial postback calls. This fixed it re partial postbacks.....
Note: there is a very small delay for it to render... Not sure if this will be a problem for you....
Hope it helps
Cheers
Robin
I needed to add
$("#menu").wijmenu({
orientation: 'vertical'
});
into the LoadAjaxContent function.
function LoadAjaxContent(href) {
$.ajax({
url: href,
success: function(data) {
$("#menuAjax").html(data).fadeIn('slow');
$("#menu").wijmenu({
orientation: 'vertical'
});
}
});
}
i have an html page in which i sue TinyMCE editor in iframe and i have a button which is out side the iframe. my problem is taht iwant to get the value of editor on button click but when i click the button i found nothing please help here is my code
Iframe Code:
<iframe id="EditorFrame" src="UploadTemplates.aspx" frameborder="0" style="height: 900px;
width: 1000px" scrolling="auto"></iframe>
UploadTemplates.aspx Code:
<div>
<p>
<textarea id="TemplateEditor" cols="50" rows="50" runat="server">
</textarea>
</p>
</div>
Jquery Code:
$(function () {
uploader = $("#TempateFileUploader");
tinyMCE.init({
// General options
mode: "textareas",
theme: "advanced",
plugins: "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: false,
width: "800",
height: "640"
// setup: function (ed) {
// ed.onClick.add(function (ed, e) {
// alert('Editor was clicked: ' + e.target.nodeName);
// });
// }
});
$("#Button1").click(function () {
alert(tinymce().get("TemplateEditor").getCOntent());
});
});
on the click of Button1 hsing Jquery i found nothing of TinyMCE althoug i found the object of tinyMCE but not able to get value please help how can i get the value of timyMCE out side the iframe on button click using jquery
The solution to your problem might be to use getContent() instead of getCOntent() .
Using getCOntent() you should get javascript errors!!
I'm using the following JQuery block in my DotNetNuke module:
jquery(document).ready(function (){
$( "#dialog:ui-dialog").dialog("destroy");
$( "#dialog-message").dialog({
modal: true,
buttons: {
Ok: function(){
$( this ).dialog("close");
}
}
});
});
</script>
<div id="dialog-message" title="Registration Confirmed">
I'm not sure how to redirect the user to the home page when they click the Ok button? Also, how do I wire up the dialog-message DIV to only fire when my ASP:Button is clicked?
Thanks much!!
You can put an OnClientClick on your Button and call a function that will show your modal. When the ok button is clicked you can change the window.location to the path of your homepage.
HTML
<asp:Button runat="server" ID="btn_ShowModal" OnClientClick="showModal(); return false;" />
Javascript
function showModal()
{
$( "#dialog-message").dialog({
modal: true,
buttons: {
Ok: function(){
$( this ).dialog("close");
window.location = "pathToHomepage";
}
}
});
}
Edit
There are two types of paths that can be used in javascript and in web development in general: relative paths and absolute paths.
Relative paths: start from the current directory and you access the desired location from there using '/' to go forward a directory and '../' to go backward
Absolute paths: the full url to the desired location
You can find a more thorough description here
'~/' is a sever side "shortcut" that unfortunately does not work on the client side without using something like this.ResolveClientUrl.
'<%= this.ResolveClientUrl("~/default.aspx") %>'
<script type="text/javascript">
function ShowPopup(message) {
$(function () {
$("#dialog").html(message);
$("#dialog").dialog({
title: "Alert",
buttons: {
Close: function () {
$(this).dialog('close');
window.location = "home.aspx";
}
},
modal: true
});
});
};
</script>
client side
string message = "Profile Updated!!.";
ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup('" + message + "');", true);
I have a server side method that can take long time. I decided to display a loading process modal and for that I used this tutorial. It works fine, but my problem is the following.
I'm using jQuery UI/Tab on the same page and it contains two tabs. On postback all UI loses styles. As I understood, the problem is in UpdatePanel, and the solutions suggested is to use the function pageLoad(). But it solved my problem partially, because the last selected tab is not persisted on postback.
It worked fine before implementing the loading model process and I used the following :
$(function() {
$("#tabs").tabs({
show: function() {
var sel = $('#tabs').tabs('option', 'selected');
$("#<%= hidLastTab.ClientID %>").val(sel);
$( "#tabs" ).tabs( "option", "disabled", [<%= hidDisTab.Value %>] );
},
selected: <%= hidLastTab.Value %>
});
});
Is there any solution for this?
I have a similar problem and I sorted out using the following:
$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(load_lazyload);
load_lazyload();
}
function load_lazyload() {
//here you need to add the jquery functions related to the tabs, as well as other jquery code you may have
//i.e.
$(function () {
$(".datepicker").datepicker({ dateFormat: 'dd/mm/yy' });
});
}
Hope this helps,
UPDATE: Probably, for your specific case, it would be something like this:
$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(load_lazyload);
load_lazyload();
}
function load_lazyload() {
$(function() {
$("#tabs").tabs({
show: function() {
var sel = $('#tabs').tabs('option', 'selected');
$("#<%= hidLastTab.ClientID %>").val(sel);
$( "#tabs" ).tabs( "option", "disabled", [<%= hidDisTab.Value %>] );
},
selected: <%= hidLastTab.Value %>
});
});
}
You need to register a ClientSideScript that selects the current tab in whatever event/method that is being executed during the postback.
Simplemodal works perfectly but I dont know how to automatically close the Iframe after the form is submitted.
I have tried to get the event outside the modal options using js, but
if I close the modal window on the submit event, then the form is not submitted...
I have also added the class simplemodal-close to the input button, but it doest work in the form??
Any suggestions??
Here is my code
//Modal Window
modal.click(function(e){
e.preventDefault();
$.modal('<iframe src="' + this.href + '" height="480" width="525" style="border:0" >',{
containerCss:{
backgroundColor:"#fff"
},
overlayClose:true,
onShow: function (dialog) {
$("input",dialog.data).click(function (e) {
e.preventDefault();
alert('Here'); //Doesnt execute
$.modal.close();
parent.$.modal.close();
alert('Here');
});
}
});
Ok, I just did it.. I didnt use iframe because after parent.$.modal.close().. The js included in that iframe didnt execute anymore..
So I just did it this way..
//Modal Window
modal.click(function(e){
e.preventDefault();
$.get(this.href,function(data){
var resp = $('<div></div>').append(data); // wrap response
$(resp).modal({
overlayClose:true,
minHeight:450,
minWidth: 500,
containerCss:{
backgroundColor:"#fff",
borderColor:"#fff"
},
onShow: function(dialog){
autocomplete();
}
});
});
});
If I use a div instead that an iframe,, when I submit, the modal closes otherwise it stays open....
It was easy, but I got confused..