我的jQuery CSS不起作用

Question

So I created this website thing where if you press on a certain div with an onclick event processing a chat_generate function. This funciton inserts, into a specific .open_div, the html for the chat based on the id of the chat_generate() funtion based on whats in the onclick of the start div and takes chat data from a mysql db(has nothing to do with the problem). When the html has been successfully inserted then some other functions are triggered such as the extra css values through jquery which do not work. Here is the code:

<link rel="stylesheet" type="text/css" href="/Log/home/styles/chat.css">

The above line of code refers to a css file solely for the chat styling.

<button class="chat_test_start_button" onclick="chat_generate(1)">Button</button>
<div class='open_chat'></div>
<div class='open_chat'></div>
<div class='open_chat'></div>

The main HTML above.

The chat generate function which does its designated job:

  function chat_generate(chat_id) {

  var id = chat_id.toString();
  var check_user_in = "#chat_"+id;
  if($(check_user_in).length == 0) {
          var open ="";
                  var xmlhttp = new XMLHttpRequest();

                  xmlhttp.onreadystatechange = function() {
                      if (this.readyState == 4 && this.status == 200) {
                          var myObj = JSON.parse(this.responseText);
                          /*var text = "Welcome to chat: "+myObj[1];*/
                          open = [
                            "<div class='full_wrap' id='chat_"+chat_id+"'>   <div class='force-overflow'></div>    <div id='nav_"+chat_id+"' class='chat_side'>      <h2>Chat Settings & Info</h2>  <a id='closebtn' href='javascript:void(0)'",
                            "class='closebtn' onclick='chat_closeNav("+chat_id+")'>&times;</a>      <div class='authr' style='background-image:url("+myObj[3]+");'>     <a>    <div class='authr_img' style='background-image:url(pimages/"+myObj[8]+");'></div>​       </a>    <form action='mypage.php' method='post'>    <div ",
                            "class='authr_name'><button value='"+myObj[6]+"' name='userlink' class='subm_as_text'> "+myObj[6]+"</button></div>    </form>       </div>    <div class='chat_info'>    <div ",
                            "class='chat_descy'>    <h2>Chat Description</h2>    <div class='descc'>    <h3>"+myObj[2]+"</h3>    </div>    </div>    <div class='chat_fol'><h2>Chat users: 2</h2></div>    <div class='chat_back'>    <h2> ",
                            "Change Chat Wallpaper</h2>    <form method='post' action='picture.php' enctype='multipart/form-data'>    <input type='file' id='upload' class='custom-file-input' name='chat_wall'>    <input type='submit' ",
                          "class='chat_wall_subm' value='Change'/>    </form>    </div>    </div>    <form method='post' action='chat.php' >    <button class='chat_leave' name='chat_leave' value='$chat_index' >Leave Chat</button>    </form>    </div>    <div class='chat_mnav'>    ",
                          "<span onclick='chat_openNav("+chat_id+")'>&#9776;</span>    <i class='material-icons' id='chat_un_small' onclick='chat_un_small("+chat_id+")'>arrow_upward</i>    <h1>"+myObj[1]+"</h1>    <div class='chat_close' onclick='chat_close("+chat_id+")'><i ",
                          "class='material-icons' >&#xE5CD;</i></div>    </div>    <div class='conceal_wrapper'>    <div class='msgs' style='background-image:url("+myObj[4]+")' id='"+chat_id+"'>    </div>    <form method='post' id='form_"+chat_id+"' class='comform'>    <div class='chat_wcom' >    <input maxlength='140' type = 'text' id='input_"+chat_id+"'  class='comin' placeholder='My message...' name='sendmsg' onkeypress='g(event,"+chat_id+")' ",
                          "autocapitalize='off' autocorrect='off'  />    <input class='hidden_index' type='text' value='"+chat_id+"' name='chat_index'/>    </div>    </form>    </div>    <div class='chat_enlarge'>    <div class='chat_enlarge_full' onmouseover='chat_action(this)' onmouseout='chat_action_negative(this)' ",
                          "onclick='chat_enlarge_full("+chat_id+")'></div>    <div class='chat_enlarge_standard'  onmouseover='chat_action(this)' onmouseout='chat_action_negative(this)' onclick='chat_enlarge_standard("+chat_id+")'></div>    <div ",
                          "class='chat_enlarge_small'  onmouseover='chat_action(this)' onmouseout='chat_action_negative(this)' onclick='chat_enlarge_small("+chat_id+")'></div><div class='chat_enlarge_close'  onmouseover='chat_action(this)' onmouseout='chat_action_negative(this)' onclick='chat_close("+chat_id+")'></div>    </div></div>"
                          ].join("\n");

                          var cusid_ele = document.getElementsByClassName('open_chat');
                          if(cusid_ele.length == 0){
                            alert("No more chat space");

                          }else{

                                  if($(cusid_ele[0]).replaceWith(open)){

                                          draggables();
                                          startf();

                                  }

                      }
              }




                  };

                  xmlhttp.open("GET", "receivechatinfo.php?id="+id, true);
                  xmlhttp.send();


                  chat_enlarge_standard(chat_id);

  }else{

          alert("The chat is already open");
  }





  }

The problematic function:

   function chat_enlarge_standard(chat_id){
  var item_id = "chat_"+chat_id.toString();

console.log("#"+item_id+" .chat_mnav h1");
      $("#"+item_id+" .chat_close").css("display","inline-block");
    $("#"+item_id+" .comstandin").css("margin-top","20%");
    $("#"+item_id+" .chat_leave").css("width","70%");
   // $("#"+item_id+" .chat_leave").css("margin-left","15%");
    $("#"+item_id+" .chat_mnav span").css("padding","0");
    $("#"+item_id+" .chat_side a:nth-child(2)").css({"padding":"15px"});
    $("#"+item_id+" .chat_mnav").css("height","10%");
    $("#"+item_id+" .chat_mnav h1").css("padding","5% 0px 5% 5%");

        $("#"+item_id+" .chat_mnav span").css({
              "padding": "5%",
                  "padding-left": "0",
                  "padding-top":"3%",
                  "width":"5%"
            });
    $("#"+item_id+" .chat_side").css({"width":"100%","height":"90%"});

    $("#"+item_id+" .chat_mnav h1").css("width","75%");
    $("#"+item_id+" .chat_enlarge_close").css("display","none");
    $("#"+item_id+" .chat_enlarge_small").css("display","block");
    $("#"+item_id+" .comin").css("width","auto");

    const mq = window.matchMedia( "(min-width: 1025px)" );

    if (mq.matches) {

     $("#"+item_id).css({"width":"25%","height":"75.6%","right":"auto"});
       $("#"+item_id+" .msgs").css({"width":"25%","height":"58%"});
        $("#"+item_id+" .chat_wcom").css("width","25%");
        $("#"+item_id+" .chat_comstandin").css("margin-top","13%");
      }else {

     $("#"+item_id).css({"width":"37%","height":"75.6%","right":"auto"});
    $("#"+item_id+" .msgs").css({"width":"37%","height":"58%"});
    $("#"+item_id+" .chat_wcom").css("width","37%");
    $("#"+item_id+" .chat_comstandin").css("margin-top","13%");
      }

      console.log("s_1");

  }

Here, the jquery css does not work, it doesn't show in the inspector and there are no errors in the console. The mistake and/or solution may be very simple or hard but I have no clue. Any help would be appreciated. Thank you for your time.

Answer 1

I'm not prettymuch sure is this the case, call the chat_enlarge_standard method after getting the results. Javascript is asynchronous and chat_enlarge_standard will be called before fetching the results from xhr.

Try changing the position of calling chat_enlarge_standard inside chat_generate method like this

 function chat_generate(chat_id) {

  var id = chat_id.toString();
  var check_user_in = "#chat_"+id;
  if($(check_user_in).length == 0) {
          var open ="";
                  var xmlhttp = new XMLHttpRequest();

                  xmlhttp.onreadystatechange = function() {
                      if (this.readyState == 4 && this.status == 200) {
                          var myObj = JSON.parse(this.responseText);
                          /*var text = "Welcome to chat: "+myObj[1];*/
                          open = [
                            "<div class='full_wrap' id='chat_"+chat_id+"'>   <div class='force-overflow'></div>    <div id='nav_"+chat_id+"' class='chat_side'>      <h2>Chat Settings & Info</h2>  <a id='closebtn' href='javascript:void(0)'",
                            "class='closebtn' onclick='chat_closeNav("+chat_id+")'>&times;</a>      <div class='authr' style='background-image:url("+myObj[3]+");'>     <a>    <div class='authr_img' style='background-image:url(pimages/"+myObj[8]+");'></div>​       </a>    <form action='mypage.php' method='post'>    <div ",
                            "class='authr_name'><button value='"+myObj[6]+"' name='userlink' class='subm_as_text'> "+myObj[6]+"</button></div>    </form>       </div>    <div class='chat_info'>    <div ",
                            "class='chat_descy'>    <h2>Chat Description</h2>    <div class='descc'>    <h3>"+myObj[2]+"</h3>    </div>    </div>    <div class='chat_fol'><h2>Chat users: 2</h2></div>    <div class='chat_back'>    <h2> ",
                            "Change Chat Wallpaper</h2>    <form method='post' action='picture.php' enctype='multipart/form-data'>    <input type='file' id='upload' class='custom-file-input' name='chat_wall'>    <input type='submit' ",
                          "class='chat_wall_subm' value='Change'/>    </form>    </div>    </div>    <form method='post' action='chat.php' >    <button class='chat_leave' name='chat_leave' value='$chat_index' >Leave Chat</button>    </form>    </div>    <div class='chat_mnav'>    ",
                          "<span onclick='chat_openNav("+chat_id+")'>&#9776;</span>    <i class='material-icons' id='chat_un_small' onclick='chat_un_small("+chat_id+")'>arrow_upward</i>    <h1>"+myObj[1]+"</h1>    <div class='chat_close' onclick='chat_close("+chat_id+")'><i ",
                          "class='material-icons' >&#xE5CD;</i></div>    </div>    <div class='conceal_wrapper'>    <div class='msgs' style='background-image:url("+myObj[4]+")' id='"+chat_id+"'>    </div>    <form method='post' id='form_"+chat_id+"' class='comform'>    <div class='chat_wcom' >    <input maxlength='140' type = 'text' id='input_"+chat_id+"'  class='comin' placeholder='My message...' name='sendmsg' onkeypress='g(event,"+chat_id+")' ",
                          "autocapitalize='off' autocorrect='off'  />    <input class='hidden_index' type='text' value='"+chat_id+"' name='chat_index'/>    </div>    </form>    </div>    <div class='chat_enlarge'>    <div class='chat_enlarge_full' onmouseover='chat_action(this)' onmouseout='chat_action_negative(this)' ",
                          "onclick='chat_enlarge_full("+chat_id+")'></div>    <div class='chat_enlarge_standard'  onmouseover='chat_action(this)' onmouseout='chat_action_negative(this)' onclick='chat_enlarge_standard("+chat_id+")'></div>    <div ",
                          "class='chat_enlarge_small'  onmouseover='chat_action(this)' onmouseout='chat_action_negative(this)' onclick='chat_enlarge_small("+chat_id+")'></div><div class='chat_enlarge_close'  onmouseover='chat_action(this)' onmouseout='chat_action_negative(this)' onclick='chat_close("+chat_id+")'></div>    </div></div>"
                          ].join("\n");

                          var cusid_ele = document.getElementsByClassName('open_chat');
                          if(cusid_ele.length == 0){
                            alert("No more chat space");

                          }else{

                                  if($(cusid_ele[0]).replaceWith(open)){

                                          draggables();
                                          startf();

                                  }

                      }
                     chat_enlarge_standard(chat_id); //PLACE HERE
              }




                  };

                  xmlhttp.open("GET", "receivechatinfo.php?id="+id, true);
                  xmlhttp.send();




  }else{

          alert("The chat is already open");
  }





  }