11492 sujets

JavaScript, DOM et API Web HTML5

Page avec du Jquery incluse appelée avec Ajax

Bonjour à tous et Joyeuses Fêtes par la même occasion

Je vous explique mon petit souci : je suis débutant en dév Web mais j'ai quelques connaissances ici ou là.

Voila j'ai un fichier index.php qui contient un menu dont les items appelent d'autres pages et les affichent dans un div 'content' par l'utilisation d'une fonction ajax simple. (je suis en serveur web local avec Wamp).

Dans une des pages que j'appelle se trouve une table avec des éléments en dur (non issus d'une base de données...enfin pas encore).
Dans cette table, il existe une case à cocher qui sélectionne toutes les cases à cocher présentes sur autant de lignes. un équivalent 'Tout Sélectionner'.
Cela doit être un bout de javascript ou de jquery qui fait ça.

Cette page appelée toute seule fonctionne bien mais dès que je l'appelle par mon ajax pour l'inclure dans mon fichier index, il se trouve que le 'Tout Sélectionner' ne fonctionne plus.

Pourtant, j'ai pris attention de bien ramener les appels à mes différents JS dans mon index car on est bien d'accord que tous ces scripts doivent être appelées dans mon index ?

Auriez-vous une idée à me soumettre ?

Merci de votre aide à tous.

Si besoin je peux mettre mon code.
Bonjour et merci à toi
alors voilà le bout de code que je veux inclure, rien de spécial ce n'est que du HTML dans un fichier php.
Contenu.php
<!--  start page-heading -->
    	<div id="page-heading"><h1>Voir les séries</h1>	</div>
    	<!-- end page-heading -->
	<table border="0" width="100%" cellpadding="0" cellspacing="0" id="content-table">
    	<tr>
    		<th rowspan="3" class="sized"><img src="images/shared/side_shadowleft.jpg" width="20" height="300" alt="" /></th>
    		<th class="topleft"></th>
    		<td id="tbl-border-top">&nbsp;</td>
    		<th class="topright"></th>
    		<th rowspan="3" class="sized"><img src="images/shared/side_shadowright.jpg" width="20" height="300" alt="" /></th>
    	</tr>
    	<tr>
    		<td id="tbl-border-left"></td>
    		<td>
    		<!--  start content-table-inner .............................................. START -->
    		<div id="content-table-inner">

    			<!--  start table-content  -->
    			<div id="table-content">
    				<!--  start product-table ..................................................................................... -->
    				<form id="mainform" action="">
    				<table border="0" width="100%" cellpadding="0" cellspacing="0" id="product-table">
    				<tr>
    					<th class="table-header-check"><a id="toggle-all"></a></th>
    					<th class="table-header-repeat line-left minwidth-1"><a href="">Nom de la série</a>	</th>
    					<th class="table-header-repeat line-left minwidth-1"><a href="">Genre</a></th>
    					<th class="table-header-repeat line-left"><a href="">Email</a></th>
    					<th class="table-header-repeat line-left"><a href="">Nb Saison</a></th>
    					<th class="table-header-repeat line-left"><a href="">Website</a></th>
    					<th class="table-header-options line-left"><a href="">Actions</a></th>
    				</tr>
    				<tr>
    					<td><input type="checkbox"/></td>
    					<td>Sabev</td>
    					<td>George</td>
    					<td><a href="">george@mainevent.co.za</a></td>
    					<td>R250</td>
    					<td><a href="">www.mainevent.co.za</a></td>
    					<td class="options-width">
    					<a href="" title="Modifier" class="icon-1 info-tooltip"></a>
    					<a href="" title="Supprimer" class="icon-2 info-tooltip"></a>
    					<a href="" title="Edit" class="icon-3 info-tooltip"></a>
    					<a href="" title="Edit" class="icon-4 info-tooltip"></a>
    					<a href="" title="Edit" class="icon-5 info-tooltip"></a>
    					</td>
    				</tr>
    				<tr class="alternate-row">
    					<td><input  type="checkbox"/></td>
    					<td>Sabev</td>
    					<td>George</td>
    					<td><a href="">george@mainevent.co.za</a></td>
    					<td>R250</td>
    					<td><a href="">www.mainevent.co.za</a></td>
    					<td class="options-width">
    					<a href="" title="Edit" class="icon-1 info-tooltip"></a>
    					<a href="" title="Edit" class="icon-2 info-tooltip"></a>
    					<a href="" title="Edit" class="icon-3 info-tooltip"></a>
    					<a href="" title="Edit" class="icon-4 info-tooltip"></a>
    					<a href="" title="Edit" class="icon-5 info-tooltip"></a>
    					</td>
    				</tr>
    				</table>
    				<!--  end product-table................................... -->
    				</form>
    			</div>
    			<!--  end content-table  -->

    			<!--  start actions-box ............................................... -->
    			<div id="actions-box">
    				<a href="" class="action-slider"></a>
    				<div id="actions-box-slider">
    					<a href="" class="action-edit">Edit</a>
    					<a href="" class="action-delete">Delete</a>
    				</div>
    				<div class="clear"></div>
    			</div> <!-- end actions-box........... -->

    			<!--  start paging..................................................... -->
    			<table border="0" cellpadding="0" cellspacing="0" id="paging-table">
    			<tr>
    			<td>
    				<a href="" class="page-far-left"></a>
    				<a href="" class="page-left"></a>
    				<div id="page-info">Page <strong>1</strong> / 15</div>
    				<a href="" class="page-right"></a>
    				<a href="" class="page-far-right"></a>
    			</td>
    			<td>
    			<select  class="styledselect_pages">
    				<option value="">Number of rows</option>
    				<option value="">1</option>
    				<option value="">2</option>
    				<option value="">3</option>
    			</select>
    			</td>
    			</tr>
    			</table>
    			<!--  end paging................ -->

    			<div class="clear"></div>

    		</div>
    		<!--  end content-table-inner ............................................END  -->
    		</td>
    		<td id="tbl-border-right"></td>
    	</tr>
    	<tr>
    		<th class="sized bottomleft"></th>
    		<td id="tbl-border-bottom">&nbsp;</td>
    		<th class="sized bottomright"></th>
    	</tr>
	</table>
	<div class="clear">&nbsp;</div>


Et mon fichier index.php

Je le découpe afin qu'il soit digeste :
Ici il y a tous les appels aux JS
A terme tout sera dans des fichiers externes parce que là c'est pas terrible je le conçois Smiley eek 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Internet Dreams</title>
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" title="default" />
<!--[if IE]>
<link rel="stylesheet" media="all" type="text/css" href="css/pro_dropline_ie.css" />
<![endif]-->

<!--  jquery core -->
<script src="js/jquery/jquery-1.4.1.min.js" type="text/javascript"></script>
<!--  checkbox styling script -->
<script src="js/jquery/ui.core.js" type="text/javascript"></script>
<script src="js/jquery/ui.checkbox.js" type="text/javascript"></script>
<script src="js/jquery/jquery.bind.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){
	$('input').checkBox();
	$('#toggle-all').click(function(){
 	$('#toggle-all').toggleClass('toggle-checked');
	$('#mainform input[type=checkbox]').checkBox('toggle');
	return false;
	});
});
</script>

<script type="text/javascript">
	    function loadHTML(url) {
	        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
	            xmlhttp = new XMLHttpRequest();
	            xmlhttp.open("GET", url, false);
	            xmlhttp.send(null);
	        }
	        else {// code for IE6, IE5
	            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	            xmlhttp.open("GET", url, false);
	            xmlhttp.send();
	        }
	        if (xmlhttp.readyState == 4)
	            document.getElementById('content').innerHTML = xmlhttp.responseText;
	    }
</script>


<![if !IE 7]>
<!--  styled select box script version 1 -->
<script src="js/jquery/jquery.selectbox-0.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.styledselect').selectbox({ inputClass: "selectbox_styled" });
});
</script>
<![endif]>

<!--  styled select box script version 2 --> 
<script src="js/jquery/jquery.selectbox-0.5_style_2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.styledselect_form_1').selectbox({ inputClass: "styledselect_form_1" });
	$('.styledselect_form_2').selectbox({ inputClass: "styledselect_form_2" });
});
</script>

<!--  styled select box script version 3 --> 
<script src="js/jquery/jquery.selectbox-0.5_style_2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.styledselect_pages').selectbox({ inputClass: "styledselect_pages" });
});
</script>

<!--  styled file upload script --> 
<script src="js/jquery/jquery.filestyle.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
  $(function() {
      $("input.file_1").filestyle({
          image: "images/forms/choose-file.gif",
          imageheight : 21,
          imagewidth : 78,
          width : 310
      });
  });
</script>

<!-- Custom jquery scripts -->
<script src="js/jquery/custom_jquery.js" type="text/javascript"></script>
 
<!-- Tooltips -->
<script src="js/jquery/jquery.tooltip.js" type="text/javascript"></script>
<script src="js/jquery/jquery.dimensions.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
	$('a.info-tooltip ').tooltip({
		track: true,
		delay: 0,
		fixPNG: true,
		showURL: false,
		showBody: " - ",
		top: -35,
		left: 5
	});
});
</script> 


<!--  date picker script -->
<link rel="stylesheet" href="css/datePicker.css" type="text/css" />
<script src="js/jquery/date.js" type="text/javascript"></script>
<script src="js/jquery/jquery.datePicker.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
// initialise the "Select date" link
$('#date-pick')
	.datePicker(  		// associate the link with a date picker
		{
			createButton:false,
			startDate:'01/01/2005',
			endDate:'31/12/2020'
		}
	).bind(    		// when the link is clicked display the date picker
		'click',
		function()
		{
			updateSelects($(this).dpGetSelected()[0]);
			$(this).dpDisplay();
			return false;
		}
	).bind(   		// when a date is selected update the SELECTs
		'dateSelected',
		function(e, selectedDate, $td, state)
		{
			updateSelects(selectedDate);
		}
	).bind(
		'dpClosed',
		function(e, selected)
		{
			updateSelects(selected[0]);
		}
	);

var updateSelects = function (selectedDate)
{
	var selectedDate = new Date(selectedDate);
	$('#d option[value=' + selectedDate.getDate() + ']').attr('selected', 'selected');
	$('#m option[value=' + (selectedDate.getMonth()+1) + ']').attr('selected', 'selected');
	$('#y option[value=' + (selectedDate.getFullYear()) + ']').attr('selected', 'selected');
}
// listen for when the selects are changed and update the picker
$('#d, #m, #y')
	.bind(
		'change',
		function()
		{
			var d = new Date(
						$('#y').val(),
						$('#m').val()-1,
						$('#d').val()
					);
			$('#date-pick').dpSetSelected(d.asString());
		}
	);

// default the position of the selects to today
var today = new Date();
updateSelects(today.getTime());

// and update the datePicker to reflect it...
$('#d').trigger('change');
});
</script>

<!-- MUST BE THE LAST SCRIPT IN <HEAD></HEAD></HEAD> png fix -->
<script src="js/jquery/jquery.pngFix.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).pngFix( );
});
</script>
</head>


Et pour le html je vous évite le pire je ne mets que la ligne qui accueille mes pages appelées par Ajax à l'aide la fonction vue plus haut

<div id="content" style="height: 300px;">  <!-- start content -->

Par contre je mets un lien qui vous permettra de voir l'appel à cette fonction
<a href='javascript:loadHTML("contenu.php");' id="acc-settings">Paramêtres</a>
Sujet clos
Aller à