I have a custom WordPress plugin that uses a Javascript ajax onClick function to make a clickable element that rondomly selects an item from a dropdown list and then opens that selection in a new tab.
The code works like a dream on every desktop and mobile browser except Safari on iOS.
In Safari on iOS if you click the random button it succeeds in randomly selecting an option from the select list and shows the loading animation but it fails to load the new page from the selection.
It seems that this bug is similar to other safari only ajax onClick bugs that have been discussed at length since the early days of iOS. Except that I have yet to find a workaround to this particular implementation.
I'm including code for both the random button where the bug is found and the select list as, based on my research to date, it may be the interaction of these two elements that is causing the bug on Safari.
Any thoughts?
(The following code has been sanitized to protect my client)
PHP in WordPress plugin
<div ><a href="javascript:;" id="randoms" class="tooltip">
<span class="tooltiptext" style="background : grey; opacity : 0.5;">Random</span>
</a></div>
<div class="select_able">
<div class="ruler"></div>
<img src="<?php echo CLIENT_WEBSITE_URL; ?>public/image/widget-background.jpg" alt="Widget">
<select name="person_profile" id="person_id">
<option value="0" >Search</option>
<?php if(!empty($search_person)): ?>
<?php foreach($search_person as $search_person): ?>
<option value="<?php echo $search_person->entity_id; ?>"> <?php echo $search_person->person_name ?> </option>
<?php endforeach; ?>
<?php endif; ?>
</select>
</div>
HTML Output
<div><a href="javascript:;" id="randoms" class="tooltip">
<span class="tooltiptext" style="background : grey; opacity : 0.5;">Random</span>
</a></div>
<div class="select_able">
<div class="ruler"></div>
<img src="https://image.url" alt="Widget" data-pagespeed-url-hash="123456" onload="pagespeed.CriticalImages.checkImageForCriticality(this);">
<select name="person_profile" id="person_id">
<option value="0">Search</option>
<!-- List with hundreds of options -->
</select>
</div>
Javascript in WordPress plugin
$("#randoms").on("click", function() {
$.ajax({
type: "post",
dataType: "json",
url: ajaxUrl,
data: {
action: "random_client"
},
beforeSend: function() {
$(".loader").removeClass("hide");
},
async: true,
cache: false,
headers: { "cache-control": "no-cache" },
success: function(resp) {
$(".loader").addClass("hide");
if (resp.code == 200) {
var data = {
id: resp.entity_id,
text: resp.person_name
};
var newOption = new Option(data.text, data.id, true, true);
$("#person_id")
.append(newOption)
.trigger("change");
var pers_rating = $.trim($(".person_rating").val());
if (pers_rating < 0) {
$(".ruler").addClass("hide");
}
}
}
});
});
$(".new-tab-random").on("click", function() {
$.ajax({
type: "post",
dataType: "json",
url: ajaxUrl,
data: {
action: "random_client"
},
beforeSend: function() {
$(".loader").removeClass("hide");
},
async: true,
cache: false,
headers: { "cache-control": "no-cache" },
success: function(resp) {
$(".loader").addClass("hide");
if (resp.code == 200) {
fetch_profile_tab(resp.entity_id, resp.person_name);
}
}
});
});
$(".loader").removeClass("hide");
$(document).on("click", ".lower", function() {
$("#designator").val("lower");
var designator = $("#designator").val();
feed_back(designator);
});
$(document).on("click", ".higher", function() {
$("#designator").val("higher");
var designator = $("#designator").val();
feed_back(designator);
});
function fetch_profile_tab(
person_new_tab_id = 0,
slug_name_new_tab = 0
) {
var person_id;
var slug_name;
if (person_new_tab_id != 0) {
person_id = person_new_tab_id;
slug_name = string_to_slug(slug_name_new_tab);
} else {
person_id = $("#person_id").val();
var data = $("#person_id").select2("data");
slug_name = string_to_slug(data[0].text);
}
if (window.location.hostname == "localhost") {
var new_link =
window.location.origin +
"/website/result/" +
person_id;
} else {
var new_link =
window.location.origin + "/result/" + person_id;
}
window.open(new_link, "_blank");
}
What if you try to replace href="javascript:;" with href="#" in your <a> tag?
Related
Okay so I'm having that JS :
<script>
$('#building').change(function () {
var selectedValue = $(this).val();
$.ajax({
url: 'getunits.php',
type: "POST",
async:false,
contentType: "application/x-www-form-urlencoded;charset=utf-8",
data:{
building: selectedValue,
},
success: function (result) {
var e = document.getElementById('div1');
e.innerHTML = result;
eval(document.getElementById('runscript').innerHTML);
}
});
});
</script>
<div id="div1">
</div>
And that in the PHP :
$selectunits = mysqli_query($con,"SELECT * FROM `units` WHERE `building`='".$building."'");
echo '<script type="text/javascript" id="runscript">';
while($rowunits = mysqli_fetch_assoc($selectunits))
{
//echo '<option value="'.$rowunits["ID"].'">'.$rowunits["unit_number"].'</option>';
echo '$("#unit").append("<option value="'.$rowunits["ID"].'">'.$rowunits["unit_number"].'</option>");';
}
echo'</\script>';
All I'm trying to do is after I select from the first select, an Ajax goes to that URL and fills up the 2nd select with different data. So what I was able to do is do a loop in the PHP to create the required JS to fill up.
I have a from inside of a while loop. I am processing it with ajax. Its working only on the first from and not on the other results. Please have a look.
<?php while($a = $stmt->fetch()){ ?>
<form method="post" action="">
<input type="hidden" value="<?php echo $mbs_id; ?>" class="memid">
<select class="validity" class="upgrade-valsel">
<?php while($mv = $mval->fetch()){ extract($mv); ?>
<option value="<?php echo $mv_id; ?>"><?php echo $mv_validity; if($mv_validity == 1){ echo " month"; }else{ echo " months"; } ?></option>
<?php } ?>
</select>
<input type="submit" value="Upgrade" class="submit">
<div class="center-align" style="margin-left: -20px"><img src="images/loading.gif" width="auto" id="loading-rent" style="margin-right: 0px; height: 40px"></div>
</form>
<?php } ?>
When I click on submit button on the first result it process the result. But when I click on other buttons then its just refreshing the page. I tried replacing all the IDs with CLASS but after that not even the 1st one is working. Please help me.
Script
$(document).ready(function() {
$(".submit").click(function() {
var dataString = {
memid: $(".memid").val(),
validity: $(".validity").val()
};
$.confirm({
title: 'Confirm!',
content: 'Are you sure you want to upgrade your membership to <?php echo $mbs_name; ?>?',
buttons: {
confirm: function () {
$.ajax({
type: "POST",
dataType : "json",
url: "upgrade-process.php",
data: dataString,
cache: true,
beforeSend: function(){
$("#submit").hide();
$("#loading-rent").show();
$(".message").hide();
},
success: function(json){
setTimeout(function(){
$(".message").html(json.status).fadeIn();
$("#submit").show();
$("#loading-rent").hide();
},1000);
}
});
},
cancel: function () {
$.alert('<span style="font-size: 23px">Upgrade Cancelled!</span>');
}
}
});
return false;
});
});
As #Alive to Die and Jeff try to explain it, you use selector which returns several objects so when you use a function on this set of objects, jquery only use the first object of this set.
You have to use "this" to work on the context :
$(".submit").click(function(e) {
e.preventDefault();
// $(this) : your input with class .submit (the one you click)
// parent() : the parent of $(this) (the form)
// and then find the child with the unique class you want
var dataString = {
memid: $(this).parent().find(".memid").val(),
validity: $(this).parent().find(".validity").val()
};
// EDIT: Get the loading image (you should use a class instead of this selector)
var loader = $(this).parent().find("> div");
// After you can use loader in this function and all sub functions
loader.hide();
// And then the rest of your code with the same logic...
});
Pay attention each function has a different $(this) linked to its execution context.
Use preventDefault() to prevent the page from refreshing when you click the submit button. Use this to get the current form's values. Change your dataString to use this to get the values of the current form.
$(document).ready(function() {
$(".submit").click(function(e) {
e.preventDefault();
var dataString = {
memid: $(this).parent().find(".memid").val(),
validity: $(this).parent().find(".validity").val()
};
$.confirm({
title: 'Confirm!',
content: 'Are you sure you want to upgrade your membership to <?php echo $mbs_name; ?>?',
buttons: {
confirm: function () {
$.ajax({
type: "POST",
dataType : "json",
url: "upgrade-process.php",
data: dataString,
cache: true,
beforeSend: function(){
$("#submit").hide();
$("#loading-rent").show();
$(".message").hide();
},
success: function(json){
setTimeout(function(){
$(".message").html(json.status).fadeIn();
$("#submit").show();
$("#loading-rent").hide();
},1000);
}
});
},
cancel: function () {
$.alert('<span style="font-size: 23px">Upgrade Cancelled!</span>');
}
}
});
return false;
});
});
When the user hovers over an image an information box comes up about that image, the information them changes inside the box as I move over another image but when I am over no images the information box stays. I can't close the information box (i.e. tooltips).
JS :
var id;
$(document).ready(function () {
$('a').mouseenter(function () {
//var id = $(this).parent().attr('myval');
id = $(this).data('myval');
$.ajax({//create an ajax request to foliobase.php
type: "GET",
//link to the foliobase.php file "?subj" here is the connector
url: "foliobase.php?subj=" + id,
dataType: "html",
success: function (response) {
$("#fillFolio").html(response);
}
});
});
$('a').onmouseleave(function () {
id = $(this).data.display = 'none';
}
});
How can I get the information box to disappear on mouse out?
I have tried multiple tests but the box doesn't even appear with them, the last one I tried is in the code above.
$('a').onmouseleave(function () {
id = $(this).data.display = 'none';
}
I am only starting out with javascript, jquery etc. in the last year.
Thank you in advance!!
Here is the php.
<div class="thumbnails">
<?php
$query = mysqli_query($connection, "select * from portfolio");
print "<ul>";
while ($row = mysqli_fetch_assoc($query)) {print "<li><img onClick=preview.src=" . $row['image'] . "name=" . $row['folio_id'] . "src={$row['image']}></td></li>";
}
print "</ul>";
?>
</div>
<!--Folio Information-->
<div id="fillFolio">Project Information</div>
I'm not sure, but try to use :
$('a').onmouseleave(function () {
$("#fillFolio").empty();
}
Hope this helps.
$("a").hover(function(){
id = $(this).data('myval');
$.ajax({//create an ajax request to foliobase.php
type: "GET",
//link to the foliobase.php file "?subj" here is the connector
url: "foliobase.php?subj=" + id,
dataType: "html",
success: function (response) {
$("#fillFolio").html(response);
}
});
}, function(){
//im not sure u want to hide or want to just clear your question not clear
$("#fillFolio").empty();
$("#fillFolio").hide();
});
Why not use jQuery hover = (mouseenter + mouseleave)
<script type="text/javascript">
var id;
$(document).ready(function () {
$('a').hover(function () {
//var id = $(this).parent().attr('myval');
id = $(this).data('myval');
$.ajax({//create an ajax request to foliobase.php
type: "GET",
//link to the foliobase.php file "?subj" here is the connector
url: "foliobase.php?subj=" + id,
dataType: "html",
success: function (response) {
$("#fillFolio").html(response);
}
});
,function () {
id = $(this).empty();
});
</script>
I am a decent PHP programer and recently I got stuck in a javascript code.
I have the code below:
$(function () {
$('.more').live("click", function () {
var ID = $(this).attr("id");
if (ID) {
$("#more" + ID).html('<img src="moreajax.gif" />');
$.ajax({
type: "POST",
url: "scripts/loadmore.php",
data: "lastmsg=" + ID,
cache: false,
success: function (html) {
$("div#updates").append(html);
$("#more" + ID).remove();
}
});
} else {
$(".morebox").html('The End');
}
return false;
});
});
This code submit without problems one PHP variable to the process page loadmore.php using this input
<div id="more<?= $load_id ?>" class="morebox" style="margin-bottom: 200px;">
<a href="#" class="more" id="<?php echo $load_id; ?>">
load more
</a>
</div>
How can put more variables in the input and the javascript code to work with them on the process page?
I want to set one or two more variables.
UPDATE:
I updated the code like this:
HTML input:
<div id="more<?= $load_id ?>" class="morebox" style="margin-bottom: 200px;">
load more</div>
JAVASCRIPT CODE:
<script type="text/javascript">
$(function() {
$('.more').live("click",function()
{
var ID = $(this).attr("data-id");
var ACT = $(this).attr("data-act");
if(ID)
{
$("#more"+ID).html('<img src="moreajax.gif" />');
$.ajax({
type: "POST",
url: "scripts/loadmore.php",
data: {"lastmsg="+ ID, "act="+ ACT},
cache: false,
success: function(html){
$("div#updates").append(html);
$("#more"+ID).remove();
}
});
}
else{
$(".morebox").html('The End');
}
return false;
});
});
</script>
I am not sure if the data lines was writed properly because the script looks like it's frozen now
SOLVED:
I just used a datastring like this
<script type="text/javascript">
$(function() {
$('.more').live("click",function()
{
var ID = $(this).attr("data-id");
var ACT = $(this).attr("data-act");
var dataString = 'lastmsg='+ ID + '&act=' + ACT;
if(ID)
{
$("#more"+ID).html('<img src="moreajax.gif" />');
$.ajax({
type: "POST",
url: "scripts/loadmore.php",
data: dataString,
//data: {"lastmsg="+ ID, "act="+ ACT },
cache: false,
success: function(html){
$("div#updates").append(html);
$("#more"+ID).remove();
}
});
}
else{
$(".morebox").html('The End');
}
return false;
});
});
</script>
Just send data as an object:
data: {
"lastmsg": "lastmsg="+ ID,
"anotherData": "someData"
}
You'll retrieve them in your PHP script as follows:
$_POST["lastmsg"];
$_POST["anotherData"];
I have this code generate dynamically using php code:-
<div class="mailList" id="M_6">
<div class="mailListHeader" id="H_6">
<img style="float:right; display:none;" class="loaderIMG" id="LOADER_6" src="images/preloader.gif">
Sent by <strong>Admin</strong> on <strong>Oct 03 2013 02:53 PM</strong> to <strong>Received Response</strong> for Quarter <strong>3</strong> Year <strong>2013</strong>.<br>
Subject: <strong>Test Mail</strong><br>
</div>
<div class="mailListContent" id="C_6">
<div class="closeContent" id="CC_6">Close [x]</div>
<span id="SPAN_6"></span>
</div>
<div class="mailListFooter" id="F_6">
<span class="mailContentBtn" id="MCBTN_6" style="font-size:11px; color:#09C; cursor:pointer;">
View Content
</span>
<span class="mailListBtn" id="MLBTN_6" style="float:right; font-size:11px; color:#C06; cursor:pointer;">
Successfull-[0] Failed-[4]
</span>
</div>
</div>
Then, user can click View Content or Successfull-[0] Failed-[4] that will make a ajax request than display result in div mailListContent. Below is code for the jquery ajax request:-
$(".mailContentBtn, .mailListBtn").click(function(){
var currentId = $(this).attr('id');
currentId = currentId.split("_");
var actualId = currentId[1];
if($("#C_"+actualId).is(":visible")) {
$("#C_"+actualId).hide("slow","swing");
}
$("img#LOADER_"+actualId).show();
if(currentId[0]=="MCBTN") {
var dataString ="action=getMailContentByID&mailID="+actualId;
} else {
var dataString ="action=getMailListByID&mailID="+actualId;
}
$.ajax({
type: "POST",
url: "include/getMail.php",
data: dataString,
cache: false,
async: false,
success: function(html) {
$("#SPAN_"+actualId).empty();
$("#SPAN_"+actualId).append(html);
$("#C_"+actualId).show("slow","swing");
$("img#LOADER_"+actualId).hide();
}
});
});
The request and the events works fine, the problem is every time user click at View Content or Successfull-[0] Failed-[4] the loading image is not display. As you can see, I give a unique ID for every loading image than only 1 loading image will display on clik. There is no error in inspect code in Google Chrome. How can I solve this?
Thank you.
In your call to $.ajax, change the "async" option to "true". Because in your case, the $.ajax is blocking the ui thread in displaying the loading image as it is executed synchronously.
You have missed:
$(document).ready(function () {
});
try this:
<script>
$(document).ready(function () {
$(".mailContentBtn, .mailListBtn").click(function () {
var currentId = $(this).attr('id');
currentId = currentId.split("_");
var actualId = currentId[1];
if ($("#C_" + actualId).is(":visible"))
$("#C_" + actualId).hide("slow", "swing");
$("img#LOADER_" + actualId).show();
if (currentId[0] == "MCBTN") {
var dataString = "action=getMailContentByID" +
"&mailID=" + actualId;
}
else {
var dataString = "action=getMailListByID" +
"&mailID=" + actualId;
}
$.ajax({
type: "POST",
url: "include/getMail.php",
data: dataString,
cache: false,
async: false,
success: function (html) {
$("#SPAN_" + actualId).empty();
$("#SPAN_" + actualId).append(html);
$("#C_" + actualId).show("slow", "swing");
$("img#LOADER_" + actualId).hide();
}
});
});
})
</script>