Trouble passing values using jquery popup

[coupe-r]

Hi All,

 

I have a delete button that bring up a popup over lay.  The pop up has 2 buttons (Yes and No).  When they press Yes, it should run some PHP code that grabs the ID's of the check records.  Unfortunately, when I press yes, I get my error message saying No Applications are selected.  So my code as is isn't passing the checked values all the way through the process.

 

When the user press the Yes button (yes_btn), I want it to carry over the check boxes with their IDs to the PHP code that deletes the records.  Again, the way it is now, it triggers my PHP code, just doesn't carry over the check box ID's.

 

Thanks soo much!!

 

 

Here are the individual check boxes each record could have, where $id is the record ID:

<input type="checkbox" name="checkbox[]" id="checkbox" value="'.$id.'" />

 

 

Here is the HTML button that starts the JQuery popup overlay:

<div id="popupContact">  
<a id="popupContactClose">x</a>  
<h1>Delete Confirmation</h1>  

<p id="contactArea">  
	<form id="form10" name="form10" method="post" action="">
        	<center>
            <input name="yes_btn" type="submit" class="updateBtn1" id="yes_btn" value="Yes" />
            <input name="no_btn" type="button" onclick="buttonDisablePopup()" class="updateBtn1" id="no_btn" value="No" />
            </center>
        </form>
</p>  
</div>  

<div id="backgroundPopup"></div>  

 

 

Here is the JQuery I'm using:

//0 means disabled; 1 means enabled;
var popupStatus = 0;


//loading popup with jQuery magic!
function loadPopup()
{
//loads popup only if it is disabled  
if(popupStatus==0)
{
	$("#backgroundPopup").css({
	    "opacity": "0.7"
	});


	$("#backgroundPopup").fadeIn("slow");
	$("#popupContact").fadeIn("slow");

	popupStatus = 1;
}
}  



//disabling popup with jQuery magic!
function disablePopup()
{
//disables popup only if it is enabled
if(popupStatus==1)
{
	$("#backgroundPopup").fadeOut("slow");
	$("#popupContact").fadeOut("slow");
    popupStatus = 0;
}
}



//centering popup
function centerPopup()
{
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();

//centering
$("#popupContact").css({
	"position": "absolute",
	"top": windowHeight/2-popupHeight/2,
	"left": windowWidth/2-popupWidth/2
});

//only need force for IE6
$("#backgroundPopup").css({
	"height": windowHeight
});
}



$(document).ready(function()
{
//LOADING POPUP

//Click the button event!
$("#button").click(function()
{
	//centering with css
	centerPopup();

    //load popup
    loadPopup();
    });



//CLOSING POPUP

//Click the x event!
$("#popupContactClose").click(function()
{
	disablePopup();
});

//Click out event!
$("#backgroundPopup").click(function()
{
	disablePopup();
});
});

[coupe-r]

***UPDATE***

 

OK, so now I got the check box ID's into a javascript variable that is comma delimited by using:

 

var items = []; $("input[name='checkbox[]']:checked").each(function(){items.push($(this).val());});

 

Now I need to get this items variable into PHP so I can use it in my query.

 

Thanks

[Omirion]

One way:

 

You could send the id's to a separate PHP script with ajax.

http://api.jquery.com/jQuery.ajax/

$.ajax({
   type:,
   url:,
   data:,
   success:fn(data, textStatus, jqXHR){}
})

 

 

[coupe-r]

So I gave that a try, I'm sure it works, I'm just having trouble.  Here is what I came up with:

 

function delButton()
{
var items = []; $("input[name='checkbox[]']:checked").each(function(){items.push($(this).val());});
var dataString = 'records='+items;

$.ajax({
	type: "POST",
	url: "app_delete.php?records=" + records,
	data: dataString,
	success: function() {  
		//display message back to user here  
	}  
})
}

 

Then on my app_delete.php page, I have a check to see if its passing anything with $val_error[] =  $_GET['records'];.  If anything is in the GET array, it will display.

 

Any help would be appreciated.

 

Thanks everyone.

[Omirion]

type: "POST",
	url: "app_delete.php?records=" + records,
	data: dataString,

 

You are mixing POST and GETS together either go with one or go with the other.

 

Also I'm not 100% sure the dataString conversion is corect. Haven't done PHP in a while, might ask at the PHP forum how to convert values from JS to read in PHP.

One way i seem to remember doing it is converting to XML string, ot JSON string.

 

Also you could use this.

http://jquery.hohli.com/

A php-jQuery thing.

Haven't used it personally, but reading the tutorials seems easy enough. And does exactly what you want.

[coupe-r]

OK, thanks for taking the time to write back.  I really appreciate it.

[Omirion]

Np, sorry i couldn't help more, just haven't done PHP in while as i said.

[coupe-r]

I got it, sorta!!

 

This code goes to app_delete.php.  However, I now need it to refresh the main index.php page.

 

function delButton()
{
var items = []; $("input[name='checkbox[]']:checked").each(function(){items.push($(this).val());});
var dataString = 'items='+ items;

$.ajax({
	type: "POST",
	url: "app_delete.php",
	data: dataString,
	success: function() {  
		$("#backgroundPopup").hide();
		$("#popupContact").hide();
		$('#created').html(output).fadeIn(1000);
	}  
})
}