ibrahimjan Posted September 14, 2011 Share Posted September 14, 2011 Hi I have a AJAX function that calls a colour.asp page, in this page there is a colour picker script, this script works fine with out loading it through the div ID "Ajax_menu"any suggestions please?? AJAX js code: <script type="text/javascript">function loadXMLDoc(){var xmlhttp;if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("Ajax_menu").innerHTML=xmlhttp.responseText; } }xmlhttp.open("GET","colour.asp",true); xmlhttp.send();} </script> <div id= "text" onmouseup="loadXMLDoc()";" style="cursor:pointer;">AJAX colour</div><div id="Ajax_menu"></div> this is the colour.asp page: <script type="text/javascript" src="/js/jquery.js"></script><script type="text/javascript" src="/js/farbtastic.js"></script><link rel="stylesheet" href="/css/farbtastic.css" type="text/css" /><script type="text/javascript" charset="utf-8"> $(document).ready(function() { $('#demo').hide(); $('#picker').farbtastic('#color'); });</script> <form name="head_text" method="post" action="/admin/tpl/english/update_Txthead.asp?TXID=<%=TXID%>&LAYID=<%=LAYID%>"> <table width="400" border="0" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#E5E5E5"> </td> <td bgcolor="#E5E5E5"> </td> <td> </td> <td colspan="2"><strong><%=(Layout_TXID.Fields.Item("TxText").Value)%></strong></td> </tr> <td bgcolor="#E5E5E5"> </td> <td bgcolor="#E5E5E5"> </td> <td> </td> <td width="240"> </td> <td> </td> </tr> <tr> <td width="7" bgcolor="#E5E5E5"> </td> <td width="83" bgcolor="#E5E5E5">Text</td> <td width="10" bgcolor="#FFFFFF"> </td> <td colspan="2" bgcolor="#FFFFFF"> <input name="head_TX" type="text" id="head_TX" value="<%=(Layout_TXID.Fields.Item("TxText").Value)%>" size="40"></td> </tr> <tr> <td bgcolor="#E5E5E5"> </td> <td valign="top" bgcolor="#E5E5E5"><span class="form-item">Color</span></td> <td bgcolor="#FFFFFF"> </td> <td valign="bottom" bgcolor="#FFFFFF"> <div class="form-item"> <div class="form-item"><label for="color"></label><input type="text" id="color" name="color" value="#<%=(Layout_TXID.Fields.Item("TxColour").Value)%>" /></div><div id="picker"></div></td> <td width="60" bgcolor="#FFFFFF"> </td> </tr> <tr> <td bgcolor="#E5E5E5"> </td> <td bgcolor="#E5E5E5"> </td> <td> </td> <td><input type="submit" name="button" id="button" value="Edit"></td> <td width="60"> </td> </tr> </table></form> Link to comment Share on other sites More sharing options...
Ingolme Posted September 14, 2011 Share Posted September 14, 2011 I think the reason that your script isn't working is because it's loaded after the document has sent the "ready" command. This doesn't look like a great use for AJAX. I think you should use some scripting logic directly on the page instead of calling it with AJAX. Link to comment Share on other sites More sharing options...
ibrahimjan Posted September 14, 2011 Author Share Posted September 14, 2011 How can i get the script to work after the doc loaded?? any support is appreciated, I need to use AJAX because there are more ASP functions I removed from colour.asp page to stop confusion in my post. Link to comment Share on other sites More sharing options...
Ingolme Posted September 14, 2011 Share Posted September 14, 2011 Remove the document ready part and place this script at the end of the page instead. If it still doesn't work, then you might need to consider a different approach. <script type="text/javascript" charset="utf-8">$('#demo').hide();$('#picker').farbtastic('#color');</script> Oh, by the way, you can't include the <link> element in the document body even if it was loaded from an AJAX page. I hope your content doesn't also have <head> and <body> elements. Link to comment Share on other sites More sharing options...
ibrahimjan Posted September 14, 2011 Author Share Posted September 14, 2011 still no luck, I kept the links to the css and js at the top of the page and at the bottom of the page the rest of the js as suggested, any other ides worth trying to work with?? <script type="text/javascript" src="/js/jquery.js"></script><script type="text/javascript" src="/js/farbtastic.js"></script><link rel="stylesheet" href="/css/farbtastic.css" type="text/css" /> at the bottom of the page <script type="text/javascript" charset="utf-8">$('#demo').hide();$('#picker').farbtastic('#color');</script> Link to comment Share on other sites More sharing options...
dsonesuk Posted September 15, 2011 Share Posted September 15, 2011 change xmlhttp.send(); to xmlhttp.send(null); and see what happens Link to comment Share on other sites More sharing options...
ibrahimjan Posted September 15, 2011 Author Share Posted September 15, 2011 Did that but still not loading the colour picker js?? any other ideas I could try? Link to comment Share on other sites More sharing options...
Ingolme Posted September 15, 2011 Share Posted September 15, 2011 In my opinion, you should rethink the system. It's not common to just load a pile of HTML tags, CSS and scripts included, using AJAX. All the CSS links should be in your main document, and whatever you're loading should make use of it. The same goes for included scripts. So, to start off, these three lines should already be in your main document. <script type="text/javascript" src="/js/jquery.js"></script><script type="text/javascript" src="/js/farbtastic.js"></script><link rel="stylesheet" href="/css/farbtastic.css" type="text/css" /> Is there any particular reason why you can't just have a color picker on the page that's invisible and then load it when necessary? Link to comment Share on other sites More sharing options...
dsonesuk Posted September 15, 2011 Share Posted September 15, 2011 move the css, js links as ingolme suggested, but take the $('#demo').hide();$('#picker').farbtastic('#color'); and place it under document.getElementById("Ajax_menu").innerHTML=xmlhttp.responseText;so you have document.getElementById("Ajax_menu").innerHTML=xmlhttp.responseText;$('#demo').hide();$('#picker').farbtastic('#color'); Link to comment Share on other sites More sharing options...
ibrahimjan Posted September 15, 2011 Author Share Posted September 15, 2011 Oh you guys are good, finally its working like a charm, thank you all so much, Ingolme and dsonesuk. So in the future if I have any JS in a page that I want to call by AJAX, do I place the JS script in the AJAX call, on the main page, like we did in this case?? Link to comment Share on other sites More sharing options...
dsonesuk Posted September 15, 2011 Share Posted September 15, 2011 Not sure? the jquery run in colour.asp are run outside of your main page, so in theory they require <script type="text/javascript" src="/js/jquery.js"></script><script type="text/javascript" src="/js/farbtastic.js"></script><script type="text/javascript" charset="utf-8">$('#demo').hide();$('#picker').farbtastic('#color');</script> after the form to perform the jquery functions, and after this, the results would be sent back to main page, and this should work.I knew inserting the jquery code in the ajax code readystate if condition would work, as it is retrieving the result from colour.asp, THEN running the jquery, which has the js/jqury links now in the main page.remove $('#demo').hide();$('#picker').farbtastic('#color');from ajaxand try above, it should work also. Link to comment Share on other sites More sharing options...
ibrahimjan Posted September 15, 2011 Author Share Posted September 15, 2011 thank you, will try that also Link to comment Share on other sites More sharing options...
justsomeguy Posted September 15, 2011 Share Posted September 15, 2011 If you need this much data returned from the server, an easy way is to use JSON to send back different pieces of it. So one item in the JSON structure could be an array of HTML snippets to add, another item could be an array of CSS files to add, another one could be an array of Javascript files to add, and the response handler would need to look for the different parts and handle them differently, like creating link or script elements for the CSS and JS and adding them to the head, or putting the HTML in a specified container. Javascript really just gives you the basic tools, in most cases it's up to you to figure out how you can use those tools to accomplish what you need to do. Link to comment Share on other sites More sharing options...
ibrahimjan Posted September 15, 2011 Author Share Posted September 15, 2011 Thank you justsomeguy, I will need to do a bit of research in to JSON, it sounds good, I will try see how this unfolds. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.