如何通过JS Web小部件将字符串呈现为HTML?

时间:2015-12-22 10:37:35

标签: javascript jquery ruby-on-rails ruby-on-rails-4

我有一个Rails后端,它发送像

这样的字符串
<p>Hello world</p>

等。

但无论我做什么

$('div#target').after(...) or $('div#target').html(...)

字符串仍然被消毒。如何将其变为有效的HTML?

注意:在我的客户端,我只有<script>标记

发送字符串的代码位:

function main() {
  jQuery(document).ready(function($){
    var body = "<%= @body %>";
    $('script#parentdiv').after("<div class='parent'></div>");
    $('.parent').html(body);
  });

2 个答案:

答案 0 :(得分:5)

var body = "<%= @body %>";

需要

var body = "<%= @body.html_safe %>";

答案 1 :(得分:2)

如果您特别希望使用jQuery,那么

public class EvaluationsFragment extends CustomFragment implements View.OnClickListener, AdapterView.OnItemSelectedListener {

private Patient mPatient;
private View myView;
private Context context;
private Button btnAjoutEvaluation;
private ListView evaluations_historic_liste;
private List<Evaluation>mEvaluation;
private EvaluationDto mEvaluationDto;







@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState){
   myView = inflater.inflate(R.layout.fragment_evaluations, container,false);
   return myView;
}

@Override
public void onActivityCreated(Bundle savedInstanceState){
    super.onActivityCreated(savedInstanceState);
    init();

}

private void init(){

    evaluations_historic_liste = (ListView)myView.findViewById(R.id.evaluations_historic_liste);
    btnAjoutEvaluation = (Button)myView.findViewById(R.id.evaluations_add__btn);
    btnAjoutEvaluation.setOnClickListener(this);
    TypeEvaluation mNouveauTypeEvaluation;
    mPatient =((DossierActivity)mRootActivity).mPatient;
    mEvaluationDto = new EvaluationDto(mRootActivity.getApplicationContext());
    evaluations_historic_liste.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            EvaluationAdapter.EvaluationItem item =  (EvaluationAdapter.EvaluationItem)view.getTag();
            openDetailEvaluation(item);
        }
    });
    mEvaluationDto.open();
    try{
        mEvaluation = mEvaluationDto.getEvaluationsByPatientId(mPatient.getId());
    }catch (SQLException e) {
        Log.e(Constants.APP_LOG_TAG, e.getMessage());
        ACRA.getErrorReporter().handleException(e);
    } finally{
        mEvaluationDto.close();
    }

    if(mEvaluation != null && mEvaluation.size() >0){
        evaluations_historic_liste.setAdapter(new EvaluationAdapter(mRootActivity,mEvaluation));
    }else {
        evaluations_historic_liste.setVisibility(View.GONE);
    }
}

@Override
public void onClick(View v) {
    switch(v.getId()){
        case (R.id.evaluations_add__btn):
            openNewEvaluation();
            break;
    }

}

public void openNewEvaluation(){
    Fragment fragment = new EvaluationNouvelleFragment();
    android.support.v4.app.FragmentTransaction fragmentTransaction = getFragmentManager().beginTransaction();
    fragmentTransaction.replace(R.id.content_frame, new EvaluationNouvelleFragment());
    fragmentTransaction.commit();

}

public void openDetailEvaluation(EvaluationAdapter.EvaluationItem item){
    EvaluationAdapter evaluationAdapter = new EvaluationAdapter();
    EvaluationDetailHistoriqueFragment detail = new EvaluationDetailHistoriqueFragment();
    Bundle args = new Bundle();

    args.putString(EvaluationDetailHistoriqueFragment.DATA_RECEIVE, /*HERE I NEED TO PUT item_evaluation_nom.setText()*/  );
    detail.setArguments(args);
    getFragmentManager().beginTransaction().replace(R.id.content_frame, detail).commit();

}

@Override
public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {

}

@Override
public void onNothingSelected(AdapterView<?> parent) {

}

public class EvaluationAdapter extends BaseAdapter {

    private Context mcontext;
    private List<EvaluationItem> mItems = new ArrayList<EvaluationItem>();

    public EvaluationAdapter(){}
    public EvaluationAdapter(Context context, List<Evaluation> values) {
        this.mcontext = context;
        for (Evaluation e : values) {
            mItems.add(new EvaluationItem(e));
        }

    }

    @Override
    public int getCount() {
        return mItems.size();
    }

    @Override
    public EvaluationItem getItem(int position) {
        return mItems.get(position);
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View view = null;
        EvaluationItemHolder holder;
        if (convertView == null) {
            convertView = LayoutInflater.from(mcontext).inflate(R.layout.list_items_historic_evaluations, parent, false);
            holder = new EvaluationItemHolder();

            holder.item_evaluation_date = (TextView) convertView.findViewById(R.id.item_evaluation_date);
            holder.item_evaluation_nom = (TextView) convertView.findViewById(R.id.item_evaluation_nom);
            holder.item_evaluation_personnel = (TextView) convertView.findViewById(R.id.item_evaluation_personnel);
            holder.item_evaluation_score = (TextView) convertView.findViewById(R.id.item_evaluation_score);
            holder.item_evaluation_date_reevaluation = (TextView) convertView.findViewById(R.id.item_evaluation_date_reevaluation);

            convertView.setTag(holder);
        }else{
            holder = (EvaluationItemHolder)convertView.getTag();
        }
         final EvaluationItem item = getItem(position);
         int score = (item.getScoreTV()).intValue();

         holder.item_evaluation_date.setText( + " " + item.getDateTV());
         holder.item_evaluation_nom.setText(item.getTypeEvalTV());
         if (item.getPersonnelTV() != null) {
                holder.item_evaluation_personnel.setText( + " " + item.getPersonnelTV());
            }
         holder.item_evaluation_score.setText( + String.valueOf(score));
         if (item.getDateReevalTV() != null) {
                holder.item_evaluation_date_reevaluation.setText( item.getDateReevalTV());
            }

    //   convertView.setTag(1,item.getTypeEvalTV());
        return convertView;
    }

    public class EvaluationItem {
        private String dateTV;
        private String typeEvalTV;
        private String personnelTV;
        private Double scoreTV;
        private String dateReevalTV;

        public String getDateTV() {return dateTV;}

        public void setDateTV(String dateTV) {
            this.dateTV = dateTV;
        }

        public String getTypeEvalTV() {
            return typeEvalTV;
        }

        public void setTypeEvalTV(String typeEvalTV) {
            this.typeEvalTV = typeEvalTV;
        }

        public String getPersonnelTV() {
            return personnelTV;
        }

        public void setPersonnelTV(String personnelTV) {
            this.personnelTV = personnelTV;
        }

        public Double getScoreTV() {
            return scoreTV;
        }

        public void setScoreTV(Double scoreTV) {
            this.scoreTV = scoreTV;
        }

        public String getDateReevalTV() {
            return dateReevalTV;
        }

        public void setDateReevalTV(String dateReevalTV) {
            this.dateReevalTV = dateReevalTV;
        }

        public EvaluationItem(Evaluation e){

            this.dateTV = e.getDate();
            this.typeEvalTV = e.getTypeEvaluation().getLibelle();
            this.personnelTV = e.getPersonnelLibelle();
            this.scoreTV = e.getScore();
            this.dateReevalTV = e.getDateReevaluation();

        }

    }
}
        public static class EvaluationItemHolder{
            public TextView item_evaluation_date;
            public TextView item_evaluation_nom;
            public TextView item_evaluation_personnel;
            public TextView item_evaluation_score;
            public TextView item_evaluation_date_reevaluation;
        }
}

这直接来自jQuery文档: http://api.jquery.com/jquery.parsehtml/

否则,这也可以通过原生轻松Creating a new DOM element from an HTML string using built-in DOM methods or prototype

来完成
  

任何字符串都需要解析并创建为DOM的节点,以便浏览器理解。