How to trigger Ajax with flash buttons? - ajax

I'm working on something where there are 2 links which triggers some Ajax. However I need to turn the links into Flash buttons (AS3). I've never worked with Ajax before, and I have no idea how this can be done.
Edit:
The Ajax:
<script>
$(document).ready(function() {
$('a.catlink').unbind('click').click(function(e)
{
e.preventDefault();
var link = $(this);
var inputs = [];
var cat_type = $(this).attr('href').replace('#', '');
link.attr('disabled', 'disabled');
inputs.push('cat_type=' + escape(cat_type));
$.ajax(
{
type: "POST",
cache: false,
dataType: "html",
url: window.location.href,
data: inputs.join('&'),
success: function(html)
{
var json = $.parseJSON(html);
if (json['status'] == 1)
{
$('div.listing').html(json['html']);
}
link.removeAttr('disabled');
}
});
});
});
</script>
The HTML
<h1 class="section-head">Products
// **The 2 links*** //
<a class="catlink" href="#cinema">cinema</a> <a class="catlink" href="#smart">smart</a></h1>
<div class="listing">
<ul class="listing">
{foreach from=$products item="product_info"}
<li class="clearfix">
<div class="inner-left">
<img height="68" width="90" src="{$product_info.image}" />
<h2 class="normal mt-5">{if $product_info.price != '0'}${$product_info.price}{else}Click for price ยป{/if}</h2>
</div>
<div class="inner-right">
<h3 class="mb-0">{$product_info.productName}</h3>
<p class="small mb-5"><span class="quiet">{$product_info.category}</span></p>
<p class="mb-15">{$product_info.description}</p>
<a class="button getprice" href="{$product_info.url}">Buy Now</a>
<br><br>
</div>
</li>
{/foreach}
</ul>
</div>

If you're going to use AS3 then you can use ExternalInterface.call() to call a JavaScript function on the page. Though, using Ajax may not be required if you're using AS3 because you can make use of the URLLoader class to do the same thing (call a PHP script and decode a result).
If you describe more accurately what you want to achieve then I shall provide some example code and clarify a little more.

Related

every bootstrap modal repeat same id in laravel with ajax

i wrote some code to view my all showing events details using bootstrap modal popup when click read more button. but when i click read more button every response repeats same id.
this is my laravel code
#if(!empty($event))
#foreach($event as $value)
<!-- Single Blog Post -->
<div class="single-blog-post d-flex" id="event_tag">
<div class="post-thumbnail">
<img src="{{asset('images/'.$value->image)}}" alt="">
</div>
<div class="post-content">
<a class="post-title">
#if(strlen($value->title) <= 35)
{{$value->title}}
#else
{{substr($value->title, 0, 35) . '...'}}
#endif
</a>
<div class="post-meta d-flex justify-content-between">
<center><button id="event_button" class="post-cata cata-sm cata-success text_white" data-toggle="modal" data-target="#myModal">Read More</button></center>
</div>
</div>
<input type="hidden" name="event_id" id="event_id" value="{{$value->id}}"></div>
#endforeach
#endif
and this is javascript code to get id and show every id detail.
<script>
$(document).on("click", "#event_button", function() {
var id = $("event_id").val();
console.log(id);
$.ajax({
url: "/event/" + id + "/show",
dataType: "json",
success: function(html) {
$("#event_title").html(html.data.title);
}
});
})
</script>
every time repeats id no 2 when click each event read more button. how can i fix this?
Your code has some mistakes in html too. For example, has fixes ids in html.
'event_id'
'event_button'...
Try this...
<button id="event_button-{!! $value->id !!}" data-target="event_id-{!! $value->id !!}"
<input type="hidden" name="event_id" id="event_id-{!! $value->id !!}"
The code above will fixed the id issue.
Now let's to the JS code... Change the click event:
$(document).on("click", "button.post-cata", function() {
var id = $("#" . $(this).data("target").val();
...
Do you need to associate tags to work with the right value. Avoid to put fixes ids inside a php loop. The html id element must be unique in document.
So, has many ways to do this. In this case, the input hidden fild is not necessary. you can put the id in a attribute in the button tag too.
<button data-id="{!! $value->id !!}...
So in the jquery click event do:
var id = $(this).data('id');
It's more ease and clean.
give class name to button and add attribute to button
<button class="event_button post-cata cata-sm cata-success text_white" data-eventid="{{$value->id}}">Read More</button>
so no need to use hidden input id
now using jQuery :
$(document).on('click','.event_button',function(){
var event_id = $(this).attr("data-eventid");
$("#myModal").modal("show");
$.ajax({
url: "/event/" + event_id+ "/show",
dataType: "json",
success: function(html) {
$("#event_title").html(html.data.title);
}
});
});

Data not going to controller using Ajax

I am new to AJAX and I am trying to send some data to the controller using the AJAX. on clicking the button "Start Event", nothing is happening..
This is my jsp page where I have written the AJAX code
<c:forEach items="${scheduledEvents}" var="event">
<div class="col-md-3" id="eventId">
<div class="card-counter primary">
<div id="head" class="card-counter head-color"></div>
<span class="count-head">${event.eventName}</span>
<br>
<span class="count-name">Date : ${event.date}</span>
<span class="count-name">Location : ${event.location}</span>
<span class="count-name">Hosted By : ${event.hostName}</span>
<span class="count-name">Description : ${event.description}</span>
<br>
<br>
<div class="count-join">
<button class=" btn" id="${event.linkId}" style="background-color: #cc3300;"><font style="color: white;">Start Event</font></button>
</div>
</div>
</div>
</c:forEach>
<script type="text/javascript">
$(function() {
$('.count-join').on('click',function(){
var eventData = $(this).attr("id")
.ajax({
url : 'startEvent?data=' +eventData,
type : 'GET',
contentType : 'application/json',
success : function(data){
$
.get(
'${pageContext.request.contextPath}/startEvent',
function(data,status) {
$("#eventId").html(data);
}
);
}
});
});
});
</script>
And this my controller mapping
#RequestMapping(value="/dashBoard/startEvent")
public ModelAndView startScheduledEvent(#RequestParam("data")String data)
{
System.out.println(data);
return new ModelAndView("DashBoard");
}
Where am I wrong? please give some detailed explanation as I do not know much about AJAX. Thanks in advance.
As per you controller #RequestMapping, you have missed the /dashBoard in ajax call.

bootstrap load collapse panel with ajax

I'm trying to load collapsable panels with ajax. I got it working, but my trigger fires on the a tag, so the ajax script is called when you open AND close the panel. It should not load it when you close the panel, this is overload..
My code:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse1">First panel</a></h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<div id="depUsers511"><!-- here users will be loaded through ajax --></div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Second panel</a></h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<div id="depUsers511"><!-- here users will be loaded through ajax --></div>
</div>
</div>
</div>
The javascript:
$('#accordion a').click(function () {
var collapse_element = event.target;
alert(collapse_element);
var href = this.hash;
var depId = href.replace("#collapse","");
var dataString = 'depId='+ depId + '&do=getDepUsers';
$.getJSON(dir_pre + 'ajax/users.php?' + dataString, function(data) {
$('#depUsers'+depId).html(data);
});
})
The ajax script returns the content of the div.
So, it works, but I'm looking for the correct way to fire the ajax load trigger... i think I need to use the "show.bs.collapse" event, but can't find out how to use this on a panel which contains more than one dynamic panel (with its own ID).
You can try this:
$('#accordion').on('show.bs.collapse', function(e){
var depId = $(e.target).attr('id').replace('collapse','');
...
});
I kind of solved it by adding a "open" class when loaded with data, and removing that same class if clicked when opened:
$('#accordion a').click(function () {
if($(this).hasClass("panelisopen")){
$(this).removeClass("panelisopen");
} else {
var href = this.hash;
var depId = href.replace("#collapse","");
$(this).addClass("panelisopen");
var dataString = 'depId='+ depId + '&dep=1&do=getDepUsers';
$.getJSON(dir_pre + 'ajax/users.php?' + dataString, function(data) {
$('#depUsers'+depId).html(data);
});
}
});
Not the best solution I guess, but it works.
I think instead of depending on element ID, and polluting it with numbers and do the string replacement and so, you can make use of data attributes:
<div class='collapse' data-dep-id="1" />
Then in JS:
var $elementId = $(e.target).data('dep-id')
And the same applies for Ajax URL and other attributes if needed.

Calling another ajax function on ajax success

I'm calling an ajax function for user login.
After successful login, I want to refresh a div with content like (Ex. Welcome Mr. User, logout).
HTML:
<ul id="signup">
<li>Login</li>
<li>Signup</li>
</ul>
<ul id="loginbox">
<li><label>Enter email address</label><br/><input type="text" class="bookinginput" id="uemail"></li>
<li><label>Enter password</label><br/><input type="password" class="bookinginput" style="width: 151px;" id="upassword">
<button class="styled-button-8" style="margin-top: -43px;margin-left: 10px;" onClick="ulogin()">Login</button>
</li>
</ul>
Ajax:
function ulogin()
{
var uemail = $('#uemail').val();
var upassword = $('#upassword').val();
$.ajax({
type: "POST",
url: "udoologin.php",
data: {email:uemail, password:upassword}
}).done(function( result ) {
$("#loginbox").html(result);
});
}
After successful login, I'm able to change div#loginbox with successfull login message, but I want to replace another div#signup also with
<ul id="signup">
<li>Welcome <?php echo $user?></li>
<li>logout</li>
</ul>
How can I achieve this?
In PHP when u are printing the result,echo
<li>Welcome <?php echo $user?></li>
<li>logout</li>
joined with a seperator like '|||' or something.
in jquery
done(function( result ) {
var log=result.split('|||');
$("#loginbox").html(log[0]);
$('#signup').html(log[1]);
});

click a menu item content to be displayed in the right side div in the same page without refresh?

I am having a php template where i have a leftmenu as accordin jquery menu. In this menu i had menu items .When i click the menu item, page related to this menu item to be loaded into the div in the right side of the page without refresh.I am giving you the screenshot of the page.
Can anyone help me in this regard,
Thank you in advance
Ramsai
here is the code of left menu.php
<div id="leftmenu">
<div class="urbangreymenu">
<h3 class="headerbar">BREAST</h3>
<ul class="submenu">
**<li><a href="breast.php">Breast/a></li>**
</ul>
<h3 class="headerbar">CVS</h3>
<ul class="submenu">
<li>CHEST PAIN</li>
<li>CHEST PAIN MASTER</li>
<li>DIZZINESS-VERTIGO-LOC</li>
<li>LOCAL-LEG-GENERALISED SWELLING</li>
<li>SHORT OF BREATH(+PND)</li>
</ul>
<h3 class="headerbar">ENT</h3>
<ul class="submenu">
<li>EAR</li>
<li>NOSE</li>
<li>THROAT</li>
</ul>
<h3 class="headerbar">GENERAL</h3>
<ul class="submenu">
<li>FATIGUE-MALAISE</li>
<li>FEVER</li>
<li>SKIN RASH & PRURITIS</li>
</ul>
<h3 class="headerbar">GIT</h3>
<ul class="submenu">
<li>ABDOMINAL DISTENTION</li>
<li>ABDOMINAL PAIN</li>
<li>BLACK STOOLS</li>
<li>CONSTIPATION</li>
<li>DIARRHEA</li>
<li>NAUSEA-VOMITING</li>
</ul>
<h3 class="headerbar">NEUROLOGY</h3>
<ul class="submenu">
<li>APHASIA & SLURRED SPEECH</li>
<li>BALANCE-TREMORS-PARALYSIS</li>
<li>HEADACHE</li>
<li>SEIZURES-MEMORY LOSS-CONFUSION</li>
<li>TINGLING-NUMBNESS</li>
</ul>
<h3 class="headerbar">PULMONARY</h3>
<ul class="submenu">
<li>COUGH</li>
</ul>
</div>
</div>
And here is my loading code:
<div id ="content">
<script>
$.get('breast.php', function(data) {
$('.content').html(data);
});
</script>
</div>
When i click the menu item then the related page should come in that div
Thank you in advance,
Ramsai
$(document).ready(function () {
$('#leftmenu').find('a[href*=".php"]').live('click', function (e) {
e.preventDefault();
$.get($(this).attr('href'), function (data) {
$('.content').html(data);
});
});
//Or
$('#leftmenu').find('a[href*=".php"][class*="MyWebLink"]').live('click', function (e) {
e.preventDefault();
if(!$(this).hasClass('Alreadyloaded')){
var Url = $(this).attr('href');
$.ajax({
url: Url, type: 'Get', dataType: 'json',
//data: { value: $(this).data('value') },
success: function (data) {
$('.content').append(data);
//Or
$('.content').prepend(data);
$(this).addClass('Alreadyloaded');
}
});
}
});
});
What's the problem? Use docs.jquery.com/Ajax

Resources