We Keep Coding

Load AJAX content in modal and change URL

My current setup is on click a modal popups with data from the ajax action which has been passed an id, I want the URL to change on click.
But I also want it so that if you directly accessed the URL it would load say index with the modal preloaded.
Very much like https://www.myunidays.com/perks/view/shoeaholics/online it loads the URL with the content in a model then if you click/close the modal the URL changes to the index page.
I have seen related questions about changing URL on click but couldn't find anything to do with accessing URL directly (is their a rule I can add to my .htaccess).
(Any code/direction is appreciated)

Create a partial view (so that layout isnt rendered twice) and add the action to controller
public function actionViewmodal($id)
{
return $this->renderPartial('_view', array('model' => $this->findModel($id)));
}
Then within my index I did the following
$(document).ready(function() {
$('a').click(function() {
pageurl = $(this).attr('href');
var Id = jQuery(this).attr('id');
$.ajax({
type: 'POST',
data: {
'modal_id' : Id,
},
url : 'http://localhost:8888/directory/viewmodal?id='+Id,
success: function(response) {
if(response) {
$('.modal_some_wrapper').html(response);
$('#modal_'+Id).modal('show');
$(document).on('hidden.bs.modal', modal_id, function (event) {
$(this).remove();
});
} else {
alert('Error');
}
}
});
//to change the browser URL to the given link location
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',pageurl);
}
//stop refreshing to the page given in
return false;
});
});
Could someone example how myunidays website works with modal and URL change?

How to change text of jquery created tooltip?

I have an application that displays web pages which contains source reference, when user hover above the source reference a tooltip with extra information appears.
I want to change tooltip text dynamically to responseText if communication with the server was successful (see method below) - but I don't know how .
(I already make sure the the respomseText contains the right data)
the tooltip is generated and it's data is sent by this jQuery code:
$(document).ready(function() {
$('table a').on('mouseenter._do_submit', _do_submit);
$('table a').tooltip({
tooltipClass: "coolToolTip",
content: function() {
var element = $( this );
return '<p class=toolTipP>' +element.text(); + '</p>';
}
});
$('table').bind('mouseleave._remove_icon', _remove_icon);
function _remove_icon(event) { $(event.target).find('img').remove(); }
function _do_submit(event) {
$event_origin = $(event.target);
$event_origin.find('img').remove();
ajax_sender( $event_origin );
}
function ajax_sender(event_origin_obj) {
$('<img src="./js/ajax_ani.gif" />').appendTo(event_origin_obj);
url= 'http://localhost:8080/zoharTranslator/ReadZohar';
var xhr = $.ajax({
type: 'GET',
url: url,
data: 'command=source&src=' + event_origin_obj.text(),
beforeSend: beforeSending,
success: on_success,
error: log_error_message
});
function on_success(data) {
event_origin_obj.find('img').remove();
$(document).removeAttr("title");
event_origin_obj.attr( "title", data);
console.log(xhr);
}
function log_error_message(xhr) {
...
}
function beforeSending(xhr) {
...
}
}
});

You can always change the content of your tooltip after its created by using it's setter like this...
$( ".selector" ).tooltip( "option", "content", "Awesome title!" );
-- 2ND UPDATE --
OK, I figured out how to get the jQuery UI added to jsFiddle. This is how I would solve your problem: http://jsfiddle.net/spZ69/3/
Obviously the ajax call won't work but just replace the url ajax/test.html with your url that returns text and it will replace the tooltip's text.

How to extract HTML() of a given DIV from html() when content is coming through AJAX

i am using jquery ajax to load a section of page with another page content/html. \
$(function() {
app.xhr = $.ajax({
url: url,
dataType: "html",
cache: false,
success : function(html)
{
app.html = $(html);
setTimeout(function(){
app.insertPageData();
app.xhr = null;
},100)
},
error : function()
{
alert("Not Found")
}
})
insertPageData : function()
{
$('div.data').html(app.html.find(".content").html())
}
});
So here is the problem specific to IE. app.html contains the HTML of the page and i need to extract one specific div html from the page which is not working with IE.
is there any other way to extract HTML from HTML??
Thanks / Gursimron

Do you have an id or class on the div you want? Also, by extract do you mean that's all you want, or do you mean that you want to remove it from the HTML?
If you want to remove the the div, and assuming you have an id, you can do this:
app.html.remove('#id-of-div');
If all you want is just the div and nothing else, then you would do this:
app.html = app.html.find('#id-of-div');

using the $.ajax function to fetch a specific id

I'm learning how to use jQuery methods of making AJAX calls, at the moment what I would like to know is how I use the $.ajax function to return a certain elements content. I realize this can be done easily enough using .load() but would like to get the results using .ajax(). At the moment I am fetching the clicked href attribute and returning the whole pages data when I would like to just return the #container content of the page?
Sample code being used:
jQuery(document).ready(function() {
/* Ajax load in portfolio pages */
var ajaxLoader = $('#ajax-loader');
var folioContainer = $('#folio-container');
ajaxLoader.hide();
$('div.wp-pagenavi a', 'div#content').click(function(e) {
$.ajax({
url : this.href,
method : 'get',
success : function(data){
folioContainer.html(data);
}
});
e.preventDefault();
});
});

You should be able to .filter() the response from the server to select only the data you want:
success : function(data){
folioContainer.html($(data).filter('#container'));
}
Here's a jsfiddle of this solution: http://jsfiddle.net/jasper/5HSzB/
Here's an optimized version of your code:
jQuery(function($) {
/* Ajax load in portfolio pages */
var ajaxLoader = $('#ajax-loader').hide();
$('.wp-pagenavi', '#content').find('a').click(function(e) {
$.ajax({
url : this.href,
method : 'get',
success : function(data){
$('#folio-container').html($(data).filter('#container'));
}
});
e.preventDefault();
});
});

You may be better off using the load method http://api.jquery.com/load/ , read the section "Loading Page Fragments"
not sure but try:
jQuery(document).ready(function() {
/* Ajax load in portfolio pages */
$('#ajax-loader').hide();
$('div.wp-pagenavi a', 'div#content').click(function(e) {
$.load(this.href + ' #folio-container');
e.preventDefault();
});
});

Passing a Variable into jQuery AJAX

I'm stuck in a rut. I hope some one can help.
Basically, I am building an AJAX mobile web app with jQuery. I am able to parse a specific XML file just fine, but I want the option to parse other XML files based on the link they were clicked on and load them on the fly into the same DIV or UL.
So:
click on Link1, loads XML1
click on Link2, loads XML2
I would like to be able to do this all client side, so no PHP (or is that a bad idea?). This the jquery code I've been using:
$(document).ready(function() {
$("a.load_ajax").click(loadAjax());
function loadAjax() {
var fileID = get('?lineID=');
var dataID = "xml/" + fileID + ".xml"
$.ajax({
type: "GET",
url: dataID,
dataType: "xml",
success: parseXml
});
function parseXml(xml) {
$(xml).find("train").each(function() {
$("ul#ajax-output").append('<li>' + $(this).find("time").text() + '</li>');
});
}
}
});
Its just not working at all. I have been passing the variable using GET in the url. So the link in the HTML goes to /?lineID=SBD_to_Union and it should load the XML file called SBD_to_Union.xml
Making sense to anyone? I'd appreciate some help.

What you seem to be struggling with is obtaining the line from the url in the anchor. Use $(this) to get the href attribute of the clicked link. You could then use a regex, if the url is as described, to remove all but the line id to use in constructing the link for the XML. I presume that the XML is server side and relative to the current url. If not, then you'll need to adjust the path. I've taken the liberty to compress things a bit by putting the functions inline. Edit: and the click handler should return false to prevent the link from actually performing its default action.
$(function() {
$("a.load_ajax").click( function() {
var fileID = $(this).attr('href').replace(/.*?lineID=/,'');
var dataID = "xml/" + fileID + ".xml"
$.ajax({
type: "GET",
url: dataID,
dataType: "xml",
success: function(xml) {
$(xml).find("train").each(function() {
$("ul#ajax-output").append('<li>' + $(this).find("time").text() + '</li>');
});
}
});
return false;
});
});

Have you checked if the get function returns the correct data ?
add an alert(fileID); right after the get(..); line..
But why don't you create the urls to point directly to the xml files instead of parsing and creating urls on the fly ?
just make the link in the html to point to xml/SBD_to_Union.xml

On first glance, I think your ajax() syntax is a little off.
Are you using query strings for a particular reason? If no, I'd try giving the HTML links the absolute URL to the XML file you are trying to fetch:
Then try this:
$("a.load_ajax").click(function(e) {
e.preventDefault();
var url = $(this).attr('href');
$.ajax({
type: 'GET',
url: url,
dataType: 'xml',
success: function(response) {
$(response).find('train').each(function() {
$('ul#ajax-output').append('<li>' + $(this).find('time').text() + '</li>');
}
});
});
I haven't tested this, but it should do what you want.

Link1
Link2
You can do things depending on the id of the href (or another of its attributes or its href value).
$(function() {
$("a.load_ajax").click(loadAjax);
});
function loadAjax()
{
if ($(this).attr("id") == "link1")
{
alert("link1"); //load xml1
}
else
{
alert("link2"); //load xml2
};
}