Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.01.2013, 01:22
Интересующийся
Отправить личное сообщение для katjuha6 Посмотреть профиль Найти все сообщения от katjuha6
 
Регистрация: 31.01.2013
Сообщений: 12

всплывающее окно в js
Всем доброго времени суток, уважаемые форумчане!
Я прошу прощения, что отвлекаю вас из-за совсем банального вопроса, но для меня js не понятен вообще никак и проблема стоит остро.
возникла задача как-то вызывать всплывающее окно при обработка данного запроса
function AddCompare(product) {
        ProductsInCart.push(product);
        var frm= $("frmProductCompare");
        frm.product_id.value=product;
        frm.func.value="comparisonAdd";
        //frm.page.value = "shop.comparison_short";
        handleUpdateCompare(frm);
}

из того, что я прочитала: надо создать html файл с разметкой окна и css файл. до этого момента понятно.
дальше все... =(
как это прописать в вышеуказанном коде?
в случае, если я задала какой-то совсем глупый вопрос - так и напишите. а то складывается впечатление, что я на форумах со стенами общаюсь.
заранее благодарна за любой ответ.
Ответить с цитированием
  #2 (permalink)  
Старый 31.01.2013, 01:58
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

Скажем прямо мало понятно что вы делаете
в качестве хоть какого то примера приведу стандартное окно/диалог из jqueryui.
Оригинал здесь http://jqueryui.com/dialog/#default

нажмите на play
<!doctype html>
 
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
      $( "#dialog" ).html("ВОТ ЗДЕСЬ БЫ МОГ БЫТЬ ВАШ КОНТЕНТ");
      $( "#dialog" ).dialog();

  });
  </script>
</head>
<body>
 
<div id="dialog" title="Basic dialog"></div>

</body>
</html>
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 31.01.2013 в 02:09.
Ответить с цитированием
  #3 (permalink)  
Старый 31.01.2013, 03:01
Интересующийся
Отправить личное сообщение для katjuha6 Посмотреть профиль Найти все сообщения от katjuha6
 
Регистрация: 31.01.2013
Сообщений: 12

Уважаемый DjDiablo, благодарю за то, что Вы отозвались. сейчас попробую объяснить что я пытаюсь сделать. сразу оговорюсь, что программирование для меня пока что очень темный лес, поэтому прошу прощения за неверные формулировки.
в интернет-магазине есть сравнение товаров. когда нажимаешь на "сравнить" нужно чтобы появлялось окно с текстом "товар добавлен в сравнение". в скрипте изначально не продумана эта функция.
обработка запроса (добавление товара в сравнение, удаление товара из сравнения) происходит в js файле.
добавление товара в сравнение - вот этот вот кусок
function AddCompare(product) {
ProductsInCart.push(product);
var frm= $("frmProductCompare");
frm.product_id.value=product;
frm.func.value="comparisonAdd";
//frm.page.value = "shop.comparison_short";
handleUpdateCompare(frm);
}

как можно сюда приделать всплывающее окно.
или нужен полный код, чтобы понять?
Ответить с цитированием
  #4 (permalink)  
Старый 31.01.2013, 06:44
Аватар для ОлегА
Профессор
Отправить личное сообщение для ОлегА Посмотреть профиль Найти все сообщения от ОлегА
 
Регистрация: 25.08.2011
Сообщений: 420

Сообщение от katjuha6
или нужен полный код, чтобы понять?
да, из данного кода вообще ничего не понятно.
Ответить с цитированием
  #5 (permalink)  
Старый 31.01.2013, 10:34
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

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

мы можем попробывать прекрутить диалог к вашей странице
вставьте в заголовок head
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />


гденибудь в теледокумента вставьте

<div id="dialog" title="Basic dialog">Товар добавлен в корзину..</div>


и немного измените скрипт дописав одну строчку вызывающую далог
function AddCompare(product) {
  ProductsInCart.push(product);вы
  var frm= $("frmProductCompare");
  frm.product_id.value=product;
  frm.func.value="comparisonAdd";
  //frm.page.value = "shop.comparison_short"; 
  handleUpdateCompare(frm);

  $( "#dialog" ).dialog();
}


давайте посмотрим что получится и насколько близко это к тому что вы хотели
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 31.01.2013 в 10:38.
Ответить с цитированием
  #6 (permalink)  
Старый 31.01.2013, 16:05
Интересующийся
Отправить личное сообщение для katjuha6 Посмотреть профиль Найти все сообщения от katjuha6
 
Регистрация: 31.01.2013
Сообщений: 12

не работает. смотрите
http://test.katalliana.org/ru/intern...la-stulya.html
это страница со сравнением (чтобы Вам долго не ковыряться по всему сайту). когда добавляешь товар в сравнение - под списком товаров и перед модулем "Последние поступления" (внизу странички) появляется модуль сравнения. в данном случае окошко отображается в левом верхнем углу (текст - 123456), товары в сравнение не добавляются, модуль не появляется.
вот на этом сайте можете глянуть как выглядит сравнение http://testshop.katalliana.org/ru/in...la-stulya.html
на всякий случай прикрепляю полный код скрипта
function removeByElement(arrayName,arrayElement) {
    for(var i=0; i<arrayName.length;i++)      { 
        if(arrayName[i]==arrayElement) arrayName.splice(i,1); 
    } 
}
function CompareProduct(el, type_id) {
	var Product_ID = el.name;
	Product_ID = Product_ID.replace("compare_","");
	//alert("ДО: productID="+Product_ID+" ProductsInCart.length="+ProductsInCart.length);
	if (el.checked && CompareTypeID != -1 && type_id!=CompareTypeID) {
		alert("Hельзя сравнивать товары разного типа");
		return false;
	}
	else if (el.checked && ProductsInCart.length>=MaxProductToCompare) {
		alert("Нельзя сравнивать более " + MaxProductToCompare + " продуктов одновременно");
		return false;
	}
	else if (el.checked) {
		CompareTypeID = type_id;
		AddCompare(Product_ID);
	}
	else RemoveCompare(Product_ID);	
	//alert("ПОСЛЕ: productID="+Product_ID+" ProductsInCart.length="+ProductsInCart.length);
	return true;

}
function AddCompare(product) {
  ProductsInCart.push(product);вы
  var frm= $("frmProductCompare");
  frm.product_id.value=product;
  frm.func.value="comparisonAdd";
  //frm.page.value = "shop.comparison_short";
  handleUpdateCompare(frm);
 
  $( "#dialog" ).dialog();
}

function RemoveCompare(product) {
	//alert(product);
	removeByElement(ProductsInCart,product);
	if (ProductsInCart.length<=0) CompareTypeID=-1;
	//alert(ProductsInCart.length);
	//alert(ProductsInCart[0]);
	var frm= $("frmProductCompare");
	frm.product_id.value=product;
	frm.func.value="comparisonDelete";
	handleUpdateCompare(frm);
}
	//для удаления из сравнения на странице сравнения
function RemoveComparePage(product) {
	//alert(product);
	removeByElement(ProductsInCart,product);
	var page;
	if (ProductsInCart.length<=0){ CompareTypeID=-1; page = "shop.browse";}
	else page = "shop.compare";
	//alert(ProductsInCart.length);
	var frm= $("frmProductCompare");
	frm.product_id.value=product;
	frm.func.value="comparisonDelete";
	frm.page.value=page;
	frm.compare_type.value = CompareTypeID;
	frm.submit();
}
function ClearCompare() {
	var el;
	for(var i=0;i<ProductsInCart.length;i++){ 
		//alert(ProductsInCart[i]);
		el= $("compare_cart_"+ProductsInCart[i]);
		if (el && el.checked) el.checked=false;
	}
	ProductsInCart=[];
	//alert(ProductsInCart.length);
	CompareTypeID=-1;
	var frm= $("frmProductCompare");
	frm.func.value="comparisonClear";
	handleUpdateCompare(frm);
}
//Очистка на странице сравнения
function ClearComparePage() {
	var el;
	for(var i=0;i<ProductsInCart.length;i++){ 
		//alert(ProductsInCart[i]);
		el= $("compare_cart_"+ProductsInCart[i]);
		if (el && el.checked) el.checked=false;
	}
	ProductsInCart=[];
	//alert(ProductsInCart.length);
	CompareTypeID=-1;
	var frm= $("frmProductCompare");
	frm.func.value="comparisonClear";
	frm.page.value="shop.browse";
	frm.submit();
}
/*function handleUpdateCompare( frm ) {
	var callback = function(responseText) {
		updateComparison()
		//$("Compare_Thumb_Container").innerHTML=responseText;
		ToggleCompareCheck(false);
	}	
	var opt = {
		method: "post",
		data: frm,
		onComplete: callback,
		evalScripts: true
	}		
	ToggleCompareCheck(true);
	new Ajax(frm.action, opt).request();
}*/
//function updateComparison() {
/*
function handleUpdateCompare( frm ) {
alert(frm.func.value);
	var callbackCart = function(responseText) {
		carts = $$( '.vmComparisonModule' );
		if( carts ) {
			try { 
				for (var i=0; i<carts.length; i++){
					carts[i].innerHTML = responseText;
					color = carts[i].getStyle( 'color' );
					bgcolor = carts[i].getStyle( 'background-color' );
					if( bgcolor == 'transparent' ) {
						// If the current element has no background color, it is transparent.
						// We can't make a highlight without knowing about the real background color,
						// so let's loop up to the next parent that has a BG Color
						parent = carts[i].getParent();
						while( parent && bgcolor == 'transparent' ) {
							bgcolor = parent.getStyle( 'background-color' );
							parent = parent.getParent();
						}
					}
					var fxc = new Fx.Style(carts[i], 'color', {duration: 1000});
					var fxbgc = new Fx.Style(carts[i], 'background-color', {duration: 1000});

					fxc.start( '#222', color );							
					fxbgc.start( '#fff68f', bgcolor );
					//if( parent ) {
					//	setTimeout( "carts[" + i + "].setStyle( 'background-color', 'transparent' )", 1000 );
					//}
				}
			} catch(e) {}
		}
		ToggleCompareCheck(false);
	}
	//option = { method: 'POST', onComplete: callbackCart }
	var frm1 = { only_page:1,
		page: frm.page.value,
		category_id: frm.category_id.value,
		product_id: frm.product_id.value,
		func: "comparisonAdd",
		compare_type: frm.compare_type.value,
		Itemid: frm.Itemid.value,
		option:	frm.option.value
	}
	var opt = {
		method: "post",
		data: frm1,
		//data: { only_page:1, option: "com_virtuemart", page: frm.page.value },
		onComplete: callbackCart,
		evalScripts: true
		//?page=shop.comparison_short
	}
	ToggleCompareCheck(true);
	new Ajax('http://joom15/index2.php?page=shop.comparison_short', opt).request();
}	
*/
function handleUpdateCompare( frm ) {			
	var callback = function(responseText) {
		updateComparison()
		//$("Compare_Thumb_Container").innerHTML=responseText;
		ToggleCompareCheck(false);
	}
				
	var opt = {
		method: "post",
		data: frm,
		onComplete: callback,
		evalScripts: true
	}
				
	ToggleCompareCheck(true);
	new Ajax(frm.action, opt).request();
}

function updateComparison() {
	var callbackCart = function(responseText) {
		carts = $$( '.vmComparisonModule' );
		if( carts ) {
			try { 
				for (var i=0; i<carts.length; i++){
					carts[i].innerHTML = responseText;
					color = carts[i].getStyle( 'color' );
					bgcolor = carts[i].getStyle( 'background-color' );
					if( bgcolor == 'transparent' ) {
						// If the current element has no background color, it is transparent.
						// We can't make a highlight without knowing about the real background color,
						// so let's loop up to the next parent that has a BG Color
						parent = carts[i].getParent();
						while( parent && bgcolor == 'transparent' ) {
							bgcolor = parent.getStyle( 'background-color' );
							parent = parent.getParent();
						}
					}
					var fxc = new Fx.Style(carts[i], 'color', {duration: 1000});
					var fxbgc = new Fx.Style(carts[i], 'background-color', {duration: 1000});

					fxc.start( '#222', color );							
					fxbgc.start( '#fff68f', bgcolor );
					if( parent ) {
						setTimeout( "carts[" + i + "].setStyle( 'background-color', 'transparent' )", 1000 );
					}
				}
			} catch(e) {}
		}
	}
	option = { method: 'POST', onComplete: callbackCart }
	new Ajax('index2.php?only_page=1&page=shop.comparison_short&option=com_virtuemart', option).request();
}
		
function ToggleCompareCheck(disabled) {
	var a = $$(".compare_checkbox");
	for (i=0; i<a.length; i++) a[i].disabled=disabled;
}
function RemoveCompareCheck(product) {
	var el= $("compare_cart_"+product);
	if (el && el.checked) el.checked=false;
	RemoveCompare(product+'');
}	

function handleGoToCompare() {
	if (!ProductsInCart || ProductsInCart.length<2) {
		alert("You must select 2 or more products to compare!");
		return;
	}
	var frm= $("frmProductCompare");
	frm.page.value="shop.compare";
	frm.compare_type.value = CompareTypeID;
	frm.func.value="";
	frm.submit();
}
function GoToCatalog() {
	var frm= $("frmProductCompare");
	if(frm.category_id.value>0)
	 frm.page.value="shop.browse";
	else frm.page.value="";
	frm.func.value="";
	frm.submit();
}
Ответить с цитированием
  #7 (permalink)  
Старый 31.01.2013, 17:34
Интересующийся
Отправить личное сообщение для katjuha6 Посмотреть профиль Найти все сообщения от katjuha6
 
Регистрация: 31.01.2013
Сообщений: 12

еще не работают 2 боковых слайдера и не грузится опрос в правой колонке.
такое чувство, что там конфликт скриптов. =(
Ответить с цитированием
  #8 (permalink)  
Старый 31.01.2013, 20:56
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

всё верно
это конфлиет mootools и jquery

рецепт
http://nauca.com.ua/zametki/resolve-...uery-mootools/

соответственно и строчка инициализации будет
jQuery( "#dialog" ).dialog();
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 31.01.2013 в 20:59.
Ответить с цитированием
  #9 (permalink)  
Старый 31.01.2013, 21:04
Интересующийся
Отправить личное сообщение для katjuha6 Посмотреть профиль Найти все сообщения от katjuha6
 
Регистрация: 31.01.2013
Сообщений: 12

понятно, но очень образно
вот содержимое HEAD
Код:
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/modules/mod_slider/css/style.css"/>
<script type="text/javascript" src="/modules/mod_slider/lib/slider.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
jQuery.noConflict(); - где-то тут прописывается?
или в slider.js
дело в том, что из прочитанного я мало что поняла, поэтому прошу прощения, что задаю глупый вопрос.
Ответить с цитированием
  #10 (permalink)  
Старый 31.01.2013, 21:12
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

вот здесь я подключил оба фреймворка и всё работает

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
     jQuery.noConflict();
 </script>

<script src="http://www.alexilin.ru/web/animated_menu/mootools.js"></script>
<script>
jQuery(function(){
    alert("всё работает");
})
</script>


я так понимаю это joomla и вас интерисует тема подклчения jquery к joonla

есть альтернативнй подход к примеру использовать mootools плагин, если найдёте вменяемый.
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 31.01.2013 в 21:21.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Пропадает меню при переводе курсора на всплывающее окно Adept_90 Элементы интерфейса 14 10.07.2012 21:34
Вывод данных из базы в цикле со ссылкой на всплывающее окно alexvb Events/DOM/Window 14 10.02.2012 15:16
всплывающее окно с задержкой int21h Общие вопросы Javascript 3 05.02.2012 15:27
Всплывающее окно и отправка в форму Hennessy Элементы интерфейса 2 11.01.2012 13:51
Всплывающее окно - надо задать границы Anton-CS Элементы интерфейса 0 18.07.2011 10:55