We Keep Coding

jQuery functions not Working using .load() to refresh div tag

I'm using ajax post to send my value to (uploadsignupeditadvcheck.php). After submit successfully, I need to refresh my div tag (galleryadv) to prepare for next submit. My ajax submit is successfully, but after refresh my jquery function is not working anymore. I appreciate you guys, can help on my situation. thank you.
index.php
<script>
function uploadadv(){
var idadv = document.getElementById("idadv").value;
var companynameadv = document.getElementById("companynameadv").value;
var usernameadv = document.getElementById("usernameadv").value;
var aboutmeadv = $("#aboutmedecsadv").val();
var catadv = document.getElementById("catadv").value;
var typeadv = document.getElementById("typeadv").value;
var keywordadv = document.getElementById("keywordadv").value;
var addressadv = document.getElementById("addressadv").value;
var countryadv = document.getElementById("countryadv").value;
var zipadv = document.getElementById("zipadv").value;
var stateadv = document.getElementById("stateadv").value;
var cityadv = document.getElementById("cityadv").value;
var urladv = document.getElementById("urladv").value;
var priceadv = document.getElementById("priceadv").value;
var advstamp = document.getElementById("advstamp").value;
var myData = 'idadv='+idadv+ '&companynameadv='+companynameadv+ '&usernameadv='+ usernameadv+ '&aboutmeadv='+aboutmeadv+ '&catadv='+catadv+ '&typeadv='+typeadv+ '&keywordadv='+ keywordadv+ '&addressadv='+ addressadv+ '&countryadv='+ countryadv+ '&zipadv='+ zipadv+ '&stateadv='+ stateadv+ '&cityadv='+ cityadv+ '&urladv='+ urladv+ '&priceadv='+ priceadv+ '&advstamp='+ advstamp;
jQuery.ajax({
type: "POST", // HTTP method POST or GET
url: "uploadsignupeditadvcheck.php", //Where to make Ajax calls
dataType:"text", // Data type, HTML, json etc.
data:myData, //Form variables
success:function(data){
$('#messageeditcheckadv').html(data);
},
error:function (xhr, ajaxOptions, thrownError){
alert(thrownError);
}
});
};
</script>
<script>
var btn_edit = $(".avatar-galleryadv"),
btn_save = $(".avatar-previewgalleryadvsave");
btn_save.hide(0);
btn_edit.on("click", function() {
$(this).hide(0);
btn_save.fadeIn(300);
});
btn_save.on("click", function() {
$(this).hide(0);
btn_edit.fadeIn(300);
});
</script>
<script>
$( ".fa-map-marker" ).click(function() {
$( ".navtumbler" ).toggle( "fast" );
});
</script>
<div class="galleryadv">
<div class="avatar-galleryadv">
<div class="avatar-editgalleryadv">
<input type='file' id="uploadFileadv" accept=".png, .jpg, .jpeg" />
<label for="imageadv"></label>
</div>
<div class="avatar-previewgalleryadv">
<div id="imagePreviewgalleryadv" style="background-image: url(images/whitecamera.png); background-color:#181818; background-size:contain; background-repeat:no-repeat;">
</div>
</div>
</div>
<div class="avatar-previewgalleryadvsave">
<i class="fa fa-floppy-o" aria-hidden="true" id="uploadimageadv" style="margin:1px 0px 0px 0.4px;"></i>
</div>
<div class="igVideoData" style="color:#FFF; float:left;">
<i class="fa fa-map-marker spriteTemplate" aria-hidden="true" ></i>
</div>
</div>
uploadsignupeditadvcheck.php
$(".galleryadv").load(location.href+" .galleryadv>*");

You're overwriting dom elements that event handlers were attached to before. So you attach click events to buttons first, and then you load fresh HTML and overwriting the buttons that had handlers attached to so the new buttons have no event handlers attached to, that is why they do not respond to click events.
Either attach event handler to parent element that does not get overwritten, or reattach event handlers after you load and overwrite with new html.
I would probably go with attaching events to their parent, so it gets handled when event propagate up the dom tree.
var buttons_parent = $('.galleryadv');
buttons_parent.on('click', '.avatar-galleryadv', function(){
$(this).hide(0);
$('.avatar-previewgalleryadvsave').fadeIn(300);
});
buttons_parent.on('click', '.avatar-previewgalleryadvsave', function(){
$(this).hide(0);
$('.avatar-galleryadv').fadeIn(300);
});
And this goes instead of btn_edit.on("click", function() {... and btn_save.on("click", function() {.... Also I don't refer to buttons inside handlers by their reference saved in the variables because these will be invalid after overwriting them so I always look for them by their class names.
This way even when buttons are overwriten the handlers that handles their click events are intact.

How to get text value of a clicked item in vue.js?

Here is the code:
<li v-for="u in usersList">
<strong><a class="username" #click="openChatbox">${ u } </a></strong>
</li>
and the handling method:
openChatbox: function() {
target = event.target || event.srcElement;
this.isOpen = !this.isOpen;
this.recepient = target.innerHTML
},
The problem is that this method sets recepientlike <strong>noob</strong> when u value is noob. How can I get only noob?

You can pass the user like following in the method:
<li v-for="u in usersList">
<strong><a class="username" #click="openChatbox(u)">${ u } </a></strong>
</li>
and use it in method like this:
openChatbox: function(user) {
//use user here
},

Deleting href when clicked on a link (a delete icon) beside it (Javascript help)

I have a link <a href="#"> and beside that there is a delete png icon (which is also <a href="#"> link.
So what I want is, when clicked on that delete icon, the link <a href="#"> should get deleted with a confirmation window.
So far I have got like,
html:
<ul>
<li>link <a class="delete" href="#" data-request="POST" >....</a></li>
</ul>
My javascript for data-request
var join_request = function(evnt){
evnt.preventDefault();
var $a = $(this);
var request = $a.data('request') || 'POST';
if (confirm("Are you sure want to delete it?")) {
$.ajax($a.attr('href'), {
type: request,
context: $a,
success: join_request_success
});
}
return false;
};
var join_request_success = function(data, a, b){
this.trigger('executed');
};
$(document).ready(function(){
$('a[data-request]').bind('click', join_request);
}
This doesn't seem to be working! When I am clicking on the delete icon, it is displaying the confirmation window but not doing anything.
Is there any other simple way of achieving this? If not, can anyone tell me where am I going wrong?
Thanks.

var join_request = function(evnt){
evnt.preventDefault();
var $a = $(this);
var request = $a.data('request') || 'POST';
if (confirm("Are you sure want to delete it?")) {
$.ajax($a.attr('href'), {
type: request,
context: $a,
error: join_request_success
});
}
return false;
};
var join_request_success = function(data, a, b){
this.trigger('executed');
this.prev().remove();
};
$(document).ready(function(){
$('a[data-request]').bind('click', join_request);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>link <a class="delete" href="#" data-request="POST" >....</a></li>
</ul>
Note that I had to change success: to error: for demonstration.

jQuery click function for <ul><li> elements

I have a unordered list looking like this:
<ul id="frozen" data-name="nameOfSelect" class="tagit">
<li class="tagit-choice" tagvalue="2" style="padding-right: 4px;" id="tag-2">
<div class="tagit-label" data-value="2">kázeň</div>
</li>
<li class="tagit-choice" tagvalue="1" style="padding-right: 4px;" id="tag-1">
<div class="tagit-label" data-value="1">žalmxxxx</div>
</li>
</ul>
I need to bind an click function to all of them and get the data of the id="tag-1" to be used in the function.
I have tried this:
$('#[id|="tag"]').each(function(){
var tag = this.attr('id');
var tagID = tag.replace('tag-','');
this.click(function (){
alert('index.php?s=taglist&tag=' + tagID);
//window.location = string;
});
});
However, for some reason it seems that this approach is wrong for the <li> element as I am having problems with the selector (it seems). Maybe I am also missing something stupid... Any ideas?

No need for a loop, jQuery does this internally, and this is a native DOM element, which has an id property, but no attr() method :
$('[id^="tag-"]').on('click', function() {
var tag = this.id,
tagID = tag.replace('tag-', '');
alert('index.php?s=taglist&tag=' + tagID);
});

split ajax response in two different divs

I have an Ajax code like this:
$j(document).ready(function () {
function loading_show() {
$j('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast');
}
function loading_hide() {
$j('#loading').fadeOut();
}
function loadData(page) {
loading_show();
$j.ajax({
type: "POST",
url: "load_data.php",
data: "page=" + page,
success: function (msg) {
var $response = $j(msg);
// Query the jQuery object for the values
oGlobal = $response.filter('#Z').text();
$j("#container").ajaxComplete(function(event, request, settings) {
loading_hide();
$j("#container").html(msg);
});
}
});
}
loadData(1); // For first time page load default results
$j('#container .pagination li.active').live('click', function () {
var page = $j(this).attr('p');
loadData(page);
});
});
Im getting this response:
<div id="container">
<div id="Z">JuanFernando</div>
<div id="q">
<div class="pagination">
<ul>
<li p="1" class="inactive">First</li>
<li class="inactive">Previous</li>
<li p="1" style="color:#fff;background-color:#006699;" class="active">1</li>
<li p="2" class="active">2</li>
<li p="2" class="active">Next</li>
<li p="2" class="active">Last</li>
</ul>
<input class="goto" size="1" style="margin-top:-1px;margin-left:60px;"
type="text">
<input id="go_btn" class="go_button" value="Go" type="button"><span class="total" a="2">Page <b>1</b> of <b>2</b></span>
</div>
</div>
</div>
I want to extract "JuanFernando" in order to show in div container but alone and I want that the rest of the response could be show in other different div for example: container2.

ajaxComplete is not what you want to use here, especially inside your success function. You want your success function to look something like this:
success: function (msg) {
loading_hide();
var $response = $j(msg);
// Query the jQuery object for the values
oGlobal = $response.find('#Z').text();
$j("#container").html(oGlobal);
$response.find('#Z').remove();
$j('<div id="container2"></div>').html($response.html()).appendTo('body');
}
We're just taking the oGlobal (which should be JuanFernando in this case) and sticking it in the #container. After that, remove the #Z div from the response, and stick the rest inside of a new #container2, and append it to the body, or wherever you'd like it.

Here's an "adapted" fiddle.
Basically the only thing that changes with you code is
replace
oGlobal = $response.filter('#Z').text();
with
oGlobal = $response.find('#Z').text();
also, see MattDiamant's answer concerning ajaxComplete.