I have two routes,get method where visualize all data, and post method where insert the data.In the get method using the app-render ('view name', and the data), and so good.In the method post I will do the same in order to see the end inserting the same page with a popup that contains a success message. The two methods have the same url, the problem is that when I render in the post method, I view the page with half of the contents because it does not recognize the data in hand with the get method.
$app->get('/url.html',function()use($app){
//code
$app->render('url.html', array('name'=>$variable1,'user'=>$variable2)));
});
I want to display the pop-up after insert
$app->post('/url.html',function()use($app){
//code
$popup='$(function(){$( "#dialog-message" ).dialog({modal: true, buttons: {Ok: function() {$( this ).dialog( "close" );}}});});';
$app->render('url.html', array('popup'=>$popup)
));
});
In the view "/url.html"
<?php echo $popup ?>
But does not work
then summing up the view does not work in the post method and the popup
Try to wrap the "popup-code" into on load:
$popup='$(function() {
$(window).load(function () {
$( "#dialog-message" ).dialog({modal: true, buttons: {Ok: function() {$( this ).dialog( "close" )}}});
};
});';
You can remove tabs and spaces from my example code when using, just put them in for legibility.
Edit: Are you wrapping your output into <script type="text/javascript"><?php echo $popup; ?></script>
Related
I am using jQuery to send the data to the server by the post method. The function is activated on click on the span tags inside the html page. Posted data set a php session variable and after that the page needs to be reloaded. Everything is working fine in Chrome, but in IE9, I have to click several times to see the effect. If I put an alert inside the function, it works fine (but I do not want that alert).
I am not an experienced user of jQuery.
Here is the code of the jQuery
$(document).ready(function(){
$("#ciril").click(function(){
$.post('myphpfile.php', { 'lang' : 'cir'});
location.reload();
});
$("#latin").click(function(){
$.post('myphpfile.php', { 'lang' : 'lat'});
location.reload();
});
});
and here are the span tags
<span id="latin">Text1</span>
<span id="ciril">Text2</span>
You do NOT want to do a location reload when you use Ajax since it sort of negates the point of using Ajax in the first place.
If you insist on doing it anyway, you need to reload in the callback
$(function(){
$("#ciril").on("click",function(){
$.post('myphpfile.php', { 'lang' : 'cir'}, function() {
location.reload();
});
$("#latin").on("click",function(){
$.post('myphpfile.php', { 'lang' : 'lat'}, function() {
location.reload();
});
});
If the page you are loading is the same page you are on, simply submit a form and have the server return the page to you
Here is a neater way
<span class="lang" id="lat">Text1</span>
<span class="lang" id="cir">Text2</span>
Using
$(function(){
$(".lang").on("click",function(){
$.post('myphpfile.php', { 'lang' : this.id }, function() {
location.reload();
});
});
The Question
How could I make it where when you pull <div id="content"> down, it does a function and shows a div at the top of the screen that says "Pull Down To Refresh"?
I know iScroll does this, but it won't work with what I'm trying to do. It only works with UL's.
Here is my HTML
<div id="pullDown">
<span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...
</span>
</div>
<div id="content">
(There is a bunch of items that are loaded in via jquery and php, when you pull down to refresh, I want it to basically react that function.)
</div>
<script>
$(function() {
var refreshCallback = function(loader) {
setTimeout(function(){
//loader.finish();
}, 1000);
};
var cancelRefreshing = function() {
};
$("#draggable").pulltorefresh({
async: true,
// event triggered when refreshing start
refresh: function(event, finishCallback) {
element = $(this)
setTimeout(function(){
alert("refresh");
// you must call this function if refreshing process runs asynchronusly
finishCallback();
}, 1000);
},
abort: function() {
alert("abort");
}
});
});
</script>
for full Demo Click Here
You can provide with iScroll plugin.
iScroll 4: http://cubiq.org/iscroll-4
Github Page: https://github.com/cubiq/iscroll
Demo: http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/
try this
$( "#pullDown" ).on( "dragstart", function( event, ui ) {} );
inside the function u can have the ajax call to load the content
$("#content").load("<something.php>");
that is on the whole
$( "#pullDown" ).on( "dragstart", function() {
$("#content").load("<something.php>");
} );
The problem is upon load of website, width of .mCSB_container class is ok, but when i click on a link, for example "projects" link, which fires an ajax function, width of .mCSB_container does not change even if contents are not that much. Web page will not load upon click on the link. I tried using the "update" function, but seems like it is not working.
ok I use this plugin and i had te same problem but check this:
<script type="text/javascript">
$(function() {
$("#content").mCustomScrollbar({
scrollButtons:{
enable:true
},
advanced:{
updateOnContentResize: true // <- the solution
}
});
// get ajax link
$('.Link').click(function(){
$.get(this.href, function(data) {
$("#content .mCSB_container").html(data); // fill .mCSB_container
$("#content").mCustomScrollbar("update");
$("#content").mCustomScrollbar(
"scrollTo"
,"top"
,{scrollInertia:200}
); // go to Top content
});
return false;
});
});
</script>
Hello I've got another question. I am creating an administration system. I added registration for users and a delete function. Now I need to make a good design.
So I created a table from a MySQL DB with following infos:
ID, Username, Last Login and Delete.
This is an extraction of my php code where I print the table:
echo "<td class=\"center\">
<a href=\"#\" class=\"delete_user\">
<img src=\"images/delete.png\" />
<script type=\"text/javascript\">
var id = \"index.php?section=user_delete&id=".$getUserID[$i]."\";
</script>
</a>
</td>
As you can see I am using the ID for the delete process.
Now I want to use a jQuery modal popup to make sure that I really want to delete this person.
This is my js code:
$(".delete_user").click(function() {
$( "#dialog_delete_user" ).dialog( "open" );
});
$( '#dialog_delete_user' ).dialog({
autoOpen: false,
resizable: false,
height: 170,
modal: true,
buttons: {
'ok': function() {
alert(id);
//document.location = id;
$( this ).dialog( 'close' );
}
}
});
As you can see I need to add a variable id to identify the person and make sure that the right person gets deleted.
I thought that the javascript only executes if i click the link. This seems to be incorrect.
So how can I define/identify each person?
The displayed table is useless cause there is no way to identify each delete button with its owner. So I have to define it right there where I create the table.
Without this jQuery modal form it would be easy. But there has to be a way to get it work. Any idea?
Personally I would set an attribute on the link that opens the dialog something like
Click me!
then in the onclick event of the link that opens the dialog box I would have it set the dialog's hidden user field to the value of $(this).data("user-id"); If you're not doing a form and just immediately firing an ajax request it gets even easier.
var currentUserId;
$(".delete_user").click(function() {
currentUserId = $(this).data("user-id");
$( "#dialog_delete_user" ).dialog( "open" );
});
$( '#dialog_delete_user' ).dialog({
autoOpen: false,
resizable: false,
height: 170,
modal: true,
buttons: {
'ok': function() {
//document.location = "/somephpfile.php?user_id=" + currentUserId;
$( this ).dialog( 'close' );
// ajax version
$.ajax({
url : "/somephpfile.php?user_id=" + currentUserId,
// Other ajax related code.
});
}
}
});
I have a page that generates a google map on page load that I would like to call from another page via a link. Here is how I'm creating the google map inside a colorbox:
// show_map.php
jQuery(document).ready(function(){
$.colorbox({width:"643px", height: "653px", inline:true, href:"#map_container"}, function() {
$.getJSON('map.php', function(data){
initialize();
setMarkers(map, data);
});
});
});
Here is my attempt but something tells me I've headed down the wrong path. Should I use the modal window for something like this or is there a better way?
$(document).ready(function() {
$('.show_map').click(function() {
$.get("show_map.php", function(data) {
// alert(data);
})
});
If I've understood correctly, colorbox is already designed to do what you want to do. You don't need to use extra ajax calls (it's already built in). Just set the href option to your page instead of your inline html (then of course remove the inline:true option). The full code (in the page with the link to your map):
$(document).ready(function() {
$('.show_map').click(function() {
$.colorbox({
href: "show_map.php",
width:"643px",
height:"653px"
});
})
});
You can also load any external page if you add the iframe: true option to that code.
Either you use jQuery's .getScript() if the page only contains JavaScript or you can use .load() to insert the page content into the DOM.
$(document).ready(function() {
$('.show_map').click(function() {
$('.some-element').load("show_map.php");
})
});
EDIT: a better approach
have the colorbox inline instead. Saves a round trip to the server.
$(document).ready(function() {
$('.show_map').colorbox({width:"643px", height: "653px", inline:true, href:"#map_container"}, function() {
$.getJSON('map.php', function(data){
initialize();
setMarkers(map, data);
});
});
});