Hı,
I have a script that loads my div tag some PHP files like this;
$(".loaddiv").click(function() {
var url = $(this).attr("id") + ".php";
$("#orta_load").load(url);
console.log("loading " + url);
});
when ı click a button; its load of some PHP files into orta_load div tag without refresh (that is the problem)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Dahili Branşlar</span>
<span>Cerrahi Branşlar</span>
<div id="orta_load">
loading page
</div>
How can send data to another page which is upload?
for example, ı have a contact page that name is contact.php.
When I press submit button I should send all data to thanks.php page without refresh the main page
I tried lot of ways but I could not do this. when I press the button the page is refreshed or it is not send the data
What should I do?
I have multiple buttons which currently redirect to different pages for users to perform a single action and they would then need to click another button whilst on the confirmation page to go back where they were before. This is old school and inconvenient...
What I would like to do is create 1 single pop-up box which would get triggered (appear) when any of those buttons are clicked. Inside the box, I want the relevant .php file to appear so users can confirm their action and the page would then reload and display a confirmation message.
Example:
"Delete" button needs to trigger the confirmation-popup.php to appear with the delete.php file included in it so users can confirm the deletion.
"Cancel" button needs to trigger the confirmation-popup.php to appear with the cancel.php file included in it so users can confirm the cancellation.
Here's what I've done:
- Created the pop up and included it on their Account page (that's where all the buttons are).
- Added a JS which passes through the button ID to trigger the popup
When either of the buttons is clicked, the popup would appear fine.
I'm stuck at the stage where different "action".php files need to passed and included in the body of the popup. I know I could create multiple popups each for its relevant action, but we all know this isn't best practice and it's doubling up.
Any help would be appreciated!
Edit: Added code after the below comment
HTML:
<button class="button-small button-red" id="confirm-delete">Delete</button>
JS:
$(document).ready(function() {
$("#confirm-delete").click(function() {
if (!$(".confirm-popup").is(":visible")) {
$(".confirm-popup").fadeIn("slow");
return false;
}
});
});
PHP confirm_popup.php:
<div class="confirm-popup">
<?php include 'delete_auction.php'; ?>
</div>
You can open different iframes in the popup based on the button pressed. That will allow you to use one popup and you will just edit the iframe src attribute to the correct php page. For example you can add an HTML attribute to each button that holds the URL of the page that should be opened by the button. Then you will have some JS code that on the button press will read the attribute that holds the URL and puts it in the iframe src attribute inside the popup.
Something like this using jQuery:
<button class="myclass" cotent-url="delete.php">Delete</button>
<button class="myclass" cotent-url="save.php">Save</button>
<div class="popup"><iframe src=""></iframe></div>
<script type="text/javascript">
$('.myclass').click(function(){
$('.popup iframe').attr('src', $(this).attr('content-url'));
})
</script>
Or AJAX way:
<button class="myclass" cotent-url="delete.php">Delete</button>
<button class="myclass" cotent-url="save.php">Save</button>
<div class="popup"></div>
<script type="text/javascript">
$('.myclass').click(function(){
$.ajax({
url: $(this).attr('content-url'),
data: {},
success: function(response) {
$('.popup').html(response);
},
dataType: 'html'
});
})
</script>
I am trying to load data from another page. The data that I am trying to load is simple PHP $_GET value that was passed through a URL
The $_GET value should be loaded only when the following link has been clicked on.
The data only loads when I use the following href link :
<a id="pizza" href="#">Pizza</a>
However when I use this href tag
<a id="pizza" href="menu.php?test_val=1">Pizza</a> <!-- The link is on the same as the menu.php page >
The content does not get loaded. I figured out that it doesn't get loaded because I set the content to display only when the link gets clicked on like so...
<script>
$("#pizza").on("click", function(){
$("#item_description").load("item-details.php");
})
</script>
The problem is when I click on the link it starts a new XHTTP request and doesn't reach the
$("#item_description").load("item-details.php");
Because nothing is being clicked on when there is new XHTTP request.
The item-details page just echo's out the value that was sent
<?php
echo $_GET['test_val'];
?>
Can anyone please help me come up with a solution??
Thanks!!
use
<a id="pizza" href="#">Pizza</a>
to keep your link format and you can use
$("#item_description").load("item-details.php?myvar=1&mysecondvar=2");
to pass your value to your PHP script
you can read GET value by parsing :
window.location.href
if needed
I need some assistance understanding page navigation in JQuery Mobile. The documentation I've read assumes you are loading data into the DOM, which in this case I am not (not sure why, I took over this code base).
You can see below, I have a page that MVC delivers. When a user selects a link from the ul, it calls as function to set the window.location, rather than loading the page into the DOM.
My question is, is there a more correct way to do this for JQuery Mobile, due to this issue: in each function, $.mobile.loading('show') is called, then the window location is changed. This page is cached on the iPhone with the loading spinner showing, so if the user presses back, it loads this page from the cache, and the loading spinner is still showing. Since the it was loaded from cache, pageinit and pageshow both do NOT get fired.
So two questions
Is there a more correct way to show the loading animation from one page to another, that is not being loaded into the DOM.
If not, is there a work around?
Thanks
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<form id="myform" method="post" action="/Mobile/Device?isSearch=1" data-ajax="false" >
<ul data-role="listview">
<li >
<h2 > Search for a device </h2>
<p> <input type="search" placeholder="Enter a term to filter active devices" name="txtfilter" data-mini="true" id="txtSearch" /> </p>
<input type="hidden" id="lbluserLatitude" name="lbluserLatitude"/>
<input type="hidden" id="lbluserLongitude" name="lbluserLongitude"/>
</li>
<li>
<a id="lnkViolationDevice" onclick="gotoViolationDevices();">
<h2>
Error Devices
</h2>
<p>
Only devices with Policy Violations
</p>
<span class="ui-li-count"><%= Model.UpdateTotalRecordCount%></span>
</a>
</li>
<li id="lnkNearby">
<a onclick="gotoNearbyDevices();">
<h2 > Active Devices</h2>
<p></p>
<span class="ui-li-count"><%= Model.TotalRecordCount%></span>
</a>
</li>
<li >
<a id="lnkInactiveDevice" onclick="gotoInactiveDevices();">
<h2>Inactive Devices</h2>
<p>New or Decommissioned </p>
<span class="ui-li-count"><%= Model.InactiveTotalRecordCount%></span>
</a>
</li>
</ul>
<br />
<script type="text/javascript">
var userLatitude = "";
var userLongitude = "";
$(document).on("pageinit", function () {
$('#txtSearch').attr('autocorrect', 'off');
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
else {
alert("Geolocation is not supported by this browser.");
}
});
function showPosition(position) {
broswerSupportGeo = true;
userLatitude = position.coords.latitude;
userLongitude = position.coords.longitude;
$('#lbluserLatitude').val(userLatitude);
$('#lbluserLongitude').val(userLongitude);
//$('#lnkNearby').show();
}
function mobileLogout() {
$.mobile.loading('show');
$.ajax({
url: "/Account/Mobile_LogOff",
type: "POST",
async: true,
success: function (result) {
window.location = '<%= Url.Action("LogOn", "Account", new{Area=""}) %>';
}
});
}
function GoFullPage() {
window.location = "/Device/Index?mode=full";
}
function gotoNearbyDevices() {
$.mobile.loading('show');
var actionLink = '<%= Url.Action("Index", "Device", new {tabIndex = "2", latitude = "LatitudeValue", longitude = "LongitudeValue"} ) %>';
actionLink = actionLink.replace("LatitudeValue", userLatitude);
actionLink = actionLink.replace("LongitudeValue", userLongitude);
window.location = actionLink;
}
function gotoViolationDevices() {
$.mobile.loading('show');
var actionLink = '<%= Url.Action("Index", "Device", new {tabIndex = "0", latitude = "LatitudeValue", longitude = "LongitudeValue"} ) %>';
actionLink = actionLink.replace("LatitudeValue", userLatitude);
actionLink = actionLink.replace("LongitudeValue", userLongitude);
window.location = actionLink;
}
function gotoInactiveDevices() {
$.mobile.loading('show');
var actionLink = '<%= Url.Action("Index", "Device", new {tabIndex = "1", latitude = "LatitudeValue", longitude = "LongitudeValue"} ) %>';
actionLink = actionLink.replace("LatitudeValue", userLatitude);
actionLink = actionLink.replace("LongitudeValue", userLongitude);
window.location = actionLink;
}
</script>
Is there a more correct way to show the loading animation from one page to another, that is not being loaded into the DOM?
Short answer is not, it is not possible. AJAX loaded is called AJAX loader with reason, it will only work when jQuery Mobile handles page loading into the DOM. In this case page is never refreshed, thus it is possible to show loader during page transitions.
In your case, each time you open new page browser will trigger complete page refresh, nothing visible can't persist during full page refresh/reload/open.
If not, is there a work around?
Short answer is still now. As I already told you in your previous question nothing visible can't persist during full page refresh/reload/open. Thou there's one thing you can do. Because next page is still jQuery Mobile page you can show loader during pagecreate event and hide it during pageshow event, window load if your page is content/image heavy or during AJAX success callback in case you are using AJAX to load additional content.
But again you can't have loader showing before you change page hoping it will still show after new page starts loading. It is simply not possible.
Is there a reason you are using? :
window.location = actionLink;
jQuery Mobile has its own method of handling full page transitions without AJAX, be it data-rel="external" attribute or changePage() function with page reload parameter.
Update
Full non-AJAX change page through attribute:
<a rel="external" href="index.html">Index</a>
Read more about it here. Unfortunately I can't find it explained in current documentation.
Full non-AJAX change page through changePage() function
First a warning, this function is deprecated but stick to it until jQuery Mobile 1.5 is out. There's a replacement function but it will not work for you unless you are using new pagecontainer widget. Plus pagecontainer widget is work in progress so it will be a bad decision to move.
$.mobile.changePage( "confirm.html", {
reloadPage : true
});
More information can be found here.
I have a live search bar where if the user types in "M" only results that have an M are shown and so on, i've made each result into a link so when the user clicks it, it'll load to a different page.
Now, I can make it load to another page, however I'm trying to do it on the same page but it just wont work.
The search code is simply a form that takes text, then im using the xmlhttp method to make it live.
Now, displaying it is as follows: (I have given it a class to use in the ajax)
echo "<a href = 'display.php' class='display'>" . $row['carName'] . "</a>";
Ajax:
$(document).ready(function() {
$(".display").each(function(){
var btn = $(this);
btn.on("click",function(){
$("#displayDiv").empty();
$.post("display.php",function(data) {
$("#displayDiv").append(data);
Any help? Currently, clicking it just loads test.php on which I have some text to see its working. I'm trying to get it to load dynamically on the right.
Thanks.
EDIT: it loads test.php which is:
<html>
<body>
<div id="displayDiv">
<h2> Test </h2>
</div>
</body>
</html>
EDIT2: div id which is in the same page as script:
<html>
<div id="displayDiv" style="width: 40%; float:right">
</div>
It's just following the link when you click on it. To stop this you need to change the event handler to:
btn.on("click",function(e){
e.preventDefault();
// rest of your code
});
$(document).ready(function() {
$(".display").on("click", function(e) {
$("#displayDiv").empty();
$.post("display.php", function(data) {
$("#displayDiv").append(data);
}
);
e.preventDefault();
});
});