Jump to content

Passing Variables into Modal Dialogue/Window.


tebrown

Recommended Posts

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

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

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>

	<?
} 


?>

Link to comment
Share on other sites

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....

Link to comment
Share on other sites

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.

 

 

 

 

Link to comment
Share on other sites

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();
        });
    }
);

 

Link to comment
Share on other sites

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();
      });
});

Link to comment
Share on other sites

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.