房屋详情页注册模态框房间下拉框无响应，报属性获取错误

针对你遇到的这个Bug，从错误提示和场景差异出发，按以下步骤排查：

1. 定位错误根源 #

Trying to get property 'total_rooms' of non-object 明确说明：后端代码中尝试访问一个非对象的total_rooms属性——也就是你用来获取房间数据的接口里，某个预期为房屋对象的变量实际是null或非对象类型（比如数组、字符串）。

2. 检查AJAX请求参数的有效性 #

• 打开浏览器开发者工具的「网络」标签，触发房屋下拉框的选择事件，找到加载房间的AJAX请求：
  • 查看请求中携带的房屋ID参数（比如house_id），确认这个ID是否为有效且存在的房屋ID。
  • 如果在房屋详情页打开模态框时，房屋下拉框默认选中了当前页面的房屋，检查这个默认选中的ID是否正确传递给了AJAX。
• 排查是否存在DOM元素ID冲突：比如详情页本身有一个用于展示房屋ID的元素（如#house-id），和模态框里的房屋选择器ID重复，导致AJAX获取了错误的ID值。

3. 检查后端房间加载接口的逻辑 #

• 确认接口中查询房屋的逻辑：是否通过AJAX传递的house_id去数据库查询？查询后有没有先判断房屋实例是否存在？
  • 示例错误代码（未做存在性判断）：

    $house = House::find($request->house_id);
    $rooms = $house->total_rooms; // 若$house为null，直接访问会报错
    

  • 修复思路：先判断$house是否存在，再处理后续逻辑：

    $house = House::find($request->house_id);
    if (!$house) {
        return response()->json(['error' => '房屋不存在'], 404);
    }
    $rooms = $house->total_rooms;
    // 后续返回房间数据
    

• 排查singlehsedetails控制器方法是否影响了接口上下文：比如该方法中是否定义了全局/会话级别的$house变量，导致房间加载接口误获取了这个变量（而非通过请求参数查询的房屋实例）。

4. 验证模态框的事件绑定与初始化 #

• 若模态框是在房屋详情页动态加载（比如通过AJAX渲染），检查房屋下拉框的change事件是否用了事件委托绑定：
  • 错误绑定方式（仅绑定已存在的DOM元素）：

    $('#house-select').change(function() {
        // 加载房间的AJAX逻辑
    });
    

  • 正确委托方式（绑定到父级静态元素）：

    $('body').on('change', '#house-select', function() {
        // 加载房间的AJAX逻辑
    });
    

• 检查模态框初始化时，房屋下拉框的选项是否正确渲染：有没有出现无效的选项（比如ID为0或空值的选项），导致选择后触发无效请求。

5. 调试AJAX错误处理 #

• 在AJAX代码中添加error回调，捕获并打印后端返回的错误信息，确认是否是500服务器错误导致前端无法更新房间下拉框：

  $.ajax({
      url: '/get-rooms',
      type: 'GET',
      data: { house_id: $('#house-select').val() },
      success: function(data) {
          // 更新房间下拉框逻辑
      },
      error: function(xhr, status, error) {
          console.log(xhr.responseText); // 打印后端错误详情
      }
  });
  

内容的提问来源于stack exchange，提问作者stephen Weru