مثال للاجاكس وسؤال عن عمل ال Submit

بدأه MiNi.SpIdEr في 4 مارس 2008 · 7 رد · 1,110 مشاهدة · في منتدى تطوير المواقع بـ PHP

#14 مارس 2008 في 23:52 صاحب الموضوع

السلام عليكم

قمت بتعديل سكربت موقعي لاحوله الى اجاكس للسرعه اولا ولجمالها ثانيا ولاعجابي بها

استخدمت هذه الطريقه اظن النها ستفيد البعض لذلك سأضيفها

اولا اضفت

<script type="text/javascript">

 var img = '<p align="center"><img src="wite.gif"></p>';
 var $msg = "<div align='center' style='background-color: #000000'><font face='Tahoma' color='#FF9900'>يرجى الانتظار ...جاري احضار البيانات</font></div>";

 var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
 var loadedobjects=""
 var bustcacheparameter=""

 function include(url, containerid){
 document.getElementById(containerid).innerHTML = img+$msg; 
 var page_request = false
 if (window.XMLHttpRequest) // if Mozilla, Safari etc
 page_request = new XMLHttpRequest()
 else if (window.ActiveXObject){ // if IE
 try {
 page_request = new ActiveXObject("Msxml2.XMLHTTP")
 } 
 catch (e){
 try{
 page_request = new ActiveXObject("Microsoft.XMLHTTP")
 }
 catch (e){}
 }
 }
 else
 return false
 page_request.onreadystatechange=function(){
 loadpage(page_request, containerid)
 }
 if (bustcachevar) //if bust caching of external page
 bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
 page_request.open('GET', url+bustcacheparameter, true)
 page_request.send(null)
 }

 function loadpage(page_request, containerid){
 if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
 document.getElementById(containerid).innerHTML=page_request.responseText
 }

 function loadobjs(){
 if (!document.getElementById)
 return
 for (i=0; i<arguments.length; i++){
 var file=arguments
 var fileref=""
 if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
 if (file.indexOf(".js")!=-1){ //If object is a js file
 fileref=document.createElement('script')
 fileref.setAttribute("type","text/javascript");
 fileref.setAttribute("src", file);
 }
 else if (file.indexOf(".css")!=-1){ //If object is a css file
 fileref=document.createElement("link")
 fileref.setAttribute("rel", "stylesheet");
 fileref.setAttribute("type", "text/css");
 fileref.setAttribute("href", file);
 }
 }
 if (fileref!=""){
 document.getElementsByTagName("head").item(0).appendChild(fileref)
 loadedobjects+=file+" " //Remember this object as being already added to page
 }
 }
 }

 </script>

بعدها استدعيت الصفحات لمكان المخصص بتعريف

لل td

ووضعت كود الروابط هكذا

<a href="java script:;" onclick='include("test1.php","contentarea")'>page</a>

الكود الذي بملف test1.php هوه كود خاص بالسكربت الذي استخدمه لاحضار الاخبار بالــinclude

والكود هو

<?PHP
 header('Content-Type: text/html; charset=windows-1256');

 if($_POST['do'] == "search" or $_GET['dosearch'] == "yes"){ $subaction = "search"; $dosearch = "yes"; include("./news/search.php"); }
 elseif($_GET['do'] == "archives"){ include("./news/show_archives.php"); }
 else{ $category = "6"; $number = "2"; include("./news/show_news.php"); }

 ?>

طبعا لم استطع تحويل هذا الـ include الى الاجاكس فأستخدمت هذه الطريقه

وهي شغاله تمام وقمت بتعديل كل روابط السكربت والحمد لله

الان المشكله في الرد حيث انه لا يعمل عند الضغط على الــsubmit مجرد تفتح صفحه خاليه بدون اضافه شي والسبب واضح يمكن

الان كيف يمكن جعل الـsubmit يرسل بدون ان يفتح الصفحه من جديد حيث انا اعتقد ان بمجرد تفعيلي هذا الامر ستحل المشكله

اتمنى ان اجد المساعده وان تستفيدو من هذا الكود واتمنى ولو مثال للطريقه وهذا قالب محرر الخاص بي لو امكن تعديله

<table border="0" width="370" cellspacing="0" cellpadding="0">
	 <tr>
	   <td width="60">Name:</td>
	   <td><input type="text" name="name"></td>
	 </tr>
	 <tr>
	   <td>E-mail:</td>
	   <td><input type="text" name="mail"> (optional)</td>
	 </tr>
	 <tr>
	   <td>Smile:</td>
	   <td>{smilies}</td>
	 </tr>
	 <tr>
	   <td colspan="2">
	   <textarea cols="40" rows="6" id=commentsbox name="comments"></textarea><br />
	   <input type="submit" name="submit" value="Add My Comment">
	   <input type=checkbox name=CNremember  id=CNremember value=1><label for=CNremember> Remember Me</label> |
   <a href="java script:CNforget();">Forget Me</a>
	   </td>
	 </tr>
   </table>

تم تعديل هذه المشاركة بواسطة Xacker في 5 مارس 2008 في 15:39

[moveleft]

MiN! SpId3r SqUaD

[/moveleft]

#25 مارس 2008 في 00:04

بارك الله فيك أخي على هذع الإفادة .

''‏اللهم إني أسالك إيمانا دائما وأسألك قلبا خاشعا وأسألك علما ‏نافعا وأسألك يقينا صادقا وأسألك دينا قيما وأسألك العافية من كل ‏بلية''

'‏اللهم أغفر للمؤمنين و المؤمنات و المسلمين و المسلمات الأحياء ‏منهم و الأموات'

http://0xsife.wordpress.com

www.it-scoop.com

#35 مارس 2008 في 16:01

السلام عليكم

استبدل زر Submit بزر عادي يقوم بتنفيذ وظيفة جافاسكربت تطلب كود الاجاكس.

او حاول اضافة return false الى حدث onsubmit للفورم.

Do as I say, not as I do

We are Anonymous. We are Legion. We don't forgive. We don't forget

#45 مارس 2008 في 23:49

اهلا وسهلا بك اخي SIFE-C

وعليكم السلام ممكن لو توضحلي العمليه اكثر يعني واكون شاكر جدا جدا جدا لو صار هذا الكلام على هذا القالب

<table border="0" width="370" cellspacing="0" cellpadding="0">
	 <tr>
	   <td width="60">Name:</td>
	   <td><input type="text" name="name"></td>
	 </tr>
	 <tr>
	   <td>E-mail:</td>
	   <td><input type="text" name="mail"> (optional)</td>
	 </tr>
	 <tr>
	   <td>Smile:</td>
	   <td>{smilies}</td>
	 </tr>
	 <tr>
	   <td colspan="2">
	   <textarea cols="40" rows="6" id=commentsbox name="comments"></textarea><br />
	   <input type="submit" name="submit" value="Add My Comment">
	   <input type=checkbox name=CNremember  id=CNremember value=1><label for=CNremember> Remember Me</label> |
   <a href="java script:CNforget();">Forget Me</a>
	   </td>
	 </tr>
   </table>

وعذرا لاني لم افهمك ... اتمنى منك مثال

[moveleft]

MiN! SpId3r SqUaD

[/moveleft]

#55 مارس 2008 في 23:56

ضع لي وسم FORM أولاً :D

لا تقل لي لا تستخدم وسم FORM :blink:

Do as I say, not as I do

We are Anonymous. We are Legion. We don't forgive. We don't forget

#66 مارس 2008 في 03:25

هههههه القالب الاصلي للسكربت لا يحويه لكني استخدم هذا وهو يحوي على فورم لكنه طويل ويحوي ع بعض الجافا

ارفقته كاملا المهم يعمل الرد بالاجاكس حتى لو اضطررت لايقاف عدد من خوصه

وانا متأكد من انك سوف تفهمه وهو يحوي على زيادات :D بالاكواد

شكرا مقدما

Add_comment_form.zip

[moveleft]

MiN! SpId3r SqUaD

[/moveleft]

#76 مارس 2008 في 04:16

السلام عليكم

ساضع الجزء الذي قمت باضافته وتعديله قليلاً فقط ارجو ان تقرأ الاسطر بعناية فهي ان شاء الله واضحة لكن كما تعلم احتمال الخطأ وارد جداً وللعلم لم اجربه لاني احتاج الى سيرفر محلي لاختبار الارسال ولا املك هذا الآن...

<script type="text/javascript">
function xmlhttp(){
	  var obj;
	  var xml = new Array();
	  xml[0] = "MSXML2.XMLHTTP.5.0";
	  xml[1] = "MSXML2.XMLHTTP.4.0";
	  xml[2] = "MSXML2.XMLHTTP.3.0";
	  xml[3] = "MSXML2.XMLHTTP";
	  xml[4] = "Microsoft.XMLHTTP";
	  xml[5] = "WinHttp.WinHttpRequest.5";
	  xml[6] = "WinHttp.WinHttpRequest.5.1";
	  if (window.ActiveXObject) {
		  for (var i=0; i<xml.length; i++){
		   try {
			obj = new ActiveXObject(xml);
			break;
		   } catch(e) {obj = null;}
		  }
	  } else if (window.XMLHttpRequest) {
		  try {
		   obj = new XMLHttpRequest();
		  } catch(e) {obj = null;}
	  }return obj;
	  }

function postAJAX() {
	var req = xmlhttp();
	if (req == undefined || req == 0 || req == "") {
		alert("I was unable to get AJAX proper object");
	} else {
		var url = "./whatever.php"; // <<< قم بتغيير الصفحة التي تريد ارسال البيانات لها
		req.open("POST", url, true); // <<< ASYNC حتى يتسنى للمستخدم التصرف بحريته اثناء ارسال 

البيانات
		req.onreadystatechange = callback; // <<< وظيفة لاستقبال ومعالجة تغيرات الطلب
		var params = "" // <<< ضع بارامتراتك هنا
		req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		req.setRequestHeader("Content-Type", "text/html; charset=utf-8");
		req.setRequestHeader("Content-Type", "application/x-www-UTF8-encoded");
		req.setRequestHeader("Content-length", params.length);
		req.setRequestHeader("Connection", "close");
		req.send(params);
	}
}
function callback(){
	if (request.readyState == 4 && request.status == 200) {
		//res = request.responseText; <<< ان احتجت الى ارسال رد
		// تستطيع هنا ان تقوم بانشاء طلب GET تقوم من خلاله
		// بتحديث الصفحة لتظهر التعليق الذي تم ارساله
	}
}
</script>
</head>
<body>

<table border="1" cellspacing="0" cellpadding="0" bordercolor="#333333" bgcolor="#808080" 

width="413">
	<tr>

	  <td width="409" bordercolor="#333333" align="center">
		<p dir="rtl"><span lang="ar-sa">
		<font face="Tahoma" size="2" color="#FFFFFF">أسمك :</font> </span>
		<input type="text" name="name" size="27" style="border:3px double #000000; 

background-color:#FF9900"> </td>
	</tr>

	<tr>

	  <td width="409" bordercolor="#333333" align="center" bgcolor="#666666">
		<p dir="rtl"><font face="Tahoma" size="2"> 
		<span lang="ar-sa"> <font color="#FFFFFF">
		أيميلك :</font> </span></font>
		<input type="text" name="mail" size="27" style="border:3px double #000000; 

background-color:#FF9900">
		</td>
	</tr>
	<tr>
	  <td width="409" bordercolor="#333333">
		<p dir="rtl" align="center">{smilies}</td>
	</tr>
	<tr>
	  <td>

<form name="form" method="post" id="comment" action="">
<textarea cols="47" rows="5" id=commentsbox onkeyup="ReloadTextDiv()" name="comments" style="border

-style: double; border-width: 5px; color:#333333; background-color:#FF9900" 

onbeforedeactivate="window.txtRange = document.selection.createRange();" dir="rtl" ></textarea></p>
<p dir="rtl" align="center">
<font face="Tahoma" size="2"><input type="button" name="submit" value="اضافه رد" style="font-family: 

Tahoma" onclick="postAJAX();"></font>
<input type=checkbox name=CNremember  id=CNremember value=1><font face="Tahoma" size="2"><label 

for=CNremember> 
<span lang="ar-iq">تذكرني</span></label> | <a href="java script:CNforget();">
انساني</a>
	  </font>
	  </td>
	</tr>
  </table>
  </tr>
</table>
</div>

ان لم يعمل فكل جزء من الخطأ وشكل حدوثه وكيفيه حدوثه تزودني بها ستفيد في معرفة السبب..

بانتظار النتيجة.

السلام عليكم

تم تعديل هذه المشاركة بواسطة Xacker في 6 مارس 2008 في 04:17

Do as I say, not as I do

We are Anonymous. We are Legion. We don't forgive. We don't forget

#86 مارس 2008 في 16:26

بالبدايه شكرا لك

اظن ان علي توضيح بعض الاشياء

اولا : انا استخدم هذا السكربت CuteNews

امتمنى ان تقوم بتحميله حمه لا يصل الى 200 كيلوبايت (~198Kb)

قمت بتعديل السكربت هذا كثيرااا ووضعت العديد من الاضافات ولاعابي بالاجاكس استخدمتها نجحت في عمل الانتقال بين الصفحان وعرض المواضيع

والتنقل بينها لكن المشكله في الردود كما تعرف حيث عند اضافه رد يرسل الى comments.txt بطريقه معينه

وترتب البيانات كل اتي

1202563096|>|1204393471|re|none|127.0.0.1|re||
1202472357|>|

حسب علمي يكون

news id|>|1st comme id|first re|none|127.0.0.1|2nd re||2 nd comme id|>|

كتبتها بالانكليزي كي تبقى بنفس الترتيب

حيث نموذج الرد الذي وضعته لك لا يحوي مكان لتحديد مكان ارسال الملف ؟ :(

اقتباس
var url = "./whatever.php"; // <<< قم بتغيير الصفحة التي تريد ارسال البيانات لها

اتمنى لو تستطيع مساعدتي اكثر انا لدي بعض سكربت ارسال الردود ليس خاصا بأي سكربت معين لكنه يحتاج لقاعده

حيث سكربت موقعي اصلا يعمل على الtxt اضع الردود بقاعده سوف ارفعه لك ايضا وهو صغير لو تستطيع

تعديله ربما سيكون الامر اسهل واذا اردت ان ارفع لك ملف الذي يحول السكربت الى اجاكس ايضا

فقط ساعدني بهذا المشروع وسأكون مدين لك طول عمري فأنا في مأزق :wacko:

في انتظار ردك

AjaxComments_src.zip

[moveleft]

MiN! SpId3r SqUaD

[/moveleft]

مواضيع مشابهة

كيف اضع 2 submit لكل واحد عمل7 رد · 7 نوفمبر 2007
مثال من عمل مبدع6 رد · 2 فبراير 2003
يااخوه اى مثال بسيط يخص العمل على الخريط2 رد · 25 نوفمبر 2007
ممكن مثال عن عمل tree view11 رد · 6 فبراير 2004
مثال وسؤال حول مكون Treeview2 رد · 13 يوليو 2009
مثال فى كيفية عمل Quick Tip1 رد · 26 مايو 2004