Jquery Dialog calling - javascript

When i click on button to show the message i get one MessageBox that's normal but when i call the Jquery Dialog for second time i get two MessageBoxs! and when i call Jquery Dialog for third time i get three MessageBoxs!
Please help me!
Here is my Code:
$("[id*=Call_Dialog]").live("click", function () {
$("#MyDiv").dialog({
title: "jQuery Dialog Popup",
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
$("#ShowMessage").live("click", function () {
event.preventDefault();
alert('Hi');
$("#MyDiv").dialog('close');
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="MyDiv" style="display: none">
This is a simple popup
<asp:Button ID="ShowMessage" runat="server" Text="Button" />
</div>
</form>
<p>
<input id="Call_Dialog" type="button" value="button" /></p>
</body>
</html>

Include your scripts at the end of the body for better performance
Use "bind" instead of "live" if your elements are not dynamic.
If your elements are dynamic use "on" instead of "live".

http://jsfiddle.net/MX9Dk/
Made some amends and its working fine for me.
<form id="form1" runat="server">
<div id="MyDiv" style="display: none">
This is a simple popup
<asp:Button ID="ShowMessage" runat="server" Text="Button" />
</div>
</form>
<p>
<input id="call-dialog" type="button" value="button" />
</p>
$(document).ready(function() {
$("#call-dialog").click(function () {
$("#MyDiv").dialog({
title: "jQuery Dialog Popup",
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
});
$("#ShowMessage").live("click", function () {
event.preventDefault();
alert('Hi');
$("#MyDiv").dialog('close');
});
});

Related

Button with specific ID won't fire alert();

I have a problem with jQuery I am trying to use inside my container. I really can't say what is wrong but for some reason when I click on Button1 nothing is alerted. When I click on other buttons it is. Because the code is same for all of them I wonder why it is not working.
Javascript
$(document).ready(function() {
$("#Button2").click(function () {
alert("hi");
});
$("#Button1").click(function () {
alert("hello");
});
$("#<%=Button3.ClientID%>").click(function() {
alert("sometext");
});
});
HTML
<input id="Button2" type="button" value="button" />
<input id="Button1" type="button" value="BU" />
When I change its ID and selector from "Button1" to "Button21" it works... What did I do wrong?
//No errors in console.

Javascript hide after click

I use this code to show a form after a link is clicked:
$(function () {
$('.msg').on('click', function (e) {
e.preventDefault();
$(this).next('.msgarea').show();
});
});
Reply
<form class="msgarea">
<input />
<input type="submit" />
</form>
.msgarea{ display:none; }
Now I need the link "msg" to disappear, what would the code look like? I'm totally new in js
UPDATE:
<script language="javascript" type="text/javascript">
$('.msg').on('click', function (e) {
e.preventDefault();
$(this).next('.msgarea').show();
$(this).hide();
});
</script>
Reply
<form class="msgarea">
<input />
<input type="submit" />
</form>
.msgarea{ display:none; }
What is the problem in saying hide like after show the form like bellow
$('.msg').on('click', function (e) {
e.preventDefault();
$(this).next('.msgarea').show();
$(this).hide();
});
DEMO

Why button doesnt fire javascript function

I have no idea why the button click function is not firing in Javascript, am I missing something? I tried:
aspx.page
<input type="button" id="tglBtn" onclick="changeName(this) " runat="server" />
or
<input type="button" id="tglBtn" OnClientClick="changeName(this);" runat="server" />
or
<input type="button" id="tglBtn" OnClientClick="changeName(this);return false;" runat="server" />
Javascript
function changeName(obj) {
alert("hey");
if ($(obj).attr("Value") == "Open") {
$(obj).val("Close");
}
else {
$(obj).val("Open");
}
}
Actually it work so fine to me.
Here is my code:
<script src="js/jquery.min.js" type="text/javascript"></script>
<input type="button" id="tglbtn" onclick="changeName(this)" runat="server" />
<script type="text/javascript">
function changeName(obj) {
alert("hey");
if ($(obj).attr("Value") == "Open") {
$(obj).val("Close");
}
else {
$(obj).val("Open");
}
}
</script>
Do you have jQuery? If you dont have just add a jQuery..
I think you made a mistake... now try this...
<asp:Button id="tglBtn" OnClientClick="return changeName()" runat="server"><asp>
The OnClientClick is work on asp.net controls (not on html controls that you have apply the run on server).
So the first line is only left.
<input type="button" id="tglBtn" onclick="changeName(this) " runat="server" />
This line is run, but at the same time you make Post Back, so you probably not have the time to see the results of javascript. Of course you may have some other javascript bugs, if you open your browser console you can see if the javascript runs with out errors.
Use ASP:Button instead.
see below code
<asp:Button runat="server" id="tglBtn" onclientclick="return changeName()" Text="submit" />
//in head section
<script language="Javascript">
function changeName()
{
alert("I am in function");
document.getElementById("tglBtn").value = "New name";
return false;
}
</script>
it will resolve your issue

passing ID to click event

I have the following input inside an asp.net repeater
<div class="detailsItem">
<input type="button" class="saveCommand" value="Save"/>
</div>
then within my document.ready I bind a click function
<script type="text/javascript">
$(document).ready(function () {
$('.saveCommand').live('click', function () {
var cur = $(this);
saveItem(cur.closest('div.detailsItem'));
});
});
When I'm binding my repeater, i want to be able to include an ID in call to the click function. something similar to:
<input type="button" onclikc="save(this,<%#((CustomViewItem)Container.DataItem).Id%>" value="Save"/>
Any idea on how to combine the two styles of binding?
I would suggest you to use a data attribute.
<!--
<div class="detailsItem" data-id="<%#((CustomViewItem)Container.DataItem).Id%>">
-->
<div class="detailsItem" data-id="YourIdHere">
<input type="button" class="saveCommand" value="Save"/>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.saveCommand').on('click', function () {
var cur = $(this);
var detailsItem = cur.closest('div.detailsItem');
alert(detailsItem.data("id"));
saveItem(detailsItem);
});
});
</script>
More information on the data() method in jQuery: http://docs.jquery.com/Data .
You could use the new data-* attributes
<input type="button" data-id="<%#((CustomViewItem)Container.DataItem).Id%>" value="Save"/>
in the event handler you can then access it with
cur.data("id")
You Can pass the ID to the Save function in the Item Template of your Repeater.
<itemTemplate>
<input type='button' onclick='save(<%# Eval("Id")); %>' value='Save' />
</itemTemplate>
Try this
<ItemTemplate>
<div class="detailsItem">
<input type="button" class="saveCommand" onclick='save(<%# Eval("Id") %>);' value="Save"/>
</div>
</ItemTemplate>

jquery/javascript content replace?how reusable

http://img163.imageshack.us/img163/6248/93306989.jpg
the images above show what i want,
i'm using Facebox to do the pop up content,so how can i make the pop up content dynamic?
<script type="text/javascript">
$(function() {
$('.openExample').click(function() {
$.facebox($('#exampleSource').val());
return false;
});
});
</script>
the code above work just fine,but how can edit to reusable???
<form>
<textarea id="exampleSource" class="expand">
<html>
<body>
<h1>Heading</h1>
<p>paragraph.</p>
</body>
</html>
</textarea>
<input type="Submit" value="Submit" class="openExample" />
<input type="reset" value="Reset" />
</form>
Create a function that accepts string or id of the element.
example:
function popWindow(elementID)
{
$('.openExample').click(function() {
$.facebox($(elementID).val());
return false;
});
}
call it like this popWindow('#exampleSource');

Categories

Resources