Jquery: html, text and append functions are not working - javascript

I have a simple code to make requisition by ajax.
<script type="text/javascript" src="{{ url_for('static', filename='jquery-2.2.4.min.js') }}"></script>
<script type="text/javascript">
$(document).ready(function() {
$('form').submit(function (e) {
var url = "{{ url_for('ajaxPage') }}";
$.ajax({
type: "POST",
url: url,
data: $('form').serialize(),
dataType:'json',
success: function (data) {
var text= "Anything here!";
$('div.panel-body').html(text); //Not Working
$('div.panel-body').text(text); //Not Working
$('div.panel-body').append(text); //Not Working
alert(text); //Working
console.log(text); //Working
}
});
e.preventDefault();
});
});
</script>
Here body layout:
<body>
<div class="panel-body"> // Waiting content </div>
</body>
Ajax is working perfectly, I can view my array using console.log, alert, but I can not use HTML(), TEXT() and APPEND(). Where is my mistake? I already change JS file and I have other page with the same code and it works fine!
Update
My Network page
Updating body page
<div class="input-group">
<form method="POST" name='form'>
<input type="text" name="inputxt" class="form-control" size="20">
<button type="submit">Search</button>
</form>
</div>
<div class="panel-body">
</div>

I recreated this page and the problem was a css inside DIV.

Related

laravel Javascript and Render sections

Hi I did a webapp with laravel, with various forms that add datas to database and then refresh only some sections (for example insert an order, then insert some products...etc), but when section render javascript doesn't work anymore.
I have some Jquery that catch some events...for example some click buttons.
EXAMPLE
PART of script in the HEAD
<script src="{{ asset('public/js/jquery-3.5.1.min.js') }}"></script>
<script src="{{ asset('public/js/vendor/popper.min.js') }}"></script>
<script src="{{ asset('public/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('public/js/vendor/holder.min.js') }}"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function(){
$(document).ajaxSend(function() {
$("#overlay").fadeIn(300); 
});
$('#searchPolizza').keydown(function (e) {
if (e.keyCode == 13) {
e.preventDefault();
$value=$(this).val();
$.ajax({
type : 'get',
url : "{{ url("/trova") }}",
data:{'numero':$value},
success:function(data){
$('#RefreshContent').replaceWith(data);
//initRefundsFunctions();
//initDossierListClick();
}
});
}
});
$( "#addDossier" ).click(function( event ) {
event.preventDefault();
//$("#addDossierForm")[0].reset();
var r = confirm("Vuoi veramente creare un nuovo dossier?");
if (r == true) {
....continue.......</script>
After i found a "polizza" calling ajax '#searchPolizza' Then i refresh content section
Part of RefreshContent section where i have a form with button #addDossier that i can press after refresh section related to first search
<div class="" style="zoom:90%">
<form class="form-inline" id="addDossierForm">
<input type="text" class="form-control mb-2 mr-sm-2" placeholder="dossier" id="dossier">
<input type="date" class="form-control mb-2 mr-sm-2" placeholder="data sinitro" id="date_cla">
<button type="submit" class="btn btn-primary mb-2" data-customer_id="#isset($customer_id){{$customer_id}}#endisset" id="addDossier"><i class="fa fa-plus" aria-hidden="true"></i></button>
</form>
</div>
But jquery cannot catch anymore the click event
I tried to put all script in the head or also to create function to recall but it doesn't work well.
Is there another solution?
Thx
Here, $(dom).click() binds events statically, You should try registering you click event function like this:
$( '#addDossier' ).on( 'click', function (event) { your code});
which binds event handler dynamically, check that out here and you could use shorthand (function(){..})(); instead of $(document).ready(function(){...}); and you should consider using something modern like Vue/React. Jquery is primitive and getting older.

jQuery- Button not working after loading content

I'm using Codeigniter and having trouble on my button after I load my page using load function on jQuery.
reg_form.php loads first, then after saving data, it will load the page-content class to see the list of data but when I'm trying to go to reg_form.php again using the button, nothing happens.
JS is not working on the current loaded page
reg_form.php
<html>
<body>
<div class="page-content">
<label>Name:</label><br>
<input type="text" id="name">
<button id="save"></button>
</div>
</body>
</html>
reg_list.php
<html>
<body>
<div class="page-content">
<button id="reg_form"></button>
</div>
</body>
</html>
reg.js
$('#reg_form').click(function(){
$(".page-content").load('reg_form');
});
$('#save').click(function(){
var name = $('#ame').val();
$.ajax({
url:"gatepass/save",
method: 'POST',
data:{
name:name
},
success:function(data){
$(".page-content").load('reg_list');
}
});
});
Use below mentioned solution.
$(document).on('click','#reg_form',function(){
$(".page-content").load('reg_form');
});
$(document).on('click','#save',function(){
var name = $('#ame').val();
$.ajax({
url:"gatepass/save",
method: 'POST',
data:{
name:name
},
success:function(data){
$(".page-container").load('reg_list');
}
});
});
This will help you.
Tabs and events in the content that you add after the DOM loads should be defined using the .on() function as shown below use of .delegate() has been discontinued:
$(document).on(events,selector,data,eventhandler);
If for example you add the button below into the div after DOM loads and you want the button to say 'You clicked me' when clicked, the code would be:
$(function() {
$(document).on('click', '#justClickMe', function(e) {
alert('You clicked me');
})
$('#content').append('<button id="justClickMe">Just Click Me</button>');
});
<div id="content"><h3>New Content</h3></div>

How should I send my forms separately?

I write the blow codes and I would send my forms when I click on each forms submit button.
my question is how can I send each forms separately and indicate each result separately .because when my codes run all of the forms will submit at the same time.
here is my codes:
$("#done").click(function(e) {
var url = 'secondpage.htm'
$.ajax({ type: "POST", url: url, data: $("#done").serialize(),
success: function(data) {
$('.divs').empty()
$(".divs").html(data)
} }); e.preventDefault();
});
form{
width:100px;
border:1px solid blue;
height:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="divs">
<form>
<button id="done">done</button>
</form>
</div>
<div class="divs">
<form>
<button id="done">done</button>
</form>
</div>
<div class="divs">
<form>
<button id="done">done</button>
</form>
</div>
you need a submit the from to change the button type="submit"
Note: i was added divs inside the form .for prevent the form removing after the ajax call
Updated:
$("form").on('submit',function(e) {
var url = 'secondpage.htm'
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function(data) {
$(this).find('.divs').empty
$(this).find('.divs').html(data)
}
});
e.preventDefault();
});
form {
width: 100px;
border: 1px solid blue;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form>
<button id="done" type="submit">done</button>
<div class="divs">
</div>
</form>
<form>
<button id="done" type="submit">done</button>
<div class="divs">
</div>
</form>
<form>
<button id="done" type="submit">done</button>
<div class="divs">
</div>
</form>
You have many problems in your actual code, from which we can state:
Giving the same id for multiple elements in the page, you can use class instead.
With $("#done").serialize() you are only serializing the first element with id="done" and not any form.
You are overriding the .divs content so deleting your forms from the page with $('.divs').empty() and $(".divs").html(data), you better use a specific element to show the response and use .text() method to fill it with the content.
I tried to refactor your code so it works the way you want, here's what you will need:
$(".done").click(function(e) {
var url = 'secondpage.htm';
$.ajax({
type: "POST",
url: url,
data: $(this).closest('form').serialize(),
success: function(data) {
//$('.divs').empty() You will erase your form here
$(this).closest('.preview').text(data)
}
});
e.preventDefault();
});
Demo:
$(".done").click(function(e) {
var url = 'secondpage.htm';
$.ajax({
type: "POST",
url: url,
data: $(this).closest('form').serialize(),
success: function(data) {
//$('.divs').empty() You will erase your form here
$(this).closest('.preview').text(data)
}
});
e.preventDefault();
});
form {
width: 100px;
border: 1px solid blue;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="divs">
<form>
<button class="done">done</button>
</form>
<div class="preview"></div>
</div>
<div class="divs">
<form>
<button class="done">done</button>
</form>
<div class="preview"></div>
</div>
<div class="divs">
<form>
<button class="done">done</button>
</form>
<div class="preview"></div>
</div>
Note:
I used a done class instead of id, and referred it with
$('.done') in JS code.
I used $(this).closest('form').serialize() to respectively serialize the appropriate form when clicking on the button.
I added a div with class="preview" in each form to hold the displayed response, and filled it with $(this).closest('.preview').text(data) in the JS code.
By using $(this).closest() we are sure to handle only the form containing the clicked button.

Clicking a div instead of hitting submit and then passing argument

I've got a form with a submit button on a form that opens up a nested php page within a div on my page.
All I want to do is hide the submit button, and instead replace this with clicking one of the divs and thus running a script called showBiog(key), which then passes key to the form for submitting.... help... ;-)
<script type="text/javascript">
$(function() {
// Handler for .ready() called.
$('#SubmitForm').submit(function( event ) {
$.ajax({
url: 'test2.php',
type: 'POST',
dataType: 'html',
data: $('#SubmitForm').serialize(),
success: function(content)
{
$("#DisplayDiv").html(content);
}
});
event.preventDefault();
});
});
</script>
HTML is:
<form id="SubmitForm" method="post">
<div id="SubmitDiv" style="background-color:black;">
<button type="submit" class="btnSubmit">Submit</button>
</div>
</form>
<div class="test" onClick="showBiog(1)"><p>1</p></div>
<div class="test" onClick="showBiog(2)"><p>2</p></div>
<div class="test" onClick="showBiog(3)"><p>3</p></div>
<div class="test" onClick="showBiog(4)"><p>4</p></div>
Just remove the button element, and do something like:
$('#myspecificdiv').on('click', function() {
$('#SubmitForm').submit();
}
You can hide the submit button and perform its click action in showBiog(key); just like
function showBiog(key){
//Your code
$('#submit_btn_id').click();
}
please put the javascript on document.ready
<script type="text/javascript">
$(document).ready(function() {
$('.class name').on('click',function() {
$('#SubmitForm').submit();
});
});
</script>

bootstrap to display click result without page refresh

I have a page that I have it split in half. The left side will have the text hyperlinks or buttons, and on the right side I need to display the results without page refresh. I'm hoping that bootstrap has something like this but have not been able to find it. Any help will greatly be appreciated.
Bootstrap doesn't provide AJAX calls, it's more for styling your site web. For this, you need to check the jQuery AJAX documentation.
Edit
Here's a simple example to make AJAX calls.
index.php (Basic HTML code)
<div class="container">
<div class="row">
<div class="col-md-6">
<button id="cats" data-animal="cats" class="btn btn-default">Text on cats</button>
<button id="dogs" data-animal="dogs" class="btn btn-default">Text on dogs</button>
</div>
<div class="col-md-6">
<div id="results"></div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js"></script>
script.js (Script where the AJAX call will be made)
$(document).ready(function() {
$("button").on('click', function(e) {
e.preventDefault();
var $this = $(this),
animal = $this.data('animal');
$.ajax({
type: "post",
url: "getAnimal.php",
dataType: "html",
data: { pet : animal },
success: function(data) {
$("#results").html('').html(data);
}
});
});
});
getAnimal.php (PHP script called by AJAX)
<?php
$animal = $_POST['pet'];
if($animal == "cats") {
echo "You clicked on cats!";
}
else if($animal == "dogs") {
echo "You clicked on dogs!";
}
Are these links all in the same domain? If so, it's not too hard to fetch the content at each URL using jQuery's ajax API.

Categories

Resources