[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Javascript propagation

Posted on 2014-07-15
7
Medium Priority
?
163 Views
Last Modified: 2014-07-22
Hi,

i am having problem with inline onclick events in the same div

here is my html
<li>
				<a href="#" class="" id="msg7" onclick="ajax_messages('ajax/messages_main.php?message_id=7','7'); return false">  
				  <div class="media">
					<div class="pull-left">
					  <img class="media-object img-circle" src="//www.bushbrigade.com/profile/images/profile_pics/201308161747555930435525.jpg">
					</div>
					<div class="media-body">
					  <p class="media-heading">Blackout Menace 
					  	<span class="badge badge-greensea" id="msg_badge7"></span> 
						<span class="time">8 Hours</span>
					  </p>
					  <span class="message">who did you see snoop dogg with?</span>
					  
					<div class="chat-actions">
					  <span class="mark-unread" title="" onclick="ajax_update_inner('ajax/messages_main.php?read&amp;id=7',7); return false" id="read7" data-original-title="Mark as read">
						<i class="fa fa-circle-o"></i>
					  </span> 
					  <span class="save" title="" onclick="ajax_update_inner('ajax/messages_main.php?save&amp;id=7',7); return false" id="save7" data-original-title="Save">
						<i class="fa fa-save"></i>
					  </span>
					  <span class="archive" title="" onclick="ajax_update_inner('ajax/messages_main.php?active&amp;id=7',7); return false" id="delete7" data-original-title="Archive">
						<i class="fa fa-times"></i>
					  </span>
					</div>
				
					</div>
				  </div>
				</a>
			  </li>

Open in new window


here is the js functions
//GRAB PHP INFO FOR MESSASAGES
function ajax_messages(ajaxfile, id){
	   // Get all the form data 
	   $.ajax({
         type: "POST",
         url: ajaxfile,
		 dataType : 'json',
		 success: function(a){		 
			document.getElementById('users_name_heading').innerHTML=a.heading;
			document.getElementById('message_subject').innerHTML=a.subject;
			document.getElementById('message_thread').innerHTML=a.content;
			document.getElementById('show_msg_form').style.display='block';
			
			//EDIT FORM VALUES
			document.getElementById('msg_id').value =a.msg_id; 	
			document.getElementById('msg_indi').value =a.msg_indi; 	
			document.getElementById('msg_sub').value =a.msg_sub; 
					
			//ADJUST THE SIDE PANEL SETTINGS
			document.getElementById('msg_badge'+id).innerHTML =a.badge; 
			
			//GO TO BOTTOM
			var div =document.getElementById('chat-content');
			div.scrollTop= div.scrollHeight;
			
			//STOP PROPIGRATION
			//a.stopPropagation();
			//a.cancelBubble = true	 
		 }
    });	
}

//UPDATE THE DIVS WITH NEW BADGES
function ajax_update_inner(ajaxfile,id){
	   // Get all the form data 
	   $.ajax({
         type: "POST",
         url: ajaxfile,
		 dataType : 'json',
		 success: function(a){
			 document.getElementById('msg'+id).className = a.msg;
			 document.getElementById('read'+id).setAttribute('onclick' , a.onclick );
			 document.getElementById('read'+id).setAttribute('data-original-title', a.read );
			 document.getElementById('msg_badge'+id).innerHTML =a.badge;  
			 document.getElementById('msg_badge'+id).className =a.badge_color;  
			
		 }
    });
	 
}

Open in new window


i want the ajax commands to act completely independent

thanks in advance

ajax.pdf
0
Comment
Question by:J N
  • 4
  • 3
7 Comments
 
LVL 34

Assisted Solution

by:Slick812
Slick812 earned 2000 total points
ID: 40200282
greetings  M. Jayme Nagy, , ,  I am somewhat reluctant to post a possible code solution here, because you use a MIXED UP combination of JQUERY and standard DOM javascript code. You use JQUERY for the AJAX, and seem to use the standard DOM javascript code for everything else. which is OK by me, , BUT -for others to help you you may need to stick with either jquery or standard DOM for all your code work,

That said, here is my suggestion, first you need to get some knowledge about HOW events in the javascript DOM are "Transmitted" through the container hierarchy, a <div> container inside an <a> container, which has sub <div> with sub <span> which have "click" events. you can look up "javascript event bubbling" in a web search.

for your <span> onclick you need to get the "event" and then STOP the event bubble as this code -
<div class="chat-actions">
<span class="mark-unread" title="" onclick="ajax_update_inner('ajax/messages_main.php?read&amp;id=7',7,event);  return false" id="read7" data-original-title="Mark as read">
  <i class="fa fa-circle-o"></i>
</span> 
<span class="save" title="" onclick="ajax_update_inner('ajax/messages_main.php?save&amp;id=7',7,event); return false" id="save7" data-original-title="Save">
<i class="fa fa-save"></i>
</span>
<span class="archive" title="" onclick="ajax_update_inner('ajax/messages_main.php?active&amp;id=7',7,event); return false" id="delete7" data-original-title="Archive">
<i class="fa fa-times"></i>
</span>
</div>

Open in new window

PLEASE NOTICE that I have added the event to the ajax_update_inner("",7,event) for ALL three spans

next is the javascript
function ajax_update_inner(url,id,ev) {
// get the event and STOP the bubble
e = ev || window.event;
if (e.stopPropagation) {e.stopPropagation()} else {
e.cancelBubble = true}

// place whatever JS code you need below here
}

Open in new window

0
 
LVL 6

Accepted Solution

by:
J N earned 0 total points
ID: 40200360
Hi,,

i changed my function to to use jquery:
function ajax_update_inner(url,id,ev) {
	// get the event and STOP the bubble
	e = ev || window.event;
	if (e.stopPropagation) {e.stopPropagation()} else {
		e.cancelBubble = true}
	
	// Get all the form data 
	   $.ajax({
         type: "POST",
         url: url,
		 dataType : 'json',
		 success: function(a){
			 $('#msg'+id).attr('class', a.msg);
			 $('#read'+id).attr('onclick' , a.onclick );
			 $('#read'+id).attr('data-original-title', a.read );
			 $('#msg_badge'+id).html(a.badge);  
			 $('#msg_badge'+id).attr('class',a.badge_color);  
			
		 }
    })

Open in new window




i have left the inline onclick events as you posted

is this what you are suggesting?
0
 
LVL 34

Expert Comment

by:Slick812
ID: 40201205
you ask - "is this what you are suggesting?"

yes, thats the code I showed you, and I have that code -
e = ev || window.event;
      if (e.stopPropagation) {e.stopPropagation()} else {
            e.cancelBubble = true}

in use so it works for me,
I can NOT test your JQUERY AJAX post code so, you can add whatever code that works, But I must say, that in this function you do not use the id  parameter EVER, so why do you have useless parameters in your code work? ?

also you use this as an URL -
    ajax/messages_main.php?read&amp;id=7

this is WRONG for a GET send the  ;id=7  is BAD URL syntax, also if you are using a GET address URL , then WHY are you sending a AJAX POST? ? there's something mixed up and out of place for this whole code sequence? ?

and why do you have this line in your code -
     // Get all the form data

nowhere do you ever get any form data, that I can see, and send it as a POST, again this seems out of place,
Is this your first AJAX code work?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 6

Author Comment

by:J N
ID: 40202355
Hi,

I am very new to ajax but the above does what i want it to do.

i only posted a portion of the entire html/php/ajax to keep the question short.

essentially i have an ajax onclick function that  gets php data and replaces content on the page with the set ids
0
 
LVL 34

Expert Comment

by:Slick812
ID: 40202433
OK, so you do use the  id  and get FORM input data, , however It is IMPORTANT to have your AJAX connections-communications be "compatible" with the various different browsers (IE, firefox, chrome, opera) that are out there. Your use of the GET portion of your web address
     ajax/messages_main.php?read&amp;id=7

and the use of the AJAX as a POST, may be a problem at some point, as the two are NOT suppose to be used together in an AJAX request! ! , if nothing else at least correct the GET address portion to -
      ajax/messages_main.php?read=1&amp=1&id=7

how many different browsers and versions have you tested this in?
0
 
LVL 6

Author Comment

by:J N
ID: 40202466
Hi,

yes i am using the id parameter

' ajax/messages_main.php?read&id=7'

on my php i have done this

if(isset($_GET['read']) && !empty($_GET['id'])){
   //do some work in php

}elseif(someother code){

}

so the url in the javascript just directs the ajax request to the proper portion of my php script (instead of having a bunch of little ones i have a larger single one) the id var is important though as i am using it in my sql query to get data from mysql

i have tested it on chrome, firefox, ie all is fine and dandy (chrome is our most popular broswer according to google analytics )
0
 
LVL 6

Author Closing Comment

by:J N
ID: 40211048
posted the full results of the experts advice
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

868 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question