Архив метки: ajax

WEB

Синхронная загрузка ajax при использовании jQuery

18.05.2016 Павел Грибов Оставить комментарий

Задача: строго последоватально подгрузить код на страницу.

Решение:

  $.ajax({
        url: "controller/server/lanbilling/listgrp.php?blibaseid="+blibaseid,        
        async: false                
    }).done(function(data) {	    
	    $("#grpd").html(data);            	
    });

$.ajax({

url: "controller/server/lanbilling/listgrp.php?blibaseid="+blibaseid,

async: false

}).done(function(data) {

$("#grpd").html(data);

});

Конечно это считается не правильным подходом, т.к. в целом замедляет загрузку страницы. Однако в некоторых случая это просто необходимо. Например, когда нужно получить некое значение из загружаемого участка, а участок не понятно, уже подгрузился или еще нет.

WEB

Прикручиваем форму «Пожаловаться» на любой сайт.

27.02.2016 Павел Грибов Оставить комментарий

На днях прилетела задача, прикрутить на сайтах ГК, кнопку которая позволит «пожаловаться» руководителю на качество сервиса. Простая задача как всегда осложняется тем, что сайты — это набор разных движков. Плюс хочется при исправлении чего-либо в коде, чтобы это одновременно распространялось на все сайты. Пилить код для каждого движка лениво, да и бред. Было отметено сразу. Можно поступить проще: написать javascript код, который вне зависимости от движка сайта, будет работать одинаково на всех сайтах. Всё же добавление виджета на сайт сведется к добавлению мааахонького кусочка кода, который уже дальше подтянет всё остальное. Один нюанс. Код должен работать абсолютно автономно. Никаких там сахаров типа Jquery! Ибо это потянет за собой слишком увеличение веса страницы..да и может законфликтовать с движками сайтов.

Читать далее Прикручиваем форму «Пожаловаться» на любой сайт. →

PHP

Ajax при помощи ExtJS

28.04.2015 Павел Грибов Оставить комментарий

Задача: используя ExtJS получить некое значение из стороннего PHP скрипта и передать его в поле input.
Вероятно можно и более элегантно, но не захотелось тратить время на изучение этого фреймворка..

Ext.onReady(function(){
var agrmnum=document.getElementById('_agreement_').value;
Ext.Ajax.request({
url : 'http://eowirfoei.ru/ofdierofi.php?agrm_id='+agrmnum,
async   : false,
failure : function(){alert('Error');},
success : function(response){
    //alert(response.responseText);
   document.getElementById('_PaySum').value = response.responseText;
}    
});
});

Ext.onReady(function(){

var agrmnum=document.getElementById('_agreement_').value;

Ext.Ajax.request({

url : 'http://eowirfoei.ru/ofdierofi.php?agrm_id='+agrmnum,

async : false,

failure : function(){alert('Error');},

success : function(response){

//alert(response.responseText);

document.getElementById('_PaySum').value = response.responseText;

}

});

WEB

«Убираем за собой» или уничтожение обьектов в JavaScript

04.12.2013 Павел Грибов Оставить комментарий

Сегодня столкнулся с тем что когда работаешь с JavaScript иногда приходится «подчищать» за собой. Например: подгружаем при помощи AJAX некий html в котором в есть в свою очередь код на JavaScript.

jQuery("#list2").jqGrid('navButtonAdd','#pager2',{caption:"Отредактировать",                              
	onClickButton:function(){
              var gsr = jQuery("#list2").jqGrid('getGridParam','selrow');
		if(gsr){                     
                       //$("#pg_add_edit" ).dialog( "destroy" );
                       $("#pg_add_edit").dialog({autoOpen: false,height: 600,width: 800,modal:true,title: "Редактирование новости" });
                       $("#pg_add_edit" ).dialog( "open" );                                   
                       $("#pg_add_edit").load("client/view/news/news.php?step=edit&id="+gsr);
                       } else {
			alert("Сначала выберите строку!")
		}							
	}
});

jQuery("#list2").jqGrid('navButtonAdd','#pager2',{caption:"Отредактировать",

onClickButton:function(){

var gsr = jQuery("#list2").jqGrid('getGridParam','selrow');

if(gsr){

//$("#pg_add_edit" ).dialog( "destroy" );

$("#pg_add_edit").dialog({autoOpen: false,height: 600,width: 800,modal:true,title: "Редактирование новости" });

$("#pg_add_edit" ).dialog( "open" );

$("#pg_add_edit").load("client/view/news/news.php?step=edit&id="+gsr);

} else {

alert("Сначала выберите строку!")

}

});

Вот подгружаемый код:

<script type="text/javascript" src="js/tinymce/tinymce.min.js"></script>
<div id="messenger"></div>    
<form ENCTYPE="multipart/form-data" action="?content_page=news&step=<?php echo "$step&newsid=$id"; ?>" method="post" name="form1" target="_self">
    <input name=dtpost id=dtpost value="<?php echo "$dtpost"; ?>"><br>
    <input name=title  id=title value="<?php echo "$title";?>" class="span8" placeholder="Заголовок"><br>
    <textarea class="span12" name=txt  rows="15" placeholder="Введите новость">
        <?php echo "$txt";?>
    </textarea>
</form>

 <script>
$( "#pg_add_edit" ).dialog({
  close: function() {$( "#dtpost" ).datepicker( "destroy" );
   tinymce.activeEditor.destroy();
   }
});

    $("#dtpost").datepicker();
    $("#dtpost").datepicker( "option", "dateFormat", "dd.mm.yy");            
<?php if ($step!='edit'){?>    
    $("#dtpost").datepicker( "setDate" , "0");
<?php } else {?>        
 $("#dtpost").datepicker( "setDate" , "<?php  echo "$dtpost"; ?>");
<?php };?>    
    tinymce.init({selector:'textarea'});
</script>

<form ENCTYPE="multipart/form-data" action="?content_page=news&step=<?php echo "$step&newsid=$id"; ?>" method="post" name="form1" target="_self">

<input name=title id=title value="<?php echo "$title";?>" class="span8" placeholder="Заголовок"><br>

<?php echo "$txt";?>

</textarea>

</form>

$( "#pg_add_edit" ).dialog({

close: function() {$( "#dtpost" ).datepicker( "destroy" );

tinymce.activeEditor.destroy();

}

});

$("#dtpost").datepicker();

$("#dtpost").datepicker( "option", "dateFormat", "dd.mm.yy");

<?php if ($step!='edit'){?>

$("#dtpost").datepicker( "setDate" , "0");

<?php } else {?>

$("#dtpost").datepicker( "setDate" , "<?php echo "$dtpost"; ?>");

<?php };?>

tinymce.init({selector:'textarea'});

</script>

Т.е. чтоб не плодить datepicker и редакторы tinymce каждый раз, как будет нажата кнопка «отредактировать», отлавливаем закрытие диалогового окна. После закрытия — уничтожаем объекты datepicker и редакторы tinymce. Т.е. если не уничтожите, может ничего страшного и не случится. Но потенциальная утечка памяти. Открыл-закрыл 10 раз — ушло 10 мегабайт.

Обычно я тоже не особо обращал внимание на такие мелочи, ибо не слишком часто сталкиваешься с ситуацией, что какой то объект на странице нуждается в создании много раз.

WEB

Не работают события после получения части страницы по Ajax..

26.10.2012 Павел Грибов 2 комментария

При разработке одного и проектов столкнулся с проблемой, что код полученный на страницу Ajax запросом не доступен для обработки. Т.е. например на кнопку повешано событие которое подгружает содержимое в div, в котором в свою очередь есть обработка нажатия. Т.е. вот такой код работать НЕ будет:

Клиент:

$("#aaa").load("server.php");
$("#bbb").click(function(){
alert("Здрасти");
 });

$("#aaa").load("server.php");

$("#bbb").click(function(){

alert("Здрасти");

});

Сервер:

<div id=bbb>Нажми меня</div>

1	<div id=bbb>Нажми меня</div>

Что делать? Решений несколько (гугл в помощь). Самое простое скрипт обработки вставить в тело подгружаемой страницы. Т.е правильно: