Good day.

I am trying to implement a bootstrap modal window. Naryl code, respectively, I want to change the window in my own way. But to edit the HTML in the line, the creepiness is awkward:

$(document).ready(function() { $('a[data-confirm]').click(function(ev) { var href = $(this).attr('href'); if (!$('#dataConfirmModal').length) { // *** тут создается модальное окно $('body').append('<div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="dataConfirmLabel">Please Confirm</h3></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button><a class="btn btn-primary" id="dataConfirmOK">OK</a></div></div>'); } $('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm')); $('#dataConfirmOK').attr('href', href); $('#dataConfirmModal').modal({show:true}); return false; });});

I decided to create a separate class and submit the form to them:

 public static function showModalConfirm() { ?> <div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"> ... </div> <?php }

So:

 $('body').append('<?= Template::showModalConfirm() ?>');

The problem is that the form is transmitted with all spaces and hyphenations. The script only works if the form is described in a string. (although this is better, although the syntax is highlighted) You can, of course, write a parser, but it looks like it will be a "bicycle".

What is normal practice in similar questions?

  • Not quite clear what the question is? How not to edit HTML in JS? Then generate HTML using PHP - koks_rs
  • @koks_rs most likely my approach is not correct. I wanted to edit html as html in my IDE, then shove it into a script. - Dmi3ii

2 answers 2

As an option

 <?php $content=<<<EOL <div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"> ... </div> EOL; echo str_replace(["\n", "\r", " "], "", $content);

    Properly organized according to the scheme MVC - Model - View - Controller, as, in fact, is done in all frameworks. When an event occurs, a view containing the form is called. The code is unimportant, but the essence should convey:

     //php eventHandler.php $event = $_GET['event']; ... $events['getForm'] = function(){ require_once($_GET['name']); } //Почему массив? Чтоб можно было повесить другие события, у которых реализуется другая логика // , будь то добавление записи в БД, или логаут пользователя $events[$event](); //php сама вьюшка, имя которой мы прописываем в запросе ajax, например test.php: <? //...handling data if needed ?> <div> <form> Input something<input type='text'/> </form> </div> //js $('#someButton').on('click'function(){ $.ajax({ url: 'eventHandler?event=getform&name=FormTemplateName' }).done(function(data){ $(document).append(data.responseText); }) })