SetMedia for JS Script in ajax controller

[altsphere]

Hello,

 

i'm building a module which :

1) display a "stock in store" button on the product page (OK)

2) open a fancybox on click which contains a view loaded by ajax via a controller(OK)

3) This view contains a select with literal JS with calls ajax onChange (OK)

 

4) the fancybox is update with a new view including a google map + some infos loaded via ajax by the same controller (+ personal info but this is OK)

 

=> PROB : setmedia in the controller is never called so JS and CSS are not included and I have no google map

 

=> QUESTION : how to load JS script in an ajax call via controller (this must be loaded depending on the action - the second ajax call- only)

=> check attached file as it's impossible to put code here

first view, return from the first ajax call (first content of the fancybox)

<select id="selectmagasin">
	<option value="">{l s='Choisissez votre magasin' mod='stockmagasin'}</option>
        {foreach from=$magasins item=magasin name=magasin}
				<option value="{$magasin.id_store}">{$magasin.postcode|escape:'htmlall':'UTF-8'} - {$magasin.name|escape:'htmlall':'UTF-8'}</option>
        {/foreach}
</select>
<div id="stock_magasin"></div>
<script type="text/javascript">
{literal}
function StockMagasin() 
{
	$.ajax({
            url:  baseDir+'module/stockmagasin/stockmagasin', // version jeff qui marchebaseDir+'modules/stockmagasin/ajax_stockmagasin.php',
            type: 'POST',
            data: 'ajax=true&method=stockmagasin&magasin='+$("#selectmagasin").val()+'&reference={/literal}{$reference}{literal}',
            success: function(html) 
            {
				$("#stock_magasin").html(html);
            }
    }); 
    return true;
}

$("#selectmagasin").on('change',StockMagasin);
{/literal}
</script>

Second view (point 4) return of the second ajax call, update of the fancybox's content. But no JS and CSS loaded so no google map

{if $retour}
 	<p class="alert alert-info margintop">
				Il y en a {$quantite} en stock.
	</p> 
<h1 class="page-heading">{$store.name}</h1>

<div id="map" style="width:100%; height:447px; margin-bottom:20px;"></div>

<div class="row">
	<div class="col-xs-12 col-sm-{if !empty($store.email)}4{else}6{/if}">
		<p>
			<strong>{l s='Address' mod='storespages'}</strong><br/>
			{$store.address1}<br/>
			{$store.postcode} {$store.city}<br/>
			{l s='Tel.' mod='storespages'} : {$store.phone}<br/>
			{l s='Fax' mod='storespages'} : {$store.fax}
		</p>
		<strong>{l s='Working hours' mod='storespages'}</strong>
		{$store.working_hours}
	</div>
	<div class="col-xs-12 col-sm-{if !empty($store.email)}4{else}6{/if}">
		{if $store.has_picture}
			<img src="{$store.image}"  class="img-responsive"  alt="magasin {$store.name}" title="magasin {$store.name}"/>
		{/if}
	</div>
	
	{if !empty($store.email)}
		<div class="col-xs-12 col-sm-4">
			
			<h4>{l s='Contact the shop of %s' sprintf=$store.name mod='storespages'} : </h4>
			
			{if !empty($contact_errors)}
				<div class="alert alert-danger">
					<p>{l s='%d error(s)' sprintf=$contact_errors|@count mod='storespages'} :</p>
					<ol>
						{foreach from=$contact_errors item=v}
							<li>{$v}</li>
						{/foreach}
					</ol>
				</div>
			{else}
				{if !empty($contact_success)}
					<div class="alert alert-success">
						{l s='Email sent.' mod='storespages'}
					</div>
				{/if}
			{/if}
			
			<form method="post" action="">
				<input type="hidden" name="magasin" value="{$store.id_store}">
				<div class="form-group">
					<div class="controls">
						<input class="col-md-12" name="name" type="text" placeholder="{l s='Your name' mod='storespages'}" value="{if !empty($user)}{$user.firstname} {$user.lastname}{/if}">
					</div>
				</div>
				<div class="form-group ">
					<div class="controls">
						<input class="col-md-12" name="address" type="text" placeholder="{if $b2b_enable}{l s='Address of your shop' mod='storespages'}{else}{l s='Your address' mod='storespages'}{/if}" value="{if !empty($user)}{$user.address}{/if}">
					</div>
				</div>
				<div class="form-group ">
					<div class="controls">
						<input class="col-md-12" name="phone" type="text" placeholder="{l s='Your phone number' mod='storespages'}" value="{if !empty($user)}{$user.phone}{/if}">
					</div>
				</div>
				<div class="form-group">
					<div class="controls">
						<input class="col-md-12" name="email" type="text" placeholder="{l s='Your email address' mod='storespages'}" value="{if !empty($user)}{$user.email}{/if}">
					</div>
				</div>
				<div class="form-group ">
					<div class="controls">
						<textarea class="col-md-12" name="message" placeholder="{l s='Your message' mod='storespages'}" style="height:100px;">{if isset($smarty.post.message)}{$smarty.post.message}{/if}</textarea>
					</div>
				</div>
				{$HOOK_DISPLAY_STORESPAGES_CAPTCHA}
				<input type="submit" name="submitContact" class="button orange medium" value="{l s='Send' mod='storespages'}">
			</form>
		</div>
	{/if}
</div>

{else}
	<p class="alert alert-error margintop"> L'article n'est pas disponible, commandez en ligne !</p>
{/if}

stockmagasin.php

[cristic]

Why not making a custom page and then call this page with content_only=1 in the url?

 

This will display it in a fancybox. As for the Javascript, load it in the main page, the one that holds "stock in store" button.