Passing Variables into Modal Dialogue/Window.

tebrown · September 9, 2012

Hey Guys,

Originally i had a page called fixtures.php - this page had all my fixtures for my upcoming season. Each fixture had a icon that allowed the manager to click this link and create the lineup for this fixture. It would then take them to a page called lineup.php with a php variable attached like this: lineup.php?id=45

Now, i have modified my site and have changed it so that when the user clicks a specific icon to create the lineup it would open up a modal dialogue box.

The link to open this modal dialogue box is as follows: <a id="go" rel="leanModal" name="modal9" href="#modal9"></a>

Before it had allowed me to switch pages from fixtures.php to lineup.php where i could pass the variable within the link. Now it wont let me do that becuase the modal dialoge box opens without refreshing.

So what i need to do now is somehow pass the php variale (id) to this modal dialogue box and grab it so i can then show results from the database depending on the $id variable.

How could i go about doing this?

Cheers

tebrown

ignace · September 9, 2012

I checked out leanModal. It appears you can't. You can however if you use fancyBox.

Your HTML code would look like:

<a href="lineup.php?id=45" data-fancybox-type="iframe" class="fancybox">Show Lineup</span>

JS code:

$('.fancybox').fancybox();

tebrown · September 9, 2012

Using this lightbox service, would i be able to have multiple modal links on one page?

For example:

Modal One Link

Modal Two Link

Modal Three Link

Each modal contains different content...

Cheers

ignace · September 9, 2012

Yup. You can have an iframe, an image gallery, inline content, ajax loaded content, .. all on one page.

tebrown · September 9, 2012

Ah ok. I don't need those. I just need multiple modals that can be clicked on one page that will show content within the specific modal.

darkfreaks · September 9, 2012

multiple links using fancybox

you could simply use rel to pass the name of the variable in php then pass the href as well.

tebrown · September 9, 2012

Thanks for you reply there,

I found a similar modal which allows you to have multiple modals on one page.

I'm still having trouble. I've got this below link which activates the modal box and opens it, but im trying to get the $id variable although I cant seem to get it to work.

schedule.php

<div id='basic-modal'><a href="lineup.php?id=<? echo $rows['id']; ?>" class='basic'>Open Modal</a></div>

lineup.php

<?
$id=$_GET['id'];
echo $id;
?>

Here is the javascript that im using to open it:

jQuery(function ($) {
// Load dialog on page load
//$('#basic-modal-content').modal();

// Load dialog on click
$('#basic-modal .basic').click(function (e) {
	$('#content-one').modal({
	overlayClose:true,
	opacity:40


	});
	return false;

});

});

Any help much appreciated.

darkfreaks · September 9, 2012

short tags version:

<a href="lineup.php?id=<?=$rows['id']?>" class='basic'>

using quotes to escape php:

<a href=\"lineup.php?id=".$rows['id']."\">

tebrown · September 10, 2012

Im still unable to retrive the $id from the link.

Notice: Undefined index: id in /Users/Tim/Sites/2012MP/modals/lineup.php on line 17

<div id='basic-modal'><a class='basic' href=\"lineup.php?id=".$rows['id']."\">Open Modal</a></div>

tebrown · September 10, 2012

I did find this forum post:

http://forum.jquery.com/topic/simplemodal-parsing-variable-from-original-php-to-modal-popup

I made the following changes, but it still doesn't grab the id from the specific link i click.

shedule.php

<a href="schedule.php?id=<? echo $rows['id']; ?>" class='basic'>Open Modal</a>

Javascript

jQuery(function ($) {

// Load dialog on click
$('#basic-modal .basic').click(function (e) {
	[b]$.get("schedule.php?id=" + this.hash.substr(1), function (data ){[/b]
	$('#content-one').modal({
	overlayClose:true,
	opacity:40
	});

	});
	return false;

});

});

lineup.php (grab the id and echo it out)

<?
$id=$_GET['id'];
echo $id;

?>

I still get the Notice: Undefined index: id in /Users/Tim/Sites/2012MP/modals/lineup.php on line 17

Cheers Guys

darkfreaks · September 10, 2012

im confused if you are using $_GET['id'] where is $rows['id'] being called from :confused:

tebrown · September 10, 2012

Ok sorry, i should have showed the other code. Let me show you it.

schedule.php

<?php



$fixture = "SELECT * FROM `fixtures` WHERE `club`='".$_SESSION['club']."' AND `team`='".$_SESSION['team']."' AND `status`='1' ORDER BY time ASC";

$resultfixture=mysql_query($fixture);

while($rows = mysql_fetch_array($resultfixture))

{ 

$id=$rows['id'];
$status=$rows['status'];
$date = $rows['time'];
$saved=$rows['saved'];
$date = $rows['time'];
$fixturedate = date('M jS, g:ia', $date);

?>

<div class="updates-team">
	<div style="height: 100%; width: 3px; background-color: #85BC77;">
		<div class="padding-team">
			<table width="600px" cellpadding="0">
				<tr>
					<td width="148"><?php echo "" . $rows['home'] . " vs ". $rows['away'].""?></td>
					<td width="120"><?php echo "" . $rows['where'] . "" ?></td>
					<td width="120"><?php echo $fixturedate; ?></td>

					<td width="100" rowspan="2">
						<div href="#" class="small-icon-edit"><i class="icon-bar-chart"></i></div>
						<div id='basic-modal'><a href="schedule.php?id=<? echo $rows['id']; ?>" class='basic'><div class="small-icon-edit"><i class="icon-edit"></i></div></a></div>
						<div href="#" class="small-icon-tick-incomplete"><i class="icon-ok-sign"></i></div>
					</td>

					<tr style="font-size: 11px;color: #9B9B9B;padding-top: 5px;">
						<td colspan="1"><a href="#" id="sample">Mostly Overcast</a></td>
						<td colspan="1">New Plymouth</td>
						<td colspan="3">Saturday</td>
					</tr>


				</table>
			</div>
		</div>
	</div>

	<?
} 


?>

darkfreaks · September 10, 2012

change mysql_fetch_array to mysql_fetch_assoc

then pass it like i showed you above but change $row['id'] to $id since it is already defined in the while loop

tebrown · September 10, 2012

Ok i made the changes and its working, but its only showing one id for both.

From the code i showed above, it outputs to results id 24 and id 25. They are then displayed.

When i click id 24 it opens the modal and shows the id 24, but when i open up id 25 it shows 24 also....

darkfreaks · September 10, 2012

sounds like you have duplicate values in the database you could do something like

SELECT DISTINCT * FROM

no idea if it actually works. :shrug:

tebrown · September 10, 2012

Nope there not, the id's of them are 24, 25.

Even when i hover over the links it shows down the bottom left corner of my screen:

schedule.php?id=24

schedule.php?id=25

darkfreaks · September 10, 2012

can you link me to a running version? i am not sure if it is a problem with the DB or the while loop or even a modal JS problem. :confused:

but it sounds like it is echoing out the correct ID in the URL.

tebrown · September 10, 2012

Damn, im running on localhost.

I dont think its a database problem, its defiantly something to do with the javascript.

Quick rundown.

The 2 links are displayed on schedule.php. They both have an id (24, 25).

When the user clicks one of these links, it will open up the modal (lineup.php), which will then show the id depending on what link the user clicked.

darkfreaks · September 10, 2012

have you tried something like this....

$('a.simple_modal').click(
    function (e) {
        e.preventDefault();
        $.get(this.href, function(data) {
            var resp = $('<div></div>').append(data); // wrap response in div for jquery handling
            $(resp).modal();
        });
    }
);

tebrown · September 10, 2012

Javascript is not my best skill in programming, but would i implement this into my current javascript that opens the modal?

darkfreaks · September 10, 2012

actually this might fix it with basic modal

$(document).ready(function () {
      $('#basic-modal input.basic, #basic-modal a.basic').click(function (e) {
              e.preventDefault();
              var content = '#' + this.id + '-content';
              $(content).modal();
      });
});

tebrown · September 10, 2012

Hmm, right.

May i ask what this actually does? - I'm sure im very close with what i have got at the moment. Its just not identifying the id.

darkfreaks · September 10, 2012

e.PreventDefault makes it so where it doesn't pop up another window after the original click.

tebrown · September 10, 2012

Sorry i didn't see that you provided the second piece of code above.

Would i put it together like this:

jQuery(function ($) {

$(document).ready(function () {
      $('#basic-modal input.basic, #basic-modal a.basic').click(function (e) {
              e.preventDefault();
              var content = '#' + this.id + '-content';
              $(content).modal();
      });
});

// Load dialog on click
$('#basic-modal .basic').click(function (e) {
	$.get("schedule.php?id=" + this.hash.substr(1), function (data ){
	$('#content-one').modal({
	overlayClose:true,
	opacity:40
	});

	});
	return false;


});

});

When i did this, it doesn't even open up properly.

Cheers

tebrown

darkfreaks · September 10, 2012

Stack Overflow passing ID via URL [basic modal]

Sign In

Passing Variables into Modal Dialogue/Window.

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information