Develop Reference

Can two button share same 'click' function?

I have two buttons.One is named Update and another one is view. Both buttons are working perfectly. But if I duplicated 2 buttons, only view button is working. Update button is just displayed and not doing any click function.
WORKING Code:
<button id="AttendanceEnter" name="attendance" class="btn btn-primary">Add</button>
<button id="Attendanceview" name="attendanceview" class="btn btn-success">View</button>
Not Working Code:
<button id="AttendanceEnter" name="attendance" class="btn btn-primary">Add</button>
//ABove Code function is working,click function WORKING
//Below button only displaying, click function NOT working
<button id="AttendanceEnter1" name="attendance" class="btn btn-primary">Add</button>
//Below 2 buttons are working perfectly,Clicks are working
<button id="Attendanceview" name="attendanceview" class="btn btn-success">View</button>
<button id="Attendanceview" name="attendanceview" class="btn btn-success">View</button>
Complete js is here:
Contains click function only for Update buttons
$(document).ready(function(){
$('.select_date').datepicker({
autoclose: true,
dateFormat: date_format,
todayHighlight: true,
changeMonth: true,
changeYear: true,
maxDate: 0
});
/*Retrive Student List */
$('#AttendanceEnter').click(function() {
$( '#AttendanceClass' ).parent().parent().find('label').removeClass( 'error' );
$( '#AttendanceDate' ).parent().parent().find('label').removeClass( 'error' );
$('#AddModalContent').html('');
$( '#wpsp-error-msg' ).html('');
var cid = $('#AttendanceClass').val();
var date = $('#AttendanceDate').val();
if( cid=='' )
$( '#AttendanceClass' ).parent().parent().find('label').addClass( 'error' );
if( date=='' )
$( '#AttendanceDate' ).parent().parent().find('label').addClass( 'error' );
if(cid!='' && date!=''){
var data=[];
data.push({name: 'action', value: 'getStudentsList'},{name: 'classid', value: cid},{name:'date',value:date});
$.ajax({
type: "POST",
url: ajax_url,
data: data,
beforeSend:function () {
$.fn.notify('loader',{'desc':'Loading student list..'});
$('#AttendanceEnter').attr("disabled", 'disabled');
},
success: function( response ) {
$('#AttendanceEnter').removeAttr('disabled');
var response_data = jQuery.parseJSON(response);
if( response_data.status == 0 ) {
$( '#wpsp-error-msg' ).html(response_data.msg);
$( '#AddModal' ).modal( 'hide' );
} else {
$('#AddModalContent').html(response_data.msg);
}
},
error:function(){
$('#AttendanceEnter').removeAttr('disabled');
$.fn.notify('error',{'desc':'Something went wrong. Try after refreshing page..'});
},
complete:function () {
$('#AttendanceEnter').removeAttr('disabled');
$('.pnloader').remove();
}
});
$('#AddModal').modal('show');
}
});
///
/*Retrive Student List */
$('#AttendanceEnter1').click(function() {
$( '#AttendanceClass' ).parent().parent().find('label').removeClass( 'error' );
$( '#AttendanceDate' ).parent().parent().find('label').removeClass( 'error' );
$('#AddModalContent').html('');
$( '#wpsp-error-msg' ).html('');
var cid = $('#AttendanceClass').val();
var date = $('#AttendanceDate').val();
if( cid=='' )
$( '#AttendanceClass' ).parent().parent().find('label').addClass( 'error' );
if( date=='' )
$( '#AttendanceDate' ).parent().parent().find('label').addClass( 'error' );
if(cid!='' && date!=''){
var data=[];
data.push({name: 'action', value: 'getStudentsList'},{name: 'classid', value: cid},{name:'date',value:date});
$.ajax({
type: "POST",
url: ajax_url,
data: data,
beforeSend:function () {
$.fn.notify('loader',{'desc':'Loading student list..'});
$('#AttendanceEnter1').attr("disabled", 'disabled');
},
success: function( response ) {
$('#AttendanceEnter1').removeAttr('disabled');
var response_data = jQuery.parseJSON(response);
if( response_data.status == 0 ) {
$( '#wpsp-error-msg' ).html(response_data.msg);
$( '#AddModal' ).modal( 'hide' );
} else {
$('#AddModalContent').html(response_data.msg);
}
},
error:function(){
$('#AttendanceEnter1').removeAttr('disabled');
$.fn.notify('error',{'desc':'Something went wrong. Try after refreshing page..'});
},
complete:function () {
$('#AttendanceEnter1').removeAttr('disabled');
$('.pnloader').remove();
}
});
$('#AddModal').modal('show');
}
});

using jquery you can do something like
$("#AttendanceEnter , #Attendanceview").click(function(){
//your code
});

The name attributes should also be unique in this case. Your buttons have duplicated name attributes which will confuse HTTP.

How can I send a response from a Jquery modal form to a php function?

I am using the basic modal confirmation example but when I user clicks on the Approvebutton, I want it to execute the php function Approve();
<script>
$( function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Approve": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
} );
</script>
echo "<a href='test.php?cmd_test=approve_ts&test_id=$test_id'>Approve</a>";
if (isset($_GET["cmd_test"]))
{
$test_id = $_GET['test_id'];
//do other stuff
}

Create a PHP script. I'll call it ajax.php. In that, put your PHP code.
<?php
if (isset($_GET["cmd_test"]))
{
$test_id = $_GET['test_id'];
//do other stuff
}
?>
Then, as others have said, use an AJAX request.
$.get('ajax.php', function (data) {
// do stuff here
});
Put that in your Approve/Cancel functions

JQuery UI before dialog opens

I have a very simple dialog box
<script>
$(function() {
$( "#openDialog").on("click", function(){
$( "#dialog-modal" ).dialog({
height: 300,
width: 600,
modal: true,
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
$( "#dialog-modal" ).show();
});
});
</script>
I am populating this dialog with a HTML table that has information passed into it from a Java method. I can get this working when the page is loaded but i want the information to load with the user opens the dialog box.
I have checked the API of jquery ui and the dialog has a beforeClose function but no beforeOpen function. What would be the best way of doing this? I have tried callbacks when the user opens the dialog box ( on the .show ) but i cannot get this working
<script>
$(function() {
$( "#openDialog").on("click", function(){
$( "#dialog-modal" ).dialog({
height: 300,
width: 600,
modal: true,
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
$( "#dialog-modal" ).show(function(
JavaClass.javaMethod();
));
});
});
</script>

Why not just
<script>
$(function() {
$( "#openDialog").on("click", function(){
if (shouldOpenDialog()){ // Do what you must do here
$( "#dialog-modal" ).dialog({
height: 300,
width: 600,
modal: true,
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
$( "#dialog-modal" ).show();
}
});
});
</script>
EDIT: Or, if your verification is asynchronous,
<script>
$(function() {
$( "#openDialog").on("click", function(){
if (shouldOpenDialog(function() { // Do what you must do here
$( "#dialog-modal" ).dialog({
height: 300,
width: 600,
modal: true,
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
$( "#dialog-modal" ).show();
});
});
});
</script>
having
function shouldOpenDialog(callback) {
asyncCall(onComplete: function(o){
if (o.ok)
callback();
});
}

dialog box is not getting opened ajax jquery MVC2 asp.net

delete dialog box is not getting opened
my code
view:
`<div id="dialog-confirm" title="Delete dialog" style="display: none;">
<p>
Are you sure you want to delete the point?
</p>
</div>`
javascript:
`options += '<div onclick="editPoint(' + id + ')">Edit</div>
<div onclick="deletePoint(' + id + ')">Delete</div>';
optionsBox.html(options);`
controller:
public string delete_marker ( string Id )
{
try
{
mapmaker_dbDataContext DB = new mapmaker_dbDataContext ();
DB.SP_DeletePoint ( Id, /"Innayat"/ User.Identity.Name );
return "Point successfully deleted";
}
catch (Exception exc)
{
return "Delete operation failed";
}
}
delete function:
function deletePoint(id) {
MapScript.removeOptionsBox();
$( "#dialog-confirm" ).css('display','block');
alert('in detele');
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete": function() {
var link = '<%= Url.Action("delete_marker", "Home", new { id = "-1" }) %>';
link = link.replace("-1",id);
$.ajax({
url: link,
type: "GET",
cache: false,
success:
function (data) {
//alert(data);
if($('.up-triangle.firstAnimationA').length || $('.up-triangle.firstAnimationB').length )
//LoadList(0);
LoadNeighborhoodList(0, MapScript.neighborhoodCenter.latitude, MapScript.neighborhoodCenter.longitude);
if($('.up-triangle.secondAnimationA').length || $('.up-triangle.secondAnimationB').length )
//LoadList(1);
LoadNeighborhoodList(1, MapScript.neighborhoodCenter.latitude, MapScript.neighborhoodCenter.longitude);
if($('.up-triangle.thirdAnimationA').length || $('.up-triangle.thirdAnimationB').length )
{
//LoadList(2);
LoadNeighborhoodList(2, MapScript.neighborhoodCenter.latitude, MapScript.neighborhoodCenter.longitude);
}
},
error: function(){
alert('Delete operation failed');
}
});
$( this ).dialog( "close" );
$( "#dialog-confirm" ).css('display','none');
alert('delete button clicked');
},
"Cancel": function() {
$( this ).dialog( "close" );
$( "#dialog-confirm" ).css('display','none');
}
}
});
$( "#dialog-confirm" ).dialog();
}
its giving error what wrong with the code? even if i replace the ajax functionlity with an alert its again giving error

Declare your dialog div on load body or document like this ...
$(function() {
$( "#dialog-confirm" ).dialog({
autoOpen: false});
});

how to reopen modal dialog in jquery after closing it?

I have an Asp.Net MVC application, where in 1 View, I have a list with every record showing Edit icon. Clicking the edit icon opens a modal dialog popup to update the record .
I face problem in reopening the dialog or clicking other edit icon for popup after closing the dialog .
Following is my jquery code to open the dialog :
var singltym;
$(function () {
$('#addSingleTimeDialog').dialog({
cache: false,
autoOpen: false,
width: 450,
height: 450,
closeOnEscape: true,
resizable: true,
modal: true});
$('#singletymlink').on('click', function () {
singltym = $(this);
var dialogDiv = $('#addSingleTimeDialog');
var viewUrl = singltym.attr('href');
$.ajax({
cache: false,
url: viewUrl,
dataType: 'html',
success: function (data) {
dialogDiv.html(data);
dialogDiv.dialog('open');
}
});
return false;
});
});

var singltym;
$(function () {
$('#addSingleTimeDialog').dialog({
cache: false,
autoOpen: false,
width: 450,
height: 450,
closeOnEscape: true,
resizable: true,
modal: true});
$('#singletymlink').on('click', function () {
singltym = $(this);
var dialogDiv = $('#addSingleTimeDialog');
var viewUrl = singltym.attr('href');
$.ajax({
cache: false,
url: viewUrl,
dataType: 'html',
success: function (data) {
dialogDiv.html(data);
dialogDiv.dialog('open');
//I work in this method
$( this ).dialog( "close" );
}
});
});
});
Or
$.ajax({
cache: false,
url: viewUrl,
dataType: 'html',
success: function (data) {
dialogDiv.html(data);
$("#dialogDiv").dialog("open");
$( this ).dialog( "close" );
}
If $( this ).dialog( "close" ); not working because not try this specific sentence??
$('#addSingleTimeDialog').dialog("close");

The above issue can be solved by including the below scripts in parent view from where the dialog popup is clicked & initiated :
<script type="text/javascript" src="../../Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.validate.unobtrusive.min.js"></script>
As well as insert the below scripts in child view which is the UI for modal dialog popup :
<script type="text/javascript" src="../../Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.validate.unobtrusive.min.js"></script>
By scripting in such way, the jquery script conflict is avoided & reopening of dialog can be swiftly done.

You could use the open method:
$('#addSingleTimeDialog').dialog('open');

Came across this older question, found a simpler solution not listed here.
Add an event listener for the close event, and call destroy when the dialog is closed.
close: function(event, ui) {$(this).dialog("destroy");}

Try writing $( this ).dialog( "close" ); method in close function. Eg :
close: function(){ $( this ).dialog( "close" ); },
$( this ).dialog( "close" ); does not destroy the dialog, instead it just closes and makes it available to be used for next time.

My problem was solved by replacing
$(this).dialog("close");
with
$(this).dialog("destroy");