CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: error $this is not defined  (Read 164 times)

durangod

  • Sr. Member
  • ****
  • Posts: 364
  • Karma: +5/-0
  • Weebles Wobble - but they dont fall down!
error $this is not defined
« on: 20 Aug 2023, 05:49:05 am »
Hi, 

on my side by side multiple select i am getting this error

Code: [Select]
    blog.php:453 Uncaught ReferenceError: $this is not defined
    at HTMLOptionElement.<anonymous> (blog.php:453:10)
    at Function.each (jquery-3.7.0.min.js:2:3129)
    at ce.fn.init.each (jquery-3.7.0.min.js:2:1594)
    at HTMLAnchorElement.<anonymous> (blog.php:450:40)
    at HTMLAnchorElement.dispatch (jquery-3.7.0.min.js:2:39997)
    at v.handle (jquery-3.7.0.min.js:2:37968)


the html
Code: [Select]
<div id="leftsel">
                  <div class="sel_wrap">
                   <select name="user_noblock" id="user_noblock" multiple>
                    <option val="1">Jeff</option>
                    <option val="2">Nancy</option>
                    <option val="3">Robert</option>   
                    <option val="4">Tracy</option>   
                   </select>   
                   <a href="javascript:void(0);" id="remove_block">Move > To Block</a>
                 </div> <!-- sel_wrap  -->
                <div id="rightsel">
                  <select name="user_blocklist" id="user_blocklist" multiple>
                  </select> 
                  <a href="javascript:void(0)" id="block_user">Move < Left Unblock</a>
               
  </div> <!-- leftsel -->


and the js
Code: [Select]
document.addEventListener("DOMContentLoaded", function(event)
{
   
 
$('#user_noblock').click(function() {
    $('#user_noblock option:selected').each(function(el)
     {
         
       $($this.appendTo('#user_blocklist'));
     });
});


$('#user_blocklist').click(function() {
    $('#user_blocklist option:selected').each(function(el)
     {
         
       $($this.appendTo('#user_noblock'));
     }); 
});


}); //close listener   

and the css

Code: [Select]
#leftsel {
    height: 100%;
    display: flex;   
    align-items: center;
    justify-content: center;
}

#rightsel {
    height: 100%;
    align-items: center;
    justify-content: center;
    width: 50%;
}


.sel_wrap {
    width: 12.5em;
    float: left;
    margin-right: 1.25em;
}

#block_user,
#remove_block {
    text-align: center;
    background-color: #eee;
    color: #000000;
font-size: 0.75em;
}

#block_user,
#remove_block {
    padding-left: 0.625em;
    padding-right: 0.625em;
}


#block_user a,
#remove_block a {
    text-decoration: none;
    color: #000000;
}


#block_user a:hover,
#block_user a:focus,
#remove_block a:hover,
#remove_block a:focus {
    font-weight: bold;
    font-size: 1em;
}




select#user_blocklist,
select#user_noblock {
    width: 100%;
    padding: 0.3125em;
}


#user_blocklist,
#user_noblock option {
    padding: 0.015em;
}


#userset:after,
#sel_wrap:after {
    content: "";
    display: table;
    clear: both;
}




« Last Edit: 20 Aug 2023, 09:17:31 am by durangod »

durangod

  • Sr. Member
  • ****
  • Posts: 364
  • Karma: +5/-0
  • Weebles Wobble - but they dont fall down!
Re: error $this is not defined
« Reply #1 on: 20 Aug 2023, 06:12:00 am »
I converted the js to this to get rid of jquery, but now i get no error but names will not move


Code: [Select]
document.addEventListener("DOMContentLoaded", function(event)
{
   
var rblk = document.getElementById('user_noblock');
var blku = document.getElementById('user_blocklist');
   
 
rblk.click(function() {
    rblk.option.selected.each(function(el)
     {
       rblk.appendTo(blku);
     });
});


blku.click(function() {
    blku.option.selected.each(function(el)
     {
         
       blku.appendTo(rblk);
     }); 
});


}); //close listener   



here is another version , i  shortened it up but still same problem, no errors, but wont move name

Code: [Select]
   var rblk = document.getElementById('user_noblock').addEventListener('change', (event) => {
        rblk.appendTo(blku.event.target.value);
    });
   
    var blku = document.getElementById('user_blocklist').addEventListener('change', (event) => {
        blku.appendTo(rblk.event.target.value);
    });



« Last Edit: 20 Aug 2023, 09:18:40 am by durangod »

durangod

  • Sr. Member
  • ****
  • Posts: 364
  • Karma: +5/-0
  • Weebles Wobble - but they dont fall down!
Re: error $this is not defined
« Reply #2 on: 20 Aug 2023, 06:49:23 am »
Im so freaken dumb  its "this"not "$this"....  lmao  what a moron i am....   lol crazy crazy

But that didnt help much, it still is not moving the names.....


For some reason i remember something that DS told me one time.  That i had to create the option so i managed to get the names moving back and forth but now i need to remove the names from the old box

here is how i did the moving part

Code: [Select]
  function moveUserToOtherBox(selectid,value)
    {
       
       var usr = text_clean(value);
       var sid = text_clean(selectid);
       var elmt = document.getElementById(sid);
       var opt = document.createElement("option");
       
       
       opt.text = usr;
       opt.value = usr;
       elmt.appendChild(opt);
       
       return true;
       
    }//close function blockUser


now eventually how this will work, and i could be doing this all wrong.    But
the side with the names will be a direct feed from the user names in the database, then when the user
selects a name and moves it to the blocklist side of the selects (the right side)   then i will have to convert the names to the user id so i can add the block to the database table.  That way that id is blocked by that user.

as far as the user side of the select (left side) i dont know yet how i am going to hande the fact that the user will still exist in that list even though they have been blocked.   Maybe show them selected i dont know. 

But i do know that when they are unblocked they need to be removed from the right side so that is what i am working on now.... trying to figure that out.

I dont want duplicates on either side. I dont know if this is the best way to process this or not. I thought it would be easy, user selects name from list and then convert that name to id and store it in the database table. If this is not the best way or i dont need to be using a select element please let me know.

Thanks :)
« Last Edit: 20 Aug 2023, 10:40:23 am by durangod »

durangod

  • Sr. Member
  • ****
  • Posts: 364
  • Karma: +5/-0
  • Weebles Wobble - but they dont fall down!
Re: error $this is not defined
« Reply #3 on: 20 Aug 2023, 12:01:25 pm »
woooo hooo i got it.. the only css i changed was that when i moved the name the right box expanded alittle and moved the radio buttons and text input fields to wrap.

also i dont even need the buttons because it moves when you click the name..

Code: [Select]
#rightcol {
    float: right;
    width: 45%;
    margin-left: 2em;
}​


now for the golden js to this ordeal.... works wonderfully


Code: [Select]
function moveUserToOtherBox(selectid,value)
    {
       
       var usr = text_clean(value); //user name
       var sid = text_clean(selectid); //input id
     
       /* they clicked a name in the left select to block it */
       if(sid == "user_blocklist")
       {
         
         var elmt = document.getElementById("user_blocklist");
         
         var opt = document.createElement("option"); 
         
         opt.text = usr;
         opt.value = usr;
         elmt.appendChild(opt);
     
        return true;
       
       }
     
     
       /* they clicked a name in the right box to remove the blocked user */
       if(sid == "user_noblock")
       {
         
         var elmt = document.getElementById("user_blocklist"); 
         
         for(var i=0; i < elmt.length; i++)
         {
           
           if(elmt.options[i].value == usr)
           {
             elmt.remove(usr); 
           }
           
         }//close for
     
       
         return true;
       
       }// close if sid
 
  return false;   
       
 }//close function moveUserToOtherBox  ​


and now i can sleep.... :)

durangod

  • Sr. Member
  • ****
  • Posts: 364
  • Karma: +5/-0
  • Weebles Wobble - but they dont fall down!
Re: error $this is not defined
« Reply #4 on: 21 Aug 2023, 03:26:34 am »
I ended up scrapping the idea.  Someone that is waiting for this software to be released has 50,000 members on his old software and he told me that scrolling down a tiny select list like that would be misserable.

so i went with two text inputs, one to block user, one to unblock user, and the a div box to show current block list.  Oh well i guess that is how we learn by mistakes and thinking eye candy instead of workability.  At least i learned alot in the process.

 

SMF spam blocked by CleanTalk

Advertisement