jquery post value on toggle action - javascript

Here is the html code:
<div class="magic-container">
<div class="input-group">
<input type="text" class="typeahead form-control" placeholder="Select category ..." />
<ul class="dropdown-menu" style= "margin-top: -10px !important;">
<li id="one">Sports</li>
<li role="presentation" class="divider"></li>
<li id="two">Entertainment</li>
<li role="presentation" class="divider"></li>
<li id="three">Travel</li>
<li role="presentation" class="divider"></li>
<li id="four">Business</li>
<li></li>
</ul>
<span class="flip">
FLIP
</span>
</div>
</div>
<div class="magic-bar">
<span id="rating-slider" class="ui-slider-range"></span>
<span class="flip">
FLIP
</span>
</div>
When FLIP with mirror1 clicked, I want to post fc1 and when FLIP with mirror2 is clicked I want to post fc2.
Here is my code to perform this:
$(".flip").on('click', function() {
$(".magic-bar").toggle();
$.ajax({
url: "invite_db.php",
type: "POST",
data: {"flipClick": 'fc1'},
success: function(data) {
$(".articleContent").html(data);
//setInterval("messageDisable()", 5000);
}
});
$(".magic-container").toggle();
$.ajax({
url: "invite_db.php",
type: "POST",
data: {"flipClick": 'fc2'},
success: function(data) {
$(".articleContent").html(data);
//setInterval("messageDisable()", 5000);
}
});
});
But when I click on FLIP both the values get posted and page response remains same. What is the logic mistake here?

You problem is that you only get the click on class flip, insted what anchor is clicked.
Try:
$(".flip a").on('click', function() {
if($(this).hasClass('mirror1'))
{
$(".magic-bar").toggle(); $(".magic-container").toggle();
$.ajax({
url: "invite_db.php",
type: "POST",
data: {"flipClick": 'fc1'},
success: function(data) {
$(".articleContent").html(data);
//setInterval("messageDisable()", 5000);
}
});
}
else
{
$(".magic-container").toggle(); $(".magic-bar").toggle();
$.ajax({
url: "invite_db.php",
type: "POST",
data: {"flipClick": 'fc2'},
success: function(data) {
$(".articleContent").html(data);
//setInterval("messageDisable()", 5000);
}
});
}
});

You are simply submitting both values when clicking any DOM object with class "flip". I read your code like this:
$(".flip").on('click', function() {
$(".magic-bar").toggle();
$.ajax({ data: {"flipClick": 'fc1'} /* ... */);
$(".magic-container").toggle();
$.ajax({ data: {"flipClick": 'fc2'} /* ... */);
});

There is no conditional logic in your code
For instance you need to check if the closest anchor tag
of the flip click has class mirror1 or mirror2 then based
on that you will do one of the two calls and toggle
Something like this
$(".flip a").on('click', function() {
if($(this).hasClass('mirror1')){
}
if($(this).hasClass('mirror2')){
}
}

Related

Button does not work while visit another pagination page or being search (ajax, Laravel)

After being searched in the index page, the button action does not work.
While visiting second page the action button does not work.
Here is my index page
<a href="#" class="btn btn-primary btn-active-primary btn-sm"
data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
{{actions}}
<span class="svg-icon svg-icon-5 m-0">
<svg xmlns="http://www.w3.org/2000/svg" width="24" </svg>
</span>
</a>
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded
menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-125px py-4"
data-kt-menu="true">
<div class="menu-item px-3">
<a href="{{ route('index.show', $index->id) }}" class="menu-link
px-3">
{{View Details}}
</a>
</div>
Here is the Route
Route::prefix('example')->name('examples.')->group(function () {
Route::get('', [ExampleController::class, 'index'])->name('index');
});
Here is the script
$(document).on("click", "#pagination a, #search_btn, #reset_btn", function() {
if(this.id == 'reset_btn'){
$("#searchform").reset();
}
$.ajax({
url: this.dataset.url,
type: 'get',
data: $("#searchform").serialize(),
processData: false,
cache: false,
contentType: false,
success: function(data) {
$("#pagination_data").html(data);
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
})
});```
Simply solve the bug by inserting the code below into the button function script.
KTMenu.createInstances();

How to select element of click element parents using jQuery?

I have following HTML code and I am calling ajax using click event using this class .educacao_search.
<div class="tab-pane active" id="tab-educacao">
<br>
<div class="row">
<div class="col-md-12">
<h4>EucaÇÃo</h4>
<ul class="list-inline three">
<li><a class="educacao_search" data-slug="ension">Ensino</a></li>
<li><a class="educacao_search" data-slug="enem">ENEM</a></li>
<li><a class="educacao_search" data-slug="escolas">Escolas</a></li>
<li><a class="educacao_search" data-slug="lingua-e-linguagens">Lingua e Linguagens</a></li>
<li><a class="educacao_search" data-slug="historia">História</a></li>
<li><a class="educacao_search" data-slug="todos">Todos</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group has-feedback has-search">
<input type="text" class="form-control" placeholder="Search" id="do_search_educacao">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</div>
</div>
<br>
<div class="row"><div class="show_result"></div><br></div>
</div>
now I on success I want to show result in show_result class.
To do this I am using collowing jQuery code but it seems not working! I mean the result is not showing in this class called show_result
$(this).parents(".tab-pane").find(".show_result").html(result);
Note: this is a bootstrap tabs and there are 5 tabs with same classes which is educacao_search and show_result
Update:
Ajax Call:
$(".educacao_search").click(function () {
var slug = $(this).data('slug');
$.ajax({
type: 'POST',
url: urls.ajax_url,
data: {
'slug': slug,
'action': 'get_post_content'
}, success: function (result) {
$(this).parents(".tab-pane").find(".show_result").html(result);
//$(this).find(".show_result").html(result);
},
error: function () {
alert("error");
}
});
});
Declare var obj = $(this); before .ajax and use it inside success callback.
$(".educacao_search").click(function () {
var slug = $(this).data('slug');
var obj = $(this);
$.ajax({
type: 'POST',
url: urls.ajax_url,
data: {
'slug': slug,
'action': 'get_post_content'
}, success: function (result) {
obj.parents(".tab-pane").find(".show_result").html(result);
//$(this).find(".show_result").html(result);
},
error: function () {
alert("error");
}
});
});
It's important to know how this keyword works in javascript. Refer below links it will be helpful.
https://javascript.info/object-methods
https://medium.com/tech-tajawal/javascript-this-4-rules-7354abdb274c

Selecting element parent with a specific class and removing it [duplicate]

This question already has answers here:
Accessing $(this) after success:function() when using $.ajax
(3 answers)
Closed 5 years ago.
I have an anchor element nested within multiple divs. When I click on it the specific tweet gets deleted from the database using AJAX and I want to visually remove it using jquery but I can't get it to work.
HTML:
<div class="tweet-wrapper w-clearfix" >
<div class="tweet-left-side-wrapper"><img class="tweet-avatar" height="48" src="/images/profiles/{{$tweet->user->profile->image->file}}" width="48">
</div>
<div class="tweet-right-side-wrapper w-clearfix">
<a class="tweet-username" href="{{route('show.profile',$user->profile->url_handle)}}">{{$tweet->user->profile->display_name}}</a>
<a class="tweet-handle" href="{{route('show.profile',$user->profile->url_handle)}}">{{$tweet->user->profile->handle}}</a><span> · </span>
<a class="tweet-date" href="#">{{$tweet->created_at->diffForHumans()}}</a>
#if($tweet->user->profile->url_handle == $user->profile->url_handle)
<div class="tweet-dropdown w-dropdown" data-delay="0">
<div class="tweet-dropdown-toggle w-dropdown-toggle">
<div class="w-icon-dropdown-toggle"></div>
</div>
<nav class="tweet-dropdown-list w-dropdown-list">
<div class="nav-dropdown-link-group">
<a class="nav-dropdown-link w-dropdown-link" href="#">Share via Direct Message</a>
<a class="nav-dropdown-link w-dropdown-link" href="#">Copy link to Tweet</a>
<a class="nav-dropdown-link w-dropdown-link" href="#">Embed Tweet</a>
<a class="nav-dropdown-link w-dropdown-link" href="#">Pin to your profile page</a>
<a class="nav-dropdown-link w-dropdown-link profile-tweet-delete-button" data-tweet-id="{{$tweet->id}}" href="#">Delete tweet</a>
</div>
<div class="nav-dropdown-link-group"><a class="nav-dropdown-link w-dropdown-link" href="#">Add to new Moment</a>
</div>
</nav>
</div>
AJAX:
$('.profile-tweet-delete-button').each(function(){
$(this).on('click',function(){
$.ajax({
type:'post',
url:'{{URL::route('delete-tweet')}}',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
data:{
tweetID : $(this).data('tweet-id')
}
,
success:function(){
successAlert("Tweet deleted!");
$(this).parents('div[class^="tweet-wrapper"]').remove();
},
error: function(){
errorAlert("Failed to delete tweet!");
}
});
});
});
You have to store this outside the success callback like so..
$('.profile-tweet-delete-button').each(function(){
$(this).on('click',function(){
var thisRef = this; // store a ref here
$.ajax({
type:'post',
url:'{{URL::route('delete-tweet')}}',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
data:{
tweetID : $(this).data('tweet-id')
}
,
success:function(){
successAlert("Tweet deleted!");
$(thisRef).parents('div[class^="tweet-wrapper"]').remove();
},
error: function(){
errorAlert("Failed to delete tweet!");
}
});
});
});

Make JSON from li strings

<div class="col-xs-4 no-padding contenteditable-color" style="background-color: transparent;">
<ul class="ul-product">
<li class="li-product-page cars contenteditable" contenteditable="false">qweryt</li>
</ul>
</div>
<div class="col-xs-4 no-padding contenteditable-color" style="background-color: transparent;">
<ul class="ul-product">
<li class="li-product-page cars contenteditable" contenteditable="false">bbzzz</li>
</ul>
</div>
I have multiple li and I want to get all and to make JSON with name 'cars'. I've tried something like this but won't work
$("li.cars").each(function() {
var obj = {
keywords: $("li.keywords").text()
}
});
I want to send this JSON to server with AJAX.
EDIT
Here is the ajax
var form = $('form')[0]; // You need to use standard javascript object here
var data = new FormData(form);
data.append('car', brand);
data.append('keywords', arr);
$.ajax({
type:'POST',
enctype: 'multipart/form-data',
url:'myurl',
data: data,
processData: false,
cache: false,
contentType:false,
success:function(response){
console.log(response);
},
error: function(data){
console.log("error");
console.log(data);
}
})
var items = [];
$('ul').children().each(function() {
var $this = $(this);
var item = { id: $this.attr('value'), title: $this.html() };
items.push(item);
});
Try This One...
You can make an object and in its keywords key make an array of li values:
var obj = {keywords:[]};
$( "li.cars" ).each(function() {
obj.keywords.push($(this).text());
});
console.log(obj);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-4 no-padding contenteditable-color" style="background-color: transparent;">
<ul class="ul-product">
<li class="li-product-page cars contenteditable" contenteditable="false">qweryt</li>
</ul>
</div>
<div class="col-xs-4 no-padding contenteditable-color" style="background-color: transparent;">
<ul class="ul-product">
<li class="li-product-page cars contenteditable" contenteditable="false">bbzzz</li>
</ul>
</div>
It will give you something like so:
{keywords: ["someval","anotherval"]}
You can simply send the obj variable o the backend and json decode it at the backend.
When you want to send it to the server you can stringify it like so:
var myJSON = JSON.stringify(obj);

javascript not working on data returned from ajax

I have a JavaScript abc.js that is running on a div (class one) element. The script is working fine on elements located within the div element in the html code, but it's not working on data returned from success ajax call that appended to id=tow element.
Here is the code;
HTML
<script type="text/javascript" src="abc.js"></script>
<div class="one">
<ul id="tow">
<li>
<a href="images.jpg">
<img src="images/a1.jpg"/>
<span>
<div class="title"><img src="Images/a2.jpg" /></div>
</span>
</a>
</li>
</div>
JavaScript
$(document).ready(function () {
$('#search').click(function () {
if (cid != 0) {
$.ajax({
type: "POST",
url: 'ajax.php',
data: {
aid: aid,
cid: cid,
sid: sid
},
success: function (data) {
$("#tow").html(data);
}
});
}
});
});
The data returned from success ajax is:
<li> <a href="images3.jpg"><img src="images/a4.jpg"/>
<span>
<div class="title"><img src="Images/a5.jpg" /></div>
</span>
</a>
</li>
success: function(jqXHR)
{
$("#tow").html(jqXHR.responseText);
}
jQuery ajax returns a jqXHR object. What you are interested in is its responseText property.

Categories