I'm trying to get this box to turn from "hitting endpoint" which it does when it's clicked to back to normal. But it does not seem to update its state.
html:
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<button type="submit" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Hitting Endpoint.." class="btn btn-primary btn-lg" value="Hit Endpoint" id="submitButton" style="max-width: 1000px; height: 500px; margin-left: 250px; margin-right: 10px; margin-top: 20px; margin-bottom: 0px; width: 200px; height: 75px">Hit Endpoint</button>
</div>
</div>
js:
$("#submitButton").on("click", function () {
var request = $("#requestBox").val();
if (!request) {
alert("Please populate the request box with valid JSON");
return;
}
$("#submitButton").button('loading');
$.post('#Url.Action("Run")', { requestJson: request })
.success(function (data) {
var jsonPretty = JSON.parse(data);
alert("Was successful");
renderjson.set_max_string_length("none");
renderjson.set_show_to_level(2);
document.getElementById("responseBox").appendChild(renderjson(jsonPretty));
$(window).scrollTop($('#pBox').offset().top);
$("#submitButton").button('reset');
})
Using reset doesn't seem to be working. What am I doing wrong? Do I actually have to use setTimeout like the example here?
http://codepen.io/jmalatia/pen/HkmaA
Cheers
Related
I need to implement email sending modal popup and I'm almost done except ajax send request not hit to success or failure
When I click the send button (id:end-email) It successfully hit the .NET Core action and action return status correctly.
But the problem is my ajax call not waiting for the result and automatically closing popup which is not required. I need to show the message instead of closing popup.
<div id="sendemail-window" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="sendemail-window-title">
<div class="modal-dialog" style="width: 50%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" style="font-weight:600;" id="sendemail-window-title">Shipment Request Email </h4>
</div>
<form id="InStockPendingShipments" name="InStockPendingShipments">
<input type="hidden" id="selectedPOIds" name="selectedPOIds" value="" />
<div class="form-horizontal">
<div class="modal-body">
<div class="form-group">
<div class="col-md-2">
<nop-label asp-for="SendEmail.Subject" />
</div>
<div class="col-md-9">
<nop-editor asp-for="SendEmail.Subject" />
<span asp-validation-for="SendEmail.Subject"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<nop-label asp-for="SendEmail.Message" />
</div>
<div class="col-md-9">
<nop-textarea asp-for="SendEmail.Message" />
<span asp-validation-for="SendEmail.Message"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-1">
</div>
<div class="col-md-10">
<ul id="selected-po-list" class="selected-po-list">
</ul>
</div>
</div>
</div>
<div class="modal-footer">
<div class="input-group input-group-short">
<label id="lblSaveResult" name="lblSaveResult" style="margin-top: 10px;font-weight: 500;"></label>
</div>
<div class="form-group">
<div class="col-md-1">
</div>
<div class="col-md-10">
<button class="btn btn-primary" id="send-email">
Send Email
</button>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#send-email').click(function () {
$.ajax({
type: "POST",
url: '#Url.Action("SendInStockRequestEmail","InStockPendingShipments")',
data: emailData(),
success: function (msg) {
alert("111 success");
},
error: function (req, status, error) {
alert(22225,error);
}
})
.done(function () {
alert("success");
})
.fail(function () {
alert(44444,"error");
});
});
});
function emailData() {
var data = {
SelectedPOIds: $("#selectedPOIds").val(),
Message: $('##Html.IdFor(model => model.SendEmail.Message)').val(),
Subject: $('##Html.IdFor(model => model.SendEmail.Subject)').val()
};
addAntiForgeryToken(data);
return data;
}
$('#sendemail-window').on('show.bs.modal', function () {
$('#SendEmail_Message').val('');
document.getElementById("SendEmail_Message").innerHTML = "";
getInStockProductListByIds($("#selectedPOIds").val());
});
function getInStockProductListByIds(selectedPOsIds) {
var idListData = {
Ids: selectedPOsIds
};
addAntiForgeryToken(idListData);
$.ajax({
cache: false,
type: "POST",
url: "#(Url.Action("getInStockProductListByIds", "InStockPendingShipments"))",
data: idListData,
success: function (result) {
if (result.Data != null || result.Data != '') {
$('#selected-po-list').html('');
$('#selected-po-list').delegate('li');
$('#selected-po-list').append('<li class="list-header"><table><tr>' +
'<td style="width: 10%;font-weight: 600;"> SKU </td>' +
'<td tyle="font-weight: 600;">ProductNane</td>' +
'<td style="font-weight: 600;width: 20%;font-weight:600;text-align: right;position: relative;">Quantity</td>' +
'</tr></table ></li> ');
for (var i = 0; i < result.Data.length; i++) {
console.log('electedPOs', result.Data[i].SKU);
$('#selected-po-list').append('<li><table><tr>' +
'<td style="width: 10%;"> <a target="_blank" href="/admin/Product/Edit/' + result.Data[i].ProductId + '">' + result.Data[i].SKU + '</a></td>' +
'<td>' + result.Data[i].ProductNane + '</td>' +
'<td style="width: 20%;font-weight:600;text-align: right;position: relative;"> <div class="product-count">' + result.Data[i].Quantity + '</div></td>' +
'</tr></table ></li> ');
}
}
},
error: function (xhr, ajaxOptions, thrownError) {
alert('Failed to find dispatch information.');
return null;
}
});
}
</script>
<style>
.selected-po-list {
list-style: none;
padding-left: 0;
margin-top: 30px;
max-height: 280px;
overflow-y: auto;
}
.selected-po-list li {
height: 50px;
padding: 10px;
margin-bottom: 5px;
border: 1px solid #00c0ef47;
}
.selected-po-list li table {
width: 100%;
}
.product-count {
position: absolute;
color: white;
height: 25px;
top: 0;
right: 10px;
text-align: center;
padding: 2px 0 0 0;
width: 25px;
border-radius: 50px;
background-color: #3c8dbc;
}
.list-header {
background-color: #7cc3ff30 !important;
height: 25px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
</style>
</div>
</form>
</div>
</div>
</div>
This is my action and it's working fine it returns string message
public virtual IActionResult SendInStockRequestEmail(string SelectedPOIds, string Message, string Subject)
{
var inStockIds = new List<int>(Array.ConvertAll(SelectedPOIds.Split(','), Convert.ToInt32));
string message = _inStockPendingShipmentService.SendInStockShipmentRequestEmail(inStockIds, Message, Subject);
return Json(new DataSourceResult { Data = message });
}
The default type of <button> is submit which submits the form data to the server . You can use input button instead :
<input type="button" class="btn btn-primary" id="send-email" value="Send Email" />
I have ajax and javascript, now i am fetching this modal to another page or to another separate browser.
For now I can fetch the modal but I needed it to refresh the page before the modal will show. how can I do it without clicking refresh. I've done some research and I've seen setInterval function but how should i implement it through my code thanks! all I want is to not refresh the page before the modal will show.
Onto my modal form here it is, this is the code whereas after I submit the submit button
if ($count != 0) {
while($row = mysqli_fetch_array($data)) {
echo '<div id="myModal" class="modal" style="position:fixed; display: none; padding-top: 100px;
left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); ">
<div class="container" style="width: 100%">
<div class="card col-12" style="background-color: red; color: white;">
<div class="card-header">
<p><h3 class="text-center">Announcement</h3></p>
</div>
<div class="card-body text-center">
<h5>'.$row['additional_info'].'</h5>
<p>Please click refresh button to resume after the announcement</p>
</div>
</div>
</div>
<img class="modal-content" id="img01">
</div>';
$dataid = $row['id'];
}
}
here it is the script where I want to put the setInterval function for the page to automatically not refresh
document.getElementById('myModal').style.display='block';
for now it has no any special code that is just how I show the modal but it needed to be refresh
I expect the output of the modal should be display once i already click the submit button. and for my code the button was already click and i just want to insert the setInterval function for the modal to show without refreshing the page
refresh
<html>
<head>
<script src="addon/jquery/jquery.js"></script>
</head>
<body>
<div id="modalid">
</div>
<button onclick="ra()">REFRESH</button>
<script>
function ra() {
$.ajax({
type: "GET",
url: "testajax.php",
data: { val : "ann" },
dataType: "json",
success: function(data) {
if(data.status == "OK") {
document.getElementById("modalid").innerHTML = data.value
setTimeout( function() { document.getElementById('myModal').style.display = 'none'; }, 3000);
}
else {
alert(data.value)
}
}
});
}
</script>
</body>
</html>
ajax
<?php
$jStatus = "ERROR";
$jValue = "";
$val = filter_input(INPUT_GET, "val");
if($val == 'ann') {
$jStatus = "OK";
$jValue = "<div id='myModal' class='modal' style='position:fixed; display: block; padding-top: 100px;
left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); '>
<div class='container' style='width: 100%'>
<div class='card col-12' style='background-color: red; color: white;'>
<div class='card-header'>
<p><h3 class='text-center'>Announcement</h3></p>
</div>
<div class='card-body text-center'>
<h5>HELLLOOO</h5>
<p>Please click refresh button to resume after the announcement</p>
</div>
</div>
</div>
<img class='modal-content' id='img01'>
</div>";
}
$jsonReply = array( "status" => $jStatus, "value" => $jValue);
echo json_encode($jsonReply);
?>
is this what you want?
I'm using MVC, have standard scaffolded index.cshtml page.
My goal is to display the details on a modal box. I'm able to display the modal box however whatever I do the modal is always and always displayed on the top left side of the screen. I'm trying to manipulate it using css but it fails whatever I do it does not work
so what I have done is:
Index.cshtml
<div id="myModal" class="modal TestModal">
<div class="modal-dialog TestModal">
<div class="modal-content TestModal">
<div id="myModalContent" class="TestModal"></div>
</div>
</div>
</div>
1- Created a partialView
<div class="modal-header">
<h4 class="modal-title">Validation Error</h4>
</div>
<div class="modal-body">
<p class="text-warning">
<small>Please make an entry before save</small>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
</div>
2-Created the following method in my controller
public PartialViewResult DisplayModalFor(int id)
{
//var parent = _context.TOURNAMENTS_M.Include(x => x.TOURNAMENTS_D).First(x => x.TM_ROWID.Equals(Id));
return PartialView("_DetailsModal");
}
and finally I have the following function in my javascript file:
function PopUpModalFor(tmRowid) {
const id = tmRowid;
$.ajax({
url: "/TOURNAMENTS_M/DisplayModalFor",
type: "GET",
data: {
id: id
}
})
.done(function (result) {
$("#myModalContent").html(result);
$("#myModal").modal("show");
})
.fail(function () {
alert("I failed :'( ");
});
}
thoughts?
I have a weird problem here!
though I have included
<link rel="stylesheet" href="~/css/MyStyle.css" />
into my _Layout.cshtml, my CSS is not working completely.
for example I have
.YOLO {
background-color: green;
}
.Padded {
margin: 50px 100px 0 100px !important;
}
then I have modified my index.cshtml to look like this
<div class="Padded">
<p class="YOLO">THIS SHOULD BE GREEN</p>
<h2>Index</h2>
//More code..
however the p tag is not green what should I do?
I found this on here. But don't know whether it is working for you or not. Can you just try below? Anyway, by default, it should align into the middle.
#myModal{
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
Here i did all correct after return the datas in index page display in that value i need to do one more thing extra what is means while returning data booking_status=="1" means i want to show red color button and button is unclickable(class="btn btn-primary) suppose " booking_status=="0" means i want to show green color button(class="btn btn-primary).in console.log(res); i am getting like this
count:2
data:Array[2]
0:Object
1:Object
booking_status:"1"
id:"2"
pg_id:"1"
rent:"4000"
room_number:"Room 2"
room_sharing:"2"
----------
booking_status:"1"
id:"3"
pg_id:"1"
rent:"4000"
room_number:"Room 3"
room_sharing:"2"
<script>
function showDiv(toggle){
var sharing=$("#sharing").val();
$.ajax({
type: "POST",
url: "pg_details.php",
data: "sharing_id="+sharing,
success: function(data) {
var res =jQuery.parseJSON(data);
console.log(res);
$.each(res.data, function(key, value) {
var booking_status = value.booking_status;
console.log(booking_status);//i am getting 1 here
if(booking_status == "1"){
$("#book").removeClass("btn-success").addClass("btn-danger");
$("#book1").removeClass("btn-success").addClass("btn-danger");
el = $('[data-id='+value.pg_name +']');
if (el.length)
{
// console.log(booking_status);
el.find('.btnmar').append(' <button type="button" class="btn btn-success" id="book" style=" width: 71px; ">'+value.room_number+'</button> ');
}
else
{
//console.log(booking_status);
var htmlString = '<div id="toggle" data-id="'+value.pg_name +'"> <div class="container" style=" margin-bottom: 30px;"><div class="row"><h4 style="margin-left:15px;">'+value.pg_name +'</h4><div class="col-sm-10"><div class="btn-group btnmar"><button type="button" class="btn btn-success" style=" width: 71px; id="book1"">'+value.room_number+'</button> </div></div><div class="col-sm-2"> <div class="panel-group"><div class="panel panel-primary"><div class="panel-heading"> Premium Facility</div><div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"><i class="fa fa-television" aria-hidden="true" style="margin-right:15px;"></i>T.V.</div><div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"><i class="fa fa-wifi" aria-hidden="true" style="margin-right:15px;"></i>Wifi</div><div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"><i class="fa fa-bed" aria-hidden="true" style="margin-right:15px;"></i>Bed</div><div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"><i class="fa fa-shopping-basket" aria-hidden="true" style="margin-right:15px;"></i>Washing Machine</div> </div> </div> </div></div></div></div>';
$(".view_room").prepend(htmlString);
}
}
});
}
});
}
</script>
pg_details.php
<?php
include_once("admin/config.php");
include("functions.php");
$sharing=$_POST['sharing_id'];//Getting Sharing Value
$sql=mysql_query("SELECT * FROM rooms WHERE room_sharing='$sharing'");
$count = mysql_num_rows($sql);
if($count > 0){
while($row=mysql_fetch_assoc($sql)){
$row['pg_name'] = Getpgname($row['pg_id']);
$data[]= $row;
}
$pg_type= array("return"=>1,"count" =>$count,"data" =>$data);
echo $pg_type = json_encode($pg_type);
}else{
$pg_type= array("return"=>0,"count" =>0,"data" =>"");
echo $pg_type = json_encode($pg_type);
}
?>
<div class="view_room"></div>
The basic logic of this is as such, for jquery plus bootstrap:
$("#idFieldName").removeClass("btn-primary").addClass("btn-success");
What this does is:
This determines what id="fieldname"
$("#idFieldName")
This removes the current btn-primary:
removeClass("btn-primary")
This adds the btn-success:
removeClass("btn-success")
and the two periods in-between are basically "keep doing this next thing" kind of statement.
You will need to obviously deal with the if/else logic for your booking_status but that is the easier part.
The cleaner way you can put the operational && like this example
if (el.length && booking_status=="1" ) {
//your true statement
// append your button danger here
}
else {
// if booking status=="0"
// append your button primary
}
Here is DEMO make you more understand what i'm trying to explain.
I'm writing a page that has angular in it that responds to ajax requests and loads various data into a table. The angular works as expected when I type in the address, but if I use a link ( link ) to get to the page, the controller fails to load (but the html shows up). There are no page errors in the console except a resource not loaded for an image because the url is not being loaded by the angular. Here is my code:
<h1 style="text-align: center;">Product Search</h1>
<input type="text" class="form-control" placeholder="Search (Ex. ea-004, Christmas)..." id="search" style="margin-left: auto; margin-right: auto; margin-bottom: 15px;">
<div ng-app="search_results" style="text-align: center; margin-left: 0px; margin-right: 0px;">
<div ng-controller="search_results_ctl" style="text-align: center; margin-left: 0px; margin-right: 0px;">
product{{JSON.stringify(product)}}
<style>
.product:hover{
background-color: #DDDDDD;
cursor: pointer;
border:0px solid grey;
border-radius: 5px;
}
.product-selector:hover {
color: black;
}
</style>
<script>
var app = angular.module("search_results", ['angularUtils.directives.dirPagination']);
app.controller("search_results_ctl", ['$scope', function($scope){
console.log("Angular loaded...");
$scope.results = "";
$('#search').keypress(function(ev){
if(ev.which != 13){//do not add enter to search text, just submit query again
s_term = $('#search').val() + String.fromCharCode(ev.which);//append last character typed
}else{
s_term = $('#search').val();
}
$.ajax({
url: "/query",
data: {s_term: s_term},
success: function(data){
//console.log("products: " + data);
$scope.products = JSON.parse(data);
$scope.$apply();
}
});
});
}]);
</script>
<span ng-if="products != null">
<div style="width: 80%; margin: auto !important;
" dir-paginate="product in products | itemsPerPage: 10" class="row product">
<a href="/orders/new?product_id={{product.id}}" class="product-selector">
<div class="col-md-3 col-sm-3">{{product.title}}</div><div class="col-md-6 col-sm-6">{{product.description}}</div><div class="col-md-3 col-sm-3" style="text-align: center"><img src='{{product.image}}' width="50px" height="50px" style="margin-top: auto; margin-bottom: auto;"></div></a>
</div>
</span>
<span ng-if="products == null" >
<div style="background-color: #DDDDDD; border: 0px solid grey; border-radius: 5px;">
<h3 style="text-align: center;">Creating an Order</h3>
<p><strong>To start</strong>, type in the product code from the website or a key word like "christmas" or "sports". Click the product you would like to order, and it will take you to the order page.</p>
</div>
</span>
<dir-pagination-controls></dir-pagination-controls>
</div>
</div>
the link that is directing my to the page uses an href of "/products/search", which is the correct route.
Any help would be most appreciated!
Turns out after some further reading turbolinks was causing the problem. Turbolinks does not allow a full page reload, so angular never got fully bootstrapped. Here is a more thorough post on the issue: Using angularjs with turbolinks