I've recently started using materialize.css in my projects and it's been great. However, in my latest website, I tried creating dynamic modals with ajax gathered data.
The modals generate correctly but a weird glitch appears. After generating the modal it should automatically open, but it only opens after you click three times the trigger and it generates three modals (you can test it here).
Here's the code:
$(".champion-card").click(function() {
var champion = $(this).find(".card-title").html();
var champion_id = champion_id = champion.replace(/ /g,"-").replace('.', "")+'Modal';
$.ajax({
type: 'POST',
url: 'getdata.php',
data: { scripts: champion },
success: function(data) {
$("body").append('<div id="'+champion_id+'" class="modal"><div class="modal-content"><h4>Scripts - '+champion+'</h4><div class="row"><ul class="list">'+data+'</ul></div></div></div>');
}
});
$('#'+champion_id).modal('open');
$('#'+champion_id).modal({
complete: function() {
$(this).remove();
}
});
});
'getdata.php' only echoes a text containing the data posted.
http://materializecss.com/modals.html says opening a modal is done by the code:
$('#modal1').modal('open');
If I remember correctly, before it was .leanModal(), but I don't think that's a cause. The frustrating thing is that it opens after 3 clicks, generating 3 modals with the same id.
I couldn't find what's wrong and I though maybe the community can help. The are no errors received.
Thanks!
Related
Something weird - I have the script inside the bootstrap modal.
sometimes the script is loaded and works and sometimes it doesn't.
here is a URL for example:
https://ns6.clubweb.co.il/~israelig/sites/followmyroutes/test_sec.php
Click on the button and see the modal, then close the modal and open it again. After the couple of times, the scripts inside the modal stops working (scripts like form validation [when you submit it], image browser)
How can I fix it so all the script will work every time?
The way you populate the html is right or not suggested to be advised by coders. Check again from where you got the documentation.
your existing code from backend call
$(document).on('ready', function() {
$("#input-8").fileinput({
});
});
Try changing like
$(document).on('ready', function() {
setImageUploader();
});
function setImageUploader(){
$(document).find("#input-8").fileinput({
});
}
And also
$.ajax({
cache: false,
type: 'GET',
url: 'itinPage-secManage.view.php',
data: info,
success: function(data) {
$modal.find('.modal-body').html(data);
setTimeout(function(){ //added this line.
setImageUploader()
})
}
});
i think the problem in the syncronisation of the request, you can use Ajax reque
It looks like your common libraries like jquery bootstrap-datepicker, fileinput theme etc are being get every time the modal is launched.
This may cause a sort of namespace corruption or some weird side effect of the kind you seem to see.
You could put all the common libraries outside of the modal to prevent this from happening.
the problem in the ajax request, I means you maste waite while the request it's done.
var request = $.ajax({
cache: false,
type: 'GET',
url: 'itinPage-secManage.view.php',
data: info
});
request.done(function(data) {
$modal.find('.modal-body').html(data);
});
I've got a PHP form set up and it works fine on it's own but now that I've hooked it up with AJAX I'm getting duplicate submissions when someone submits the form so even though they've only submitted the form once it's added the details to the database multiple times.
From my testing it seems as though its sending the data twice but looking at the submissions from other people it's possible that it's doing it more than twice under certain circumstances but I haven't been able to replicate that.
Here is the code I was using initially:
$("#email-gather").submit(function(e) {
var url = "https://www.ruroc.com/emailgather.php";
$.ajax({
type: "POST",
url: url,
data: $("#email-gather").serialize(),
complete: function(data) {
$('.email-win input.button').val("submitted").attr('disabled', 'disabled').css({'background-color' : '#b34c4c','text-shadow' : 'none'});
}
});
e.preventDefault();
});
I have had a look around to find a solution and I saw a few people with similar issues saying that .live should be used instead of .submit so I amended my code this this:
$( "#email-gather" ).live( "submit", function() {
event.preventDefault();
var url = "https://www.ruroc.com/emailgather.php";
$.ajax({
type: "POST",
url: url,
data: $("#email-gather").serialize(),
complete: function(data) {
$('.email-win input.button').val("submitted").attr('disabled', 'disabled').css({'background-color' : '#b34c4c','text-shadow' : 'none'});
}
});
});
However this also resulted with the same issue so I'm hoping you might have a solution to this issue. I appreciate any help you can provide on the matter.
In the second part of code (that should work), you have event.preventDefault but event is not defined. try to add function(event) and it must work.
Else in the first one, you can put the prevent default before ajax call and take away the second submit. You need to add a return true in the ajax function to tell you script that the submit was successfull.
I have a select group populated by AJAX/PHP.
The issue i have although it works perfectly well, it does not return results 100% of the time of the page load.
Is there a specific reason why this might be happening?
the html
<div id='select_tags_div'>
</div>
the AJAX
$( document ).ready( function() {
selector_refresh();
});
function selector_refresh() {
url = '/home/bin/scripts/tags_list.php';
$.ajax({
type: 'GET',
url: url,
dataType: 'html',
beforeSend: function() {
},
success: function(result) {
$("#select_tags_div").html(result);
$(".chosen-select").chosen();
$('.chosen-select').trigger('chosen:updated');
vid_tags();
}
});
}
I have checked the source on the both success and fail to show results, and the results actually are not populated at all. I thought it may have been a chosen.js issue but now its looking like it isn't that at all. Instead it seems it may be a PHP/AJAX issue not returning the results.
When i check the AJAX success with an alert, it confirms the AJAX is successful even on the times when the PHP has not populated correctly.
ADDED
I added a button which calls the function to populate the field, of which functions 100% of the time.
Could this be a case of DOM perhaps?
I have a function that when i click a button I call more results from my table, Im trying to get this to work when the button is 100px top of the window, however I cant seem to get it to work...
$(function(){
$('#showMore').click(function(event) {
event.preventDefault();
var number = $(".directory").children().length;
$.ajax({
type: "POST",
url: "getentries.php",
data: "count="+number,
success: function(results){
$('.directory').append(results);
}
});
});
});
So far ive tried
$(function(){
$('#showMore').offset(function(event) {
....
The jQuery .offset() function is not for establishing an event handler. You're looking for .scroll(). In the event handler for "scroll" events, you can use .offset() to find out the current position.
I'll offer the caveat that browsers fire a lot of scroll events, so you may want to introduce a delay before doing any serious work in response to the user scrolling the window.
I have some ajax/jquery code in one of my pages and the problem I'm having is that it doesn't work the first time the page is loaded. If I refresh the page it works no prob. It does work in firefox first time. All the variables that I'm using are ok as I've alerted them out. I don't get a success or error message. It justr doesn't appear to do anything?
Any ideas?
$('.window .request').click(function (e) {
var itm = document.getElementById('txtItm').value;
var qty = document.getElementById('txtQty').value;
var msg = document.getElementById('txtMessage').value;
var op_id = document.getElementById('txtOp_id').value;
$.ajax({
type: "POST",
url: "do_request.php?msg="+msg+"&itm="+itm+"&qty="+qty+"&op_id="+op_id,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
document.getElementById('div_main').style.display='none';
document.getElementById('div_success').style.display='block';
var row_id = document.getElementById('txtRow').value;
document.getElementById('row'+row_id).style.backgroundColor='#b4e8aa';
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('Error submitting request.');
}
});
});
It's hard to determine what the problem might be given the information and it sounds like you've not fully tested the page in a consistent manner. It seems likely there is another element on the page affecting the click event, as opposed to the handler logic itself, but there's no way to tell. Make sure you are binding to the click event after the page is ready:
$(document).ready(function(){
$("#uniquedomid").bind('click',function(){
// click handler logic
});
});
Also, as you're new to JQuery, one thing you're going to want to start looking at are all the various ways in which JQuery can improve your life. It does almost everything. But for starters, you're going to want to start using:
$("#uniquedomid")
Instead of
document.getElementById("uniquedomid")
And
$("#uniquedomid").val();
Instead of
document.getElementById("uniquedomid").value