jquery mobile app, how can I load other domain web page
i tried iFrame but then having mobiles size problem
i tried PHP file_get_contents the page load but the internal link/script doesn't work
any idea ??
thanks
here is my code
HTML:
<div data-role="header">
<a href="#home" data-role="button" data-inline="true" data-icon="home" >home</a>
<h1>lists</h1>
</div>
<div data-role="content">
<div id="listDetail" style="height:100%;width:100%">
</div>
</div>
JS
var list_url= 'http://lists.php';
$.ajax({
type: 'GET',
data: {area: areaID },
url: list_url,
dataType: 'html',
success: function(result){
$("#listDetail").html(result);
}
});
PHP
echo file_get_contents("http://m.booking.com/searchresults.html?aid=123456&lang=en&lang=en&latitude=55&longitude=56&radius=40");
The link tag "a" may contains the url like this href="/searchresult....." you can replace all or append all link with like this
$content = file_get_contents("http://m.booking.com/searchresults.html?aid=123456&lang=en&lang=en&latitude=55&longitude=56&radius=40");
$content = str_replace ('href="/','href="http://m.booking.com/"',$content);
echo $content;
Similarly watch all link and make it correct path
Related
I have a html structure like below, it is random div tag and img tag, and these also store in database too.
Now I have to filter the img src in below string, to remove files not in this structure but store in directory,
whats the best way to get the src in this structure in frontend use jquery or server side use php.
Any suggestion how to do this? Thanks so much!!
in frontend
<div class="h1">content<div>
<div class="h1" style="">content</div>
<div class="h1" style="">...</div>
<div class="h2">...</div>
<div class="h1" style="">content</div>
<img src="u_img/5/1.png" style="" class="">
<div class="link" style="">link: http://...</div>
<img src="u_img/5/14.jpeg" style="" class="">
<div class="h1" style=""..</div>
<img src="u_img/5/3.png" style="" class="">
in database
<div class="h1">content<div><div class="h1" style="">content</div><div class="h1" style="">...</div><div class="h2">...</div><div class="h1" style="">content</div><img src="u_img/5/1.png" style="" class=""><div class="link" style="">link: http://...</div><img src="u_img/5/14.jpeg" style="" class=""><div class="h1" style=""..</div><img src="u_img/5/3.png" style="" class="">
UPDATE
if I get those img src in frontend store in array post via jquery to php file like below, then how to delete those file not in this array
var srcArray=$('img').map(function(){
return $(this).attr('src');
});
var fd = new FormData(uf[0]);
fd.append('srcArray',srcArray);
$.ajax({
type: "POST", url: "img_clean.php",
data: fd,
processData: false, contentType: false,
})
php
$srcArray = $_POST['srcArray'];
//How to delete file not in the array?
foreach($srcArray as $row){
$dir = "u_img_p/".$id;
//unlink($dir.'/'.$row);
}
}
use attr() to get the src
$('img').each(function(){
var $src=$(this).attr('src'); //prop() for latest versio of jquery.
//do you stuff ..$src is the source
});
or you can use map() to store all the source in an array
var srcArray=$('img').map(function(){
return $(this).attr('src'); //prop() for latest versio of jquery.
});
srcArray will have all the image sources.
NOTE:$('img') selects all the image tag present in the document .. be careful
updated after edit.
$.ajax({
type: "POST",
url: "img_clean.php",
data: {'postedValue':srcArray},
processData: false, contentType: false,
})
PHP
$srcArray = $_POST['postedValue'];
foreach($srcArray as $row){
$dir = "u_img_p/".$id;
unlink($dir.'/'.$row); //delete it
}
}
Using a regular expression should do the trick for you
preg_replace("/<img[^>]+\>/i", "empty", $mydatabasecontent)
var sources = [];
$("img").each(function(){
sources.push($(this).prop("src")); // for older jQuery versions use attr("src");
});
This will ad all of the image sources to one array.
I currently have a php script which is loaded by Javascript when a button is clicked.
It creates all the html content which looks like this once loaded
<ul>
<li>
<a href='foo.php?var=abc123'>
</li>
<li>
<a href='foo.php?var=def123'>
</li>
</ul>
So when a link is clicked, it uses GET to send PHP variable to same script, and it brings up another list of results.
What I want to do, is when you click a link instead of going to a new page with results, it loads them below this part to result in something like this (like a treeview():
<ul>
<li>
abc123
</li>
<ul>
<li>
jkl123
</li>
<li>
ghi123
</li>
</ul>
<li>
def123
</li>
</ul>
I can get it to work if I use static variables, but i need to find a way to take the variable from the created html on click, put it into the javascript function, so it can execute the PHP script.
Thanks.
It sounds like you're going to want to use AJAX:
$.ajax({
type: 'GET',
url: "yoururlhere.com",
data: {
someparam: "somevalue",
param2: "anothervalue"
},
dataType: "json",
success: function (JSONdata, textStatus, jqXHR) {
// do work here on success
}
});
You can attach it to a click handler like this:
$("someID").on("click",function(){
event.preventDefault();
var href = $(this).attr("href");
$.ajax({
type: 'GET',
url: href ,
data: "param=value¶m2=anothervalue",
success: function (JSONdata, textStatus, jqXHR) {
// do work here on success
}
});
});
Update:
Some example HTML to go along with the above code:
<a id="someID" href="yoururl.php">Click me</a>
I need to execute the following code, without refreshing the page... this code already includes ajax but where am I going wrong with getting it to execute without refreshing the page....? the .vote class is attatched to an anchor in my index.php file, and I need this all to still work when the anchor is clicked if possible. Re-coding this to perform on a button click would not be ideal.
$(".vote").click(function() {
var id = $(this).attr("id");
var name = $(this).attr("name");
var eData = $(this).attr("data-options");
var dataString = 'id='+ id + '&' + eData ;
var parent = $(this);
if(name=='up')
{
$(this).fadeIn(200).html('');
$.ajax({
type: "POST",
url: "up.php",
data: dataString,
cache: false,
success: function(html){
parent.html(html);
}
});
}
else
{
$(this).fadeIn(200).html('');
$.ajax({
type: "POST",
url: "down.php",
data: dataString,
cache: false,
success: function(html){
parent.html(html);
}
});
}
});
here is the html from my index.php
<div id="main">
<div id="left">
<span class='up'><img src="up.png" alt="Down" /></span><br />
<?php echo $totalvotes1; ?><br />
</div>
<div id="message">
<?php echo $message1; ?>
</div>
<div class="clearfix"></div>
</div>
<div id="main">
<div id="right">
<br />
<?php echo $totalvotes2; ?><br />
<span class='down'><img src="down.png" alt="Down" /></span>
</div>
<div id="message">
<?php echo $message2; ?>
</div>
<div class="clearfix"></div>
</div>
You need to either enclose your code with $(document).ready(function() {});, or stick your code at the end of the <body> tag. Personally, instead of making the browser parse synchronous javascript before the DOM has loaded (in the <head> section), I stick it near the end. This is also what Bootstrap recommends.
Without a DOM loaded, there are no elements created for jQuery to register Events with, and so your code literally sits there doing nothing after being parsed.
Aside from that, the .click() function is executed on click. It doesn't matter what element it's bound to. If it's clickable, it's executable.
Also to answer your question properly: <a href=""> will refresh the page. You want to use
<a href="#">. This, however, will make you jump to the top of the page. You could also define a <label> and use #labelname instead to avoid this. Or just don't use href at all. It's not needed.
Also, a little trick for echoing variables into HTML is to use <?= $var ?>
i am building a mpe player for my production website, using the jplayer. the problem i have is i give my visitors the full song to listen to and for that reason i have to attempt to secure my music so heres the problem. jplayer requires a string that is a file location to the track that is to be played. i would like to make a ajax call and return that location. i tried to return a varible after a ajax call to be placed in the string location,but the code runs threw before the call is finish....
heres my code:
html markup:
<div id="player"></div>
<!-- Using the cssSelectorAncestor option with the default cssSelector class names to enable control association of standard functions using built in features -->
<div id="jp_container" class="demo-container">
<p>
<div class="pro"></div>
<span class="play-state"></span> : <span class="track-name">nothing</span><br />
of <span class="jp-duration"></span>, which is
<span class="jp-current-time"></span><br />
</p>
<ul class="toolbar ui-widget-header ui-corner-all">
<li><button class="jp-Prev" href="#">Prev</button></li>
<li><button class="jp-play" href="#">Play</button></li>
<li><button class="jp-pause" href="#">Pause</button></li>
<li><button class="jp-stop" href="#">Stop</button></li>
<li><button class="jp-Next" href="#">Next</button></li>
<li><button class="jp-mute" href="#">Mute</button></li>
<li><button class="jp-unmute" href="#">Unmute</button></li>
<li><div class="jp-volume-bar"></div></li>
</ul>
<ul class="playlist">
<li><span>Select a track :</span></li>
<? Beats(); ?>
</ul>
</div>
Jquery markup:
$("#jp_container .track").on("click",function(event) {
var x = $(this).attr('id');
var mp3File = // maybe a function can go here
my_jPlayer.jPlayer("setMedia", {
mp3: //this is where the string is expected
});
my_jPlayer.jPlayer("play");
my_trackName.text($(this).text());
$(this).blur();
return false;
});
// here is were i get the location in a function i workout already
function url(x){
var mp3;
$.ajax({
type: "POST",
url: "hosts/beats/beat.php",
data: "<?=md5('url')?>="+x+"&ok=<?=md5(rand(1,20))?>",
dataType: "html",
success:function(data){ var mp3 = data; }
});
return mp3;
}
first "A" in AJAX is for ayshnchronous...you can't return mp3 from your function because the ajax hasn't completed when you try returning it.
You need to do the setMedia within success callback of ajax
$("#jp_container .track").on("click", function(event) {
var x = $(this).attr('id');
$.ajax({
type: "POST",
url: "hosts/beats/beat.php",
data: "<?=md5('url')?>=" + x + "&ok=<?=md5(rand(1,20))?>",
dataType: "html",
success: function(data) {
my_jPlayer.jPlayer("setMedia", {
mp3: data
});
my_jPlayer.jPlayer("play");
my_trackName.text($(this).text());
$(this).blur();
}
});
return false;
});
i have succeeded in listing my data from mysql database
in JQM.
i want to link the list item to its details.
Therefore when there is a click on a list, a new page with the data from the list is displayed.
I dont know how to do it
Heres what i have now : but the link i have isnt working, guess i am missing something.
heres the link on js fiddle http://jsfiddle.net/8WU39/16/
<script type= text/javascript>
$('#seyzListPage').live('pageshow', function(){
$.ajax({
url: "data.php",
dataType: 'json',
success: function(json_results){
listItems = $('#seyzList').find('ul');
$.each(json_results.rows, function(key) {
html = '<li <h3><a href="index1.html?id=' + [json_results.rows[key].airp_id] +'"rel="external">'+json_results.rows[key].airport_code+'</h3>';
html += '<p><br> Aiport name: '+json_results.rows[key].airport_name+'</p></a></li>';
listItems.append(html);
});
// Need to refresh list after AJAX call
$('#seyzList ul').listview('refresh');
$.mobile.pageLoading(true);
}
});
});
</script>
<div data-role="page" id="seyzListPage">
<div data-role="header" id="header">
<h1>Airports</h1>
</div>
<div data-role="content" id="seyzList">
<ul data-role="listview" data-inset="true" data-filter="true"></ul>
</div>
<div data-role="footer" data-postion="fixed">
<h3>Footer</h3>
</div>
</div>
What do i do to get the list linked to its data on another html page.
I had a very similar problem and found a fix with a simple plugin. It's called jqm.page.params.js and can be found here. Implementation was very easy. Added the plugin file to my root directory and then included it at the bottom of my index.html page.
In your js file, you then just want to place
if ($.mobile.pageData && $.mobile.pageData.color){
var color = $.mobile.pageData.color;
}
at the top of your beforepageshow event to capture the variables tacked on to the link. Replace 'color' with the variables you are looking for.