Develop Reference

How do I remove a .html in javascript?

Hello guys I need help to remove a span after being successful in ajax.
I am inserting a loading when pressing, the save button so that the user does not keep pressing several times and ends up passing the same item several times, but after success it returns without the old way
follows an excerpt from the code where I'm using this function
$('#btn_salvar_consultor').prop("disabled", true);
// Adicionar loading no botão
$('#btn_salvar_consultor').html(
`<span id="loading_consultor" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>`
);
var Consultor = $('#consultor').val();
var justificativaconsultor = $('#justificativaconsultor').val();
$.ajax({
url: '#Url.Action("AdicionarConsultor", "Oportunidade")',
data: {
id_usuario_responsavel: Consultor,
id_oportunidade: id_oportunidade,
justificativaconsultor: justificativaconsultor
},
type: 'POST',
success: function(data) {
$('#AddConsutlorResponsavel').modal('hide');
$.ajax({
url: '#Url.Action("_PartialOportunidadeTimeline", "Oportunidade")',
data: {
id_oportunidade: id_oportunidade
},
type: 'POST',
success: function(data) {
$('#btn_salvar_consultor').prop("disabled", false);
$('#loading_consultor').remove()
$('#consultor').val("0");
$('#justificativaconsultor').val("");
$("#partinal_container-fluid").html(data);
}
});
},
error: function(xhr, status, error) {
swal({
title: 'Ops!',
text: error,
icon: 'error',
timer: 10000,
button: 'OK!'
});
$('#btn_salvar_consultor').prop("disabled", false);
$('#loading_consultor').remove();
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="AddConsutlorResponsavel" tabindex="-1" role="dialog" aria-labelledby="TituloModalCentralizado" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content" style="box-shadow: 0 0 1em black; border:solid 1px">
<div class="modal-header">
<h5 class="modal-title" id="TituloModalCentralizado">Selecione o consultor</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="partinal_container-fluid" class="modal-body">
<div class="row">
<select id="consultor" class="form-control" data-val="true" name="consultor">
<option value="0">[Selecione...]</option>
#foreach (var item in ViewBag.Consultor) {
<option value="#item.UsuarioId">#item.NomeCompleto</option>
}
</select>
</div>
<div class="row">
<label class="col-form-label">Justificativa</label>
<textarea id="justificativaconsultor" class="form-control"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
<button type="button" class="btn btn-primary" id="btn_salvar_consultor" onclick="AddConsultor()">Salvar</button>
</div>
</div>
</div>
</div>

Solution
I realized that when I remove the span it removes the text, it follows the correction after success or error in ajax.
$('#btn_salvar_consultor').prop("disabled", false).text("Salvar");
instead of
$('#btn_salvar_consultor').prop("disabled", false);

How to show modal after Ajax success?

After the article is successfully added, the modal showing the message should appear, but I'm just getting errors. So far this is my code:
Modal:
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-confirm">
<div class="modal-content">
<div class="modal-header">
<div class="icon-box">
<i class="material-icons"></i>
</div>
<h4 class="modal-title">Awesome!</h4>
</div>
<div class="modal-body">
<p class="text-center">Your booking has been confirmed. Check your email for detials.</p>
</div>
<div class="modal-footer">
<button class="btn btn-success btn-block" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
Ajax:
<script type="text/javascript">
$('#form').on('submit', function (e) {
e.preventDefault();
var f = CKEDITOR.instances.text.getData();
var text = String(f);
var n=text.length;
var title = $('#title').val();
var docu_id = $('#docu_id').val();
var hidden_snippet = $('#hidden_snippet').val();
if (n!=0) {
$.ajax({
type: 'POST',
url: '/knowmore/index.php/ask_controller/book_add',
data: {text:text,title: title,hidden_snippet: hidden_snippet,docu_id:docu_id},
success: function (data)
{
$("#myModal").modal('show')
location.replace('/knowmore/index.php/index_controller/documentation/'+docu_id+'');
}
});
} else { alert('Enter contents of the Article!'); }
});
</script>
I used $("#myModal").modal('show') to show it but all I'm getting is an error saying modal is not a function.

If you all you need is to open a bootstrap modal, then just use
$('#myModal').modal();

It's because jQuery doesn't know any function named modal by default. If you want to show the modal you can just use show() function.
Change following
success: function (data) {
$("#myModal").modal('show')
location.replace('/knowmore/index.php/index_controller/documentation/' + docu_id + '');
}
into
success: function (data) {
$("#myModal").show();
location.replace('/knowmore/index.php/index_controller/documentation/' + docu_id + '');
}

Write down the following code.
success: function(msg)
{
$("#myModel").modal("show");
}

Close modal on AJAX Sucess(ASP.NET MVC)

I have Modal in view for making new record in Database.
View for it in Partial View
Here is code of view
<script src="~/Scripts/jquery-3.1.1.js"></script>
For AJAX I using this code
<script>
$(document).ready(function () {
$('#save_quest').click(function () {
savequestion();
});
});
function savequestion() {
$.ajax({
type: 'Post',
dataType: 'Json',
data: {
Question_new: $('#question').val(),
Answer: $('#answer').val(),
Preparing: $('#prepare').val(),
Retries: $('#retries').val(),
},
url: '#Url.Action("CreateNewQuestion", "Questions")',
success: function (da) {
if (da.Result === "Success") {
$('#myModal').modal('hide')
//window.location.href = da.RedirectUrl;
} else {
alert('Error' + da.Message);
}
},
error: function (da) {
alert('Error');
}
});
}
I need to hide modal when AJAX call is Successful
I try this $('#myModal').modal('hide')
Here is my modal on Primary View
<div class="modal fade" id="myModal" role="dialog" data-backdrop="false">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
#Html.Partial("~/Views/Questions/CreateQuestion.cshtml")
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
How I can hide it on AJAX Success?

You can try any of the below option in your ajax success block. Hopefully it will solve your problem.
$("#myModal").modal('hide');
OR
$('#myModal').modal('toggle');
OR
$('#myModal').removeClass('show');
OR
$('#myModal').modal().hide();
OR
$("#myModal .close").click();
OR
$("#myModal .close").trigger("click");

I found solution
Just need to write
$('#myModal').hide();

This is not the proper way.
$('#myModal').hide();
The proper way
$("#myModal").modal('hide');
Have you try adding bootstrap.js in your page? if not please include it in your page and then test. It should work.

i want to delete the image from my view page and table using jquery

here is my view page...
here my image is not getting deleted.the image name is not alerting when i give alert and not getting deleted..
<div class="modal fade" id="confirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
Are you sure you want to delete this image?
</div>
<div class="modal-footer">
<input type="hidden" name="image" id="img">
<button type="button" class="btn btn-default" data-dismiss="modal" id="modal-close">Close</button>
<button type="button" class="btn btn-danger" id="delete-ok">Ok</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function (){
$('#modal-close').click();
$("#file").change(function() { $('#upload-image').submit(); });
$('#upload-image').on('submit',(function(e){
e.preventDefault();
//alert()
var formData = new FormData(this);
$.ajax({
type:'POST',
url: $(this).attr('action'),
data:formData,
cache:false,
contentType: false,
processData: false,
success:function(result)
{
//$('#uploaded-img').html(result);
//location.reload();
}
});
}));
$(".fa-close").click(function(){
var image=$(this).attr('image');
alert(image);
$("#img").val(image);
});
$("#delete-ok").click(function(){
var image=$("#img").val();
alert(image);
var url='<?php echo base_url(); ?>admin_control/delete_upload_image';
alert(url);
var id=$("#product_id").val();
alert(id);
$.post(url, {image:image,id:id}, function(result)
{
//$('#uploaded-img').html(result);
location.reload();
});
});
});
my controler page is this...
public function delete_upload_image()
{
if($_POST)
{
$data=$this->session->userdata('image');
$f=$this->input->post('image');
$this->edit_image_delete($f);
unset($data[array_search($f,$data)]);
$this->session->set_userdata('image',$data);
var_dump('$data');
/*for editing */
if($this->input->post('id'))
{
$image=array_values($this->session->userdata('image'));
$data=array('image'=>json_encode($image));
if($this->input->post('table')=='gallery')
{
/*update gallery table*/
$this->roxmodel->update_gallery($this->input->post('id'),$data);
}
else
{
/*update product table*/
//$this->adminmodel->update_product($this->input->post('id'),$data);
}
}
$this->load->view('admin_control/ajax_show_upload_image',$data);
}
}
public function edit_image_delete($image)
{
if(file_exists('images/'.$image))
{
#unlink("./images/".$image);
}
if(file_exists('images/thumb/'.$image))
{
#unlink("./images/thumb/".$image);
}
return true;
}
here my image is not getting deleted.the image name is not alerting when i give alert and not getting deleted..

Jquery function not called when called on modal pop up submit button in partial view in ASP.net MVC

I want to call jquery function on Modal popup submit button, which is in partial view but the function is not called if that button is in partial view, it is only called when i put my modal pop up in main view. How to solve this issue... Please help .. Thanks
Index.cshtml
#Html.ActionLink("Create", "Create", null, null, new { id = "btnCreate", #class = "btn btn-small btn-info" })
<script type="text/javascript">
$(function () {
$.ajaxSetup({ cache: false });
$('#btnCreate').click(function () {
alert("function called");
$('.modal-dialog').load(this.href, function () {
$('#ShowModalDialog').modal({
backdrop: 'static',
keyboard: true
}, 'show');
});
return false;
});
});
</script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$('#Useremail').blur(function () {
alert("func called");
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
url: 'Home/Search',
data: "{'searchString':'" + document.getElementById('Useremail').value + "'}",
async: false,
success: function (response) {
alert("Record found");
},
error: function () { alert("record not found"); }
});
});
});
</script>
<div id='ShowModalDialog' class='modal fade in'>
<div class='modal-dialog'>
</div>
</div>
</body>
</html>
_Create.cshtml PartialView
#model MvcTwitterBootstrap.Models.UserDetail
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×</button>
<h3 id="myModalLabel">
Registration</h3>
</div>
#using (Html.BeginForm("Create", "Home", FormMethod.Post, new { #class = "modal-form" }))
{
#Html.ValidationSummary()
<div class="modal-body">
<div>
#Html.LabelFor(x => x.UserEmail)
#Html.TextBoxFor(x => x.UserEmail, new { #id = "Useremail" })
#Html.ValidationMessageFor(x => x.UserEmail)
</div>
<div>
#Html.LabelFor(x => x.UserPassword)
#Html.TextBoxFor(x => x.UserPassword, new { id = "Userpassword" })
#Html.ValidationMessageFor(x => x.UserPassword)
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">
Cancel</button>
<button class="btn btn-primary" type="button" id="btnsubmit">
Save</button>
</div>
}
</div>

for items that are added to the form after load you need to put the function on the document instead of the item
$(document).on('click', '#btnCreate', function(){
//code
});
the other option would be to put all of the click events in a function
function LoadScript(){
//jquery code here
}
and then call that function after the partial is loaded
$('#divContent').html(result);
LoadScript();