Databases
StackOverflow2013
Postsdbo
POHow can i seperate jQuery code from my html markup
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can i seperate jQuery code from my html markup
    text
    copied!<p>Am using php to develop an app and i created a simple template system for headers and footers. My dilemma is that i have many views that depend on the jQuery code, and they all user the header template. Here an excerpt from the header. </p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt; &lt;title&gt;NgInformr | Adminstration | &lt;?php if(isset($title)) { echo $title; }?&gt;&lt;/title&gt; &lt;?=$html-&gt;js("javascripts/top_up")?&gt; &lt;?=$html-&gt;css("admin-css")?&gt; &lt;?=$html-&gt;css("form-style")?&gt; &lt;link href="http://localhost/nginformr/www_root/js/uploadify/uploadify.css" type="text/css" rel="stylesheet"/&gt; &lt;?=$html-&gt;css("base/jquery.ui.all")?&gt; &lt;?=$html-&gt;js("uploadify/jquery.uploadify.v2.1.4.min")?&gt; &lt;?=$html-&gt;js("uploadify/swfobject")?&gt; &lt;?=$html-&gt;js("jquery-ui-1.8.9")?&gt; &lt;?=$html-&gt;js("jscripts/tiny_mce/jquery.tinymce")?&gt; &lt;script type="text/javascript"&gt; $(document).ready(function() { //Uploader $('#file_upload').uploadify({ uploader : "/nginformr/www_root/js/uploadify/uploadify.swf", script : "/nginformr/www_root/js/uploadify/uploadify.php", folder : "/nginformr/www_root/uploads", auto : true, onComplete : function(event, queueID, fileObj, reponse, data) { $('#file_details').css({display:"block"}); $('#path').val(fileObj.filePath); $('#type').val(fileObj.type); }, onError : function (event,ID,fileObj,errorObj) { alert(errorObj.type + ' Error: ' + errorObj.info); } }); $("#side_menu").accordion({header:"p",fillSpace: false}); //Ajax for select boxes $('#state').change(function() { $('#city').html(""); var id = $('#state').val(); var dataString = "id="+id; $.ajax({ url:"http://localhost/nginformr/cities/ajax_cities", type:"POST", data:dataString, success:function(html) { $('#city').append(html); } }); }); $("#city").change(function() { $('#area').html(""); var id = $('#city').val(); var dataString = "id="+id; $.ajax({ url:"http://localhost/nginformr/areas/ajax_areas", type:"post", data:dataString, success:function(html) { $('#area').append(html); } }); }); $('#sector').change(function() { $('#category').html(""); var id = $('#sector').val(); var dataString = "id="+id; $.ajax({ url:"http://localhost/nginformr/categories/ajax_categories", type:"post", data:dataString, success:function(html) { $('#category').append(html); } }); }); $(".widget").draggable(); //TinyMCE Editor $('textarea.tinymce').tinymce({ // Location of TinyMCE script script_url : 'http://localhost/nginformr/www_root/js/jscripts/tiny_mce/tiny_mce.js', // General options theme : "advanced", plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist", // Theme options theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect", theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor", theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen", theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true, // Example content CSS (should be your site CSS) //content_css : "css/content.css", // Drop lists for link/image/media/template dialogs template_external_list_url : "lists/template_list.js", external_link_list_url : "lists/link_list.js", external_image_list_url : "lists/image_list.js", media_external_list_url : "lists/media_list.js", // Replace values for the template plugin template_replace_values : { username : "Some User", staffid : "991234" } }); }); &lt;/script&gt; &lt;script type="text/javascript"&gt; TopUp.host = "http://localhost/nginformr/"; TopUp.images_path = "www_root/img/top_up/"; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="header"&gt;&lt;!-- ------Header --&gt; &lt;div id="logo"&gt; &lt;a href="./"&gt;&lt;?$html-&gt;img("nginformr_logo.png") ?&gt;&lt;/a&gt; &lt;/div&gt; &lt;div id="user_controls"&gt; &lt;?=$html-&gt;link("admin/users/logout","Logout")?&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload