|
JavaScript - Tutorial For Sortable Table With Ajax,js?
Hello!
Im very limited in my skills with html/JS/CSS and can only understand the concept of the varius coding but ot much more than that. Now i really need a sortable table like the one you can find on this site: Jämför & Hitta Billiga Små Lån Has anyone come across a tutorial or similar on how to build stuff like this? Or have any other hints for me to get started with? Any help is much appriciated Reply With Quote 12-25-2014, 06:27 PM #2 Wieli View Profile View Forum Posts New to the CF scene Join Date Dec 2014 Posts 5 Thanks 5 Thanked 0 Times in 0 Posts Hmm, cant find the option to clean the link, wasnt supposed to have a title like that. Reply With Quote 12-26-2014, 06:08 AM #3 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts No problem, the post worked. I don't have time tonight, but will try to show you this tomorrow. Question: How do you *create* the <table>?? From PHP? From AJAX? Similar TutorialsI'm trying to click on a link and via Ajax, get a table row to display updated data. I have it all working except it displays at the top of the table instead of inside the table at the desired row. For now, I'm just trying to add a simple table row using: Code: <TR><TD>test</TD></TR> Here is my table code: Code: <TABLE> <TR><TD>one</TD></TR> <TR><TD>two</TD></TR> <span id="id_row3"></span> </TABLE> So when I click on my link to execute the ajax code, I expect to see a table row inserted with the text "four" but "four" displays at the top of the web page, above the table itself. How can I get the new row to insert at the id_row3 tag? Thanks for any help... hello, can anyone help me with a javascript-php-ajax problem? I have created a table with checkboxes and whenever an ajax function is called to refresh, the checkboxes that were highlighted and checked get reset, here is my javascript for the check function: $(document).ready(function() { $("#checkall").live('click',function(event){ $('input:checkbox:not(#checkall)').attr('checked',this.checked); //To Highlight if ($(this).attr("checked") == true) { //$(this).parents('table:eq(0)').find('tr:not(#chkrow)').css("background-color","#FF3700"); $("#policy").find('tr:not(#chkrow)').css("background-color","#FC9A01"); } else { //$(this).parents('table:eq(0)').find('tr:not(#chkrow)').css("background-color","#fff"); $("#policy").find('tr:not(#chkrow)').css("background-color","#FFF"); $("#policy").find('tr.alt:not(#chkrow)').css("background-color","#EAF2D3"); } }); $('input:checkbox:not(#checkall)').live('click',function(event) { if($("#checkall").attr('checked') == true && this.checked == false) { $("#checkall").attr('checked',false); $(this).closest('tr').css("background-color","#ffffff"); } if(this.checked == true) { $(this).closest('tr').css("background-color","#FC9A01"); CheckSelectAll(); } if(this.checked == false) { $(this).closest('tr').css("background-color","#ffffff"); $(this).closest('tr.alt').css("background-color","#EAF2D3"); } }); function CheckSelectAll() { var flag = true; $('input:checkbox:not(#checkall)').each(function() { if(this.checked == false) flag = false; }); $("#checkall").attr('checked',flag); } }); Hi All, Here is my page in question: http://functionfirstfurniture.com/gallery/ If you click on a thumbnail BEFORE sorting any of the images, it appears in a pop-up lightbox. However, if you click AFTER sorting, the lightbox doesn't work and it just loads the image file in the browser window. What needs to happen so that the image will work as a lightbox all the time? I'm not very good at javascript and just used two script demos I found online, so I'm not even sure how to start looking at what is going wrong. Any help would be greatly appreciated. Thanks! http://74.220.207.105/~torasmos/shiurim/testsort.html this works in firefox but in ie I get an error Webpage error details Message: 'this.className' is null or not an object Line: 94 Char: 11 Code: 0 URI: http://74.220.207.105/~torasmos/shiurim/sorttable.js I am using the script from http://www.kryogenix.org/code/browser/sorttable/ does anyone have any idea what the issue is? I want a JS code for drag and drop sortable and editable tree list, similar below image. tnx a lot Hi guys, I am using jquery ui to have two connected sortable lists. The first list is available numbers, and the second is selected numbers. Everything with the jquery is working fine. The problem i am having is when i try to get the contents of the selected numbers box, it is empty, even though the sortables are or were dragged to that list. I tried using this... Code: var response = $("#selected_numbers_box").val();
alert( response );
and I also tried this.. Code: var response = $("#selected_numbers_box").html();
alert( response );
both are empty. What i am trying to do is retrieve the values of the new list "Selected numbers Box". Any suggestions? My code was taken directly from the jquery ui tutorial. Thanks in advance. Hello Everyone, I am facing problem with divs indexes persistancy on sorting when browser refreshing. checkout this fiddle once and help me. Sortable-arindam - JSFiddle Here how can i maintain the divs persistancy on sorting when page refreshing. Thanks in Advance Satish Chandragiri Ok, I wish to break this down piece by piece, let me see if I am understanding what I have done so far please, let me itemize my questions for uniformity and will create my very own tutorial out of these questions and answers for future use so I would appreciate any and every answer to my questions below: 1] Which scripts or parts of it should be placed within the HEAD and BODY? How will I know which scripts go into the HEAD and which should go into the BODY as I am seeing some parts in the HEAD and some parts in the BODY? 2] If I want 3 things to happen and create 3 separate functions, are those 3 functions supposed to be listed in the order of how I want them to happen or does it not matter, for example, I want to first [a] create an ALERT then [b] ask for user to input his name into a form then if the user does it [c] another alert responds to the user. Let me label the 3 functions below as a, b and c. <script type="text/javascript"> [a] alert ('Hello, I am your pet rock.'); [b] function touchrock () { var username = prompt ("What is your name?", "Enter your name here."); [c] if (username) { alert ("It is good to meet you, " + username + "."); document.getElementById ("rockImg").src = "rock_happy.png"; } } </script> NOW, what if when creating the function and 2 Alerts above I were to list them in reverse or mixed order such as: [b] function touchrock () { var username = prompt ("What is your name?", "Enter your name here."); [c] if (username) { alert ("It is good to meet you, " + username + "."); document.getElementById ("rockImg").src = "rock_happy.png"; [a] alert ('Hello, I am your pet rock.'); I am not asking whether the above would work or not but rather would this still be proper coding procedure or does it not matter? I'm looking for a Javascript tutorial. I already have a good base in HTML & CSS. I'm trying to make a widget to display updated NCAA Football Team Stats. Kind Regards, - Mat P. Hi, I am hoping I just need to be pointed in the right direction with this. I have Page1. When Page1 body onloads it uses Ajax to call PartA Within PartA I have a message board so members can write messages which will be sent to my database in PartA[1] and immediately posted for view on to PartA[2]. As I want to have my request to the server updating regularly I want to have PartA[2] on a timed loop to refresh - I do not need the content of PartA[1] to refresh. So the order of events would look like this: Page1 | onload call | v PartA / \ V V PartA[1] PartA[2] (loads once) (constantly refreshes) What I am not sure about is that I have <body> and <head> attributes in Page1 only. I have already used my body onload to call PartA (and can't use it to call PartA[2] before PartA has loaded anyway). I do not want the user to have to click a button or do anything to call up PartA[2]. So my question is how would I get PartA[2] to automatically load within PartA? I hope I have made this clear, but if I haven't let me know and I will try again. A while back I downloaded a prepackaged script for a slideshow. Now that I've learned a bit more about javascript, maybe somebody can direct me to a better free alternative that I can work on that is similar. This one has a link on the bottom to its creator, and seems to load quite slow. Here's a page with the script: http://www.mergecreate.com/paintings.html Hello guys I've made javascript tutorial for those who want to learn more here's the tutorial on my front page : http://www.youtube.com/user/morplug or direct link : http://www.youtube.com/watch?v=MikXCLWkSPs I'll be happy to continue making more tutorials , To show me you want more please Like the video and subscribe if you want! regards , Mor. I am studying the javascript. I got following codes from json2.js but do not understand syntax of them. if (!this.JSON) { this.JSON = {}; } (function () { ... }()); For 2nd part, why there is () outsider function? and why these is () after function? Thanks a lot. It should be this one: http://www.codeschool.com/courses/jq...r-first-flight Great class! they run you through the basics and have you do excercises on the site itself at the end of each chapter. when you submit the code it checks the code and gives you hints if somethings wrong. Very through and easy to understand. Seriously folks, if your just starting or even if you think you know everything, you still might want to watch some of this. ok. im done. no this isnt spam I dont work for the company, I jjust really enjoyed it. i'm using a JavaScript typing tutorial....here is my code [CODE] <script type="text/javascript"> //<![CDATA[ var garray = new Array(); var garrayIndex = -1; var gtext = ""; var gindex = 0; var goldPressed = 0; //previous pressed key code var goldTarget = 0; //previous target key code var gtarget = 0; var gpressed = 0; var ggood = 0; var gtotal = 0; var gtime = 0; var gkeytime = 0; function setup() { setEvents(); //change this array to suit your needs but note that indices //must ascend by 1 from 0: garray[0]="foo"; garray[1]="bar";... garray[0] = "a s d f s d f f s d as sd ad fs ds sad af sa fa dafa sda dad das afa sfd add sasd df sf saf dds fd ads safd fsd fas sas dafs as fad"; //more similar lines can easily be added above, dont forget to get the index right! garrayIndex = -1; next(); } function setPatternInit() { //#b note: once we did this using innerHTML but this caused //a leakage of handles in ie var pat = document.getElementById("pattern"); for(; { if (pat.hasChildNodes()) { pat.removeChild(pat.lastChild); } else break; } var cname = "done"; for (j=0; j<gtext.length; j++) { var ch = gtext.charAt(j); if (j>gindex) cname = "future"; else if (j==gindex) cname = "todo"; var kid = document.createElement("span"); kid.className = cname; var txt = document.createTextNode(ch); kid.appendChild(txt); //#b innertext doesnt work on firefox pat.appendChild(kid); } } function setPattern() { var pat = document.getElementById("pattern"); var kids = pat.childNodes; var cname = "done"; for (j=0; j<gtext.length; j++) { if (j>gindex) cname = "future"; else if (j==gindex) cname = "todo"; var kid = kids[j]; kid.className = cname; } } function mapToBoard(code) { if ((code>=97)&&(code<=108)) return (code-32); if ((code>=110)&&(code<=122)) return (code-32); if ((code>=65)&&(code<=90)) return code; if ((code>=48)&&(code<=57)) return code; if ((code==32)) return code; if ((code==44)||(code==46)||(code==47)||(code==59)) return code; return 0; //not on our board picture } function setBoard() { var letter; var elt; var c; var s; if (goldTarget!=0) { c = mapToBoard(goldTarget); if (c!=0) { letter = "code"+c; elt = document.getElementById(letter); s = "silent"; elt.className = s; } } if (goldPressed!=0) { c = mapToBoard(goldPressed); if (c!=0) { letter = "code"+c; elt = document.getElementById(letter); s = "silent"; elt.className = s; } } if (gtarget!=0) { c = mapToBoard(gtarget); if (c!=0) { letter = "code"+c; elt = document.getElementById(letter); s = "target"; elt.className = s; } } if (gpressed!=0) { c = mapToBoard(gpressed); if (c!=0) { letter = "code"+c; elt = document.getElementById(letter); s = "pressed"; elt.className = s; } } } function nextPattern() { goldTarget = gtarget; goldPressed = gpressed; if (++garrayIndex == garray.length) garrayIndex = 0; gtext = garray[0]; gindex = 0; gpressed = 0; setPrompt(); } function prevPattern() { goldTarget = gtarget; goldPressed = gpressed; if (--garrayIndex < 0) garrayIndex = garray.length - 1; gtext = garray[garrayIndex]; gindex = 0; gpressed = 0; setPrompt(); } function next() { nextPattern(); setPatternInit(); setBoard(); } function prev() { prevPattern(); setPatternInit(); setBoard(); } function skip(e) { next(); return false; } function back(e) { prev(); return false; } function setEcho(c, isOK) { var s; if (c<' ') c=' '; var s = "["+c+"]"; if (!isOK) s += " ..OOPS!" var elt = document.getElementById("echo"); var txt = document.createTextNode(s); //#b if (elt.hasChildNodes()) { elt.replaceChild(txt, elt.lastChild); } else elt.appendChild(txt); } function setPrompt() { var ch = gtext.charAt(gindex); gtarget = ch.charCodeAt(0); } function adjustStatistics(ch) { return; //could count errors by character } function updateSpeed(ok) { var t = (new Date()).getTime(); var dt = (t-gtime); gtime = t; if (dt > 5000) return; //ignore sleepy user gkeytime += dt; var s = (0.5+ggood*60*200/gkeytime).toFixed(0) + ""; var elt = document.getElementById("speed"); var txt = document.createTextNode(s); //#b if (elt.hasChildNodes()) { elt.replaceChild(txt, elt.lastChild); } else elt.appendChild(txt); } function updateScore(ok) { if (ok) ggood++; gtotal++; updateSpeed(ok) var s = ggood.toFixed(0) + ""; var elt = document.getElementById("count"); var txt = document.createTextNode(s); //#b if (elt.hasChildNodes()) { elt.replaceChild(txt, elt.lastChild); } else elt.appendChild(txt); s = (gtotal-ggood).toFixed(0) + ""; elt = document.getElementById("accuracy"); txt = document.createTextNode(s); //#b if (elt.hasChildNodes()) { elt.replaceChild(txt, elt.lastChild); } else elt.appendChild(txt); var s = (gkeytime/1000).toFixed(2) + " s"; var elt = document.getElementById("time"); var txt = document.createTextNode(s); //#b if (elt.hasChildNodes()) { elt.replaceChild(txt, elt.lastChild); } else elt.appendChild(txt); } function reset(e) { window.location.reload(); } function debug() { //#b to use, set body onLoad="debug()" instead of "setup()" in html //document.onkeydown=debugKey; //#b document.onkeypress=debugKey; } function debugKey(evt) { //#b var e = (window.event) ? window.event : evt; //#b var k = (e.which)? e.which : e.keyCode; var f = filterKeyCode(k); var s = "k="+k+",f="+f; alert(s); return false; } function setEvents() { //#b document.onkeydown=down; //#b document.onkeypress=press; (document.getElementById('skip')).onmousedown=skip; (document.getElementById('back')).onmousedown=back; (document.getElementById('reset')).onmousedown=reset; } function cleanup() { //pointless, really document.onkeydown=null; //#b document.onkeypress=null; (document.getElementById('skip')).onmousedown=null; (document.getElementById('back')).onmousedown=null; (document.getElementById('reset')).onmousedown=null; } function filterKeyCode(code) { //from key down (0 to ignore) //note: user must have num lock set if they want to use keypad numbers if ((code>=65)&&(code<=90)) return code; //alpha if ((code>=48)&&(code<=57)) return code; //numberic if (code==32) return code; //blank if ((code>=96)&&(code<=105)) return code; //number pad digits if ((code==13)||(code==16)) return code; //enter, shift if ((code>=106)&&(code<=111)) return code; //number pad operators if ((code>=186)&&(code<=192)) return code; //punctuation if ((code>=219)&&(code<=222)) return code; //punctuation return 0; } function filterCode(code) { //from key press as ascii char code (0 to ignore) if ((code==13)||(code==16)) return code; //enter and shift are allowed if (code<32) return 0; if (code>=127) return 0; return code; } function capsLockFilter(e, pressed) { //#b many problems making this cross browser! //#b e.modifiers known only on early mozilla (which does not know standard e.shiftkey)? var shifted = e.shiftKey || (e.modifiers && (e.modifiers & Event.SHIFT_MASK)); //#b var locked = (((pressed > 64) && (pressed < 91) && (!shifted)) || ((pressed > 96) && (pressed < 123) && (shifted))); if (locked) alert("caps lock!"); } function down(evt) { //#b var e = (window.event) ? window.event : evt; //#b var rawcode = (e.which)? e.which : e.keyCode; pressed = filterKeyCode(rawcode); if (pressed > 0) return true; if (typeof(e.cancelBubble)!="undefined") e.cancelBubble = true; if (typeof(e.stopPropagation)!="undefined") e.stopPropagation(); return false; //#b nuisance keys - backspace etc on ie (no effect for capslock!!) } function press(evt) { //#b //#b should work in ie, firefox, safari(hopefully), opera(hopefully) var e = (window.event) ? window.event : evt; //#b var pressed = 0; var wc = -1; var kc = -1; var cc = -1; if (typeof(e.keyCode)!="undefined") kc = e.keyCode; //ie if (typeof(e.charCode)!="undefined") cc = e.charCode; //firefox if (typeof(e.which)!="undefined") wc = e.which; //old mozilla if ((kc>=0)&&(cc>=0)) { //firefox pressed = cc; } else if (kc>=0) pressed = kc; //ie else if (wc>=0) pressed = wc; //old mozilla //alert("pressed="+pressed+",kc="+kc+",cc="+cc+",wc="+wc); pressed = filterCode(pressed); if (pressed==0) { if (kc==13) return skip(); //#b firefox else return false; } if (pressed==13) return skip(); //#b ie capsLockFilter(e, pressed); //hmm var c = String.fromCharCode(pressed); //ie from ascii code var ch = gtext.charAt(gindex); var ok = (c==ch); goldPressed = gpressed; gpressed = pressed; goldTarget = gtarget; if (ok) { gindex++; if (gindex==gtext.length) { if (gtotal-ggood <= 5 && 0.5+ggood*60*200/gkeytime >= 20) { alert('Good work! You had fewer than 5 errors and typed faster than 20 WPM! Now try the next exercise!'); setPatternInit(); } else if (gtotal-ggood > 5 && 0.5+ggood*60*200/gkeytime >= 20){ alert('Good speed! You were over 20 WPM but have more than five errors! Slow down a bit for accuracy.') setPatternInit(); } else if (gtotal-ggood <= 5 && 0.5+ggood*60*200/gkeytime < 20){ alert('Good accuracy! You had fewer than 5 errors, now try for 20 WPM.') setPatternInit(); } else alert ('Focus on accuracy first, then go for speed!'); setPatternInit(); } else setPattern(); gpressed = 0; setPrompt(); setEcho(c, true); updateScore(true); } else { setEcho(c, false); updateScore(false); setPattern() } setBoard(); return false; } //</XMLCDATA> </script> [CODE] This is my HTML Code : [CODE] <body onload="setup()" onunload="cleanup()"> <div id="container1"> <div id="container3"> <div id="body"> <div id="pattern" class="big"> </div> <div id="prompt" class="prompt"> </div> <div id="board" class="board"> <div id="row0" class="row0"> <span id="code49">1</span> <span id="code50">2</span> <span id="code51">3</span> <span id="code52">4</span> <span id="code53" style="margin-left:-5px;">5</span> <span id="code54">6</span> <span id="code55">7</span> <span id="code56">8</span> <span id="code57">9</span> <span id="code48">0</span> </div> <div id="row1" class="row1"> <span id="code81">Q</span> <span id="code87">W</span> <span id="code69">E</span> <span id="code82" style="font-weight:bold">R</span> <span id="code84">T</span> <span id="code89">Y</span> <span id="code85" style="margin-left: -2px;">U</span> <span id="code73">I</span> <span id="code79">O</span> <span id="code80">P</span> </div> <div id="row2" class="row2"> <span id="code65">A</span> <span id="code83">S</span> <span id="code68">D</span> <span id="code70" style="font-weight:bold;">F</span> <span id="code71" style="margin: 0 0 0 -5px;">G</span> <span id="code72">H</span> <span id="code74" style="font-weight:bold;">J</span> <span id="code75">K</span> <span id="code76">L</span> <span id="code59">;</span> </div> <div id="row3" class="row3"> <span id="code90">Z</span> <span id="code88">X</span> <span id="code67">C</span> <span id="code86" style="font-weight:bold">V</span> <span id="code66">B</span> <span id="code78">N</span> <span id="code77" style="font-weight:bold">M</span> <span id="code44">,</span> <span id="code46">.</span> </div> <div id="row4" class="row4"> <span id="code32">[SPACE]</span> </div> <div id="scores"> <div class="count">Characters: <span id="count"></span> </div> <div class="accuracy">Errors: <span id="accuracy"></span> </div> <div class="speed">WPM: <span id="speed"></span> </div> <div class="time">Time: <span id="time"></span> </div> </div> <div align="center"> <button id="reset" class="button123" name="reset" align="center">Restart Exercise</button> </div> </div> <div id="echo" class="echo" style="display:none;"> [] </div> <div style="display:none;"> <button id="skip" class="button123" name="skip">skip</button> to next line ("enter" key is shortcut) </div> <div style="display:none;"> <button id="back" class="button123" name="back">back</button> to previous line </div> </div> </div> [CODE] Can any one help me to input the speed, accuracy and count to a database. I can't able to take the value because its JavaScript.... Hi, i wonder if anybody got a link to a tutorial for a javascript yahtzee game?
Hello, I used to own a book that explained an approach to coding, but I lost the book, cannot remember the author or title, plus I have only recently returned to coding and I have half forgotten the method the book taught It was brilliant as it used a system of non-language specific psuedo code in order to structure the solution to coding problems before actually coding in the language of choice Before moving on to JavaScript, I used to code Lingo/Director projects. Before finding this book, I used to struggle when attempting intermediate+ problems as I found it difficult to organise a clear approach before coding, so I just used to dive in there (which is bad). After finding the book, I found it quite easy to create a psudo code solution to most coding problems then, using this structured psuedo code as a guide, it was quite simple to code the structured psuedo code solution in the chosen language I have tried Amazon etc and although they have some books on structured programming, they are not the book I had and I get the sense that what they mean by structured programming is different to what the book I had actually taught I was hoping that someone on this forum might have used the same book, or knows what I mean and knows of a book or website that explains structured programming techniques It would be a great help to me if I could find this information again and I think it would be of great benefit to others on here - especially beginner javascripters like myself Thank you I need some help with some javascript I am trying to put on an IF forum. http://s7.invisionfree.com/AJAXTEST/index.php At the very top, you will see a link called "on this link". It is an ajax code. If you click on it, a blank alert box comes up. However, if you go he http://commx.info/will/test.html and click on the same link, the alert box has the text I am looking for. It uses the exact same code, so I can't figure out why it works on a plain page and not on an IF forum. Does anyone have any ideas? The code is Code: <html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"><script>
function callback(serverData, serverStatus) {
alert(serverData);
}
function ajaxRequest() {
var AJAX = null;
if (window.XMLHttpRequest) {
AJAX=new XMLHttpRequest();
} else {
AJAX=new ActiveXObject("Microsoft.XMLHTTP");
}
if (AJAX==null) {
alert("Your browser doesn't support AJAX.");
return false
}
AJAX.onreadystatechange = function() {
if (AJAX.readyState==4 || AJAX.readyState=="complete") {
callback(AJAX.responseText, AJAX.status);
}
}
AJAX.open("GET",'http://commx.info/accounts/codes/shout/ipb13/getChatData.php?lastID=0', true);
AJAX.send(null);
}
</script>
</head><body><a href="javascript:ajaxRequest()">on this link</a></body></html>
hi; This is my first post and am abit stuck. I used JQuery AJAX to get data from a different page and show it in my div. This all works fine but now i want the page collected by AJAX to execute a Javascript function which is in the page which request the AJAX page. I have this so far but its not working. This is in the AJAX-ed page. Code: <a href="#" onClick="change_postcode(prompt('Please Enter Your Postcode', 'SW10')");
)">SW10</a>
And the page which requested the AJAX page. Code: <script type="text/javascript">
function change_postcode(postcode){
$('#view8').html('<p><img src="http://www.MySite.com/images/loading.gif"/><br />Loading! Please Wait...</p>');
$('#view8').load("http://www.mywebsite.com/include.php?inc=Events&when=&postcode="+postcode);
}</script>
I though about using top but that didn't work. Code: <a href="#" onClick="top.change_postcode(prompt('Please Enter Your Postcode', 'SW10')");
)">SW10</a>
How can i get my AJAX page to execute a Javascript function which is in the page which contains the the AJAX page. Thankyou all for reading my post Paul P.S Am very sorry for my way with words. |
|||||||