This forum is in READ-ONLY mode.
You can look around, but if you want to ask a new question, please use the new forum.
Home » plugins » Javascript plugins » Simple Jquery modal window and AJAX
Simple Jquery modal window and AJAX [message #101497] Wed, 23 June 2010 19:11 Go to next message
NeoX  is currently offline NeoX
Messages: 58
Registered: March 2010
Location: Spain
Member

Hi all,
I've followed this tutorial in order to creating a jquery modal window http://www.queness.com/post/77/simple-jquery-modal-window-tu torial

It works but I would know how to pass a javascript var into js code because depending on a href clicked I should show different robot information.

My html code:
<?php include_javascripts() ?>
<?php foreach ($robots as $i => $robot ) : ?>
<td>
    <div id="card-robot" NAME="card">
        <dl>
[B]            <a href="#dialog"  style="float: right;margin-right:15px" name="modal">[/B]
                <img id="loader" src="/images/info.gif" style="float: right;"/></a>
            <dt>Robot:</dt>
            <dd style="margin-left: 15px" ><a href="<?php echo url_for('robot/show?id='.$robot->getId()) ?>"><?php echo $robot->getNombre() ?></a></dd>        
</td>
<?php endforeach; ?>

<div id="boxes">
    <div id="dialog" class="window">
         <a href="#card-robot" class="close" style="float: right;">Cerrar</a>
    </div>
</div>

<!-- Mask to cover the whole screen -->
<div id="mask"></div>


My panel.js code:
$(document).ready(function(){
	$('a[name=modal]').click(function(e) {
		e.preventDefault();
                var id = ($(this).attr('href'));
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
$('#mask').css({'width':maskWidth,'height':maskHeight});
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);
		var winH = $(window).height();
		var winW = $(window).width();
                $(id).css('top', parseInt( winH/2-245) + $(document).scrollTop() );
		$(id).css('left', winW/2-$(id).width()/2);
$(id).slideDown(id,0,winH,Math.ceil(winH/timeToSlide));
              $(id).slideDown("slow");
[B]              $("#dialog").load("robot/number");[/B]	
	});
	//if close button is clicked
	$('.window .close').click(function (e) {
		e.preventDefault();
		$('#mask').hide();
		$('.window').hide();
	});		

	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});			

});


So, I want to select a number depending on wich a href is clicked.
What can I do that?

Thanks.
Re: Simple Jquery modal window and AJAX [message #101544 is a reply to message #101497 ] Thu, 24 June 2010 17:02 Go to previous messageGo to next message
halfer  is currently offline halfer
Messages: 9535
Registered: January 2006
Location: West Midlands, UK
Faithful Member
At the simplest level, replace "robot/number" with a global JS var 'myJsLoadUrl'. Then in the related PHP template, do this at the start:

<script type="text/javascript>
<!--
var myJsLoadUrl = "<?php echo $myPhpUrl ?>";
//-->
</script>

If you wish, you can make this more elegant by turning your JS into a Javascript class, and using something like this in your template:

<script type="text/javascript>
<!--
myClickHandler.setUrl("<?php echo $myPhpUrl ?>");
//-->
</script>

Thus, once your page has loaded, the value will have in the meantime been set. I do this all the time for our AJAX stuff.


Remember Palestine
Re: Simple Jquery modal window and AJAX [message #101609 is a reply to message #101497 ] Fri, 25 June 2010 16:13 Go to previous messageGo to next message
NeoX  is currently offline NeoX
Messages: 58
Registered: March 2010
Location: Spain
Member

Hi halfer,
I'm trying the simplest way but It doesn't work because $myPhpUrl should be:
<?php echo url_for('robot/show?id='.$robot->getId()) ?>

The value is obtained in foreach so I get the followin error:

Undefined variable: robot
Re: Simple Jquery modal window and AJAX [message #101610 is a reply to message #101497 ] Fri, 25 June 2010 16:22 Go to previous messageGo to next message
halfer  is currently offline halfer
Messages: 9535
Registered: January 2006
Location: West Midlands, UK
Faithful Member
Where are you putting that piece of code - not in your javascript file, I hope! That file is *not* executed by the PHP interpreter, it is read and served as-is by Apache.

... which is why I said this has to go into the PHP template, in your case in the one to which $robot has been passed.


Remember Palestine
Re: Simple Jquery modal window and AJAX [message #101612 is a reply to message #101497 ] Fri, 25 June 2010 16:41 Go to previous messageGo to next message
NeoX  is currently offline NeoX
Messages: 58
Registered: March 2010
Location: Spain
Member

Of course, at the beginning of my Php template.
Re: Simple Jquery modal window and AJAX [message #101618 is a reply to message #101497 ] Fri, 25 June 2010 17:13 Go to previous messageGo to next message
halfer  is currently offline halfer
Messages: 9535
Registered: January 2006
Location: West Midlands, UK
Faithful Member
Outside of the loop that defines $robot? If you wish to use $robot in the context of the loop, your code will have to be inside the loop.

However since this trick sets only one JS value, it makes sense to decide which single Robot instance you wish to assign to it, and assign that instance in the action. To avoid confusion, it may be better to use a different name other than $robot.


Remember Palestine
Re: Simple Jquery modal window and AJAX [message #101625 is a reply to message #101497 ] Fri, 25 June 2010 19:02 Go to previous messageGo to next message
NeoX  is currently offline NeoX
Messages: 58
Registered: March 2010
Location: Spain
Member

It doesnt work.
I've tried inside and outside of the loop.
I don't know if I'm explaining incorrectly but the behavior I need is: to get the information of the Robot (showSuccess action) corresponding with the a href="#dialog" clicked by the user, and show it in the modal window.
So, if the user clicks in a href of Robot 3, show information about Robot 3 in the modal window, and if It's clicked Robot 15, show information about Robot 15 in the modal window.
Re: Simple Jquery modal window and AJAX [message #101639 is a reply to message #101497 ] Fri, 25 June 2010 23:39 Go to previous message
halfer  is currently offline halfer
Messages: 9535
Registered: January 2006
Location: West Midlands, UK
Faithful Member
Right. Well, first you need to understand why this didn't work. If you don't understand this, you'll have difficulty with jQuery.

So, when the page loads, if the item we discussed is inside the loop, you'll have this javascript:

<script>
<!--
var myJsLoadUrl = 'robot/show?id=1';
//-->
</script>
<script>
var myJsLoadUrl = 'robot/show?id=2';
//-->
</script>
<script>
var myJsLoadUrl = 'robot/show?id=3';
//-->
</script>
<script>
var myJsLoadUrl = 'robot/show?id=4';
//-->
</script>

It should be clear that, once the DOM has loaded, each will execute and you'll be left only with the last assignment. So this approach won't work.

This next idea is a bit more complex, but try this approach instead. For each of your clickable items, do this:

<a href="#dialog" style="float: right;margin-right:15px" class="modal" id="modal_<?php echo $i ?>">

You'll notice I don't use `name` here, I use `class`. Then do this in your jQuery:

$('.modal').click(function()
{
  var id = $(this).attr('id').replace('modal_');
  // ...
});

This will attach a click handler to all elements, and you don't need to add any JS into the loop - jQuery does all the work for you. From here you should be able to customise the handler as you require.


Remember Palestine
Previous Topic: integrating galleria into symfony 1.4
Next Topic:jquery autocomplete--not working...
Goto Forum:
  

powered by FUDforum - copyright ©2001-2004 FUD Forum Bulletin Board Software