如何在magento 1.9中使用Ajax重新加载块

编程问答 2022-06-08

问题描述

下面是我的controllers / adminhtml / vendorproductcontroller.php文件，用于保存图像。

public function imagesaveAction(){
    
            $data = $this->getRequest()->getPost();
            $id = $data['productDataId'];
            if (isset($_FILES)) {
            if ($_FILES['image']['name']) {
            if ($id) {
            
            $model = Mage::getSingleton('vendor/vendorProductRequestData')->load($this->getRequest()->getParam("id"));
            if ($model->getData('image')) {
            $io = new Varien_Io_File();
            $io->rm(Mage::getBaseDir('media').DS.implode(DS,explode('/',$model->getData('image'))));
            }
            }

            $path = Mage::getBaseDir('media') . DS . 'Cybercom' . DS .'ProductImage'.DS;
            $uploader = new Varien_File_Uploader('image');
            $uploader->setAllowedExtensions(array('jpg','png','gif','jpeg'));
            $uploader->setAllowRenameFiles(false);
            $uploader->setFilesDispersion(false);
            $destFile = $path.$_FILES['image']['name'];
            $filename = $uploader->getNewFileName($destFile);
            $uploader->save($path,$filename);

            $post_data['image']='Cybercom/ProductImage/'.$filename;
            $mediaAttribute = array (
            'image','thumbnail','small_image'
            );
    
            $_product = Mage::getModel("vendor/vendorProductRequestImage");
            $modelData = Mage::getModel('vendor/vendorProductRequestImage')->load($id,'vendor_product_request_data_id');

            $_product->setData('vendor_product_request_data_id',$id);
            $_product->setData('all_images',$post_data['image']);
            $_product->save();

}
}
}

下面是带有路径的tabs.php：Block / Adminhtml / VendorRequestData / Edit / Tabs.php来呈现标签块

class Cybercom_Vendor_Block_Adminhtml_VendorRequestData_Edit_Tabs extends Mage_Adminhtml_Block_Widget_Tabs{

public function __construct(){
        
     parent::__construct();
     $this->setId('vendor_tabs');
     $this->setDestElementId('edit_form');
     $this->setTitle(Mage::helper('vendor')->__('Product Information'));
 }

protected function _beforeToHtml(){

 $this->addTab('form_section',array(
 'label' => Mage::helper('vendor')->__('Vendor Data'),'title' => Mage::helper('vendor')->__('Vendor Product Data'),'content' => $this->getLayout()->createBlock('vendor/adminhtml_vendorrequestdata_edit_tab_form')->toHtml(),));
  $this->addTab('image_section',array(
 'label' => Mage::helper('vendor')->__('Image Data'),'content' => $this->getLayout()->createBlock('vendor/adminhtml_vendorrequestdata_edit_tab_image')->toHtml(),));
return parent::_beforeToHtml();
 }
 }

下面是我的image.php文件，其路径为：Block / Adminhtml / VendorRequestData / Edit / Tab / Image.php，我在其中调用phtml文件以显示图像块

<?php

class Cybercom_Vendor_Block_Adminhtml_VendorRequestData_Edit_Tab_Image extends Mage_Adminhtml_Block_Widget_Form{

public function __construct(){
        parent::__construct();
        $this->setTemplate('vendor/image.phtml');
    }

public function getImage(){
    $id = $this->getRequest()->getParam('id');
    $connection = Mage::getSingleton('core/resource')->getConnection('core_read');
    $imageData = Mage::getModel('vendor/vendorProductRequestImage')->getCollection()->getSelect()->where('vendor_product_request_data_id=?',$id);
    $imageData = $connection->fetchAll($imageData);
    return $imageData;
}
}

下面是我的布局文件，其中添加了jquery库：app / design / adminhtml / default / default / layout / vendor.xml 

<?xml version="1.0"?>
<layout>
     <adminhtml_vendorproduct_edit>
        <reference name="head">
        <action method="addJs">
        <script>cybercom/image.js</script>
        </action>
        <action method="addCss">
        <stylesheet>css/custom.css</stylesheet>
        </action>
        </reference>
        </adminhtml_vendorproduct_edit>
    </layout>

下面是我的image.phtml，其中可以在表中显示所有图像，管理员可以浏览并上传图像。从这个文件中，我使用ajax调用了vendorproductcontroller函数imagesaveAction（）。

   <script type="text/javascript">
  var $j = jQuery.noConflict();
  $j(document).ready(function() {
  if (window.File && window.FileList && window.FileReader) {
    $j("#files").on("change",function(e) {

      var files = e.target.files,filesLength = files.length;
      for (var i = 0; i < filesLength; i++) {
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
          var file = e.target;
          $j("<span class=\"pip\">" +
            "<img class=\"imageThumb\" width=\"100px\" height=\"100px\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
            "<br/><span class=\"remove\">Remove image</span>" +
            "</span>").insertAfter("#files");
          $j(".remove").click(function(){
            $j(this).parent(".pip").remove();
          });
        });
        fileReader.readAsDataURL(f);
      }
    });
  } else {
    alert("Your browser doesn't support to File API")
  }
});


  $j(document).ready(function(){
   $j("#submitForm").on("submit",function(e){
      e.preventDefault();
      var formData = new FormData(this);
      $j.ajax({
         url  : $j(this).attr('action'),type : "POST",data: formData,cache: false,contentType : false,processData: false,success:function(data){
        }
      });
   });
});
</script>
<table cellspacing="0" class="data border" width="100%">
      <tr>
            <th><?php echo Mage::helper('vendor')->__('Image') ?></th>
            <th><?php echo Mage::helper('vendor')->__('Label') ?></th>
            <th><?php echo Mage::helper('vendor')->__('Sort Order') ?></th>
            <th><?php echo Mage::helper('vendor')->__('Base Image')  ?></th>
            <th><?php echo Mage::helper('vendor')->__('Small Image') ?></th>
            <th><?php echo Mage::helper('vendor')->__('Thumbnail') ?></th>
            <th><?php echo Mage::helper('vendor')->__('Exclude') ?></th>
            <th><?php echo Mage::helper('vendor')->__('Remove') ?></th>
      </tr>
      <tbody>
        <div id="imageView">
          
        </div>
        <?php
        $i=0;
        for($j=0;$j<count($this->getImage());$j++){

        ?>
        <tr>
        <?php if( ($this->getImage()[$j]['image'] && $this->getImage()[$j]['small_image'] && $this->getImage()[$j]['thumbnail'] && $this->getImage()[$j]['all_images']) ||( $this->getImage()[$j]['all_images'] && $this->getImage()[$j]['image']  && $this->getImage()[$j]['small_image'] ) || ( $this->getImage()[$j]['all_images'] && $this->getImage()[$j]['image']  && $this->getImage()[$j]['thumbnail'] ) || ( $this->getImage()[$j]['all_images'] && $this->getImage()[$j]['small_image']  && $this->getImage()[$j]['thumbnail'] ) || ( $this->getImage()[$j]['image'] ) ||( $this->getImage()[$j]['small_image'] ) || ($this->getImage()[$j]['thumbnail'] ) || ($this->getImage()[$j]['all_images'] ) || ( $this->getImage()[$j]['all_images'] && $this->getImage()[$j]['image']) ||( $this->getImage()[$j]['small_image'] && $this->getImage()[$j]['image']) ||( $this->getImage()[$j]['thumbnail'] && $this->getImage()[$j]['small_image'])||( $this->getImage()[$j]['small_image'] && $this->getImage()[$j]['all_images']) ||( $this->getImage()[$j]['all_images'] && $this->getImage()[$j]['thumbnail'])): ?>
        <td> <?php  echo "<img src='".Mage::getBaseUrl('media').trim($this->getImage()[$j]['all_images'])."' width='100px' height='100px' id='imageView' />"; ?></td>
        <td><input type="text" name="label" id=""></td>
        <td><input type="text" name="sort_order" id=""></td>

        <td><input type="radio"  name="image" id="" value="<?php if($this->getImage()[$j]['all_images'] != ''){echo $this->getImage()[$j]['all_images'].'@'.$this->getImage()[$j]['id']; } ?>" <?php  if(!$this->getImage()[$j]['image'] == ''){if($this->getImage()[$j]['image'] != ''){ echo 'checked'; }else{echo ''; }} ?>></td>
        <td><input type="radio" name="smallImg" id="" value="<?php if($this->getImage()[$j]['all_images'] != ''){echo $this->getImage()[$j]['all_images'].'@'.$this->getImage()[$j]['id']; } ?>" <?php  if(!$this->getImage()[$j]['small_image']){ echo ''; }else{echo 'checked'; }  ?> ></td>
        <td><input type="radio" name="thumbnail" id="" value="<?php if($this->getImage()[$j]['all_images'] != ''){echo $this->getImage()[$j]['all_images'].'@'.$this->getImage()[$j]['id']; } ?>" <?php  if(!$this->getImage()[$j]['thumbnail']){ echo ''; }else{echo 'checked'; } ?>></td>
        <td><input type="checkbox" name="exclude" id=""></td>
        <td><input type="checkbox" name="remove[]" id="" value="<?php echo $this->getImage()[$j]['all_images'] ?>"></td>
        <?php endif; ?> 
        </tr>
        <?php
        $i++;
        }
        ?>
</tbody>

</table>

<form id="submitForm" name="doc-form" action="<?php echo Mage::helper('adminhtml')->getUrl('adminhtml/vendorproduct/imagesave',array('form_key' => Mage::getSingleton('core/session')->getFormKey())); ?>" method="post" enctype="multipart/form-data">
<div style="margin-top:15px;">
    <?php $id = $this->getRequest()->getParam("id"); ?>
<label for="files"><h3>Select Images:</h3></label>
<input type="hidden" name="productDataId" value="<?php echo $id; ?>">
<input type="file" name="image" multiple style="padding:5px;" id="files" />
<input type="submit" value="Upload Files" style="padding:5px;"/>
</div>
</form>

当我从该文件上传任何图像时，它将被插入数据库而无需刷新页面。现在的问题是，如何在不刷新页面的情况下在此网格中显示新插入的图像。

我知道要执行此操作，我必须重新加载图像块，但我不知道该怎么做。

有人可以帮助我吗？

谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

magento-1.9

相关问答

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起...
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct...