I have a button in my html template:
<a class="tooltipped" id="stash_recipe_tooltip" data-position="bottom" data-delay="50"
data-tooltip="{{ stash_tooltip }}">
<div id="stash_recipe_btn" class="detail_footer_btn btn-floating col2 center"> + </div>
</a>
later, in the html file, I have:
<script>
function add_recipe_to_stash() {
var stash_plus_or_minus = document.getElementById("stash_recipe_btn").innerHTML
$.ajax({
url: '/ajax/add_recipe_to_stash/',
type: 'GET',
data: {
# this goes to a django view that, in essence, returns a new 'stash_tooltip' var and 'stash_plus_or_minus' var
'stash_plus_or_minus': stash_plus_or_minus,
},
dataType: 'json',
success: function (data) {
document.getElementById("stash_recipe_btn").innerHTML = data.stash_plus_or_minus;
$("#stash_recipe_tooltip").attr('data-tooltip', data.stash_tooltip);
}
});
}
function addClickHandlers() {
$("#stash_recipe_btn").click( add_recipe_to_stash );
}
</script>
It seems like
$("#stash_recipe_tooltip").attr('data-tooltip', data.stash_tooltip);
should be changing my tooltip, but nothing happens. Any idea how to successfully update the data-tooltip without refreshing the page? I've tried different variations of the above line but I can't get it to update.
You can use the tooltip function for that:
success: function (data) {
document.getElementById("stash_recipe_btn").innerHTML = data.stash_plus_or_minus;
$("#stash_recipe_tooltip").tooltip('tooltip', data.stash_tooltip);
}
Try this:
$('#someElement').prop('tooltipText', 'new title');
Related
Hi I have the following html code:
<li class="grey">
<div class="row">
<button id="test" style="width:50%;" class="btn btn-blue-white cartBtn">Add to Cart</button>
</div>
<div class="row">
Go To Checkout
</div>
</li>
When I load the page, I hide the checkout link button until the user clicks "add to cart". After they click add to cart my javascript looks like this:
$('.cartBtn').click(function () {
//do stuff for preprocessing
var url = "../Store/AddToCart";
$.ajax({
type: "GET",
url: url,
data: {
//add data
},
dataType: "json",
success: function (data) {
if (data.success == true) {
$(this).closest('li').find('.checkoutLink').show();
}
}
});
});
the link never shows back up. I have also tried using
$(this).parent().parent().find('.checkoutLink').show()
as well and had no luck. How do i use jquery to get this anchor tag and make it visible.
The problem is this, when called from within the success function it no longer refers to the outer this. Create a variable outside of Ajax that refers to the original this.
$('.cartBtn').click(function () {
var $this = $(this);
//do stuff for preprocessing
var url = "../Store/AddToCart";
$.ajax({
type: "GET",
url: url,
data: {
//add data
},
dataType: "json",
success: function (data) {
if (data.success == true) {
$this.closest('li').find('.checkoutLink').show();
}
}
});
});
If I wanted to pop up a particular modal currently I'd add this HTML and click the link...
<a data-deploy-menu="notification-modal-3" href="#">Demo</a>
However I want to remove link and call the modal on a successful ajax call. Somethinkg like the below, but unsure how to do it. Please can you help?
jQuery.ajax({
url: "http://localhost/timesheets/mobile/add-timesheet.php",
type: "POST",
data: form.serialize(),
crossDomain: true,
datatype: "json",
cache: false,
success: function (data) {
var jsArray = JSON.parse(data);
console.log(jsArray);
if ($.trim(jsArray.success) === 'yes') {
$('#notification-modal-3').load;
}
},
error: function (xhr, thrownError) {
console.log(xhr.status);
console.log(thrownError);
}
});
});
The modal html is as follows...
<div id="notification-modal-3" data-menu-size="345" class="menu-wrapper menu-light menu-modal">
<h1 class="center-text">Test</h1>
</div>
Edit : I sort of got this working..
So I added the a href link back in. For example...
<a id="notification-modal-4" data-deploy-menu="notification-modal-3" href="#"></a>
so the link doesnt actually show on the page then in the ajax call I used
$('#notification-modal-4').click();
but would appreciate if there is a better way to do this...
Basically you can do this in you ajax success code:
(hopyfully I did not missunderstand)
success: function (data) {
var jsArray = JSON.parse(data);
console.log(jsArray);
if ($.trim(jsArray.success) === 'yes') {
// fill up the modal with some content if it is dynamicaly
$('#notification-modal-3').html('thank you');
$('#notification-modal-3').show();
// do some cleanup if needed like hide it if needed
setTimeout(function() {
$('#notification-modal-3').html('');
$('#notification-modal-3').hide();
}, 1000);
}
},
With the controlling of the modal within the ajax call, you do not need any (auto-)link-clicking.
I am using a simple javascript function to call a php script when i click a button or link and to return some data. It works fine until i try to call data from a aleady outputed data via that function. Let show you my script:
$(function() {
$(".article_edit").click(function() {
var article_id = $(this).attr("id");
var dataString = 'article_id='+article_id;
//$('a#'+article_id).removeClass('liked');
$('#post-body-'+article_id).fadeOut("slow").html('<img src="images/loader.gif" class="loading" />');
$('a#'+article_id).html('<img src="images/loader.gif" class="loading" />');
$.ajax({
type: "POST",
url: "action/article_enable_edit.php",
data: dataString,
cache: false,
success: function(data){
if (data == 0) {
alert('Actiunea nu a putut fi realizata!');
} else {
$('#post-body-'+article_id).fadeIn("slow").html(data);
}
}
});
return false;
});
});
$(function() {
$(".article_edit_close").click(function() {
var article_id = $(this).attr("id");
var dataString = 'article_id='+article_id;
//$('a#'+article_id).removeClass('liked');
$('#post-body-'+article_id).fadeOut("slow").html('<img src="images/loader.gif" class="loading" />');
$('a#'+article_id).html('<img src="images/loader.gif" class="loading" />');
$.ajax({
type: "POST",
url: "action/article_show.php",
data: dataString,
cache: false,
success: function(data){
if (data == 0) {
alert('Actiunea nu a putut fi realizata!');
} else {
$('#post-body-'+article_id).fadeIn("slow").html(data);
}
}
});
return false;
});
});
<!-- First button-->
<a class="color-transition article_edit" href="#" id="'.$id.'"><i class="fa fa-pencil-square-o"></i></a>
<!-- When i click it the content will be replaced with another one containing this-->
<!-- output from action/article_enable_edit.php -->
<a class="color-transition article_edit_save" href="#" id="'.$id.'" ><i class="fa fa-save"></i></a>
<a class="color-transition article_edit_close" href="#" id="'.$id.'" ><i class="fa fa-ban"></i></a>
<!-- Now, if i click on any link, for example: .article_edit_close, the function will not work. -->
<!-- i should have an output from action/article_show.php -->
<!-- If i put these oow links on the index.php page, they worked, but that is not what i need.-->
Why i can't call a function from a content wich is called by another function? They do not happen at the same time....
You need to bind the click event of link/button using .on for dynamic elements.
So your click event code will look something like this,
$('body').on('click','.article_edit_close',function(e){
// Your code goes here...
});
.on() attach an event handler function for one or more events to the selected elements.
Try using
$(document).on("click",".article_edit",function(){ /* ... */ });
instead of
$(".article_edit").click();
I'm trying to do detach some data from my database. I'm trying to send 2 different data to my controller with Ajax but couldn't make it. I need the domain_id and the tag_id.
Thats how it looks right now:
#foreach($domains as $domain)
<tr>
<td>
#foreach($domain->tags as $tag)
<span><a href="#" data-tag-id="{{ $tag->id }}"
data-domain-id="{{ $domain->id }}">{{ $tag->name }}</a></span>
#endforeach
</td>
</tr>
#endforeach
Now I have the domain_id and the tag_id in the <a> tag. I'm trying to send both of them to my controller with Ajax, To detach them from my pivot table and thats it.
JS code:
$('a[data-tag-id]').click(function () {
var tag_id = $(this).attr('data-tag-id');
var domain_id = $(this).attr('data-domain-id');
$.ajax({
url: 'detaching',
type: 'GET',
data: {tag_id: tag_id, domain_id: domain_id},
dataType: 'json',
success: function (data) {
console.log('worked!');
}
});
});
Route Code:
Route::get('detaching', 'DomainController#detach2');
Controller Code:
public function detach2()
{
$input = Input::get('all');
$domain = Domains::findOrFail($input['domain_id']);
$domain->tags()->detach($input['tag_id']);
}
This don't work and I don't even know if the gets Ajax code called. I'm trying to console.log() some things out but I don't get anything back. I don't even know if the code reaches the controller function. I don't have much knowledge about Ajax or JS at all. Can someone maybe help me there?
LITTLE UPDATE
I've tried an easy:
$('a[data-tag-id]').click(function () {
console.log('YES');
});
But this haven't worked either, So it doesn't jumps in the click function all I guess.
Try This,
Give a class to your anchor tag like.
{{ $tag->name }}
Change your route to
Route::get('detaching/{tag_id}/{domain_id}', 'DomainController#detach2');
Chnage your controller function to
public function detach2($tag_id, $domain_id)
{
//$input = Input::get('all');
$domain = Domains::findOrFail($domain_id);
$domain->tags()->detach($tag_id);
}
Change your JS file to
(function ($) {
$(document).ready(function () {
$(document).off('click', '.get-link');
$(document).on('click', '.get-link', function () {
var domain_id = $(this).data('domain-id');
var tag_id = $(this).data('tag-id');
$.ajax({
type: 'GET',
url: 'detaching'+ '/' + tag_id + '/' + domain_id + '/',
success: function (data) {
console.log('worked!');
},
error: function (data) {
console.log('Error:', data);
}
});
});
});
})(jQuery);
I am having a some problem in my java script and to get the request.
This is the HTML
<form method="post" id="searchform">
<div align="center" class="col-md-10">
<input type="text" id= "contentSearch" name="contentSearch" >
</div>
<div class="form-group"><button type="submit" class="btn btn-default" id="submitSearch">
<i class="fa fa-search"></i> Search
</button></div>
</form>
<----Scenario 1 ---->
This script works fine and post the value and as ajax it never reload the page
<script>
$(document).ready(function () {
$("#submitSearch").on('click', function (e) {
e.preventDefault();
e.stopPropagation();
var data = {};
data['contentSearch'] = $('#contentSearch').val();
// Submit data via AJAX§
$.ajax({
url: '/home',
type: 'post',
data: data,
success: function (data) {
// do i need to do something here !!
}
});
});
});
</script>
When i check the POST value i can see the value is been POST.
The Problem is when i try to get the request data from controller like ---
$post_value = $request->request->get('contentSearch');
print_r($post_value);
OUTPUT : empty
<----Scenario 2 ---->
This script have a problem i think, because it reload the page for returning the result and displaying the value ---
<script>
$(document).ready(function () {
$("#searchform").on('submit', function (e) {
e.preventDefault();
var data = {};
data['contentSearch'] = $('#contentSearch').val();
$.ajax({
url: '/home',
type: 'post',
data: data,
success: function (data) {
}),
return false;
});
});
</script>
than i am able to get the post value like so--
$post_value = $request->request->get('contentSearch');
But the problem is in the second script the page is always loading when return the request which is not a ajax behave.
And in the first script i think because of the **e.preventDefault();** i am not getting the POST value in my controller.
Expected result ---
Option 1 : Do something so i can get the POST value in my controller
Option 2 : Fix this script so the page do not load to return the result and display
I am working on symfony framework .
Can someone please help me to fix this problem, i am really getting sick of to solve this problem.
Thanks a lot on advanced.
Like I mentioned in the comments, you need to be targeting the submit on the form. Not a click event. When targeting the click you are firing both the click and submit events, hence the reload.
$(document).ready(function () {
$("#searchform").on('submit', function (e) {
var data = {};
data['contentSearch'] = $('#contentSearch').val();
$.ajax({
url: '/home',
type: 'post',
data: data,
success: function (data) {
}
});
return false;
});
});