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]);
});
Related
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);
}
});
});
I have some trouble to instert a condition inside the function(data). It works for the second condition (i.e. else) but not for the first one. In other words when data="success" in my php, nothing appears in my html file. Furthermore console.log(data) is "ReferenceError: data is not defined " in both cases even if it works for the second condition.
Also in my networks(console) in Firefox I can see the data send from php in the second condition but for the first one it says that the data was not saved.
$errors is an array in php.
My code in ajax:
$.post('register3.php', {
username : $("#username").val(),
password : $("#password").val(),
passwordconfirm : $("#passwordconfirm").val(),
email : $("#email").val()
},
function(data){
if(data=="success"){
$("#results").html(data);
}
else{
$("#errors1").html(data.username);
$("#errors2").html(data.password);
$("#errors3").html(data.email);
}
My code in php
<?php
if(!empty($errors)){
header('Content-Type: application/json; Charset=utf-8');
$data = json_encode($errors);
echo $data;
}
else {
$data='success';
echo $data;
}
?>
My code in HTML
<div class="flash2">
<ul>
<li><div id="errors1"> </div> </li>
<li><div id="errors2"> </div> </li>
<li> <div id="errors3"> </div> </li>
<li> <div id="results"> </div> </li>
<ul>
</div>
From a controller a do a ajax call. The call can be triggered from two different links, both in the same html template. When using the above link that switches to the tab the data returned by the ajax call is displayed correctly. When using the refresh link the element in the ng-repeat won't be updated. Anyone knows why this is?
angularjs:
app.controller("ActiveSimulations",
["$scope", "$http", "socket",
function($scope, $http, socket){
$scope.active_simulations_dict = {};
$scope.get_active_simulations = function() {
var responsePromise = $http.get("/active_simulations");
responsePromise.success(function (data, status, headers, config) {
$scope.active_simulations_dict = data;
console.log($scope.active_simulations_dict)
});
responsePromise.error(function (data, status, headers, config) {
console.log('Warning - "AJAX failed!"')
alert("AJAX failed!");
});
};
}]);
HTML
<div id="followSim" class="tab-pane fade">
<h3>Follow running simulations</h3>
<div class="inline-containers">
<div id="simulation-list-wrapper">
<ul class="list-unstyled">
<li ng-repeat="(key, value) in active_simulations_dict">
<a ng-show="value[0] && value[2]" ng-click="followActiveSimulation(key)">
{[{ value[0] }]} ( {[{ value[2] }]} is director)
</a>
</li>
</ul>
</div> <!--end simulation list wrapper-->
<div id="refresh-simulation-list" ng-controller="ActiveSimulations">
<a id="refresh-link"
class="right-side"
ng-click="get_active_simulations()">
<i class="icon-refresh right-side"></i>
refresh list
</a>
</div>
As #kasoban pointed out you might have an issue with multiple instances. Best practice is to create a service which handles your requests. You can inject it and call the request function from any controller then e.g.:
$scope.active_simulations_dict = RequestService.get_active_simulations();
I have a kendo mobile form that I will be using to capture some information from my users.
I would like to post the data to a web service or aspx(test page) using ajax. It seems like overkill to use MVVM for a form that the user fills out and there will be no reads/updates/deletes.
The ajax call happens but I cannot figure out how to post the data . Nothing goes over if i use $(this).serialize(). If I hard code some data, then it works.
There are going to be a lot of controls on the page and i hope i don't have to manually build the form data. I cannot add a <form> tag as it breaks the styling of the page.
If there is a more "kendo" way of doing this please show me how. Thanks
Here is what I have so far.
//Submit Form
function submit_form(e) {
$.post('TestPost.aspx', $(this).serialize(), function (data) {
// This is executed when the call to web service was succesful.
// 'data' contains the response from the request
alert(data);
}).error(function (xhr, ajaxOptions, thrownError, request, error) {
alert('xrs.status = ' + xhr.status + '\n' +
'thrown error = ' + thrownError + '\n' +
'xhr.statusText = ' + xhr.statusText + '\n' +
'request = ' + request + '\n' +
'error = ' + error);
});
e.preventDefault();
}
//Example of html controls
<div id="checks" data-role="view" data-title="Foo" data-layout="checklayout">
<ul data-role="listview" data-style="inset" data-type="group">
<li>Floor
<ul>
<li>
<label for="Foo">
<input type="radio" name="Foo" id="FooOk" value="Ok" />
Ok</label>
</li>
<li>
<label for="Foo2">
<input type="radio" name="Foo" id="FooNotOk" value="NotOk" />
Not Ok</label>
</li>
<li id="Comment1" class="divComment" style="display: none;">
<label>
Comments
<input type="text" name="TextComment" id="TextComment" placeholder="Type Comments" autocomplete="off" tabindex="1" />
</label>
</li>
<li id="C1" class="divComment" style="display: none;">
<label>
Charges
<select id="Charges" name="Charges" >
<option value="nc">test</option>
</select>
</label>
</li>
</ul>
</li>
</ul>
<ul data-role="listview" data-style="inset" data-type="group">
<li>Picture
<ul>
<li>
<label>
Select a Photo
<input type="file" id="kitFile" style="display: none;" />
<a data-role="button" data-click="select" style="float: right;">Select</a>
</label>
</li>
</ul>
</li>
</ul>
</div>
//Submit button
<a data-align="right" data-role="button" class="nav-button" data-click="submit_form">Save</a>
Here $(this) will give u only the button element. The easy way to do this is use the built in MVVM feature in Kendo UI Mobile. create an model as JS object and set data-model attribute of your view as this object. Now on click of the submit button, just send this object to your server using ajax. This way u are reducing the amount of data sent to the server.
Documentation on mobile and mVVM integration: http://docs.kendoui.com/getting-started/mobile/mvvm .
I have used a PageMethod previously.
http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/
Would something like this help your cause?
Let's take an example of such a method in the code behind:
[WebMethod]
public static string MyMethod(string Id)
{
return string.Format("Thanks for calling me with id: " + Id);
}
Things to note: the method must be static and decorated with the [WebMethod] attribute.
And on the client side you could invoke this method using the jQuery.ajax() function like this:
$.ajax({
url: 'default.aspx/MyMethod',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({ ID : ID }),
success: function (result) {
alert(result.d);
}
});
Make sure that in your WebForm you have actually added reference to the jQuery library before using it.
For example:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
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.