Change css of first div after live click - javascript

I want to be able to change the css of a div after I have clicked span.submit-comment.
How would I go about to change the css of that div.
I tried putting the following in the success part of the script:
$('div.news-comment:first').css("background-color", "#000");
But the div just flashes black (as I click) because it's inside the click function. I want the css to persist untill I refresh the page.
Any ideas?
// post news comment
$('span.submit-comment').live('click', function() {
var commentname = $('input#commentname').val();
var commentcontent = $('textarea#commentcontent').val();
var newsid = $('span.view-comments').attr('id');
var datastring = 'commentname=' + commentname + '&commentcontent=' + commentcontent + '&newsid=' + newsid;
$.ajax({
type: "POST",
url: "ajax/post_news_comment.php",
data: datastring,
success: function(){
$('div#news-comments').load('ajax/get_news_comments.php?news_id=' + newsid);
}
});
});

If the comment you are changing the background on is in the #news-comments div you are replacing it with the loaded html from get_news_comments.php in your .ajax callback. No matter where you put your js the element will be replaced.
If so, adding it in a callback for the load in your success function should be ok.

Your css script is ok, but just place it after load function.

Just add a return false at the end of the function for the button click, or pass in the value e and put e.preventDefault(); at the begining or end of the function.
e.g.
$('span.submit-comment').live('click', function(e) {
e.preventDefault();
// your other code.
return false;
});

Related

How can I remove all child element of DIV element on onBlur event?

I have a web page where I have defined one DIV element with id "selectedProduct", now while I click on particular link it will call ajax request and it will fill DIV element with response data. But i have requirement that when onBlur event occurs on "selectedProduct" DIV, it should remove all the child element of it's. My code is as follow:
<script type="text/javascript">
function getPage(event,id)
{
event.preventDefault();
var page = document.getElementById(id).id + ".html";
var dataString = page
$.ajax(
{
type: "POST",
url: page,
data: dataString,
cache: false,
success: function(result)
{
var result=result;
$("#selectedProduct").html(result);
// location.replace("index1.html");
}
});
}
function focOFF(id)
{
// I don't have any idea what code should i write here which can remove all child of DIV element....
}
</script>
<body>
Solar Power Plant
<div id="selectedProduct" onBlur="focOFF(this.id)">
</div>
</body>
Use the below solution of getting all child elements and the removing them,
function focOFF(id)
{
$( "#"+id ).children().remove();
}
Use empty() function inside your blur function . It removes all child nodes of selected element
function focOFF(id)
{
$('#'+id).empty();
}
document.getElementById(id).innerHTML = '';

Why returned value from AJAX disappears almost instantly?

this is my server-side code:
modify_emp.php
<?php
echo $_POST[id];
?>
And this is my Javascript in my html page:
<script>
$(document).ready(function () {
var alreadyClicked = false;
$('.element').hover(
//mouseenter function
function(){
$('.element').click(
function(){
$(this).css("color","blue");
var objName = $(this).attr('name');
var objColumn = $(this).attr('id');
if(!alreadyClicked){
alreadyClicked = true;
$(this)
.prepend('<form method="POST" class="newInput"><input type="text" name="newInput" style="width:140px"></input></form>');
var elemento = $(".newInput");
var position = elemento.position();
$(".newInput").css({
'position': 'absolute',
'top': position.top + 15,
'opacity':0.9,
'z-index':5000,
})
.focus();
//on enter keypress
$(document).keypress(function(e) {
if(e.which == 13) {
$.ajax({
url: 'modify_imp.php',
type: 'post',
data: { id : objName, column : objColumn },
success: function(data, status){
$("#debug").html(data);
}
});
}
});
} //if (!alreadyClicked) end
}); //end mouseenter function
},
//mouseleave function
function () {
alreadyClicked = false;
$(this).css("color","red");
$(".newInput").remove();
}
); //end .hover
});
The debug is a <div id="debug"> </div> at the end of my html page where i want to show my response from server. When i press 'ENTER' I can actually see the value for 0.1s inside that div, but then it disappears.
I already tried to pass the return value to a local or global variable but it didn't work.
For some reason the value inside response is lost after 0.1s, even if i pass it to another variable elsewhere.
Can someone explain me why and how can i "store" the server response?
EDIT: Just edited with my entire <script>
Since you see the result momentarily, I'm going to hazard a guess that you have a form element on your page and when you hit return, it's actually submitting the form. You briefly see the result of the ajax operation and then your form submits causing the page to reload as a new blank page. This is a common issue and always has these same symptoms.
You can either remove the form element or block the default submission of the form with javascript.
If you show us more of your actual HTML, we could help more specifically with how to prevent the form from submitting.
You can solve this by calling the function in the form tag i.e,
<form action="javascript:AnyFunction();">
your code goes here
.
Another way would be to assign a BUTTON to trigger the ajax, and set the button outside of the FORM

AJAX call requires double click

I've created a function which loads content and writes into html. For some reason the function is displayed after two clicks instead of one. Any idea how to make it so it load and display the info with just one click?
function getFuncDoc(funcName, targetDivId) {
var webServiceCall = funcName;
$.ajax({
type: "get",
url: webServiceCall,
success: function(doc) {
$('#' + targetDivId).load(doc, function(){
$('#' + targetDivId).toggle(
function() {
$('#' + targetDivId).css('padding', '10px');
$('#' + targetDivId).html(doc);
});
});
},
error: function(request, status, error) {
return 'Error';
}
});
}
Check if the targeted element (targetDivId) has display:none before the toggle() is triggered.
If that's not the case, then you'll need to add this attribute to your element in CSS.
toggle()-ing an element with display:block or display:inline or display:inline-block will hide the element and set its attribute to display:none, hence why you need to trigger it twice for the content to be shown.
Here is a live demo.

set an anchor tag's href to a value to make it unresponsive to javascript/jquery methods on the page

so i have a jquery function that does something on the click of an anchor tag.now i want to make the button unresponsive to jquery on subsequent clicks. what should i do?
what i am doing is changing the innerHTML of the anchor tag on the first click and doing an AJAX call and during this time period i want nothing to happen when the user click on the same anchor tag again.
This is how i handle clicks through jquery
$('.profileEdit label a').live('click', function () {
// do something
});
If i understood what you want you can just remove the 'onclick' attribute before the ajax call and set it up again at the end (success or fail).
#EDIT: final solution codes
function update(){
$("#bb").html('Updating');
$("body").off('click',"#bb");
$.ajax({
type: "POST",
url:"profileUpdate.asmx/HelloWorld",
data: "{ 'value': '" + document.getElementById(string).value + "'" + ",'column':'" + string + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
defaultSetter();
},
error: function (msg) {
defaultSetter();
}
});
}
function defaultSetter(){
$("#bb").html("Test");
$("body").on('click','#bb', update);
}
$(document).ready(function(){
defaultSetter();
});
jsfiddle: http://jsfiddle.net/V3AAF/
bb element is a button, not an anchor
Could you not just use one() if you only want the action to happen once on the first click?
$('.profileEdit label a').one('click', function () {
alert('This will only alert on the first click');
});
If you happened a handler for further clicks on that element, just use return false, to prevent anything from happening after the first click:
$('a').on('click', function () {
return false;
alert('first time!');
});
jsFiddle example.

How to extract HTML() of a given DIV from html() when content is coming through AJAX

i am using jquery ajax to load a section of page with another page content/html. \
$(function() {
app.xhr = $.ajax({
url: url,
dataType: "html",
cache: false,
success : function(html)
{
app.html = $(html);
setTimeout(function(){
app.insertPageData();
app.xhr = null;
},100)
},
error : function()
{
alert("Not Found")
}
})
insertPageData : function()
{
$('div.data').html(app.html.find(".content").html())
}
});
So here is the problem specific to IE. app.html contains the HTML of the page and i need to extract one specific div html from the page which is not working with IE.
is there any other way to extract HTML from HTML??
Thanks / Gursimron
Do you have an id or class on the div you want? Also, by extract do you mean that's all you want, or do you mean that you want to remove it from the HTML?
If you want to remove the the div, and assuming you have an id, you can do this:
app.html.remove('#id-of-div');
If all you want is just the div and nothing else, then you would do this:
app.html = app.html.find('#id-of-div');

Categories