PDA

View Full Version : اجرا نشدن اسکریپت بعد از ساخت المنت با آجاکس.


centeralweb
سه شنبه 07 آبان 1392, 01:31 صبح
سلام به همه ی اساتید گرامی.

من میخوام توی سایتم از یک Color Picker استفاده کنم. بعد از جستجو من jscolor.com رو پیدا کردم که بسیار ساده و کاربردی هست. بدون دردسر هم اجرا میشه. مشکل از اینجا شروع شد که من میخوام input رو با AJAX تولید کنم و نمایش بدم. منتهی زمانی که این کار رو می کنم، دیگه عمل نمیکنه و با کلیک روی input صفحه ی رنگ ها برام باز نمیشه. چه باید کرد؟


با تشکر
ravand
سه شنبه 07 آبان 1392, 08:23 صبح
از این روش استفاده کن:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript"src="http://malsup.github.io/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("#name-form").ajaxForm({target:'#preview'}).submit();
});
});
</script>

<form id="name-form" method="post" >
hossin.esm
سه شنبه 07 آبان 1392, 11:09 صبح
سلام
کدش داخل مثال های خودش بود . من همین حجا گذاشتم

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>manual-binding (example)</title>
</head>
<body>


<script type="text/javascript" src="jscolor.js"></script>

<input id="myField1">

<script type="text/javascript">
var myPicker = new jscolor.color(document.getElementById('myField1'), {})
myPicker.fromString('99FF33') // now you can access API via 'myPicker' variable
</script>


</body>
</html>


میتونی از کد زیر بعد از فراخوانی آژکس استفاده کنی.

var myPicker = new jscolor.color(document.getElementById('myField1'), {})
centeralweb
سه شنبه 07 آبان 1392, 16:58 عصر
حسین جان من هم این کد رو دیدم اتفاقا" منتها کار نکرد. توجه داشته باشید، input داره توسط یک فایل php ساخته میشه (echo میشه).

یعنی زمانی که شما روی یک کلیدی کلیک میکنید، یک فایل php توسط AJAX فراخوانی میشه و اون فایل php المنت ما رو میسازه، یعنی :
<input id="myField1">
centeralweb
سه شنبه 07 آبان 1392, 17:21 عصر
RAVAND جان. این کد به درد این کار نمی خوره. ببین، اصل کد HTML ما اینه :



<html> <head> <script src='/js/jscloro.js'></script> <script> function showHint(str) { if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","gethint.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <a href="#" onClick="showHint('jscolorpicker')">FORM</a> <div id="txtHint"></div> </body> </html>


فایل gethint.php هم اینه :


echo "<input class=\"color\" type=\"text\" value=\"66ff00\">";

فایل php هم قشنگ و بدون هیچ مشکلی input رو چاپ میکنه، منتها زمانی که روش کلیک می کنم هیچ اتفاقی نمیافته.
hossin.esm
چهارشنبه 08 آبان 1392, 13:23 عصر
سلام
بله درسته من هم دقیقا همین را گفتم که بعد از فراخوانی فایل php با آژکس و نمایش کد را اجرا کنید
به هر حال مثال را با آژکس براتون ایجاد کردم
index.php


<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>manual-binding (example)</title>
</head>
<body>


<script type="text/javascript" src="jscolor.js"></script>


<div id="loading" style="color:red;font-size:16px;"></div>
<div id="myDiv">

</div>
<button onclick="ajax()"> get ajax</button>

<script type="text/javascript">
function ajax()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4)
{
if(xmlhttp.status==200)
{

document.getElementById("loading").innerHTML='';
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

// کد را باید اینجا قرار بدی
var myPicker = new jscolor.color(document.getElementById('myField1'), {})
myPicker.fromString('99FF33') // now you can access API via 'myPicker' variable

}
else
{

document.getElementById("loading").innerHTML='خطا در بار گزاري'+' '+xmlhttp.status;
}
}
}

document.getElementById("loading").innerHTML='خطا در بار گزاري';
xmlhttp.open("GET","ajax.php",true);
xmlhttp.send();
}
</script>




</body>
</html>



ajax.php



<input id="myField1">