JavaScript - How To Maintain Sortable Divs Indexes Persistancy On Browser Refreshing?

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'm pretty new to Javascript and just started with some OOP concepts, so this might be an obvious one and I apologize if the question is much longer than it should be...

Basically I am trying to create a reusable class object with several internal functions, that is completely abstracted, meaning the class object itself should never have to reference the global declarations or window object. This class should be aware of itself at any point in the execution of it's own functions, and that is what I'm having trouble with at the moment.

What I'm trying to do is create reusable javascript "Apps" for my HTML web application, where multiple instances can be instantiated and used independently from one another.

My main problem is "this" loses context in the Ajax callback and onclick handlers. I'm not sure how to persist the context of "this", or at least keep a reference to prototype instance itself.

Let's set up a simple class called "App" to demonstrate what I mean...

Code:

var myApp = new App("MyFirstApp");

function App(argName) {
    this.name = argName;
    this.GetDirectory("C:\Program Files");
}

App.prototype.GetDirectory = function(argPath) {
    // "this" equals the App object instance (good!), meaning this.name should equal "MyFirstApp"
    Ajax.GetDirectory(argPath, this.GetDirectoryCallback, this.GetDirectoryTimeout, this.GetDirectoryError);
}

App.prototype.GetDirectoryCallback = function(argFilePaths) {
    // "this" equals the "window" object (bad!), meaning this.name should equal a null reference
    // argFilePaths contains a string of file paths (delimited using ;) returned by the server
    var mFilePaths = split(argFilePaths, ";");
    // for each file path, add a div to the document body containing that file path, with an onclick handler
    for (var i in mFilePaths) {
        var mFilePath = mFilePaths[i];
        var mFilePathDiv = document.createElement("div");
        mFilePathDiv.innerHTML = mFilePath;
        mFilePathDiv.setAttribute("onclick", "javascript:this.FilePathDivClickHandler();return false;");
        document.getElementById("body").appendChild(mFilePathDiv);
    }
}

App.prototype.FilePathDivClickHandler = function() {
    // I need a reference to the App object instance here, but I'm not sure where to grab it...
    // what I want to do is call GetDirectory again, referencing the div's innerHTML which contains another file path, like this:
    this.GetDirectory(event.target.innerHTML);
}

The onclick handler using "this" is obviously not going to work because "this" is a reference to the "window" object which does not have a function called FilePathDivClickHandler(). So what I can do is nest the GetDirectoryCallback() function inside the GetDirectory() function so that GetDirectoryCallback() can reference the variables in the outer function (GetDirectory).

Code:

App.prototype.GetDirectory = function(argPath) {
    // "this" equals the App object instance (good!), meaning this.name should equal "MyFirstApp"
    // "this" will still lose context inside the callback, so we can set up a variable called "instance" that the callback can reference
    var instance = this;
    Ajax.GetDirectory(argPath, GetDirectoryCallback, GetDirectoryTimeout, GetDirectoryError);
    function GetDirectoryCallback(argFilePaths) {
        // "this" equals the window object (bad!), meaning this.name should equal a null reference
        // "instance" equals the App object instance (good!), meaning instance.name should equal "MyFirstApp"
        // argFilePaths contains a string of file paths (delimited using ;) returned by the server
        var mFilePaths = split(argFilePaths, ";");
        // for each file path, add a div to the document body containing that file path, with an onclick handler
        for (var i in mFilePaths) {
            var mFilePath = mFilePaths[i];
            var mFilePathDiv = document.createElement("div");
            mFilePathDiv.innerHTML = mFilePath;
            mFilePathDiv.setAttribute("onclick", "javascript:instance.FilePathDivClickHandler();return false;");
            document.getElementById("body").appendChild(mFilePathDiv);
        }
    }
}

Even though we have persisted the App object instance through the use of the "instance" variable in the outer function, the onclick event handler still does not work; when it fires, "instance" is an unknown object.

Would placing the FilePathDivClickHandler() function inside the GetDirectory() function, much like what was done with the callback, allow me to use "instance" correctly for the onclick handler?

I want a JS code for drag and drop sortable and editable tree list, similar below image.
tnx a lot

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?

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.

hers the site i am working onhttp://merucabs.com/cabvertise

as you can see on this page.
there are two main div(left,right)
when a user clicks a link on left div
accordingly an external page is loaded in the right div

problem is when you click a link in IE
the entire page is refreshed.
I don't want to refresh entire page.
i want to refresh the div (on the right) not the entire page.

How should i go about it

Please its urgent.

any help would be grateful.

Here's the link to script that i have used
http://www.dynamicdrive.com/dynamici...tent/index.htm

I am a music geek. I am also a Javascripter who doesn't know much, but enough to get around the language. Anyways, I wrote a script to construct chords to make writing music easier for me. The script works, it shows there are no errors, and it does what I want it to do, but the page keeps refreshing almost immediately after the Alert box goes away. I have no idea whats going on. I don't know if it's the JS or the HTML part of the page. If you have any ideas that would be great.

Code:

<head>
<script>

function calc()
{

var type, note, root, third, fifth, seven, ans;
var notess, notesb;

type=document.f1.type.value
note=document.f1.note.value*1

notess=["A","A#","B","C","C#","D","D#","E","F","F#","G","G#"]
notesb=["A","Bb","B","C","Db","D","Eb","E","F","Gb","G","Ab"]

if(type=="maj")
{

root=notess[note]
third=notess[(note+4)%12]
fifth=notess[(note+7)%12]
seven=notess[(note+11)%12]

ans=root+", "+third+", "+fifth+", "+seven;
alert(ans)

}

if(type=="min")
{

root=notess[note]
third=notess[(note+3)%12]
fifth=notess[(note+7)%12]
seven=notess[(note+11)%12]

ans=root+", "+third+", "+fifth+", "+seven;
alert(ans)

}

document.getElementById("here").innerHTML=ans

}

</script>
</head>
<body>

<h1>Chord Builder</h1><p>

<form name="f1">
Make a:<br>

<select name="note">
<option value="0">A<br>
<option value="1">A#/Bb<br>
<option value="2">B<br>
<option value="3" selected>C<br>
<option value="4">C#/Db<br>
<option value="5">D<br>
<option value="6">D#/E<br>
<option value="7">E<br>
<option value="8">F<br>
<option value="9">F#/Gb<br>
<option value="10">G<br>
<option value="11">G#/Ab<br>
</select>

<select name="type">
<option value="maj" selected>Major<br>
<option value="min">Minor<br>
</select>
<br>

<button onClick="calc()">Make my Chord!</button></br>

</form>

<span id="here">-chords will be here soon-</span>

<p>

</body>

hi there. i have a classic asp page that is using the winhttprequest object to get the contents of website from a different server. Then i modify the html i get to suit my needs.. save it to a file, and then finally, i display this stuff in an IFRAME.

(i wrapped a div tag around the iframe so technically, i'm doing something like: "divtabframe.innerHTML = '<IFRAME SRC='myserver/somepage.html'></IFRAME>)

My problem is that when i refresh the main page, i want the iframe to also display the latest data. It does get the latest data from the external site and its saved in "somepage.html". But the iframe isn't updated unless i explicitly right-click inside the frame and manually select refresh.
I have added a <meta http-equiv="refresh" content="30"> line to make it auto refresh on it's own.
But the users find it annoying that the page refreshes while they're working on it. They prefer to have their own button that will refresh both the main page that gets the data, and the iframe to read the new file.

I tried to use
document.getElementById(FrameID).contentDocument.location.reload(true);

in various spots but it's not happy. i keep getting an error message that the object is null or doesn't exist.
I also tried using contentWindow instead of contentDocument. made no difference.

Any ideas?

Hi,
Im not sure if im going about this the right way but what I'm trying to achieve is to have my webpage seperated into two main div's.
The first div contains a media player so it cant be refreshed or the media stops.
The second div is used to view content.
I've used innerHTML to change the content of the second div from links in the first.
The problem is the URL displayed doesn't reflect the change in content of the second div.
I want to be able to load content into the second div using innerHTML while changing the URL so people can link directly to that content.

Any help or alternative ideas are greatly apprectiated.
Thanks.

I'm using this code to force a PHP form to redirect. I already inserted a header for PHP and for whatever reason it's not working.

This code works like a dream in Firefox, but it continuously loops in IE and makes it impossible to enter anything into the PHP form

<body onload="javascript: self.location.href = 'index.html';">
</body>

Does anyone know how to make this code not refresh IE literally every second?

Thanks.

My URL is: http://localhost/testproject/product.html#catId=155

I want to URL: http://localhost/testproject/product.html without refreshing the page.

Is this possible using javascript/jquery or not ?

I embedded the following into my blog;

Code:

<br><script language="javascript" src="http://www.quotedb.com/quote/quote.php?action=random_quote&=&=&"></script>
<br>

It works fine, but I'm trying to find a way to refresh only the script on my blog, instead of having to reload the entire page. Coding a refresh button, for instance. How would I go about doing this?

Thank you in advance.

While these questions have probably been asked before, separately, I'd like to know how to put them together.

What I want to do, is create a link, that goes to an url that I decide, after which, the page goes back to the previous page and refreshes.

It would be ideal, if that could be done with AJAX, but that's probably asking too much. Especially if I want to use it for wordpress.

Hello!

I have been designing a schedule website which will be displayed on several computers throughout the building, I would like to be able to edit the JS during the day but I do not want to be going all through the building refreshing every computer to make sure it has the latest JS version. I also do not want use the meta HTML tag to refresh because that is too noticeable with the images reloading. Basically I would like to only refresh the JS file. I found this link, but it has a button which defeats the purpose.

Any way of doing this without the button?

FYI, I have the javascript setTimeout("driver()",1000); already so that the clock stays up to date. Not sure if that will make things easier or more complicated...

EDIT: not sure why the ICODE tags are not working

EDIT 2: Forgot the website! http://www.philnicholas.com/2009/05/...ing-your-page/